La herramienta de inspección de código del navegador se encuentra integrada en cualquier navegador. Deberás utilizarla cuando con el resto de herramientas no puedas obtener la información deseada.

Permite:

• Ver el código HTML de algún elemento de la web.

Localiza en la página web el elemento que quieras analizar, pulsa sobre él con el botón derecho y elige la opción "Inspeccionar" (en Chrome) / "Inspeccionar elemento" (en Firefox).

Se abrirá a continuación una nueva zona en la pantalla, generalmente en la parte inferior, pero se puede mover a la posición deseada, que mostrará el código fuente del elemento seleccionado previamente. Así podrás conocer si tiene determinados atributos, cómo se estructura dicho elemento respecto a sus elementos próximos, etc.

La herramienta tiene un aspecto ligeramente diferente en Chrome y Firefox:

• En Chrome, la pestaña que debe tenerse activa es la nombrada “Elements”. No aparece directamente la opción de buscar, pero puedes acceder a ella pulsando "Control + F". Se abrirá entonces un cuadro de búsqueda en la parte inferior que te permitirá buscar dentro del código.
• En Firefox, la pestaña que debe tenerse activa es la nombrada “Inspector”. Por defecto, aparece debajo de “Inspector” un cuadro de búsqueda que podrás usar para buscar dentro del código.

La herramienta de inspección de código del navegador puede utilizarse como ayuda para revisar los siguientes criterios de conformidad:

• Criterio 1.1.1. Contenido no textual, para las comprobaciones:
  • Comprobación 1.1.1-G. Las imágenes que tienen alguna funcionalidad como los enlaces, áreas activas de mapas de imagen o botones de tipo imagen en los formularios, tienen un texto alternativo que identifica su propósito.
  • Comprobación 1.1.1-H. Los enlaces acompañados de imágenes que actúan como enlace al mismo recurso deben estar combinados en un único enlace.
• Criterio 1.3.1. Información y relaciones, para las comprobaciones:
  • Comprobación 1.3.1-D. El contenido que se muestra como un listado de elementos relacionados entre sí (incluyendo los enlaces de menús y barras de navegación) se debe marcar con los elementos adecuados de lista (<ol> para listas desordenadas, <ul> para listas desordenadas y <dl>, <dt> y <dd> para listas de términos y definiciones).
  • Comprobación 1.3.1-E. No se deben emplear los elementos de lista únicamente con fines presentacionales para marcar contenidos que no son elementos relacionados entre sí.
  • Comprobación 1.3.1-H. En las tablas de datos se deben asociar adecuadamente las celdas de encabezado con las celdas de datos.
  • Comprobación 1.3.1-J. En las tablas de datos que disponen de un atributo summary, dicho atributo debe describir la organización de la tabla o explicar cómo se usa. 
  • Comprobación 1.3.1-K. En las tablas de datos que contienen tanto el elemento <caption> como el atributo summary, el contenido de ambos no debe estar duplicado.
  • Comprobación 1.3.1-L. En las tablas de maquetación no se deben emplear elementos o atributos propios de las tablas de datos (<th>, <caption>, summary, scope, headers).
  • Comprobación 1.3.1-N. Los grupos de campos de formulario relacionados entre sí que requieren de una descripción de todo el grupo, de forma adicional a las etiquetas individuales, se deben agrupar dentro de un elemento fieldset y describirse con el elemento legend.
  • Comprobación 1.3.1-O. En los elementos select donde haya diferentes grupos de opciones relacionadas entre sí dichas opciones se deben agrupar mediante el elemento optgroup.
  • Comprobación 1.3.1-P. Cuando el color se emplea para transmitir información también se debe transmitir dicha información mediante el marcado semántico o estructural, o al menos en forma de texto.
  • Comprobación 1.3.1-Q. En general, se deben emplear elementos estructurales y semánticos para marcar la estructura del contenido de la página y el texto especial o enfatizado, haciendo que toda la información y las relaciones del contenido transmitidas a través de la presentación visual también se marquen con dichos elementos estructurales y semánticos o, en su defecto, directamente en forma de texto.
• Criterio 1.3.2. Secuencia significativa, para la comprobación:
  • Comprobación 1.3.2-C. Se deben identificar los cambios en la dirección de lectura del texto.
• Criterio 1.3.4. Orientación.
• Criterio 1.4.10. Reflow.
• Criterio 2.2.1. Tiempo ajustable, para las comprobaciones:
  • Comprobación 2.2.1-B. Si se producen redirecciones automáticas del contenido (de cliente o servidor) éstas deben ser instantáneas y transparentes para los usuarios sin imponer un límite de tiempo.
  • Comprobación 2.2.1-C. Sólo deben existir actualizaciones automáticas <meta> de todo el contenido de la página si se proporcionan herramientas para detener, extender o ajustar el límite de tiempo.
• Criterio 2.4.4. Propósito de los enlaces (en contexto).
• Criterio 2.5.3. Etiqueta en el nombre.
• Criterio 3.1.1. Idioma de la página.
• Criterio 3.1.2. Idioma de las partes.

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.