Comencemos con la forma en que podemos usar los atributos ARIA para hacer nuestro documento accesible.
Un elemento HTML puede tener un atributo de rol de lista o listitem, de modo que puede ser interpretado como una lista por los lectores de pantalla.lista ordenada o no ordenada, es todo lo mismo para ARIA. Al atravesar elementos de lista nativos, los lectores de pantalla anuncian el número antes del comienzo de un elemento de lista ordenado y «bala» antes del comienzo de un elemento de lista no ordenado, pero nunca anuncia la lista como ordenada o no ordenada; sólo se convierte mientras atraviesa la lista.
12345<divrole="list"<divrole="listitem"``HTML</div htmlEn el fragmento anterior, las etiquetas de los buzones se utilizan para ser representadas como listas y elementos de la lista. Los lectores de pantalla lo interpretarán y anunciarán como "Lista con tres elementos" y al final de cada elemento de la lista, anunciará "listitem". Pero esto no es de mucha ayuda para que el usuario entienda si es una lista ordenada o no ordenada.
Para anunciar un número antes de cada elemento de la lista, podemos utilizar el atributo aria-label.
12345<divrole="list"<divrole="listitem"<spanaria-label="1"</span> HTML</div><divrole="listitem"< spanaria-label="2"-->span> CSS</div;;;divrole="listitem";spanaria-label="3";;/span> JavaScript</div;;html
Estoy usando un lector de pantalla ChromeVox para la demostración; hay muchos lectores de pantalla por ahí, algunos de los cuales estarán enlazados al final de este artículo.
Puede ser tentador utilizar el papel en cada elemento pero, como mencioné anteriormente, es muy recomendable utilizar los elementos nativos que tienen la semántica correcta para construir una lista (porque con grandes poderes vienen responsabilidades significativas). Dicho esto, el rol no debe ser usado en elementos nativos ya que tienen una semántica implícita. Por ejemplo, las etiquetas ol o ul no tienen por qué tener un atributo role=list, y del mismo modo, las etiquetas li no tienen por qué tener role=listitem.