2012-06-21 18 views
6

¿Hay alguna ventaja de usar el siguiente código?La razón para usar role = "list" y role = "listitem"?

<ul role="list"> 
    <li role="listitem"></li> 
    <li role="listitem"></li> 
    <li role="listitem"></li> 
</ul> 


¿El siguiente código tiene el mismo significado para las ayudas técnicas?

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

Respuesta

18

La respuesta es sí, las tecnologías de asistencia funcionan bien cuando se utiliza el marcado semántico correcto para estructurar el documento. Si se trata de una lista estática simple, entonces no es necesario marcarlos con los roles.

Por ejemplo: considere el role="listitem" cuyo baseConcept se define como HTML li. Y la baseConcept HTML li es casi idéntica a la definición role = "listitem", excepto por el hecho de que no hereda ninguna propiedad. Más info

Por lo tanto, consideremos el siguiente ejemplo:

<h3 id="header">Vegetables</h3> 
    <ul role="list" aria-labelledby="header" aria-owns="external_listitem"> 
    <li role="listitem" aria-level="3">Carrot</li> 
    <li role="listitem" aria-level="3">Tomato</li> 
    <li role="listitem" aria-level="3">Lettuce</li> 
    </ul> 
… 
<div role="listitem" id="external_listitem">Asparagus</div> 

Aquí el autor de la página quiere usar propiedad de nivel aria para el li. Aunque aria-labelledby y aria-own se pueden aplicar a todos los elementos del marcado base, la propiedad aria-level requiere que el elemento tenga algún rol. Dado que las especificaciones de ARIA utilizan el lenguaje de ontología web (OWL) para representar los roles en una jerarquía de clases. OWL describe estos roles como clases junto con sus estados y propiedades. Por lo tanto, para usar un nivel de aria, el elemento tiene que definirse como un rol simple, ya que HTML no heredará ninguna propiedad o limitación. Una vez que marque el rol como elemento de lista, se requiere que listitem sea propiedad de un elemento con role = "list". Entonces terminas usando ambos roles.

Por otro lado los roles también son útiles si el marcado semántico tampoco se usa. Por ejemplo:

<div role="list"> 
    <div role="listitem">dog</div> 
    <div role="listitem">cat</div> 
    <div role="listitem">sparrow</div> 
    <div role="listitem">wolf!</div> 
</div> 

Aquí el software lector de pantalla indicará la lista ARIA (compuesto de divs) como cualquier otra lista HTML normal.

+0

Gracias @Ravi por la información. Por lo tanto, cuando se utiliza el marcado semántico, no es necesario marcar una lista estática simple con roles. –

+0

Sí, casi todo el tiempo, pero nuevamente depende del software de accesibilidad utilizado junto con la versión del navegador. Entonces, si encuentra que un marcador de pantalla no está siendo leído por un lector de pantalla, entonces debería usar una combinación de estos roles para que funcione hasta que el software se solucione con ese defecto. Entonces, nada es definitivo solo hacer una prueba minuciosa. – Ravi

+0

Ya veo. Gracias. –

3

Su pregunta es un poco ambigua, pero si está preguntando si hay una ventaja al agregar role = "listitem" a los elementos, que ya tienen como su función predeterminada, la respuesta a esa pregunta específica es : No.

(Sí, se prefiere el uso de li de div. Y role = "listitem" es necesario si estaba comenzando desde un div, aunque se prefiere li, pero no creo que eso sea exactamente lo que es preguntando)

Mira esto blog post by Steve Faulkner; ha elaborado un borrador del documento de mejores prácticas sobre cuándo y dónde usar los diversos roles de ARIA en HTML5. El documento actualmente es here, pero dado que se trata de un borrador no oficial, no sé si ese enlace seguirá funcionando en el futuro.

En general, no es necesario (y no debe) especificar un rol para los elementos si ese rol es el mismo que el rol predeterminado del elemento. Entonces, como los elementos li tienen una función predeterminada de listitem, no hay ninguna razón para repetir eso.

Existen algunas excepciones a esta regla, y están principalmente relacionadas con los nuevos elementos HTML5 a los que los navegadores aún no implementan correctamente las funciones predeterminadas. Entonces, por ejemplo, dado que el elemento article de HTML5 todavía no está expuesto por todos los navegadores como un artículo, entonces <article role='article'> en realidad se recomienda en ese y casos similares.

+2

hola Brendan, la URL actual para Usar ARIA en HTML- http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html siempre apuntará al borrador de los editores del documento . –

+0

Parece que las "Notas sobre el uso de ARIA en HTML" de Steve ahora viven aquí: https://www.w3.org/TR/aria-in-html/ –

Cuestiones relacionadas