Como ya se ha comentado anteriormente, los criterios de conformidad A y AA se dividen de la siguiente manera (total 50):

• Principio "Perceptible": 20 criterios (9 de nivel A y 11 de nivel AA)
• Principio "Operable": 17 criterios (14 de nivel A y 3 de nivel AA)
• Principio "Comprensible": 10 criterios (5 de nivel A y 5 de nivel AA)
• Principio "Robusto": 3 criterios (2 de nivel A y 1 de nivel AA)

En la siguiente gráfica se puede comprobar que el tiempo necesario para la comprobación de algunos de los criterios de conformidad del primer principio son muy superiores al resto de los criterios, consumiendo 4 de ellos el 25% del tiempo total del análisis:

• El criterio 1.3.1 consumirá el 9,71% del tiempo total (aproximadamente unos 48 minutos de media)
• El criterio 1.1.1 consumirá el 5,90% del tiempo total (aproximadamente unos 29 minutos de media)
• El criterio 1.4.3 consumirá el 5,11% del tiempo total
• El criterio 1.4.1 consumirá el 4,28% del tiempo total
• El resto de criterios (46 criterios) consumirán el tiempo total restante (se necesitarán unos 7 minutos de media por criterio para completarlos)

Por ello, no te desanimes si los primeros criterios te llevan mucho tiempo en comprobarlos.

En el momento en que encuentres algún fallo en una comprobación no deberás seguir en busca de más errores dentro de ese criterio de verificación y deberás registrarlo tanto en el informe de revisión de accesibilidad (eligiendo en el desplegable de Resultados de ese criterio y para esa página web el valor de "Falla"), como en el informe de errores, donde deberás apuntar en que comprobación falló, dónde localizar el problema, describirlo y cómo solucionarlo, salvo que desees realizar una auditoría de accesibilidad. En ese caso, aunque encuentres un error en un criterio de verificación debes continuar en busca de todos los demás errores que pueda contener la página web.

Por ejemplo, si encuentras que una página falla en la comprobación 1.1.1-B deberás posicionarte en la pestaña "P1. Perceptible" dentro del informe de revisión de accesibilidad y seleccionar Falla en dicha verificación.

A continuación, te incluimos algunos consejos e interpretaciones adicionales para completar correctamente el informe de revisión de accesibilidad y el informe de errores.

Te recomendamos que siempre las leas antes de ponerte con el criterio concreto según el documento PDF de pautas de análisis.

Este criterio se ha dividido en 11 comprobaciones (de la A a la K). Todas las comprobaciones se pueden resolver utilizando la herramienta "Web DeveloperToolbar".

En este criterio lo que vamos a comprobar es que toda la información que se muestre en la página web, utilizando contenido no textual (imágenes o botones), tenga una alternativa textual que trasmita la misma información que el propósito de dicho contenido.

Puede que te surjan dudas a la hora de identificar si una imagen es decorativa o no. A veces no es sencillo, pero debes valorar si la imagen:

• Trasmite algún tipo de información al usuario
• Si trasmite algún tipo de información, ¿es redundante?
• La información que trasmite es completa

Como se puede comprobar, en ocasiones es difícil identificar a las imágenes decorativas.

Por otro lado, también debes revisar que el texto alternativo de una imagen no decorativa refleja toda la información que dicha imagen contiene.

En la siguiente imagen se puede apreciar como la alternativa textual de la imagen es insuficiente y no refleja toda la información en ella representada: 

Un texto alternativo correcto para esta imagen podría ser: "Proyecto cofinanciado por el Fondo Europeo de Desarrollo Regional (FEDER). Unión Europea”

A la hora de localizar las imágenes de una página web con la herramienta "WebDeveloper Toolbar" te encontrarás con imágenes que la herramienta no detecta. Estas imágenes suelen estar insertadas utilizando hojas de estilo CSS o generadas con elementos HTML <svg>. Ambas, si no son decorativas deben tener una alternativa textual.

A continuación, se muestra una imagen de una lupa incrustada con hojas de estilo en el botón del cuadro de búsqueda:

Para verificar que tiene texto alternativo habrá que inspeccionar el código:

Nos encontramos con que el botón tiene una etiqueta <label> con el texto "Click para buscar" pero que, aunque es visible para un lector de pantallas, no se muestra en pantalla porque se ha llevado a la posición "-9999em" de la izquierda de la pantalla. Esta técnica, llamada posicionamiento absoluto fuera de los límites de la pantalla, está bastante extendida y suele emplearse para incluir alternativas textuales no visibles.

Un botón realizado con una imagen también puede disponer de un atributo "aria-label" que sea alternativa textual.

A continuación, se muestra una imagen generada utilizando el elemento <svg>:

Para verificar que tiene texto alternativo también habrá que inspeccionar el código:

Se puede apreciar como la imagen tiene una alternativa textual alt="Facebook"

Para terminar, si una página web dispone de alguna imagen compleja, es decir, que contenga una gráfica, una tabla, un esquema, etc. tendrás que comprobar que dicha imagen disponga de un texto, inmediatamente antes o después, que la describa, o que al menos, describa la información que quiere transmitir al usuario.

Este criterio se ha dividido en 17 comprobaciones (de la A a la Q). En este criterio deberás utilizar varias herramientas y la revisión manual en algunos casos.

Vamos a detallarte algunos puntos en los que pueden surgirte algunas dudas:

1.3.1-B: Debes comprobar que en la página web no se han marcado como encabezados elementos que funcionalmente no lo sean. Esto suele hacerse por razones estéticas. Recuerda que el marcado correcto de los encabezados ayuda a algunas personas discapacitadas a acceder de forma sencilla a la información moviéndose entre secciones sin tener que leer la página completa.

1.3.1-D: Debes buscar todas las listas que haya en la página web y comprobar mediante la herramienta WAVE si:

• están bien estructuradas
• incluyen a todos los elementos
• son detectadas todas las listas.

Puede ser que la página web contenga alguna lista realizada a mano y que no haya sido etiquetada utilizando elementos <ol> o <ul>. Eso sería un fallo de accesibilidad.

1.3.1-E: También debes fijarte que no se haya marcado como una lista elementos que no estén relacionados entre sí.

1.3.1-H: Esta verificación únicamente afecta a tablas de datos complejas. Consiste en comprobar manualmente si la tabla compleja dispone de elementos que asocien cada celda de datos con las celdas de encabezados adecuadas. Esto suele hacerse utilizando el atributo <scope> o el atributo <header>. El atributo <header> permite realizar asociaciones más complejas permitiendo que una celda de datos disponga de varias celdas de encabezados.

1.3.1-J: Si la tabla o tablas de la página web no disponen de un atributo <summary> no es necesaria realizar esta comprobación.

1.3.1-K: Al igual que en la anterior comprobación, solo debe verificarse si la tabla dispone de los atributos <caption> y <summary>.

1.3.1-L: Las tablas están pensadas para mostrar información tabular y no para dotar de presentación a los contenidos. Por esta razón, el uso de tablas para maquetar el contenido de la página web no está recomendado. En el caso de que en la página web se use para tal fin, no debe tener ningún elemento ni atributo que la identifique como una tabla de datos.

1.3.1-M: Un truco para verificar que las etiquetas de un formulario están asociadas correctamente a un campo consiste en pinchar sobre la etiqueta con el ratón. El campo que tenga asociada la etiqueta será seleccionado. De esta manera se puede comprobar fácilmente si la asociación etiqueta-campo es correcta.

En este pequeño video se puede comprobar dicha asociación:

1.3.1-N: Si la página web cuenta con un formulario y éste agrupa los campos relacionados entre sí con elementos <fieldset>, debe contar con un elemento <legend> que describa su naturaleza o función.

<fieldset>
    <legend>Datos personales</legend>
        <label for="nombre">Nombre</label>
        <input id="nombre" name="nombre">
        <label for="apellido">Apellidos</label>
        <input id="apellido" name="apellido">
    </fieldset>

El resultado del código anterior es el siguiente, donde se puede apreciar la leyenda de la agrupación de los campos relacionados:

1.3.1-O: En el caso de esta comprobación manual si la página dispone de un formulario, y dicho formulario dispone de elementos <select>, habrá que comprobar que los elementos <options> están bien agrupados mediante elementos <optgroup> siempre y cuando los datos que queramos agrupar estén relacionados. Si tenemos un listado de provincias no sería necesario agruparlas, salvo que por alguna razón necesitáramos hacerlo por Comunidades Autónomas. Lo mismo ocurriría si tenemos un listado de todos los países. En este caso, sería una buena idea agruparlos por continente para poder localizar un país más rápidamente. Un ejemplo sencillo sería el de un listado de mascotas:

<select name="mascotas" id="mascotas">
    <optgroup label="Perros">
        <option value="pastor">Pastor alemán</option>
        <option value="caniche">Caniche</option>
    </optgroup>
    <optgroup label="Gatos">
        <option value="siames">Siamés</option>
        <option value="persa">Persa</option>
    </optgroup>
</select>

1.3.1-Q: Una de las cosas que debes comprobar en esta verificación es si el texto en negrita o en cursiva está bien marcado semánticamente. Si el texto se marca en negrita o cursiva para enfatizarlo (dotarlo de significado semántico), se deben utilizar para ello elementos <strong> o <em>, respectivamente. Mientras que, si el texto marcado en negrita o cursiva no es necesario enfatizarlo, se deberán utilizar elementos <b> o <i>, respectivamente. Piensa que un lector de pantallas los leerá de distinta manera.

En este criterio únicamente debes localizar los formularios que soliciten información personal al usuario y comprobar que los elementos <input> disponen del atributo "autocomplete" y que su valor es acorde a dicho campo.

Por ejemplo, si el formulario tiene un elemento <input> para rellenar el correo electrónico del usuario, el atributo debería tener el siguiente valor: autocomplete="email"

    <input id="email" name="email" autocomplete="email">

Vamos a ver en detalle alguno de los puntos de verificación, por si te pudieran surgir algunas dudas.

1.4.1-B: Debes buscar todos los enlaces que se encuentren dentro del texto y comprobar que:

• El contraste entre el color del enlace y el texto que lo rodea es de al menos 3:1
• El enlace disponga de alguna pista visual permanente (subrayado...) o, al menos, muestre una pista visual cuando obtenga el foco del teclado o del ratón. Por razones de usabilidad, se desaconseja utilizar el subrayado con texto normal para no confundirlo con enlaces.

Para comprobar el contraste se recomienda inspeccionar el código para obtener el color exacto utilizado ya que utilizar la pipeta de herramientas como "Colour Contrast Analyser" nos dará un color aproximado, pero no el realmente utilizado.

En la siguiente imagen se puede apreciar como la pipeta no ha conseguido detectar el color correctamente del enlace. El color de dicho enlace es el que aparece a la derecha del código: #2C5C9B

1.4.1-C: Si la página web dispone de alguna imagen o gráfica, ésta debe poder transmitir la misma información sin el uso del color.

No debes confundir este criterio con el 1.4.1. En este caso lo que analizaremos será el contraste entre el texto y el fondo.

Para averiguar el tamaño aproximado de la fuente utilizada, te puede valer de ayuda el tamaño ejemplo que se muestra en la herramienta "WCAG - Color Contrast checker":

O puedes inspeccionar el código para averiguarlo o para mostrar un tamaño similar. Recuerda que los tamaños de 18 y 14 son "pt" y no "px".

Si pinchamos en el atributo de la derecha "font-size" y le damos un valor de "18pt" veremos si el tamaño del texto de la página aumenta o disminuye. Esto nos dará una idea para saber si el tamaño de nuestra fuente es mayor o menor a ese tamaño.

También deberás comprobar el contraste del texto dentro de las imágenes con el fondo adyacente a dicho texto.

Están exentos de cumplir este criterio los siguientes elementos: imágenes, mapas, diagramas, vídeo, juegos, presentaciones, tablas de datos, o interfaces donde es necesario mantener las barras de herramientas a la vista mientras se manipula el contenido.

Dichos elementos pueden requerir el uso de un doble scroll (vertical y horizontal).

Debes localizar todos los iconos, botones y demás elementos visuales que compongan la interfaz y verificar el contraste con los colores adyacentes.

En la siguiente imagen se puede apreciar un elemento visual compuesto por un círculo azul en cuyo interior hay un signo de interrogación.

En este ejemplo, el contraste entre el color del signo de interrogación y el color azul del círculo es de 2,6:1, es decir, tienen un contraste insuficiente, por lo que no cumple este criterio.