Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Accesibilidad que contiene a Accesibilidad en los rastros de migas

Datos de búsqueda

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

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay 2 comentarios a “Accesibilidad en los rastros de migas”

Gabriel Porras dice:

Fecha de comentario: 2008/04/02 13:18

Me pusiste a pensar… Yo siempre creí que era la primera forma y siempre las implmentó en forma de miga.
Creo que esta es una pregunta para Emmanuelle y la lista AccesoWeb.
Saludos!

jervert dice:

Fecha de comentario: 2008/04/02 14:25

Yo lo que he estado usando de forma habitual para hacer los rastros de migas han sido las listas ordenadas.

Pero cuando he visto lo del párrafo me ha parecido que a un usuario con problemas de visión que utilice un lector de pantallla le puede ser más útil y entendible la opción de crear el rastro de migas con un párrafo.

Información del sitio