Cookies en Outbook

Esta web utiliza cookies propias para ofrecer una mejor experiencia. Al navegar, aceptas dichas cookies.
  • Más información acerca de las cookies

Outbook

UI-Dev & more

Accesibilidad en los rastros de migas

Ejemplo de rastro de migas

Es algo habitual ver rastros de migas creados mediante listas ordenadas:

<div id="migas">
 <p>Estás en:</p>
 <ol>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Sección A</a></li>
  <li><a href="#">Sección B</a></li>
  <li><a href="#">Sección C</a></li>
 </ol>
</div>

O parecido, como lista desordenada (cambiamos solo el OL por el UL):

<div id="migas">
 <p>Estás en:</p>
 <ul>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Sección A</a></li>
  <li><a href="#">Sección B</a></li>
  <li><a href="#">Sección C</a></li>
 </ul>
</div>

Pero estos dos ejemplos no expresan la jerarquia de una forma semántica. Este otro si:

<div id="migas">
 <p>Estás en:</p>
 <ul>
  <li><a href="#">Inicio</a>
   <ul>
    <li><a href="#">Sección A</a>
     <ul>
      <li><a href="#">Sección B</a>
       <ul>
        <li><a href="#">Sección C</a></li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Listas anidadas que si reflejan la jerarquía de la navegación. Para una máquina (un buscador que indexe el sitio) está muy bien, pero para un humano puede no estar tan bien. Una persona que vea bien le va a dar igual como esté hecho para entenderlo (solo le influye como esté presentado visualmente). Alguien que use un lector de pantalla, con cualquiera de los tres ejemplos puede que no se entere muy bien de la jerarquía que hay.

Pero veamos ahora un ejemplo que en principio no parece accesible:

<div id="migas">
 <p>Estás en: <a href="#">Inicio</a> <img src="#" alt="que engloba a" /> <a href="#">Sección A</a> <img src="#" alt="que engloba a" /> <a href="#">Sección B</a> <img src="#" alt="que engloba a" /> <a href="#">Sección C</a></p>
</div>

Es un párrafo. Los símbolos "mayor que" en este caso no son fondo, sino imagen, con un texto alternativo que encadena los enlaces. Este párrafo nos explica con mayor detalle que los anteriores ejemplos en que parte de la estructura del sitio nos encontramos.

A un usuario que necesite un lector de pantalla probablemente le sirva mejor esta última forma de hacer un rastro de migas.

Entonces, ¿cual de estas formas de crear un rastro de migas es más accesible?

Actualización: Lo pregunté en AccesoWeb.

Saber más

Publicado

Categorías: