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 uactores
- 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 digitalizados en cuanto a justificaciones se refiere
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 que contiene información que no está dirigida a ser rellenada por un agente digitalizador (mientras tanto, los tiempos para realizar las justificaciones siguen corriendo). Esta herramienta deberia 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) al 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, 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:
- La página de inicio (obligatorio)
- La declaración de accesibilidad (obligatorio)
- Una sección cualquiera que marcaremos en la columna tipo como “Aleatoria”
- 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.
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 poner 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”
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, os servirá para 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
Básicamente dice que si aumentas el zoom el contenido puede 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 venta a 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.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 imágenes que enlazan y escribiendo enlaces 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
- 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.
