Kit digital: Accesibilidad web, ¿cómo cumplir con los criterios?
Hoy venimos con un post muy práctico para todos aquellos que vais a desarrollar una nueva web o e-commerce con el bono Kit digital. Y es que, el Kit digital tiene asociadas una serie de obligaciones que dificultan especialmente algunas tareas, entre ellas el cumplimiento de los criterios de accesibilidad web.
Lo primero que queremos decir es que desde BusinessGo celebramos esta iniciativa que, aunque suponga un gran trabajo de desarrollo web, entendemos que es respetuosa con la ética que nos exige a todos como profesionales, y siempre nos mostramos a favor de que todos los sitios web se diseñen y se desarrollen con el máximo respeto a las limitaciones personales de cualquier tipo. Poco a poco vamos en ese camino.
Lo cual no quita que cumplir con esos criterios cree una cierta incertidumbre e inseguridad, ante la duda de si las webs se están haciendo de forma correcta para cumplir con los requisitos del programa,
Recientemente se ha publicado el “Informe de revisión de accesibilidad sitios web”, de caracter obligario para las webs y tiendas online de clientes de los segmentos 2 y 3. Y bien, ¿en qué consiste este informe? El informe en cuestión es un análisis exahustivo para saber si una web cumple o no con las pautas de accesibilidad web que se son requisitos en la convocatoria del Kit digital. El problema reside en que estas pautas son de un carácter muy técnico, y muy dificiles de entender por cualquier agente digitalizador, por lo que completar este informe se convierte en algo bastante complicado.
Para ayudar a ello, vamos a explicar un poco más sobre accesibilidad web y sobre cómo cumplir con los requisitos.
Índice del artículo
¿En qué consiste la accesibilidad web?
Lo que dice la RAE:
La norma y los niveles de accesibilidad web
El W3C (World Wide Web Consortium) es un organismo internacional que se encarga de desarrollar normas y directrices web diseñadas para garantizar el crecimiento a largo plazo de la web; es decir, es el encargado de establecer los estándares o normas llamados WCAG 2.0 y WCAG 2.1, los cuales son estándares técnicos estables y de referencia(son consideradas pautas de accesibilidad para el contenido en la web, enfocadas a los webmasters y diseñadores). Estos contienen 12-13 pautas que se agrupan en cuatro principios: perceptible, operable, comprensible y robusto.
A raíz de estos principios encontramos varios niveles de cumplimiento o criterios de conformidad que determinan el grado de accesibilidad de un portal. Estos criterios son comprobables mediante tres niveles, cuantas más «A», más accesible será nuestro sitio web.
- Nivel A: Mínimo para que una web sea accesible. Elementos básicos como subtítulos, alt en imágenes, colores legibles, etc…
- Nivel AA: Un paso más más allá para acercarnos a todos los públicos. Subtítulos para audios, visualización del contenido en orientación horizontal y vertical, cambiar el tamaño del texto, encabezados o sugerencias de corrección. Este es el nivel al que tenemos que llegar en las webs del Kit digital.
- Nivel AAA: El nivel más alto, y por lo tanto el más difícil. Este nivel incluye lenguaje de señas, uso restringido de las imágenes de texto, avisos sobre tiempos de espera a los usuarios, localizaciones, etc…
Estos niveles lo forman unas pautas, ¿pero qué implican estas pautas en el desarrollo de una web que se beneficia del Kit digital? Vamos a explicarlo de la mejor forma posible, en la siguiente tabla.
Cómo desarrollar una web para cumplir con el kit digital
NivelPautaExplicación¿Cómo me afecta?
A | 1.1.1 Contenido sin texto | Todo el contenido que no es de texto que se presenta al usuario tiene una alternativa de texto que cumple un propósito equivalente. | ALT imágenes, vídeos e iconos |
A | 1.2.1 Solo audio y solo video (pregrabado) | Para medios pregrabados solo de audio y solo de video pregrabados, lo siguiente es cierto, excepto cuando el audio o el video es una alternativa de medios para el texto y está claramente etiquetado como tal. | Subtítulos pregrabados de vídeo con audio, o transcripción de audio |
A | 1.2.2 Subtítulos (pregrabados) | Se proporcionan subtítulos para todo el contenido de audio pregrabado en medios sincronizados, excepto cuando el medio es una alternativa de medios para el texto y está claramente etiquetado como tal. | Subtítulos pregrabados de vídeo con audio, o transcripción de audio |
A | 1.2.3 Descripción de audio o alternativa de medios (pregrabada) | Se proporciona una alternativa para los medios basados en el tiempo o la descripción de audio del contenido de video pregrabado para los medios sincronizados, excepto cuando los medios son una alternativa de medios para el texto y están claramente etiquetados como tales. | Descripción escrita de vídeo o audio o mostrar un equivalente sin pérdida de información |
AA | 1.2.4 Subtítulos (en vivo) | Se proporcionan subtítulos para todo el contenido de audio en vivo en medios sincronizados. | Subtítulos en vivo de vídeo o audio |
AA | 1.2.5 Descripción de audio (pregrabado) | Se proporciona descripción de audio para todo el contenido de video pregrabado en medios sincronizados. | Descripción escrita de vídeo o audio |
A | 1.3.1 Información y Relaciones | La información, la estructura y las relaciones transmitidas a través de la presentación se pueden determinar mediante programación o están disponibles en el texto | Adaptar el contenido a todos los navegadores, y formatos |
A | 1.3.2 Secuencia significativa | Cuando la secuencia en la que se presenta el contenido afecta su significado, se puede determinar mediante programación una secuencia de lectura correcta. | Adaptar la web para que todo aparezca en un orden cronólogico y ordenado. Esto se refiere a etiquetas HTML en estructura jerárquica y el orden de publicación de artículos por ejemplo. |
A | 1.3.3 Características sensoriales | Las instrucciones proporcionadas para comprender y operar el contenido no se basan únicamente en las características sensoriales de los componentes, como la forma, el color, el tamaño, la ubicación visual, la orientación o el sonido. | Maquetar el contenido conforme a un orden lógico. Ejemplo: Un botón da igual si va a la derecha o centrado, pero va inmediatamente después de un texto que diga: Click en el siguiente botón. |
AA | 1.3.4 Orientación | El contenido no restringe su visualización y funcionamiento a una única orientación de visualización, como vertical u horizontal, a menos que sea esencial una orientación de visualización específica. | Responsive horizontal/vertical |
AA | 1.3.5 Identificar el propósito de entrada | El propósito de cada campo de entrada que recopila información sobre el usuario se debe manifestar con claridad. | Un formulario de contacto con autocompletar Un pedido de con dirección de envío y facturación separada Un formulario de contacto que usa íconos |
A | 1.4.1 Uso del color | El color no se utiliza como el único medio visual para transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento visual. | Los colores no pueden servir para mostrar información relevante. Por ejemplo, en un formulario no podemos marcar los campos obligatorios con color rojo, habrá que usar además un icono que exprese que ese campo es obligatorio |
A | 1.4.2 control de sonido | Si cualquier audio en una página web se reproduce automáticamente durante más de 3 segundos, hay un mecanismo disponible para pausar o detener el audio, o hay un mecanismo disponible para controlar el volumen de audio independientemente del nivel de volumen general del sistema. | Si la web tiene audio que se reproduce automáticamente tiene que tener algo para que el usuario pueda anular ese sonido. |
AA | 1.4.3 Contraste (mínimo) | La presentación visual de texto e imágenes de texto tiene una relación de contraste de al menos 4,5:1 | Proporcionar suficiente contraste entre el texto y su fondo para que pueda ser leído por personas con una visión moderadamente baja. Se excluye el texto que es decorativo. El texto con 14pt o 18pt puede tener un contraste bajo. |
AA | 1.4.4 Cambiar el tamaño del texto | A excepción de los subtítulos y las imágenes de texto, el texto se puede cambiar de tamaño sin tecnología de asistencia hasta en un 200 por ciento sin pérdida de contenido o funcionalidad. | Hay que cerciorarse de que si el usuario agranda el tamaño del texto con zoom, la web sigue siendo legible aunque se introduzcan barras de desplazamiento. |
AA | 1.4.5 Imágenes de texto | Si las tecnologías que se utilizan pueden lograr la presentación visual, se utiliza texto para transmitir información en lugar de imágenes de texto. | Sólo pueden añadirse imágenes con texto en los siguientes casos |
AA | 1.4.10 reflujo | El contenido se puede presentar sin pérdida de información o funcionalidad, y sin necesidad de desplazarse en dos dimensiones | Responsive |
AA | 1.4.11 Contraste sin texto | La presentación visual de lo siguiente tiene una relación de contraste de al menos 3:1 frente a los colores adyacentes. | Definir con colores con contraste los elementos. |
AA | 1.4.12 Espaciado de texto | En el contenido implementado mediante lenguajes de marcado que admiten las siguientes propiedades de estilo de texto, no se produce pérdida de contenido o funcionalidad al configurar todo lo siguiente y no cambiar ninguna otra propiedad de estilo. | Altura de línea (interlineado) a al menos 1,5 veces el tamaño de fuente; Espaciar los siguientes párrafos al menos 2 veces el tamaño de la fuente; Espaciado entre letras (seguimiento) de al menos 0,12 veces el tamaño de la fuente; Espaciado entre palabras de al menos 0,16 veces el tamaño de la fuente.El texto no se pisa, no se corta |
AA | 1.4.13 Contenido en Hover o Focus | Donde recibir y luego quitar el puntero o el foco del teclado desencadena contenido adicional para que se vuelva visible y luego se oculte. | Representar cambio en el hover o focus de un elemento sin alterar la información sensible que se muestra. Añadir labels o titles. |
A | 2.1.1 Teclado | Toda la funcionalidad del contenido se puede operar a través de una interfaz de teclado sin requerir tiempos específicos para pulsaciones de teclas individuales, excepto cuando la función subyacente requiere una entrada que depende de la ruta de movimiento del usuario y no solo de los puntos finales. | Que todo sea fácil de manejar con el teclado, a excepción de aquello que requiere de una entrada que dependa de una ruta de movimiento. |
A | 2.1.2 Sin trampa de teclado | Si el foco del teclado se puede mover a un componente de la página usando una interfaz de teclado, entonces el foco se puede alejar de ese componente usando solo una interfaz de teclado y, si requiere más que teclas de flecha o de tabulación sin modificar u otros métodos de salida estándar, se informa al usuario del método para alejar el foco. | Cuidado con incrustar en la web elementos que atrapen el funcionamiento del teclado, como un widget de un calendario, un appler, un iframe o un cuadro de diálogo modal. |
A | 2.1.4 Atajos de teclas de caracteres | Si se implementa un atajo de teclado en el contenido usando solo letras (incluidas letras mayúsculas y minúsculas), signos de puntuación, números o símbolos. | No poner accesos directos con un teclado que pueda hacer perder al usuario en la página. |
A | 2.2.1 Tiempo ajustable | Para cada límite de tiempo establecido por el contenido. | No incluir nada en la web que funcione con tiempo. Por ejemplo, una redirección a la página de inicio en la página de gracias que se produce a los 10s. Si fuera importante añadir una funcionalidad de este tipo, se tiene que añadir un botón que permita al usuario bloquear la acción. |
A | 2.2.2 Pausa, Detener, Ocultar | Para información en movimiento, parpadeo, desplazamiento o actualización automática. | Todo movimiento o actualización automática del sitio web debe ser poder ser bloqueado. Lo mejor, no poner ni animaciones ni nada similar. |
A | 2.3.1 Tres destellos o por debajo del umbral | La intención de este Criterio de Conformidad es permitir que los usuarios accedan al contenido completo de un sitio sin inducir convulsiones debido a la fotosensibilidad. | No poner nada parpadeante o o con destello. |
A | 2.4.1 Bloques de derivación | Hay un mecanismo disponible para eludir bloques de contenido que se repiten en varias páginas web. | Inlcuir botones que lleven al usuario a contenido principal de la página en la que se encuentra, por ejemplo un sitio web de comercio electrónico incluye una larga lista de filtros antes de la lista de resultados de búsqueda. Un enlace encima de la lista permite a los usuarios omitir los filtros y acceder rápidamente a los resultados del producto. |
A | 2.4.2 Página titulada | Las páginas web tienen títulos que describen el tema o el propósito. | Poner títulos |
A | 2.4.3 Orden de enfoque | Si se puede navegar secuencialmente por una página web y las secuencias de navegación afectan el significado o la operación, los componentes enfocables reciben el enfoque en un orden que preserva el significado y la operatividad. | Navegación adecuada |
A | 2.4.4 Propósito del enlace (en contexto) | El propósito de cada enlace se puede determinar a partir del texto del enlace solo o del texto del enlace junto con su contexto de enlace determinado mediante programación, excepto cuando el propósito del enlace sea ambiguo para los usuarios en general. | Al hacer click en un enlace sabe dónde va |
AA | 2.4.5 Múltiples formas | Hay más de una manera disponible para ubicar una página web dentro de un conjunto de páginas web, excepto cuando la página web es el resultado o un paso en un proceso. | Hay enlaces en cada página web para avanzar o retroceder secuencialmente a través de las páginas web. Además, cada página web contiene una lista de enlaces para llegar a cada una de las otras páginas web. También se considera un buscador como enlazado múltiple. |
AA | 2.4.6 Encabezados y etiquetas | Los encabezados y las etiquetas describen el tema o el propósito. | Los elementos de encabezado describen el propósito de la página |
AA | 2.4.7 Enfoque Visible | Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible. | Cuando los campos de texto reciben el foco, se muestra una barra vertical en el campo, lo que indica que el usuario puede insertar texto, O se resalta todo el texto, lo que indica que el usuario puede escribir sobre el texto. Cuando un control de la interfaz de usuario recibe el foco, se muestra un borde visible a su alrededor. |
A | 2.5.1 Gestos de puntero | Toda la funcionalidad que utiliza gestos multipunto o basados en rutas para la operación se puede operar con un solo puntero sin un gesto basado en rutas, a menos que sea esencial un gesto multipunto o basado en rutas. | Se refiere a por ejemplo un sitio que incluya un mapa. Este mapa admite el gesto de pellizcar para hacer zoom, pero también debe permitir poder hacerlo con el puntero a través de botones. |
A | 2.5.2 Cancelación de puntero | Para la funcionalidad que se puede operar usando un solo puntero. | Poder revertir la acción errónea de clic mediante acciones que desencadenen la cancelación de ese evento (levantar el dedo en posición ascendente, arrastrar y soltar, etc…) |
A | 2.5.3 Etiqueta en nombre | Para los componentes de la interfaz de usuario con etiquetas que incluyen texto o imágenes de texto, el nombre contiene el texto que se presenta visualmente. | garantizar que las palabras que etiquetan visualmente un componente también sean las palabras asociadas con el componente mediante programación. Ejemplo, Etiqueta label, button, etc… |
A | 2.5.4 Actuación de movimiento | La funcionalidad que puede ser operada por el movimiento del dispositivo o el movimiento del usuario también puede ser operada por los componentes de la interfaz de usuario y la respuesta al movimiento puede desactivarse para evitar la activación accidental. | Interfaz compatible: el movimiento se utiliza para operar la funcionalidad a través de una interfaz compatible con accesibilidad. El movimiento es esencial para la función y hacerlo invalidaría la actividad. |
A | 3.1.1 Idioma de la página | El idioma humano predeterminado de cada página web se puede determinar mediante programación. | Una página web producida en Alemania y escrita en HTML incluye contenido tanto en alemán como en inglés, pero la mayor parte del contenido está en alemán. El idioma humano predeterminado se identifica como alemán (de) por el atributo lang en el elemento html. |
AA | 3.1.2 Idioma de las partes | El lenguaje humano de cada pasaje o frase en el contenido se puede determinar programáticamente a excepción de los nombres propios, términos técnicos, palabras de lenguaje indeterminado y palabras o frases que se han convertido en parte de la lengua vernácula del texto circundante inmediato. | Marcar con etiquetas HTML Lang, los elementos que aparezcan en la web que no se correspondan con el idioma principal. |
A | 3.2.1 Enfocado | Cuando cualquier componente de la interfaz de usuario recibe el foco, no inicia un cambio de contexto. | Poner elementos: focus en los elementos como menú, o formularios. |
A | 3.2.2 en la entrada | Cambiar la configuración de cualquier componente de la interfaz de usuario no provoca automáticamente un cambio de contexto a menos que se haya informado al usuario sobre el comportamiento antes de usar el componente. | Facilitar la entrada de elementos en un formulario o cualquier cmapo de entrada, por ejemplo, separando los dígitos de un teléfono, añadiendo el email con el @, etc. |
AA | 3.2.3 Navegación consistente | fomentar el uso de una presentación y un diseño consistentes para los usuarios que interactúan con contenido repetido dentro de un conjunto de páginas web y necesitan ubicar información o funcionalidad específica más de una vez. | Repetir buscadores, manú de navegación, etc en general ubicar los elementos de navegación principale so de más uso de forma reiterada en cada parte de la web o cada página. |
AA | 3.2.4 Identificación consistente | Los componentes que tienen la misma funcionalidad dentro de un conjunto de páginas web se identifican de forma coherente. | Usar elementos como iconos o aria-label que ayuden a la compresión del texto o de funcionalidades. |
A | 3.3.1 Error de identificación | Si se detecta automáticamente un error de entrada, se identifica el elemento que tiene el error y se describe el error al usuario en texto. | Identificar los campos de errores en el envío de un formulario, tanto con información escrita como visual. |
A | 3.3.2 Etiquetas o instrucciones | Se proporcionan etiquetas o instrucciones cuando el contenido requiere la intervención del usuario. | Añadir instrucciones o etiquetas que identifiquen los controles en un formulario para que los usuarios sepan qué datos de entrada se esperan, por ejemplo con placeholder, o titles. |
AA | 3.3.3 Sugerencia de error | Si se detecta automáticamente un error de entrada y se conocen sugerencias para su corrección, estas sugerencias se proporcionan al usuario, a menos que pongan en peligro la seguridad o el propósito del contenido. | Garantizar que los usuarios reciben sugerencias adecuadas para corregir un error de entrada. Por ejemplo, Un campo de entrada requiere que se ingrese un nombre de mes. Si el usuario ingresa «12», las sugerencias de corrección pueden incluir |
AA | 3.3.4 Prevención de Errores (Legal, Financiero, Datos) | Para las páginas web que generan compromisos legales o transacciones financieras para el usuario, que modifican o eliminan datos controlables por el usuario en los sistemas de almacenamiento de datos, o que envían respuestas de prueba del usuario. | Asegurarnos que en un ecommmerce se visualiza la coonfirmación de un pedido para que el comprador pueda asegurarse de que no ha cometido ningún error en su compra. |
AA | 4.1.1 análisis | En el contenido implementado mediante lenguajes de marcado, los elementos tienen etiquetas de inicio y finalización completas, los elementos se anidan de acuerdo con sus especificaciones, los elementos no contienen atributos duplicados y cualquier ID es único, excepto donde las especificaciones permitan estas características. Nota 1: las etiquetas de inicio y finalización a las que les falta un carácter crítico en su formación, como un paréntesis angular de cierre o una comilla de valor de atributo que no coincide, no están completas. | Usar etiquetas de marcado correctas y actualizadas (No usar <b>), así como una buena estructura HTML, y no dejar etiquetas abiertas, etc para que los sistemas de ayuda a la comprensión detecten correctamente el lenguaje. |
AA | 4.1.2 Nombre, Rol, Valor | Para todos los componentes de la interfaz de usuario (incluidos, entre otros: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función se pueden determinar mediante programación; los estados, las propiedades y los valores que puede establecer el usuario se pueden establecer mediante programación; y la notificación de cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.Nota 1: este criterio de éxito es principalmente para autores web que desarrollan o escriben sus propios componentes de interfaz de usuario. Por ejemplo, los controles HTML estándar ya cumplen este criterio de éxito cuando se usan de acuerdo con las especificaciones. | Cuando creamos etiquetas HTML personalizadas, tenemos que incluir etiquetas de estado para que las tecnologías de asistencia sepan leer el cntenido. Se trata de añadir estados, las propiedades y los valores. |
AA | 4.1.3 Mensajes de estado | En el contenido implementado mediante lenguajes de marcado, los mensajes de estado se pueden determinar mediante programación a través del rol o las propiedades, de modo que se puedan presentar al usuario mediante tecnologías de asistencia sin recibir atención. | Hacer que los usuarios sean conscientes de los cambios importantes en el contenido a los que no se les presta atención, y hacerlo de una manera que no interrumpa innecesariamente su trabajo.Ejemplos Después de que un usuario presiona un botón Buscar, el contenido de la página se actualiza para incluir los resultados de la búsqueda, que se muestran en una sección debajo del botón Buscar. El cambio de contenido también incluye el mensaje «Se devolvieron 5 resultados» cerca de la parte superior de este nuevo contenido. A este texto se le asigna un papel apropiado para un mensaje de estado. Un lector de pantalla anuncia: «Cinco resultados devueltos». Después de que un usuario presiona el botón Agregar al carrito de compras, una sección de contenido cerca del ícono del carrito de compras agrega el texto «5 artículos». Un lector de pantalla anuncia «Cinco artículos» o «Carrito de compras, cinco artículos». Después de que un usuario ingresa un texto incorrecto en una entrada denominada Código postal, aparece un mensaje sobre la entrada que dice «Entrada no válida». El lector de pantalla anuncia «Entrada no válida» o «Código postal, entrada no válida». Después de que un usuario activa un proceso, aparece un icono que simboliza «ocupado» en la pantalla. El lector de pantalla anuncia «aplicación ocupada». Una aplicación muestra una barra de progreso para indicar el estado de una actualización. Al elemento se le asigna un rol adecuado. El lector de pantalla proporciona anuncios intermitentes del progreso. Después de que un usuario envía un formulario, se agrega texto al formulario existente que dice «Su formulario se envió correctamente». El lector de pantalla anuncia el mismo mensaje. Después de que un usuario complete un formulario sin éxito porque algunos de los datos tienen un formato incorrecto, se agrega texto al formulario existente que dice «5 errores en la página». El lector de pantalla anuncia el mismo mensaje. Después de que un usuario coloca una foto en un álbum en una aplicación de fotos en línea, una barra de bocadillos muestra el mensaje «Guardado en el álbum ‘Boda'», que también lee un lector de pantalla. |
Recomendaciones para desarrollar una web accesible
Además de seguir todas estas pautas, te será mucho más fácil cumplir con los estándares si:
- Usa wordpress: Este CMS ya viene preparado en muchos ítems para cumplir los criterios de accesibilidad. Además existen temas ya preparados para accesibilidad, lo que os hará la vida mucho más fácil cuando desarrolléis vuestra web.
- Utilizad herramientas como achecker, no sirve como método 100% fiable, ni para justificar todo lo que nos pide el Kit digital, pero si que nos puede servir para comprobar si se nos ha pasado por alto algo que nos haga incumplir cualquier norma de accesibilidad necesaria.
- Usa la Documentación técnica de W3C, esta documentación es bastante tediosa y a veces hasta un poco confusa, pero cuando tengamos dudas concretas en el desarrollo de nuestra web nos servirá para saber cómo hacerlo correctamente ya que nos proporciona ejemplos, fallos comunes, y aplicaciones.
- Respecto al “Informe de revisión de accesibilidad sitios web”, obligatorio para justificar la subvención en los segmentos 2 y 3, es un informe muy denso y que en la mayoría de los casos, sobre todos los hacen alusión a audio, video o procesos, deberían de estar acompañados de una nota de «no aplica» ya que son funciones complejas que se salen del desarrollo de una web básica como las que en su mayoría todos haremos dentro de los kit digitales. Por eso, aunque veamos un documento muy largo y complejo de completar, será más fácil si la gran mayoría de ítems van acompañados de «no se aplica».
Esperamos que esta guía os resulte de utilidad no solo en el marco del Kit digital, sino en general, pues desarrollar webs accesibles es un compromiso que todos debemos asumir. Por último, reordaros que en Businessgo somo agentes digitalizadores y contamos con un departamento especializado en tramitación de subvenciones y ayudas para empresas. No dudes en contactarnos para que la financiación de tu proyecto se un exito.