Migas de pan accesibles y JAWS
by Ricardo Gil on June 25, 2008
Ayer mantuvimos en el curso una animada conversación sobre cómo se deben maquetar unas migas de pan, si los separadores deben ir en código o por CSS y qué implicaciones tiene para los lectores de pantalla.
Como no conseguí encontrar ningún recurso claro por la red, realicé mis propias pruebas en casa con dos versiones de JAWS distintas una antigüa (versión 5) y la última de todas (versión 8).
Me cree una pequeña página en HTML con unas migas de pan como estas (se han sustituído los “<” por “[” para poder visualizarlo):
[ul>
[li>[span class=”screen-readers“>Usted está en:[/span>[a href=”/” title=”pagina principal”>Inicio[/a>
[ul>
[li>[a href=”/categoria” title=”nombre de la categoria”>Categoría[/a>
[ul>
[li>Artículo[/li>
[/ul>
[/li>
[/ul>
[/li>
[/ul>
En el curso todos coincidíamos en que semánticamente la mejor forma de representarlas era mediante listas y sublistas anidadas, puesto que al quitar la hoja de estilos es la única manera en la que siguen teniendo sentido. Pues bien, los resultados fueron:
JAWS 5: No lee los caracteres “>” (ni ningún otro como “|”, “#” introducido en el HTML)
JAWS 8: Lee los caracteres “>”
De forma que JAWS 8 leería algo como: “lista de 2 subniveles con 2 enlaces. Nivel 1 enlace “Inicio” mayor que subnivel 1 enlace “Categoría” mayor que subnivel 2 “Artículo” se cierra subnivel 2, se cierra subnivel 1, se cierra lista”.
Como conclusión: No tiene sentido que Inicio sea mayor que Categoría, aunque jerarquicamente esté por encima, y puesto que el lector de pantalla ya reconoce que las migas están ordenadas en niveles y subniveles, no haría falta introducir en código ningún elemento separador. Aunque se recomienda introducirlos por CSS como separadores visuales.
Leave your comment