Web Developer Toolbar es una extensión gratuita para el navegador web. Tiene múltiples opciones, no solo está orientada a la accesibilidad web. Es muy sencilla de utilizar.

Entre todas las cosas que permite, podemos destacar las siguientes:

• Resaltar visualmente ciertos elementos en pantalla.
• Mostrar ciertos elementos o atributos.
• Ocultar determinados elementos.
• Obtener información de la estructura de la página.

Instala la extensión para el navegador web: Chrome / Firefox / Opera.

Una vez que instalada, puedes acceder a ella a través de un botón de la zona de extensiones del navegador.

En Chrome tendrá el siguiente aspecto: 

En Firefox tendrá el siguiente aspecto: 

Tras realizar la instalación, abre en el navegador la página a analizar y pincha en el botón correspondiente a Web Developer Toolbar de la zona de extensiones del navegador. Se desplegará un panel con distintas pestañas. Pinchando en cada una de las pestañas se visualizarán las distintas opciones disponibles.

Dependiendo de las características que se estén analizando deberás activar unas opciones u otras (puedes activar varias opciones al mismo tiempo). Cuando una opción está activa se muestra un “tick” a su lado y volviendo a pulsar sobre dicha opción, se desactivará. Tienes que tener en cuenta que si se recarga la página se eliminarán todas las opciones seleccionadas.

La herramienta Web Developer Toolbar puede utilizarse como ayuda para revisar los siguientes criterios de conformidad:

• Criterio 1.1.1. Contenido no textual.
  • Seleccionar “Images – Outline images without alt attributes”.
  • Seleccionar “Images – Display alt attributes”.
• Criterio 1.3.1. Información y relaciones, para las comprobaciones:
  • Comprobación 1.3.1-I. En las tablas de datos que disponen de un título éste se debe identificar mediante el elemento <caption> y dicho título debe identificar adecuadamente la tabla
    • Seleccionar “Outline – Outline table captions”
  • Comprobación 1.3.1-M. Los campos de formulario deben tener una etiqueta asociada explícitamente o, en su defecto, al menos tienen un título que describa su función.
    • Seleccionar “Forms – Display Form Details”.
• Criterio 1.3.2. Secuencia significativa.
  • Seleccionar “Miscellaneous – Linearize page”.
• Criterio 1.3.5. Identificar el propósito de entrada
  • Seleccionar “Forms – Display form details”.
• Criterio 2.4.4. Propósito de los enlaces (en contexto)
  • Seleccionar “Information – Display Title attributes”
• Criterio 2.5.3. Etiqueta en el nombre
  • Seleccionar “Forms – Display form details”.
• Criterio 4.1.2. Nombre, función, valor
  • Seleccionar “Information – Display title attributes” y “Outline – Outline Frames”
• Criterio 4.1.3. Mensajes de estado
  • Seleccionar “Information – Display ARIA roles”

En el bloque IV de este curso, se verá en detalle cómo utilizar esta herramienta como ayuda para revisar cada uno de estos criterios.