¿Cómo juzgar lo que debe ser marcado más accesible ,
y

Pregunta

, por ejemplo, cuál es la forma accesible a código de este diseño.

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

CMS momento de mi compañía que produce este código HTML para este diseño 

<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>

como <table> no es bueno para la pantalla del lector de usuario a continuación, lo que va a pasar a la pantalla del usuario con una gran cantidad de etiquetas div no semánticas son a la vez va a crear un problema para los usuarios del lector de pantalla o div no semántica crea menos problemas que propiamente marcado

¿Cuál debe ser el uso para la accesibilidad y si css se desactivaría entonces cuál es la técnica de código mantendrá el formato comprensible?

¿Fue útil?

Solución

OMI cualquiera de las 3 formas está muy bien. Podría argumentar cualquiera de ellos para ser mejor que los otros 2.

Yo iría con la lista sólo porque es menos código cuando estoy mirando a él. 

<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] Añadir el ppt descarga adicional todavía se puede hacer con sólo añadir otro tramo a cada li. Estoy asumiendo que para obtener el pdf descarga su flota el lapso hacia la derecha y dándole un ancho. De esta manera la adición de otra columna no es más código CSS. Infierno incluso se podría eliminar el lapso y añadir que el estilo a la etiqueta. Suponiendo que no hay enlaces están en esa primera columna.

Sin embargo, si desea cambiar a una mesa (que puede ser una mejor opción con más columnas) que sólo puede hacer algo como esto:. Se puede ver ya cuánto más código que hay que mirar a través aunque 

<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>

Otros consejos

que se ve captura de pantalla como un candidato perfecto para una <table>. Será más fácil de peinar, x-navegador compatible y con algunas cabeceras completamente accesibles. También se hacen más o menos lo mismo si se elimina el estilo CSS.

que se parece a mí como una lista desordenada. Usando div como que no es mejor que el uso de tablas es. El uso de una lista desordenada tiene mucho más sentido desde el punto de vista de marcado.

Una cosa que sería más accesible (o, al menos, más en línea con las directrices del W3C ) es descarga enlaces que tengan sentido fuera de contexto.

Así que, en lugar de: 

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

Usted podría tener: 

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top