Cómo aprobar la accesibilidad web del kit digital

Para los que a estas alturas no os hayáis enterado de que es el Kit Digital, os pongo el contexto: El gobierno de España ha habilitado unas ayudas para digitalización provenientes de los fondos europeos, denominadas Kit Digital, que entre otras cosas, nos permiten subvencionar el desarrollo de una página web. Estas ayudas están siendo un auténtico dolor de cabeza debido a varios factores:

• Unos requisitos técnicos, poco cercanos a la realidad
• Unas pautas para realizar las justificaciones "excesivamente genéricas"
• Notificaciones de subsanación con textos que no explican de forma concisa los errores"
• Inexistente soporte técnico para dudas de agentes digitalizadoress en cuanto a justificaciones se refiere

Si has llegado hasta este artículo, quizás también te interese saber cómo justificar presencia web para el kit digital

Recientemente se ha montado un gran revuelo entre los agentes digitalizadores (aquellos que se encargan de justificar los trabajos realizados), debido a que se ha publicado una excel “Informe de revisión de accesibilidad sitios web” de caracter obligario para las webs y tiendas online de clientes del segmento 2 y 3. El problema reside en que no se ha explicado de ningúna forma cómo proceder con esta excel (nada nuevo en la convocatoria del kit digital), pero no solo eso, sino que además, esta excel contiene información que no está dirigida a ser rellenada por un agente digitalizador (mientras tanto, los tiempos para realizar las justificaciones siguen corriendo). El objetivo de esta herramienta supuestamente es permitirnos chequear requisito por requisito si un sitio cumple las pautas de accesibilidad web para ser digno merecedor de esta subvención.

¿QUÉ ES LA ACCESIBILIDAD WEB?

Lo primero de todo, una breve explicación, la accesibilidad web es un factor que tiene como objetivo que las páginas web sean accesibles (es decir que puedan navegar sin problemas el mayor número de personas posible), permitiendo, que por ejemplo, aquellas personas con alguna discapacidad, puedan comprender la información de la misma. En este sentido, se chequean una serie de factores que convierten a la web en accesible a personas con problemas como por ejemplo, auditivos, de percepción de colores o incluso ciegos.

¿QUÉ OPINAS DE LA REVISION DE ACCESIBLIDAD DEL KIT DIGITAL?

¿Sinceramente? Opino que es un auténtico despropósito. Hace muchos años (cuando no tenía ni arrugas ) trabajé en portales de varias administraciones públicas que estaban obligados a cumplir estos requisitos. En el contexto de administración pública, esto en parte, tenía sentido, ya que no podías dejar de lado a un segmento de la población por el mero hecho de tener una discapacidad, pero mi pregunta es la siguiente ¿tiene sentido en esta convocatoria?. Pongamos el ejemplo de la web de “talleres Manolín” , la web de un pequeño autónomo que tiene un taller y que lo más probable es que tenga una visibilidad local, por lo que obligar a pasar un diagnóstico de accesibilidad web, cuando posiblemente no le sea útil en absoluto, es a mi gusto, una soberana estupidez (luego me lavo la boca con jabón).

Actualizado a 17-01-2023:

Han publicado una pequeña guía para saber cómo rellenar la excel (sin entrar en detalles) y parece que esta misma excel ha sido corregida para que la pestaña "Definición de ámbito" pueda ser correctamente rellenada sin problema alguno

CÓMO RELLENAR EL INFORME DE REVISIÓN DE ACCESIBILIDAD

Vamos al lío, he estado trasteando con la excel denominada “Informe de revisión accesiblidad sitios web” y creo que sí tenemos buenas practicas de programación, es bastante viable aprobar el informe. Cómo ya soy perro viejo y esto de la accesibilidad me tocó de cerca cuando empezaba a trabajar, voy a intentar hacer memoria y ayudaros con esta ardua tarea (de nada red.es).

Mi objetivo en esta guía será rellenar exclusivamente aquellos requisitos que considero más fáciles de cumplircon el objetivo de ahorraros tiempo. En principio, con marcar como "pasa" los requisitos que os listo a continuación, estaríamos obteniendo el aprobado

Nota: El resto de requisitos tienen que estar en “falla” o “no aplica”, si no, no contabilizarán y la excel no se dará por cubierta

Con la nueva versión de excel que han subido el 17/01/2023 podéis ir a cada pestaña y marcarla por completo como "falla"

PESTAÑA MUESTRA

Primero, tenemos que incluir las urls que hemos analizado. La pestaña de información nos dice lo siguiente: “Entre las páginas seleccionadas, en caso de existir, deberán figurar de forma obligatoria las siguientes: Pagina de inicio, inicio de sesión, mapa del sitio, contacto, ayuda, información legal, página de declaración de accesibilidad y página que contenga el mecanismo de comunicación”

También nos dice que si tenemos una página lo suficientemente diferente al resto, la incluyamos, si tenemos una sección con un servicio también y que un 10% de la muestra ha de ser aleatoria. Cómo véis, nada nuevo, todo fantásticamente explicado (nótese la ironía). Así que voy a haceros la vida más fácil y os voy a indicar qué incluir:

1. La página de inicio (obligatorio)
2. La declaración de accesibilidad (obligatorio)
3. Una sección cualquiera que marcaremos en la columna tipo como “Aleatoria”
4. El mapa web (que os ayudará además a pasar la accesibilidad)

Con esto, esta pestaña queda rellenada y marcada como correcta. Las urls que hayáis indicado se trasladarán de forma automática al resto de pestañas, así que a partir de ahora, nuestro objetivo es cumplir con el mayor número de requisitos.

Actualización: Debido a los cambios que ha sufrido el excel por parte de red.es, en las últimas versiones ya no se requiere incluir ningún tipo de página en concreto, así que simplemente tenéis que poner una muestra con 3 urls.

PESTAÑAS VOZ Y VIDEO

Comienzo con estas por un sencillo motivo: Si no queremos complicarnos la vida, evitemos incluir en las webs diseñadas para el kit digital, ningún audio o video, ya que de esta manera, podremos marcar estas dos pestañas por completo cómo “No Aplica”. ¡ojo! que si incluís algún vídeo y no cumplís con los requisitos, vuestra puntuación empeorará, puesto que “No aplica” es mejor que “Falla” en los resultados de esta excel.

PESTAÑA GENÉRICOS

Aquí tenemos 3 requisitos, que en principio, no tendremos problemas para cumplir:

5.2 Activación de características de accesibilidad

Basicamente nos está diciendo que si tenemos documentado cómo activar una característica de accesibilidad que cubran una necesidad, tendremos que poder activarla sin problema. Ejemplo: Si tuviesemos un botón para cambiar los colores de la web de manera que se lea mejor, ese botón, no puede ser amarillo con letras blancas, porque el usuario que necesitase activar esa característica, no podría hacerlo. En nuestro caso, marcar “No aplica”

5.3 Biometrica

Marcamos “No aplica”, puesto que no usamos ningún método biométrico ¿verdad?

5.4 Preservación de la información de accesibilidad durante una conversión

“No aplica”

Por suerte, nuestras webs serán bastante sencillas, básicamente de presentación, así que esta pestaña queda cubierta de forma completa también con “No aplica”

PESTAÑA SERVICIOS DE APOYO

Principalmente esta pestaña está relacionada con la documentación de las características de accesibilidad y los servicios de soporte.

Básicamente los primeros 3 requisitos los cubriremos creando correctamente la página de declaración de accesibilidad

Aquí tenemos el modelo para definir esta página https://administracionelectronica.gob.es/pae_Home/dam/jcr:da4785f6-6c22-4d67-a466-3b62c4f10056/RECOMENDACIONES-MODELO-EUROPEO-ACCESIBILIDAD-acc.pdf

Sin entrar en más detalle, se puede observar que este modelo está totalmente enfocado a administraciones públicas, de ahí el sinsentido de todo esto…

Los dos siguiente requisitos, hacen referencia a los servicios de soporte, que por ejemplo pueden ser help desk, call center, soporte técnico, etc.. así que bajo mi punto de vista, deberían ser opcionales, es decir , no aplica puesto que carecemos de ellos.Como en esta guía no viene nada claro en la excel, para no jugarnosla, los dejaremos en “falla”

PESTAÑA SOFTWARE

11.7 Preferencias de usuario

Básicamente que nuestra web, mantenga las preferencias de usuario del navegador y si las modifica, que se apliquen correctamente. Un ejemplo, es que el usuario tenga definido en su navegador un tamaño de letra muy grande y nuestra web la muestra de esta forma, así que si hemos definido el tamaño de la letra con unidades relativas, otro puntito..

11.8.2 Creación de contenidos accesibles

Si usáis wordpress, lo normal es marcar esta opción como “Pasa” puesto que tanto con su interfaz como mediante otras herramientas, es más que posible crear contenidos accesibles

11.8.5 Plantillas

Nos indica que si nuestra herramienta de edición proporciona plantillas, aquellas que cumplan con los requisitos, tienen que estar identificadas como accesibles. Así que puesto que wordpress tiene plantillas diseñadas y etiquetadas especificamente para accesibilidad, me la jugaría a un “pasa”

https://es.wordpress.org/themes/tags/accessibility-ready/

PESTAÑA WEB

Aquí viene lo duro, nada menos, que 50 requisitos, pero no tendremos que pasar todos, así que os indicará los más sencillos de conseguir:

9.1.1.1 Contenido no textual

Cómo nuestras webs son sencillas, básicamente lo cumpliremos poniendo el atributo alt en nuestras imágenes.Para comprobar este apartado, os recomiendo el plugin Axe Dev tools de chrome, que os será muy útil para comprobar este requisito y otros https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd

9.1.2.1. Solo audio y video (grabado)

Realmente este apartado deberíamos marcarlo como “No aplica” porque no hemos incluido ni audio ni video, pero puesto que la condición es “ser página web”, lo ponemos como “pasa” para evitar problemas.

9.1.2.2 Subtítulos (grabados)

Lo mismo que el punto anterior.

9.1.2.3 Audiodescripcion o medio alternativo

Más de lo mismo, marcamos “Pasa”

9.1.2.5 Audiodescripción

Otra más que pasamos

Cómo véis estos puntos son un regalo si huimos de incluir voz y video…

9.1.3.1 Información y relaciones

¿Cómo pasamos este requisito? Básicamente, definiendo las secciones de nuestra web (cabecera, navegación, pie, etc..), utilizando para ello los “ARIA landmarks” https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11.html

El plugin de Axe Dev-Tools también os ayudará a identificar si cumplís este requisito.

9.1.3.2 Secuencia significativa

Básicamente quiere decir, “coloca las cosas en un orden lógico” y no utilices técnicas css u otros trucos para posicionar elementos en su correspondiente orden lógico porque podría alterar cómo lo perciben los dispositivos adaptados por ejemplo a personas ciegas. Truco: Deshabilita las css y mira si toda la información la lees en el orden correcto, si es así, “Pasa”

9.1.3.3 Características sensoriales

Cualquier referencia a forma, color, tamaño o posición de un objeto, debe de ir acompañada de información adicional para poder identificarla sin necesidad de necesitar identificar esa forma, color, tamaño etc… Ejemplo: Si ponemos un texto “Presione el botón rojo”, un usuario que no perciba bien los colores, no tendrá ni idea de qué presionar. pero si ponemos el texto “Presione el botón rojo, etiquetado como “Play” y al botón le ponemos el texto Play, podrá identificarlo sin conocer ese color. Con no hacer mención a nada, libramos, “Pasa”

9.1.3. Orientación

¿Lo ves en una tablet? ¿puedes visualizarlo en vertical y horizontal? Otro punto más..

9.1.3.5 Identificación del propósito de entrada

Únicamente aplica cuando usamos campos de entrada (osea “input”), si no los usamos, le damos a “Pasa” y si los usamos, hay que hacer que sean fáciles de rellenar, para eso, utilizamos el atributo “autocomplete” del propio input.

9.1.4.1 Uso del color

Muy parecido al requisito 9.1.3.3, se trata de evitar que únicamente el color se use cómo medio para transmitir una información. Ejemplo: Si Usamos un botón verde para aceptar y uno rojo para cancelar, etiquetemos ambos botones con sus correspondientes textos “Aceptar” y “Cancelar”. Otro puntito más con muy poco esfuerzo…

9.1.4.2 Control del audio

¿Control de qué? “Pasa”

9.1.4.4 Cambio de tamaño del texto

Aumenta el zoom de tu web a un 200% ¿se puede navegar por ella? pues otro punto más.

9.1.4.5 Imágenes de texto

Básicamente quiere decir, que para transmitir información, utilicemos texto, en lugar de usar una imágenes que contengan ese texto. Los logotipos están admitidos.

9.1.4.10 Reajuste del texto

Si aumentas el zoom, el contenido debería de poder verse sin necesidad de desplazarse en dos dimensiones. Este punto es fácil de conseguir con un diseño responsive.

Forma de comprobarlo: Ajustar el tamaño de ventana 1024 * 1080 y hacer un 400% de zoom. Para el contenido que se lea en horizontal, comprobar que no se genera scroll vertical. Para el contenido que se lea en vertical, comprobar que no se genera scroll horizontal.

9.1.4.13 Contenido señalado con el punto o que tiene el foco

Me ha costado refrescar este punto, pero básicamente aplica a submenús, así que con que los hagáis con un poco de cabeza (vamos, que no tapen otros elementos, por ejemplo), punto para la saca.

9.2.1.2 Sin trampas para el foco del teclado

Este punto lo que nos pide exactamente es que si se puede utilizar el teclado para moverse por la web, este no quede “atrapado” de manera que solo podamos cambiar el foco a través de por ejemplo el ratón. Con páginas simples, es fácil de rascar este puntito, así que no os calentéis a añadir plugins o embeber widgets con funcionalidades complejas.

9.2.2.1 Tiempo ajustable

Este requisito que parece complejísimo se soluciona fácilmente con no aplicar límite de tiempo a ninguna acción de nuestra web. ¡Puntito!

9.2.2.2 Poner en pausa, detener, ocultar

Puesto que trata sobre información en movimiento, parpadeo, desplazamiento, etc.. trataremos de evitar el uso de estas animaciones para obtener un puntito más. A mí gusto, esto debería ser un “No aplica”, pero puesto que la condición es ser página web, ponemos “Pasa”

9.2.31. Umbral de tres destellos o menos

Dejaros de destellos y rascad este punto.

9.2.4.2 Titulado de páginas

Poner title en todas las páginas os regalará este puntito. Si no lo estás poniendo, cambiad de profesión.

9.2.4.3 Orden del foco

Usad el tabulador para ver el recorrido de los elementos de la página (enlaces, inputs, botones etc..) ¿es el orden lógico? otro punto.

9.2.4.4 Propósito de los enlaces

Los enlaces vienen perfectamente descritos y se entienden bien sea por si solos o gracias a su contexto. Podemos conseguirlo fácilmente usando el atributo alt en aquellas imágenes que sirven de enlace y generando todos los textos de los links de la web con sentido.

9.2.4.5 Múltiples vías

Si incluimos una página de mapa de sitio, cumplimos con este requisito.

9.2.4.6 Encabezados y etiquetas

Poco más que decir, los encabezados son de por sí un factor relevante también para el SEO. Ningún programador debería fallar en esto…

9.3.1.1 Idioma de la página

Otro puntito por poner “html lang=”es””

9.3.1.2 Idioma de las partes

Si utilizamos el mismo idioma siempre, este requisito es un regalo, si no, deberemos identificar el cambio con el correspondiente atributo lang

9.3.2.3 Navegación coherente

Este requisito evalúa si la estructura de navegación se repite en todas las páginas. Es decir, si en la home hay un menú superior, ese menú se repite en el resto de páginas en el mismo orden. Este punto es otro regalo.

9.3.2.4 Identificación coherente

Los elementos de la web, como botones, enlaces, etiquetas, etc que tengan la misma funcionalidad se identifican de la misma manera y son coherentes. Vamos que si tienes un botón “contacto” que va la página de contacto en la parte superior y en la parte inferior vuelve a aparecer, llámalo por el mismo nombre para no generar confusión. Un punto de regalo.

9.3.3.1 Identificación de errores

Si tenéis algún formulario de contacto, aseguraros que mostráis los debidos mensajes de “este campo es requerido”. Para mi gusto este requisito debería ser condicional, porque habrá muchas webs que no tengan ningún tipo de validación.

9.3.3.2 Etiquetas o instrucciones

Con poner etiquetas descriptivas en todos los inputs, conseguiremos este punto.

¡y hasta aquí! básicamente con estos puntos, habremos conseguido obtener un “parcialmente conforme”, luego dejo a vuestro gusto intentar conseguir más nota.

UNOS ULTIMOS APUNTES:

• No soy un "experto en accesibilidad", tengo bastantes nociones por haber trabajado con sus requisitos en mi juventud y porque me he repasado cada pauta para realizar este artículo. Con esto quiero decir, que es posible que algún punto no esté explicado correctamente (así que, no me tiréis al foso de los leones, gracias ^^)
• Hay muchos requisitos, sobre todos los relacionados con audio, video, procesos o formularios, que a mí gusto deberían ser marcados como "no aplica", pero las instrucciones de la excel no lo dejan claro
• Si usáis wordpress, usad un tema de los marcados como "preparados para accesibilidad", os ahorrará muchos disgustos. Yo uso un tema accesible para wordpress muy concreto, que funciona genial, podemos compartir gastos si os interesa
• Sobre el punto anterior, estoy detectando demasiadas agencias que pasan de hacer sus webs accesibles o de usar un tema accesible.... ay mamina... cuanto llantos va a haber luego. Tened en cuenta que TODAS LAS SUBVENCIONES suelen estar sujetas a auditorias, en concreto, para el kit digital se preveen auditar un 10% de los expedientes. Si resultáis agraciados en este sorteo y no cumplís accesiblidad, ya os veo rebuscando entre los cojines del sofá para devolver el dinero. NO OS JUGUÉS EL TIPO, POR FAVOR
• La pestaña "Definición de Ámbito no se puede rellenar, la información que piden (como nombre de la URA) aplica en el caso de administraciones públicas, así que habrá que esperar a que solucionen este error. (Esto ha sido actualizado, ya no viene)

Durante el tiempo que ha pasado desde que he escrito este artículo he recibido cientos de consultas tanto via email, como por los comentarios del mismo, consultas que he intentado resolver, pero actualmente, me es imposible compaginar esto con el trabajo. He tomado la decisión de dejar de resolver dudas específicas sobre esta cuestión, no obstante, por un módico precio, puedo ofreceros un servicio de consultoría sobre justificación de accesiblidad web y así poder seguir pagando facturas ;)

Si queréis saber más, aquí tenéis en enlace a mi servicio de auditoria de accesiblidad web