Zum Hauptinhalt springen
Niquelao Barrierefreiheit im Web und Frontend-Entwicklung auf Spanisch: WCAG-Standards, barrierefreie Widgets und Firefox-Erweiterungen, erklärt mit echtem Code.

Einige Links auf dieser Seite sind Affiliate-Links: Wenn du darüber kaufst, erhalten wir möglicherweise eine Provision, ohne dass dir zusätzliche Kosten entstehen. Das beeinflusst nie, was wir empfehlen. Details findest du in unserer Affiliate-Offenlegung. Offenlegung der Affiliate-Partnerschaft.

Niquelao » Erweiterung headingsMap

» Extensión headingsMap Niquelao ¿Qué tal os ha quedado? 5 de mayo de 2008 por Rumoroso —> Accesibilidad y estándares web Extensión headingsMap por Rumoroso Antes de nada, aquí tenéis el enlace a la página oficial de la extensión headingsMap en Firefox Add-ons .

Si os animáis a probarla, espero vuestros comentarios, opiniones e incluso sugerencias de mejora. El conjunto de encabezados de una página web permite estructurar su contenido de forma jerárquica, generando así un mapa o índice del documento . Por ello, al utilizar encabezados, estos deben reflejar fielmente la estructura del contenido (secciones, subsecciones y sus relaciones de dependencia), ser suficientemente claros y evitar saltos de nivel inadecuados (por ejemplo, pasar directamente de h2 a h4).

Esto es fundamental en términos de accesibilidad web , ya que facilita tanto la comprensión del contenido como su uso por parte de cualquier persona, independientemente de sus capacidades funcionales. Los encabezados pueden extraerse en forma de lista para servir como mapa o índice del documento web. Esto es exactamente lo que hacen ciertas ayudas técnicas, como los lectores de pantalla.

Estas herramientas permiten al usuario obtener una primera impresión del contenido y acceder directamente a las partes que le interesen, sin necesidad de recorrer todo el documento previamente. La extensión headingsMap genera un índice o mapa de cualquier documento web estructurado mediante encabezados, de modo que al hacer clic en cualquiera de los elementos de dicho mapa, se accede directamente al contenido correspondiente de la página. Pero headingsMap no solo facilita la navegación para todos los usuarios (algo que ya ofrecía la extensión documentMap ), sino que también resulta muy útil para desarrolladores, consultores y auditores web por las siguientes razones: Muestra la estructura de encabezados tanto del documento principal como de cualquier otro documento incrustado mediante el elemento IFRAME (integrándolos con los del documento contenedor) o de aquellos que forman parte de un conjunto de marcos (FRAMESET).

Indica el nivel de cada encabezado. Puede alertar cuando un documento carece de encabezados. Puede señalar saltos de encabezado incorrectos, manteniendo la alerta hasta encontrar un encabezado de nivel adecuado.

Muestra todos los encabezados presentes en el documento, incluso aquellos ocultos mediante técnicas CSS o que carecen de contenido. Dado que los encabezados del documento principal y los de los iframes se muestran en el mismo panel, y considerando la necesidad, por ejemplo en una auditoría web, de diferenciar los encabezados pertenecientes a un IFRAME del resto, se ha añadido la opción de incluir una marca (en forma de línea lateral) que resalte dicha diferencia (diferenciando incluso si hay anidamiento de marcos).

Related: con plan gratuito para empezar hoy mismo.

Para activar esta marca (una línea vertical situada a la derecha del encabezado), basta con seleccionar la opción correspondiente haciendo clic con el botón secundario del ratón sobre el panel lateral o sobre el icono que la extensión instala en la barra de estado. Además, se incluyen otras opciones de configuración para marcar los errores en los saltos de nivel, así como para resaltar con un estilo determinado (borde y fondo configurables) el encabezado correspondiente del documento al seleccionar uno de la lista.

A continuación se incluye una captura de pantalla que muestra cómo se visualizan los encabezados en un documento con IFRAME. La línea lateral izquierda junto a los encabezados indica cuáles están dentro de este. Además, la diferente coloración de fondo alerta sobre la existencia de saltos de nivel incorrectos (en este caso, de primero a tercero sin pasar por el segundo). En el caso de que el documento incluya un conjunto de marcos (FRAMESET), el panel donde se muestran los encabezados se divide en tantos paneles como marcos haya, mostrando en cada uno sus respectivos encabezados.

Finalmente, se ha añadido una funcionalidad adicional. Si el documento web al que se accede es una presentación en formato web creada con acc_slide (o rumoslide) o con Slidy , la extensión funciona como un índice, permitiendo acceder directamente a la diapositiva deseada. Si después de leer esto ya estás convencido de querer probar la extensión, aquí tienes de nuevo el enlace a la extensión headingsMap en Firefox Add-ons .

Worth a look: — Accesibilidad gestionada: automatización combinada con revisión humana.

Una vez instalada, aparecerá un icono en la barra de estado que desplegará el panel lateral donde se muestra la estructura de encabezados. Asimismo, también se puede acceder mediante la combinación de teclas alt + o . nota: Al hacer clic en cada elemento de la lista de encabezados, se accede directamente al encabezado correspondiente, quedando este resaltado. Para eliminar el resaltado, basta con pulsar la tecla “esc” o hacer clic en cualquier punto del documento actual.

Ya no hay excusa para no hacer las cosas bien. Comencemos a añadir encabezados a nuestros documentos y hagámoslo correctamente. Puedes seguir los comentarios gracias al feed RSS 2.0 .

También puedes dejar un comentario , o enviar un trackback con la dirección http://www.niquelao.net/extension-headingsmap/trackback/ desde tu sitio. 3 comentarios Firefox Add-ons (6 de mayo de 2008) […] La extensión headingsMap genera un índice o mapa de cualquier documento web estructurado mediante el uso de encabezados (tanto del documento principal como de los frames e iframes que contenga), indicando […] kcmr (12 de agosto de 2008) ¡Muy buena extensión! Le da varias vueltas a Document Map. www.webeame.net (12 de agosto de 2008) Extensión para desarrolladores… Útil extensión para Firefox que ofrece información completa sobre la estructura de encabezados en nuestros documentos web (incluidos los enlazados mediante marcos).

Informa si hay errores o si falta alguno y permite navegar por la pági… Puedes seguir los comentarios gracias al feed RSS 2.0 . También puedes dejar un comentario o enviar un trackback desde tu sitio.

Esta obra está bajo una licencia de Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; if you want the current details.


¿Cumplir WCAG sin tocar el código?

Superposición de IA que promete cumplimiento WCAG en 48 horas