Come giudicare quello che dovrebbe essere più accessibile markup ,
e

Domanda

per esempio qual è il modo accessibile per codificare questo disegno.

alt text http://easycaptures.com/fs/uploaded/220/0715108922 .png

Al momento della mia azienda CMS produrre questo HTML per questo disegno 

<div id="presentationsContainer">
        <div class="ItemsContainer">
            <div class="presentationsItemContainer">
                <div class="TitleContainer">
                    Presentation October 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="Presentation.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    May 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2009.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    March 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2009.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    Results Presentation September 2008</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2008.ppt">Download PPT </a>
                </div>
            </div>
        </div>
    </div>

come <table> non è buono per l'utente screen reader allora che cosa succederà per l'utente dello schermo con un sacco di tag div non semantici sono entrambi creerà problemi per l'utente lettore di schermo o div non semantici crea meno problemi di quanto correttamente markup

Quello che dovrebbe essere utilizzato per l'accessibilità e se CSS sarebbe essere disabilitata allora quale tecnica codice manterrà la formattazione comprensibile?

È stato utile?

Soluzione

IMO uno qualsiasi dei 3 modi va bene. Potrei sostengo uno di loro di essere meglio allora gli altri 2.

Io vorrei andare con la lista solo perché la sua meno codice quando sto guardando. 

<ul id="presentationsContainer">
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
</ul>

[EDIT] Aggiunta del ppt download aggiuntivo può ancora essere fatto semplicemente aggiungendo un altro brano a ciascun li. Io parto dal presupposto che per ottenere il pdf scaricare il galleggiante l'arco a destra e dandogli una larghezza. In questo modo l'aggiunta di un'altra colonna non è un qualsiasi codice più css. L'inferno si potrebbe anche rimuovere l'arco e aggiungere che lo stile per il tag. Supponendo che non link sono in quella prima colonna.

Tuttavia, se si desidera cambiare a un tavolo (che può essere una scelta migliore con più colonne) si può solo fare qualcosa di simile a questo: si può già vedere quanto più codice che c'è da guardare attraverso se 

<table id="presentationsContainer">
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
</table>

Altri suggerimenti

Questa schermata appare come un candidato perfetto per un <table>. Sarà più facile per stile, x-browser compatibile, e con alcune intestazioni completamente accessibile. Sarà anche rendere più o meno la stessa cosa se lo stile CSS viene rimosso.

Che sembra a me come una lista non ordinata. Utilizzando div del genere non è migliore rispetto all'utilizzo di tabelle. Usando una lista non ordinata rende molto più senso dal punto di vista markup.

Una cosa che sarebbe più accessibile (o almeno più in linea con le linee guida del W3C ) è link per il download che hanno senso fuori dal contesto.

Così, invece di: 

<a target="_blank" href="2009.ppt">Download PPT </a>

Si potrebbe avere: 

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top