Listas desordenadas y accesibilidad

Question

Muchos (¿la mayoría?) de sitios que apuntan a la accesibilidad y al cumplimiento de las normas utilizan listas desordenadas para su navegación. ¿Esto hace que el sitio sea más accesible o solo proporciona elementos útiles para el estilo?

No me importan, y he estado usando listas desordenadas de esta manera. Es solo que, cuando elimino el estilo de una página para tratar de evaluar su accesibilidad, me sorprende que podría ser enlaces simples. ¿De dónde viene esto?

Answer 1

El mejor marcado para la navegación de su sitio serían las etiquetas HTML que mejor representen cuál es su navegación. Aquí es donde el caucho se encuentra con el camino de la semántica HTML.

¿Es su navegación una lista que no tiene ningún orden lógico? Si es así, entonces <UL> sería una buena opción. ¿Su navegación es más un asistente que requiere pasos o tal vez en secuencia alfabética o numérica? Si es así, entonces <OL> podría ser una mejor opción.

Representar su navegación como enlaces simples como usted menciona no proporciona ningún significado semántico; sugeriría que su navegación es una oración para ser leída. Al proporcionar sus enlaces en una lista, proporciona una pista sobre cómo debemos interpretar esta serie de palabras vinculadas con hipertexto.

Answer 2

Como otros carteles han señalado, semánticamente, < ul > s son excelentes para menús, ya que generalmente son solo una lista de enlaces. Pero lo que realmente me encanta de usar listas para menús es la lógica semántica y visual de subnivel que ofrecen. Por ejemplo:

<ul id="mainMenu">
    <li>Home</li>
    <li>Something</li>
    <li>Something Else</li>
    <li>Current section
        <ul>
            <li>A Subsection</li>
            <li>Another subsection</li>
            <li>More!
                <ul>
                    <li>We go deeper</li>
                    <li>Who knows where it ends</li>
                </ul>
            </li>
            <li>Back up one step</li>
        </ul>
    </li>
    <li>And another step</li>
    <li>All done!</li>
</ul>

Pon eso en tu navegador y fúmalo, y notarás cómo cada nivel no solo se sangra más a la derecha sino que también se representa con una viñeta de estilo diferente. Y eso es incluso sin agregar ningún CSS. Tengo que amar esas listas!

Answer 3

Cuando se elimina el estilo, las viñetas hacen que la sección de navegación sea mucho más obvia. Y si usa <div> sy <span> s para la navegación, eliminar el estilo dará como resultado enlaces que están uno al lado del otro.

Answer 4

La navegación es básicamente una lista de enlaces, por lo que marcarla como una lista me parece correcta.

Answer 5

Creo que también tiene que ver al menos parcialmente con SEO, dado que html (todavía) no admite ningún tipo de elemento de lista de navegación.

El uso de UL (u OL) proporciona una agrupación semántica a su navegación, especialmente cuando ha anidado secciones de navegación, y dice que este grupo de enlaces tiene algún tipo de coherencia lógica y jerarquía, al menos esa es una de las teorías I han leído.

El otro aspecto positivo, como lo mencionó Jeremy, es que cuando los estilos están desactivados, el renderizado inmediato tiene sentido.

Answer 6

Creo que esto se hace para la estructura del documento. He usado etiquetas UL o div; aunque siempre he encontrado más éxito con UL.

Saludos,
Frank