Colour Contrast Analyser
Descripción
Colour Contrast Analyser es una aplicación de escritorio. Es específica para comprobar el cumplimiento de contraste de los colores. Al ser en escritorio y no en navegador, permite checkear colores fuera de la web.
Instalación
Se puede descargar desde su página oficial. Selecciona la opción de tu sistema operativo y sigue los pasos del asistente de instalación.
¿Cómo usarla?
Para utilizar esta herramienta solo tenemos que indicar el color del primer plano y el del fondo y nos dirá si cumple o no los requisitos en función del elemento que sea.
Podemos indicar los colores:
-
Escribiendo su código:
-
A través de barras regulables:
-
Con una pipeta que permite coger el color exacto de un elemento:
En el análisis de los resultados nos marca 3 items:
- 1.4.3 Contraste (Mínimo)(AA): Aquí nos marca si los colores elegidos cumplen los criterios de accesibilidad en el caso de que el texto tenga un tamaño normal (a la izquierda) o grande (a la derecha)
- 1.4.6 Contraste (Mejorado) (AAA): Si queremos mejorar el contraste y llegar incluso a un mayor número de personas, seguiremos este requisito en vez del anterior, pero no es necesario llegar a este nivel.
- 1.4.11 Contraste sin texto (AA): Aquí nos marca el resultado si estamos comprobando elementos que no sean de texto como, por ejemplo, botones o iconos.
Silktide Accessibility Checker Checker
Descripción
Silktide es una extensión gratuita para el navegador web Chrome. Tiene múltiples opciones, para hacer tanto comprobaciones de accesibilidad como simulaciones. Es una herramienta muy sencilla de utilizar.
Instalación
Instalar la extensión para el navegador web: Chrome.
Una vez que esté instalada, se accede a ella a través de un botón de la zona de extensiones del navegador.
El icono tendrá el siguiente aspecto: 
¿Cómo usarla?
Tras realizar la instalación, abrir en el navegador la página a analizar y pinchar en el botón correspondiente a Silktide de la zona de extensiones del navegador. Se desplegará un panel con un mneú. Pinchando en cada elemento del menú se visualizarán las distintas opciones disponibles.
Dependiendo de las características que se estén analizando se deberán activar unas opciones u otras. Hay que tener en cuenta que si se recarga la página se eliminarán todas las opciones seleccionadas.
Primeros pasos
Una vez instalada, abre una página web, pincha en el icono de Silktide en la barra de extensiones y prueba las opciones del menú.
Imágenes – Texto alternativo
Abre la opción “Alt Text”. Automáticamente en cada imagen de tu página aparecerá una etiqueta con el texto alternativo o con la palabra “Decorative”. Repasa cada una de ellas y aunque la herramienta considere una imagen decorativa o no, esto es solo una deducción automática y deberás ser tú quien manualmente decida si es correcto o no.
Colores
En la opción “Color Contrast” podrás comprobar si dos colores cumplen los requisitos mínimos de contraste.
Esta herramienta tiene 3 secciones:
- Foreground: Donde puedes seleccionar el color del primer plano. Lo puedes hacer mediante pipeta obteniendo el color directamente de tu página o escribiendo el código hexadecimal del color.
- Background: Es exactamente igual pero para el color de fondo.
- Resultados: Dependiendo de lo que estés comprobando deberás fijarte en uno de los resultados mostrados.
- Normal Text: Para texto normal
- Large Text: Para texto grande
- Graphics: Para gráficas y elementos de la interfaz de usuario/a
Web Developer Toolbar
Descripción
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 una herramienta muy sencilla de
utilizar.
Entre todas las cosas que permite esta herramienta, pueden sernos de utilidad para este curso,
comprobar la alternativa textual de las imágenes, comprobar el título de las tablas…
Instalación
Instalar la extensión para el navegador web: Chrome / Firefox.
Una vez que esté instalada, se accede 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: 
¿Cómo usarla?
Tras realizar la instalación, abrir en el navegador la página a analizar y pinchar 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 se deberán activar unas opciones u otras (se pueden 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á. Hay que tener en cuenta que si se recarga la página se eliminarán todas las opciones seleccionadas.
Primeros pasos
Una vez instalada, abre una página web, pincha en el icono de web developer toolbar en la barra de extensiones y prueba las opciones de las distintas pestañas. Prueba a activar y desactivar las opciones. Prueba a activar varias opciones a la vez.
Imágenes – Texto alternativo
Si quieres utilizar esta herramienta para analizar el texto alternativo de tus imágenes. Puedes ir a la pestaña imágenes. Aquí puedes encontrar dos opciones que es recomendable que actives:
- Display Alt Attributes
- Outline All Images
Headings Map
Descripción
HeadingsMap es una extensión gratuita para el navegador web. Es específica para mostrar la estructura de página (encabezados).
La herramienta permite:
- Visualizar un listado de los encabezados de la página y su nivel.
- Muestra los anidamientos entre encabezados.
- Alerta de los casos en que no hay encabezados o se produce un salto incorrecto entre ellos.
- Resalta el encabezado seleccionado para poder localizarlo fácilmente en la página.
Instalación
Instalar la extensión para el navegador web: Chrome / Firefox.
Una vez que instalada, se accede a ella a través de un botón de la zona de extensiones del navegador:
¿Cómo usarla?
Tras realizar la instalación, abrir en el navegador la página a analizar y pinchar en el botón correspondiente a HeadingsMap de la zona de extensiones del navegador. Se desplegará en la parte izquierda de la pantalla.
Se muestran de manera automática todos los encabezados existentes en la página web, con una indicación numérica del 1 al 6 para indicar el nivel de encabezado. Se visualizan, además, los anidamientos entre los diferentes encabezados y se pueden colapsar o mostrar los diferentes niveles pulsando sobre las flechas que existen al principio de cada encabezado. Si se pincha en un encabezado del listado de la parte izquierda, se resaltará en la página para localizarlo fácilmente. Si la página no tuviera encabezados o tuviera saltos incorrectos entre ellos, se muestra un mensaje de error.
Hay que volver a pulsar sobre el icono para cerrar la herramienta.
Primeros pasos
Una vez instalada, abre una página web, pincha en el icono de HeadingsMap en la barra de extensiones y revisa el listado de encabezados y su nivel en el panel izquierdo. Prueba a colapsar y desplegar los distintos niveles de encabezado. Prueba a pinchar sobre un encabezado del listado del panel izquierdo y comprueba que se resalta en la página.
Escuchar