s Guías Prácticas de Código Accesible
Escudo de la República de Colombia

Listas Accesibles

¿Por qué son importantes las listas?

Las listas ayudan a las tecnologías asistivas para anunciar cuantos elementos hay en un menú y también ofrecen la posibilidad para adaptarse a las necesidades del usuario.

Listas Desordenadas (Unordered list <ul>)

Si el sitio web que usted está desarrollando un sitio web en el cual no importa el orden en el que el usuario abre las paginas, se debe de utilizar una lista desordenada <ul>; por lo general los menús de los sitios web no tienen un orden por lo cual este tipo de lista es el más usado. El ejemplo que se muestra a continuación es el caso práctico del menú de esta página, el cual no importa el orden de las opciones ya que el usuario pude acceder a la opción que desee en el orden que quiera.

Fragmento de Código: HTML
<ul>
        <li><a href="…">Menus</a></li>
        <li><a href="…">List</a></li>
        <li><a href="…">Links</a></li>
        <li><a href="…">Headings</a></li>
        <li><a href="…">Forms</a></li></ul>
    
Listas Ordenadas (Order list <ol>)

Existen casos en los cuales las listas de los menús deben estar ordenadas para que el usuario siga la secuencia de las paginas según como lo desea el propietario de este sitio web, en este caso se debe utilizar las listas ordenadas <ol>, por ejemplo si la página es sobre un libro el menú estará ordenado según los capítulos del libro, en el ejemplo que se muestra a continuación es un caso común de un sitio de cursos de inglés el cual se divide en lecciones.

Fragmento de Código: HTML
<ol>
    <li><a href="…">Lesson 1</a></li>
    <li><a href="…">Lesson 2</a></li>
    <li><a href="…">Lesson 3</a></li>
    <li><a href="…">Lesson 4</a></li>
    <li><a href="…">Lesson 5</a></li></ol>