Índice de contenido...• elementos reconocibles y familiares (como enlaces subrayados). •...

Accesibilidad y usabilidad en los contenidos web

Índice de contenido1. ¿Qué es la accesibilidad?..................................................................................................................3

1.1 ¿De qué discapacidades estamos hablando?..............................................................................31.2 ¿Cómo afrontamos dichas discapacidades?...............................................................................41.3 Implicaciones legales.................................................................................................................5

2. Particularidades de escribir para la web...........................................................................................62.1 Longitud de la línea...................................................................................................................62.2 Contraste....................................................................................................................................92.3 Color de los enlaces.................................................................................................................102.4 Espacio blanco.........................................................................................................................102.5 Divisiones y retornos de carro en blanco.................................................................................102.6 Alineación de los textos...........................................................................................................102.7 Tamaño de letra........................................................................................................................102.8 No copies, crea y escribe como un humano, para “tus” humanos...........................................112.9 Editores (CKEditor y similares)...............................................................................................11

3. HTML semántico............................................................................................................................123.1 Encabezados.............................................................................................................................13

3.1.1 Ej:Texto con pocos encabezados......................................................................................143.1.2 Ej: Texto correctamente estructurado...............................................................................14

3.2 Estructura del contenido..........................................................................................................163.2.1 Párrafos............................................................................................................................163.2.2 Listas................................................................................................................................163.2.3 Citas.................................................................................................................................18

3.3 Tablas.......................................................................................................................................183.3.1 Tablas con una única cabecera.........................................................................................193.3.2 Tablas con dos cabeceras..................................................................................................203.3.3 Tablas con encabezados irregulares.................................................................................22

3.4 Mejora de la accesibilidad en tablas........................................................................................254. Multimedia accesibles....................................................................................................................28

4.1 Imágenes..................................................................................................................................284.1.1 Imágenes informativas.....................................................................................................284.1.2 Imágenes decorativas.......................................................................................................294.1.3 Imágenes funcionales.......................................................................................................314.1.4 Imágenes de texto.............................................................................................................324.1.5 Imágenes complejas.........................................................................................................33

4.2 Enlaces.....................................................................................................................................384.2.1 No uses la palabra enlaces en tus enlaces........................................................................384.2.2 No utilices mayúsculas de forma masiva.........................................................................384.2.3 No uses una url como el texto de un enlace.....................................................................384.2.4 Usa el atributo title cuando el texto del enlace no sea descriptivo...................................384.2.5 Usar rel="nofollow noopener noreferrer" cuando el target sea “_blank”........................384.2.6 Usa aria-label="" cuando el contenido del enlace no sea texto o imagen........................39

5. Herramientas de validación............................................................................................................405.1 Integradas en el navegador (Google chrome lighthouse)........................................................405.2 Instalables como extensión (WAVE Evaluation Tool).............................................................42

1 / 46


5.3 Institucionales (Observatorio de accesibilidad).......................................................................456. Más información.............................................................................................................................46

Índice de ilustracionesIlustración 1: 1.3 Principales fases de implantación del RD 1112/2018..............................................5Ilustración 2: 2.2 Peor opción...............................................................................................................7Ilustración 3: 2.2 Solución algo mejor.................................................................................................8Ilustración 4: 2.2 Algo mejor................................................................................................................8Ilustración 5: 2.9 Editor CKEditor. Anterio fck editor........................................................................11Ilustración 6: 3. Vista de html en CKEditor. Botón <>......................................................................12Ilustración 7: Demasiados párrafos seguidos.....................................................................................14Ilustración 8: El resultado mejora mucho cuando ordenas los párrafos con encabezados.................15Ilustración 9: Lista estandar................................................................................................................16Ilustración 10: Lista ordenada............................................................................................................17Ilustración 11: Listas anidadas............................................................................................................17Ilustración 12: Listas de definición....................................................................................................18Ilustración 13: Citas (notar que se muestra sin estilos)......................................................................18Ilustración 14: Citas en línea. Semántica sin presentación.................................................................18Ilustración 15: La información tabular con encabezados gana en todos los aspectos........................19Ilustración 16: Otro tipo de ordenación para la información tabular.................................................20Ilustración 17: Se pueden crear tablas muy complejas que mantengan la semántica.........................21Ilustración 18: La ordenación de los encabezados es relevante para mantener la semántica.............22Ilustración 19: Agrupar columnas permita otras ordenaciones..........................................................23Ilustración 20: Información agrupada por filas y columnas...............................................................25Ilustración 21: Los iconos son una constante en las webs modernas.................................................28Ilustración 22: Un ejemplo de texto representativo............................................................................29Ilustración 23: Las imágenes son accesorias......................................................................................29Ilustración 24: Imágenes que solo decoran........................................................................................30Ilustración 25: Enlace con imagen que no necesita texto...................................................................31Ilustración 26: El texto complementa al 100% a la imagen...............................................................31Ilustración 27: Icono funcional sin ningún texto................................................................................32Ilustración 28: ¿Dudas de accesibilidad? Pregunta pregunta.............................................................32Ilustración 29: Una buena imagen ahorra MUCHO html..................................................................33Ilustración 30: Se pueden crear presentaciones impresionantes con una semántica perfecta............35Ilustración 31: Opción válida para presentaciones más compactas....................................................36Ilustración 32: Un html ordenador favorece una semántica más sencilla..........................................37Ilustración 33: Acceso a las herramientas de desarrolladores............................................................40Ilustración 34: Vista general de las opciones de auditoría..................................................................41Ilustración 35: Resultado de una prueba de validación......................................................................41Ilustración 36: Web de la herramienta wave.......................................................................................43Ilustración 37: Resultado de ejecutra wave sobre dipucadiz v3.........................................................44Ilustración 38: Servicio de validación de la comunidad de accesibilidad..........................................45

2 / 46



1. ¿Qué es la accesibilidad?La accesibilidad es la práctica de hacer nuestras páginas web más usables

por cuanta más gente sea posible. Tradicionalmente pensamos en la accesibilidad como un problema únicamente para las personas con algún tipo de discapacidad, pero el hacer nuestras webs accesibles tiene también impacto en otros colectivos, como aquellos que navegan desde sus teléfonos móviles o aquellos que navegan desde redes de baja velocidad.

Desde un punto de vista institucional también podemos considerar la accesibilidad como tratar a todo el mundo en igualdad de condiciones, sin importarsus habilidades o circunstancias. De igual modo que no dejamos a una persona sinacceder a un edificio público por ir en silla de ruedas, tampoco podemos dejar a una persona sin acceder a una página web porque tenga problemas de vista.

Realizar un buen trabajo de accesibilidad en una web tiene los siguientes beneficios:

• El HTML semántico, además de mejorar la accesibilidad mejora el SEO.

• Una puntuación alta en accesibilidad demuestra una buena ética profesional y eso mejora la imagen del ente.

• La accesibilidad tiene un impacto directo en la experiencia de uso en muchosdispositivos así que una relación muy importante con la velocidad de navegación en redes lentas.

• En el caso de los entes públicos... también tiene repercusiones legales.

1.1 ¿De qué discapacidades estamos hablando?

Cuando hablamos de accesibilidad web siempre tenemos en cuenta las dos discapacidades más evidentes a cubrir:

• Personas con problemas de vista: Dificultad en la percepción de los colores, daltonismo, dificultad en la percepción del contraste, discapacidad visual parcial y discapacidad visual total.

• Personas con problemas auditivos: Incapacidad auditiva leve, severa y total.

• Personas con problemas de movilidad: Habitualmente un grupo muy ignorado dentro de la accesibilidad son (irónicamente) aquellos que tienen

3 / 46


problemas de movilidad. No todo el mundo navega con ratón y teclaro. Muchos navegan con teclados especiales, pantallas táctiles, etc. Y todos ellos son parte importante de la accesibilidad web.

¿Son estas todas las discapacidades?. Pues en efecto no... Por defecto solemos olvidar las discapacidades o barreras cognitivas. Este enorme conjunto deproblemas de comprensión implica entre otras:

• Ofrecer el contenido de más de una manera, como texto leído o vídeo.

• Textos fáciles de leer, tales como textos escritos usando un lenguaje llano y una escritura sencilla y bien estructurada.

• Enfocar la atención del lector en los contenidos realmente importantes.

• Minimizar las distracciones alrededor del texto.

• Presentación homogénea de la página, sencilla, repetible y comprensible.

• Navegación consistente.

• Elementos reconocibles y familiares (como enlaces subrayados).

• Ofrecer una guía lógica y comprensible de los procesos (como los % de cumplimiento en formularios).

• Mostrar formularios tan sencillos como sea posible con mensajes de error humanos y fáciles de comprender y corregir.

1.2 ¿Cómo afrontamos dichas discapacidades?

La solución (cobertura) para dichas discapacidades están contempladas en las guías WCAG (web content accesibility guidelines; guías de accesibilidad de contenidos web) del W3C. Estás guías dividen las discapacidades en problemas o retos para el desarrollador/redactor de contenidos.

Dichas divisiones son las siguientes:

• Principio 1: Percepción. La información y los componentes de la interfaz de usuario debe presentarse a los usuarios de forma que pueda ser percibida.

• Principio 2: Operable. La interfaz de usuario y la navegación debe ser operativa.

• Principio 3: Inteligible. La información y el trabajo con la interfaz de usuario debe ser entendida.

• Principio 4: Robustez. El contenido debe ser tan robusto que pueda ser interpretado de forma eficaz por una gran variedad de usuarios, incluidas las

4 / 46


tecnologías de asistencia.

1.3 Implicaciones legales.

Como administración pública por supuesto hay implicaciones legales. La accesibilidad para las administraciones públicas no es una opción. Esto es así desde la llegada del RD 1112/2018. La línea de tiempo que aplica a este RD es la siguiente:

Si desea saber más sobre la aplicación de este RD, sanciones que contempla, etc puede consultar el RD directamente en su publicación web.

5 / 46

Ilustración 1: 1.3 Principales fases de implantación del RD 1112/2018

https://www.boe.es/boe/dias/2018/09/19/pdfs/BOE-A-2018-12699.pdf


2. Particularidades de escribir para la webLa redacción de contenidos para web tiene ciertas particularidades que lo

diferencian de la redacción de contenidos para medios impresos. El hecho de disponer de un canvas de un tamaño variable, y de depender de una pantalla de visualización que también puede ser variable en distintos parámetros (tamaño, brillo, densidad de píxeles, rango de color, etc) hacen que en la redacción de contenidos web tengamos que preocuparnos de una cantidad de parámetros que no son necesarios en una publicación impresa.

La lectura en una pantalla no es la más idónea. Hay estudios que prueba que al leer en pantallas de visualización leemos más lentos, leemos menos y leemos peor... Es decir, retenemos menos información que cuando leemos en una publicación impresa. Es más, debemos asumir que de todo el texto que redactemos es posible que el público solo lea de media el 25% del texto, por lo que debemos cuidar especialmente cómo gestionamos el impacto y la legibilidad de lo redactado para subir ese 25% a idealmente todo el texto que corresponda al contenido.

Como norma general, la correcta redacción de contenidos para una web gira alrededor de un único principio: La legibilidad de los textos. Con esta máxima solo nos queda una pregunta ¿qué podemos hacer para mejorar la legibilidad de los textos?.

2.1 Longitud de la línea

Años leyendo en papel crea hábitos de lectura que las pantallas de visualización no han conseguido cambiar. Incluso los nativos digitales responde a una serie de parámetros muy similares a los existentes a la lectura en papel.

Comparemos las tres siguientes páginas:

6 / 46


7 / 46

Ilustración 2: 2.2 Peor opción


8 / 46

Ilustración 4: 2.2 Algo mejor

Ilustración 3: 2.2 Solución algo mejor


El texto en las dos primeras es directamente el mismo. Pero la sensación a lahora de leerlo es que el primer texto es directamente más grande que el segundo. Se trata de una percepción relacionada únicamente con el ancho que ocupa la línea. Para invitar a la lectura debemos tender a líneas más cortas en cuanto al número de caracteres.

En programación ya se ha alcanzado el consenso de no usar más de 80 caracteres por línea. Para publicaciones web se recomiendan entre 40 y 70 caracteres, aunque se consiguen textos legibles por debajo de los 90 caracteres.

2.2 Contraste

El contraste va referido a la diferencia entre el color de texto y el color de fondo. El contraste no se refiere solo a la diferencia entre tonos claros y oscuros sino que también hace referencia a las diferencias entre colores. Si los colores no tienen suficiente contraste y esto tendrá un impacto directo en su legibilidad.

9 / 46

Ilustración 4: Solución magistral


Si bien en los gestores de contenidos este tema suele estar resuelto para los textos, es muy importante considerarlo también a la hora de colocar textos en las imágenes. También hay que considerar los textos que de forma programática aparecen sobre las imágenes que se suben a los gestores de contenidos. Una imagen puede ser perfecta y al colocar el texto encima convertir este en ilegible.

No existen soluciones mágicas. Dependemos de la prueba, ensayo y error.

2.3 Color de los enlaces

Relacionado con el punto anterior. Los enlaces no solo dependen en su estilode la elección del contraste adecuado, sino que esta decisión debe ser constante y homogénea para todos los enlaces que se creen.

2.4 Espacio blanco

En las páginas web disponemos de mucho más espacio para escribir que en un papel. Si nuestras líneas de texto deben ser idealmente de menos de 90 caracteres y debemos evitar en la medida de nuestras posibilidades grandes ladrillos de texto, esto nos lleva a deber hacer una gestión inteligente de los espacios en blanco. Para esto disponemos de todos los recursos del castellano. Párrafo, subtítulos, imágenes para romper el orden de lectura, huecos en blanco, listas, etc.

2.5 Divisiones y retornos de carro en blanco

En contraposición con el punto anterior, si deseamos crear un espacio extra entre dos párrafos deberemos recurrir a recursos como un subtítulos que separe conceptos entre los dos párrafos o una línea de separación. Pero nunca (y retiero, NUNCA), recurriremos a aporrear la tecla de retorno de carro o a la introducción de etiquetas como <br/> dentro del texto.

2.6 Alineación de los textos

El texto alineado a la izquierda es y debe ser la opción por defecto para los textos con lectura occidental. Otras soluciones como los textos centrados o justificados pueden ser interesantes para textos impresos o para lograr efectos muy concretos, pero están totalmente desaconsejados como norma a la hora de escribir textos para pantallas de visualización.

Toda esta cautela con la alineación de los textos viene dada por la pereza cognitiva del cerebro a la hora de modificar patrones y la constante búsqueda de lalegibilidad que debe motivar todos los textos para pantallas de visualización.

10 / 46


2.7 Tamaño de letra

La recomendación es que el texto comience en los 16px. Y hablamos de píxeles, no de puntos, ya que en las pantallas de visualización la unidad mínima de visualización es el píxel, no el punto.

2.8 No copies, crea y escribe como un humano, para “tus” humanos

Muy importante a la hora de (irónicamente) tratar con máquinas es que nuestros textos sean originales. Los motores de búsqueda van a comprobar constantemente lo similar de nuestros textos con otros que ya tenga almacenados a la hora de darnos preferencia en los resultados de las consultas.

Por otro lado no debemos olvidar que escribimos para humanos. Además, esimportante no olvidar cuál es nuestro público objetivo y cuál es el lenguaje que ese público objetivo emplea. Una disertación sobre tecnologías de la información ante una audiencia no docta en la materia causaría frustración y aversión (guiño guiño, codazo codazo).

2.9 Editores (CKEditor y similares)

Los gestores de contenidos suelen dar un conjunto acotado de opciones, reduciendo por una parte la probabilidad de cometer errores y por otro dificultando en ocasiones la posibilidad de hacer las cosas mejor.

Actualmente uno de los editores más extendidos para la redacción de contenido dentro de los diversos gestores de contenidos es CKEditor. Aunque no nos centraremos concretamente en el a lo largo de este curso, si lo tendremos presente dada la extensión con la que cuenta.

11 / 46

Ilustración 5: 2.9 Editor CKEditor. Anterio fck editor.


3. HTML semánticoLas páginas web se escriben y estructuran mediante etiquetas de un lenguaje

de marcado. Este lenguaje de marcado es actualmente HTML5. Es un lenguaje relativamente simple que únicamente implica integrar el texto dentro de una etiqueta de apertura <etiqueta> y una etiqueta de cierre </etiqueta>. A partirde ahora veremos muchos ejemplos de “código” en html5 dado que aunque trabajemos en un editor de texto que nos oculte las etiquetas realmente lo que estamos generando es un lenguaje de marcado en html5.

Las etiquetas en HTML5 tienen un valor semántico. El propio lenguaje de etiquetado tiene un comportamiento muy relacionado con cómo se debe escribir correctamente y dispone de un conjunto de reglas que debemos respetar si queremos escribir correctamente y ser todo lo accesibles que el conjunto de etiquetas nos permite.

12 / 46

Ilustración 6: 3. Vista de html en CKEditor. Botón <>.


3.1 Encabezados

Los encabezados cumplen una función semántica fundamental. Nos permiten ordenar y organizar los textos. Aportan espacio, coherencia y facilitan tanto la lectura como la localización de los contenidos.

En HTML5 dispones de encabezados desde <h1></h1> hasta <h6></h6>. Estos encabezados requieren siempre estar en orden (no puedes poner un <h4></h4> a continuación de un <h2></h2> por ejemplo) y ayudan tanto a nivel legible como a nivel accesible a tener un contenido más profesional.

Como curiosidad, los editores de OpenCms no tienen necesidad de crear encabezados de tipo <h1></h1> (y por lo tanto empezar sus textos usando un encabezado <h1></h1>) pues que el desarrollo bajo OpenCms ya lo utiliza para implementar el título de la página.

Por ejemplo. Veamos la salida que producen los siguientes segmentos de marcado partiendo del mismo texto base:

3.1.1 Ej:Texto con pocos encabezados<h1>Cangrejo de río</h1><p>Los cangrejos de río, o seboros, son crustáceos decápodos pertenecientes alas superfamilias Astacoidea y Parastacoidea (dos de las cinco..</p><p>Morfología</p><p>Los cangrejos de río presentan una morfología externa más alargada que el resto de los cangrejos, lo que los hace similares a pequeños bogavantes.</p><p>Biología</p><p>Viven en las aguas dulces de todos los continentes, con tal de que no lleguen a helarse hasta cerca del fondo durante el invierno.</p><p>Usos</p><p>Cebo</p><p>Los cangrejos de ríos suelen venderse y usarse como cebo, vivos y enteros o bien sólo la carne de la cola</p><p>Gastronomía</p><p>El cangrejo de río se come en todo el mundo. Como otros crustáceos comestibles..</p>

Resultado:

13 / 46


3.1.2 Ej: Texto correctamente estructurado<h1>Cangrejo de río</h1><p>Los cangrejos de río, o seboros, son crustáceos decápodos pertenecientes alas superfamilias Astacoidea y Parastacoidea (dos de las cinco..</p><h2>Morfología</h2><p>Los cangrejos de río presentan una morfología externa más alargada que el resto de los cangrejos, lo que los hace similares a pequeños bogavantes.</p><h2>Biología</h2><p>Viven en las aguas dulces de todos los continentes, con tal de que no lleguen a helarse hasta cerca del fondo durante el invierno.</p><h2>Usos</h2><h3>Cebo</h3><p>Los cangrejos de ríos suelen venderse y usarse como cebo, vivos y enteros o bien sólo la carne de la cola</p><h3>Gastronomía</h3><p>El cangrejo de río se come en todo el mundo. Como otros crustáceos comestibles..</p>

Resultado:

14 / 46

Ilustración 7: Demasiados párrafos seguidos


3.2 Estructura del contenido

Más allá de los encabezados, la estructura de un documento se crea mediante un conjunto de elementos HTML5 que correctamente informados y estructurados darán lugar a textos más accesibles.

Estos elementos básicos son los siguientes:

3.2.1 Párrafos<p>Esto es un párrafo.</p>

El párrafo es la unidad mínima de comunicación de contenido. La información se estructura en párrafos y cada unidad de información conforma un párrafo. El concepto es el mismo al empleado en castellano.

15 / 46

Ilustración 8: El resultado mejora mucho cuando ordenas los párrafos con encabezados


Nota: Usar la combinación shift + Enter dará como resultado una etiqueta <br/>. El uso de esta etiqueta está totalmente desaconsejado a la hora de formar un texto, puesto que su uso tiene sentido gráfico pero no semántico. De igual modocrear párrafos en blanco para crear espacios blancos en una web es una mala idea.Contenidos y presentación se deben encontrar separados a la hora de redactar un texto. Este concepto debe ser tenido siempre en consideración. La obligación del redactor de contenidos es crear contenidos semántica y estructuralmente correctos así como accesibles. Que se vean “bonitos” será misión del maquetador o del diseñador.

3.2.2 Listas

Disponemos de distintos tipos de listas:

Desordenadas<ul> <li>Chicharrones</li> <li>Harina</li> <li>Aceite</li> <li>Tomate</li> <li>Queso</li></ul>

Ordenadas<ol> <li>Prepara la base de la pizza</li> <li>Añade el tomate</li> <li>Por el queso en la pizza</li> <li>Coloca las tiras de chicharrones</li> <li>Hornea</li></ol>

16 / 46

Ilustración 9: Lista estandar

Ilustración 10: Lista ordenada


Anidadas<ol> <li>Prepara la masa de la pizza <ul> <li>Mezcla la harica con agua</li> <li>Suaviza la masa con levadura y aceite</li> </ul> </li> <li>Añade el tomate</li> <li>Por el queso en la pizza</li> <li>Coloca las tiras de chicharrones</li> <li>Hornea</li></ol>

Listas con descripción<dl> <dt>Profesor</dt> <dd>Roberto Martínez Sánchez</dd> <dt>Alumnos</dt> <dd>Este, ese, aquel...</dd> <dt>Gente pescando</dt> <dd>Cangrejos de río, que aún nos guardan rencor.</dd></dl>

3.2.3 Citas

HTML5 cuenta con una forma normalizada de realizar menciones o citar textos y expresiones de terceros. De hecho contamos con dos tipos de citas:

17 / 46

Ilustración 11: Listas anidadas

Ilustración 12: Listas de definición


Citas de bloque<p>La siguiente frase marcó mi vida.</p><blockquote>Si vis pacem, para bellum</blockquote>

Citas en línea<p>La siguiente frase marcó mi vida: <q>Si vis pacem, para bellum</q></p>

3.3 Tablas

Las tablas se emplean para mostrar información tabulada. La creación de lastablas de por si tiene su complicación... hacerlas correctamente accesibles requiere un extra de cuidado.

Ante todo, las tablas son para mostrar datos, JAMÁS para ordenar información visual.

Según la complejidad de las cabeceras podemos contemplar los siguientes escenarios.

18 / 46

Ilustración 13: Citas (notar que se muestra sin estilos)

Ilustración 14: Citas en línea. Semántica sin presentación.


3.3.1 Tablas con una única cabecera

Ejemplo 1: Tradicional. Cabeceras en la primera fila.<table> <thead> <tr> <th>Nombre</th> <th>Primer Apellido</th> <th>Segundo Apellido</th> </tr> </thead> <tbody> <tr> <td>Roberto</td> <td>Martínez</td> <td>Sánchez</td> </tr> <tr> <td>Azrael</td> <td>Martín</td> <td>Morales</td> </tr> <tr> <td>Amenadiel</td> <td>Lopez</td> <td>García</td> </tr> </tbody></table>

Ejemplo 2: No convencional. Cabeceras en la primera columna.<table> <tr> <th>Nombre</th> <td>Roberto</td> <td>Azrael</td> <td>Amenadiel</td> </tr>

19 / 46

Ilustración 15: La información tabular con encabezados gana en todos los aspectos


<tr> <th>Primer Apellido</th> <td>Martínez</td> <td>Martín</td> <td>Lopez</td> </tr> <tr> <th>Segundo Apellido</th> <td>Sánchez</td> <td>Morales</td> <td>García</td> </tr> </table>

Cuando los datos almacenados en la cabecera <th></th> sea ambiguo y no de información por su mismo sobre si puede ser una cabecera o no, se puede emplear el atributo scope="col" dentro de la etiqueta <th></th>

3.3.2 Tablas con dos cabeceras

Ejemplo 3: Cabeceras en la primera fila y columna.<table> <caption>Entrega de pedidos semanales</caption> <tr> <td></td> <th scope="col">Lunes</th> <th scope="col">Martes</th> <th scope="col">Miércoles</th> <th scope="col">Jueves</th> <th scope="col">Viernes</th> </tr> <tr> <th scope="row">09:00 - 10:00</th> <td>Abierto</td> <td>Abierto</td> <td>Abierto</td> <td>Abierto</td> <td>Abierto</td> </tr> <tr> <th scope="row">10:00 - 11:00</th>

20 / 46

Ilustración 16: Otro tipo de ordenación para la información tabular


<td>Abierto</td> <td>Abierto</td> <td>Abierto</td> <td>Abierto</td> <td>Abierto</td> </tr> <tr> <th scope="row">11:00 - 12:00</th> <td>Abierto</td> <td>Abierto</td> <td>Abierto</td> <td>Abierto</td> <td>Cerrado</td> </tr> <tr> <th scope="row">12:00 - 11:00</th> <td>Cerrado</td> <td>Cerrado</td> <td>Cerrado</td> <td>Cerrado</td> <td>Cerrado</td> </tr></table>

Ejemplo 4: Cabeceras en la primera fila y segunda columna.<table> <caption>1.ª Liga BBVA Jornana 6. 19-9-10</caption> <tr> <th scope="col">ID</th> <th scope="col">Partido</th> <th scope="col">1</th> <th scope="col">X</th> <th scope="col">2</th> </tr> <tr> <td>1</td>

21 / 46

Ilustración 17: Se pueden crear tablas muy complejas que mantengan la semántica


<th scope="row">Sporting - Athletic</th> <td>1</td> <td>X</td> <td>2</td> </tr> <tr> <td>2</td> <th scope="row">AT. Madrid - Barcelona</th> <td>1</td> <td>X</td> <td>2</td> </tr> <tr> <td>3</td> <th scope="row">Hércules - Valencia</th> <td>1</td> <td>X</td> <td>2</td> </tr> <tr> <td>4</td> <th scope="row">Racing - Zaragoza</th> <td>1</td> <td>X</td> <td>2</td> </tr></table>

3.3.3 Tablas con encabezados irregulares

Ejemplo 5: Tablas con dos encabezados de filas (uno expandido) y otro de columna.

22 / 46

Ilustración 18: La ordenación de los encabezados es relevante para mantener la semántica


<table> <caption>Merchandising la venta para el partido</caption> <col> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> <tr> <td rowspan="2"></td> <th colspan="2" scope="colgroup">Cádiz</th> <th colspan="2" scope="colgroup">Sevilla</th> </tr> <tr> <th scope="col">Disponibles</th> <th scope="col">Vendidas</th> <th scope="col">Disponibles</th> <th scope="col">Vendidas</th> </tr> <tr> <th scope="row">Camisetas</th> <td>50000</td> <td>24000</td> <td>100000</td> <td>43000</td> </tr> <tr> <th scope="row">Bufandas</th> <td>40000</td> <td>13000</td> <td>65000</td> <td>31000</td> </tr></table>

Ejemplo 6: Tabla con cabeceras expandidas en diferentes filas y columnas.<table> <caption>Tallas disponibles</caption> <col> <col> <colgroup span="3"></colgroup> <thead>

23 / 46

Ilustración 19: Agrupar columnas permita otras ordenaciones


<tr> <th scope="col">Modelo</th> <th scope="col">Color</th> <th colspan="3" scope="colgroup">Tallas disponibles</th> </tr> </thead> <tbody> <tr> <th rowspan="3" scope="rowgroup">Sport</th> <th scope="row">En color</th> <td>S</td> <td>M</td> <td>L</td> </tr> <tr> <th scope="row">Blanco y negro</th> <td>M</td> <td>L</td> <td>XL</td> </tr> <tr> <th scope="row">Sepia</th> <td>S</td> <td>M</td> <td>L</td> </tr> <tr> <th rowspan="3" scope="rowgroup">Casual</th> <th scope="row">En color</th> <td>S</td> <td>M</td> <td>L</td> </tr> <tr> <th scope="row">Blanco y negro</th> <td>M</td> <td>L</td> <td>XL</td> </tr> <tr> <th scope="row">Sepia</th> <td>S</td> <td>M</td> <td>L</td> </tr> </tbody></table>

24 / 46


Es posible hacer combinaciones más complejas de filas y columnas con encabezados.

Podéis consultar los ejemplos de estas combinaciones en la web de los tutoriales de accesibilidad del W3C. Disponéis el enlace en los anexos.

En todo caso, las construcciones más complejas SIEMPRE se pueden dividir en más de una tabla y siempre es recomendable esta división a nivel de accesibilidad frente a opciones más complejas.

3.4 Mejora de la accesibilidad en tablas

Hay atributos que nos permiten mejorar la accesibilidad de las tablas. Algunos ya los hemos visto por encima en algunos de nuestros ejemplos.

Caption:<table> <caption>Eventos</caption> <tr> <th>Lunes</th> <th>Martes</th> <th>Miércoles</th> </tr> <tr>

25 / 46

Ilustración 20: Información agrupada por filas y columnas


<td>Cena</td> <td>Almuerzo</td> <td>Merienda</td> </tr> […]</table>

La etiqueta caption nos permite hacer una descripción pretendidamente corta y concisa sobre los contenidos de la tabla.

Aria-describedby:

<p id="tblDesc">Esta es una descipción larga para la tabla que se muestra a continuación. Aquí puedes escribir párrafos de la bíblia o del Quijote y describir la tabla completa sin problemas.</p><table aria-describedby="tblDesc">[…]</table>

Las etiquetas aria (Accessible Rich Internet Applications) se introdujeron para mejorar la accesibilidad para aquellas personas con problemas de accesibilidad, por lo que son etiquetas de uso no obligatorio, pero si muy recomendado.

Figure:<figure> <figcaption> <strong>Esta es una descipción larga para la tabla que se muestra a continuación.</strong><br> <span>Aquí puedes escribir párrafos de la bíblia o del Quijote y describir la tabla completa sin problemas.</span> </figcaption> <table> […] </table></figure>

La etiqueta figure permite encapsular una descripción y un elemento multimedia mejorando la accesibilidad de ambos.

Aún más accesible Figure + Arias:<figure> <figcaption> <strong id="quijote-caption">Esta es una descipción larga para la tabla que se muestra a continuación.</strong><br> <span id="quijote-summary">Aquí puedes escribir párrafos de la bíblia o del Quijote y describir la tabla completa sin problemas.</span> </figcaption> <table aria-labelledby="quijote-caption" aria-describedby="quijote-summary">

26 / 46


[…] </table></figure>

Esta sería la solución más rica y completa. Lo mejor de ambos mundos: html5 semántico (figure) más aria labels para mejorar la accesibilidad.

27 / 46


4. Multimedia accesibles… Y llegamos a la madre del cordero. Los multimedia accesibles. Hasta

ahora hemos estado trabajando con etiquetas en parte por comodidad, en parte por usabilidad. Pero en el caso de los multimedia, el marcado en HTML5 es mucho más sencillo que seguir que las herramientas concretas, o al menos te permite independizarte de las mismas.

4.1 Imágenes

Las imágenes suponen para el común de los editores uno de sus principales dolores de cabeza. Tanto por el tratamiento de los formatos, dimensiones, ratios, etc. como por el trabajo de accesibilidad que hay que realizar sobre las mismas.

Las imágenes deben contener alternativas de textos, de mayor o menos peso, que aseguren que dichas imágenes puedan ser utilizadas por personas con diferentes tipos de discapacidades.

Dividiendo por funcionalidad de la imagen las podemos separar en:

4.1.1 Imágenes informativas

Ejemplo 1: Imágenes usadas como etiquetas de otra información.<p> <img src="phone.png" alt="Teléfono:"> +34 xxx yyy zzz</p><p> <img src="fax.png" alt="Fax:"> +34 0123 456 789</p>

Ejemplo 2: Imágenes para apollar un texto<h1>La hamburguesa perfecta</h1><p> <img src="hamburguesa-queso.jpg" alt="Hamburguesa completa con queso">

28 / 46

Ilustración 21: Los iconos son una constante en las webs modernas


La hamburguesa perfecta tiene que tener un equilibrio adecuado entre la cantidad de carne e ingredientes.</p>

En términos generales el texto alternativo de la imagen debe ser una descripción acertada y aproximada del contenido de la imagen. Si la imagen contiene instrucción esas mismas instrucciones deben venir indicadas en la alternativa textual.

4.1.2 Imágenes decorativas

Ejemplo 1: Imágenes para indicar formatos de ficheros (aporta información)<h1>Descargue la documentación</h1><p> <a href="…"> Informe mensual del consumo de hambuguesas <img src="html5.jpg" alt="HTML" > (43KB) </a>, también disponible en <a href="…"> <img src="word.jpg" alt="Documento de Word"> (254KB) </a> o en formato <a href="…"> <img src="pdf.jpg" alt="PDF"> (353KB) </a></p>

29 / 46

Ilustración 22: Un ejemplo de texto representativo


Ejemplo 2: Imágenes decorativas que solo aportan imaginería gráfica y no suman nada al texto

<h1>Herramientas de desarrollo para dipucadiz v3</h1><p> <a href="…"> <img src="html.jpg" alt="" > <b>HTML5</b> </a></p><p> <a href="…"> <img src="css.jpg" alt=""> <b>CSS3</b> </a></p><p> <a href="…"> <img src="js.jpg" alt=""> <b>JS</b> </a></p><p> <a href="…"> <img src="opencms.jpg" alt=""> <b>OpenCms</b> </a></p>

30 / 46

Ilustración 23: Las imágenes son accesorias


En general las imágenes decorativas suelen cumplir la misma mecánica. Imágenes que semánticamente no aportan nada y que se deben informar con el atributo alt=””.

4.1.3 Imágenes funcionales

Ejemplo 1: Imagen empleada como logo<h1>Bienvenido a la web de la Diputación de Cádiz</h1><a href="https://www.dipucadiz.es/"> <img src="dipucadiz.png" alt="Diputación provincial de Cádiz"></a>

31 / 46

Ilustración 24: Imágenes que solo decoran

Ilustración 25: Enlace con imagen que no necesita texto


Esta imagen es el ejemplo perfecto de una imagen que dice lo que tiene que decir sin necesidad de incorporar un texto a su lado, y por otro lado cumple al 100%la alternativa textual al incluir un alt lo suficientemente descriptivo.

Ejemplo 2: Imagen como logo junto a un texto descriptivo<h1>Bienvenido a la web de la Diputación de Cádiz</h1><a href="https://www.dipucadiz.es/"> <img src="dipucadiz-lazo.png" alt="">Diputación provincial de Cádiz</a>

Esta imagen es justo el caso opuesto a la anterior. La imagen como tan solo aporta contexto a un texto que lo dice absolutamente todo sobre la imagen. De ahí que el atributo alt se quede a null.

Ejemplo 3: Imagen sin texto con función implícita en la imagen<a href="javascript:print()" aria-label="Imprime la página actual"> <img src="print.png" alt="Imprime esta página"></a>

Este ejemplo es más habitual de lo que pueda parecer. Es el caso general de un icono, autoexplicativo, que no va acompañado de texto. En caso de que el icono se represente mediante una imagen el atributo alt es obligatorio. En caso de que no

32 / 46

Ilustración 26: El texto complementa al 100% a la imagen

Ilustración 27: Icono funcional sin ningún texto


se represente la imagen mediante una img, el uso del aria-label en la etiqueta a es totalmente obligatoria.

4.1.4 Imágenes de texto<img src="texto-en-imagen.png" alt="Tu curso de accesibilidad de confianza">

Por temas de rendimiento y eficiencia, el uso de imágenes con texto como recurso gráfico puede que no sea lo más adecuado. Eso si, esto no hace que no sea una solución perfectamente accesible.

Como extra mencionar el uso de expresiones matemáticas dentro de una imagen. En este caso (al contrario que el anterior), la recomendación general es precisamente la opuesta: Usar imágenes con las expresiones matemáticas en su interior. Esto obligaría a informar un campo alt muy extenso, pero implica una implementación más sencilla.

Como alternativa a las imágenes en expresiones matemáticas podríamos utilizar MathML (Más información en el anexo).

4.1.5 Imágenes complejas

Dentro del grupo de las imágenes complejas vamos a afrontar no cómo implementar una imagen compleja (porque al fin y al cabo son imágenes... independientemente de lo complejas que sean vienen a ser implementadas por el mismo html), sino cómo redactar correctamente la descripción de la imagen para que sea todo lo accesible posible.

Ejemplo 1: Usando figure para incluir un enlace a la descripción larga.<figure role="group"> <img src="grafico.png" alt="Gráfico de barras que muestra el consumo de frutas en la oficinaa lo largo de 3 años de muestreo"> <figcaption> <a href="grafico_de_barras_explicado.html">Página con la descripción completa y la explicación de cifras del gráfico.</a> </figcaption></figure>

33 / 46

Ilustración 28: ¿Dudas de accesibilidad? Pregunta pregunta...


El formato figure nos permite encapsular de forma semántica la imagen y el enlace a su descripción completa. El rol=”group” se encarga de mantener la compatibilidad con los navegadores antiguos.

Ejemplo 2: Usando figure para embeber toda la descripción.<figure role="group"> <img src="grafico.png" alt="Gráfico de barras que muestra el consumo de frutas en laoficina a lo largo de 3 años de muestreo"> <figcaption> <h2>Vista general</h2> <p>El gráfico muestra un resumen del consumo de fruta en los años 2013, 2014 y 2015.</p> <h2>Valores del gráfico</h2> <table> <caption>Consumo de frutas en la oficina.</caption> <thead> <th></th> <th scope="col">Manzanas</th> <th scope="col">Naranjas</th> <th scope="col">Plátanos</th> </thead> <tr> <th scope="row">2013</th>

34 / 46

Ilustración 29: Una buena imagen ahorra MUCHO html


<td>800</td> <td>600</td> <td>50</td> </tr> <tr> <th scope="row">2014</th> <td>600</td> <td>700</td> <td>550</td> </tr> <tr> <th scope="row">2015</th> <td>25</td> <td>90</td> <td>150</td> </tr> </table> </figcaption></figure>

35 / 46


En esta ocasión en lugar de enlazar a una página nueva, empaquetamos todo, la imagen y su descripción completa en un mismo figure. El atributo role=”group” se encarga de realizar la asociación y dar la compatibilidad hacia atrás.

Ejemplo 3: Descripción larga usando el atributo longdesc<img src="grafico.png"

36 / 46

Ilustración 30: Se pueden crear presentaciones impresionantes con una semántica perfecta


alt="Gráfico de barras que muestra el consumo de frutas en la oficinaa lo largo de 3 años de muestreo" longdesc="grafico_de_barras_explicado.html"><a href="grafico_de_barras_explicado.html">Página con la descripción completay la explicación de cifras del gráfico.</a>

El atributo longdesc nos permitiría enlazar con la descripción larga de dos maneras distintas. Introduciendo la url de la página que contiene la descripción o bien introduciendo un ancla mediante un id (longdesc=”#id_elto”) al elemento html (que debe estar próximo) donde se incluye la descripción del gráfico.

Ejemplo 4: Descripción larga usando el atributo aria-describedby<img src="gallo.jpg" alt="Una gallina" aria-describedby="descripcion">[…]<p id="descripcion"> El gallo y la gallina (Gallus gallus domesticus) son la subespecie doméstica de la especie Gallus gallus, una especie de ave galliforme de la familia Phasianidae procedente del sudeste asiático. Los nombres comunes son:gallo, para el macho; gallina, para la hembra, y pollo, para los subadultos. Es el ave más numerosa del planeta, pues se calcula que el número de ejemplares supera los 16 000 millones.</p>

37 / 46

Ilustración 31: Opción válida para presentaciones más compactas


38 / 46

Ilustración 32: Un html ordenador favorece una semántica más sencilla


4.2 Enlaces

Como la accesibilidad general explicada en capítulos anteriores es también aplicable a los enlaces (y ya hemos visto ejemplos de enlaces en otras secciones), en esta sección vamos a recopilar en un formato más rápido lo que se debe (o no) hacer a la hora de disponer de enlaces accesibles.

4.2.1 No uses la palabra enlaces en tus enlaces<p>Consulte la información en el siguiente <a href="https://www.dipucadiz.es">enlace</a></p>

<p>Consulte la información en la <a href="https://www.dipucadiz.es">web de laDiputación Provincial de Cádiz</a></p>

4.2.2 No utilices mayúsculas de forma masiva<p>Puede ampliar la información de este curso consultando la <a href="https://www.dipucadiz.es">PÁGINA WEB DE LA DIPUTACIÓN DE CÁDIZ</a> donde casi todo es un ejemplo</p>

<p>Puede ampliar la información de este curso consultando la <a href="https://www.dipucadiz.es">página web de la Diputación de Cádiz</a> donde casi todo es un ejemplo</p>

4.2.3 No uses una url como el texto de un enlace<p>Puede encontrar más ejemplos de accesibilidad en <a href="https://www.dipucadiz.es">https://www.dipucadiz.es</a> donde casi todo es un ejemplo</p>

<p>Puede encontrar más ejemplos de accesibilidad en <a href="https://www.dipucadiz.es">página web de la Diputación de Cádiz</a> donde casi todo es un ejemplo</p>

4.2.4 Usa el atributo title cuando el texto del enlace no sea descriptivo.<p>Puede ampliar información en el apartado de <a href="#anexos">anexos</a></p>

<p>Puede ampliar información en el apartado de <a href="#anexos" title="Sección de anexos de la documentación con enlaces de interés">anexos</a></p>

4.2.5 Usar rel="nofollow noopener noreferrer" cuando el target sea “_blank”

<a href="https://www.instagram.com/diputaciondecadiz/" target="_blank"> <i class="fab fa-instagram" aria-hidden="true"></i></a>

39 / 46


<a href="https://www.instagram.com/diputaciondecadiz/" target="_blank" rel="nofollow noopener noreferrer"> <i class="fab fa-instagram" aria-hidden="true"></i> <p style="font-size: 0">URL de acceso al perfil de instagram</p></a>

4.2.6 Usa aria-label="" cuando el contenido del enlace no sea texto o imagen.

<a href="https://www.instagram.com/diputaciondecadiz/" target="_blank" rel="nofollow noopener noreferrer"> <i class="fab fa-instagram" aria-hidden="true"></i> <p style="font-size: 0">URL de acceso al perfil de instagram</p></a>

<a href="https://www.instagram.com/diputaciondecadiz/" aria-label="URL de acceso al perfil de instagram" target="_blank" rel="nofollow noopener noreferrer"> <i class="fab fa-instagram" aria-hidden="true" title="URL de acceso al perfil de instagram"></i> <p style="font-size: 0">URL de acceso al perfil de instagram</p></a>

40 / 46


5. Herramientas de validaciónMerece la pena dedicar un tiempo en esta documentación a las herramientas de

validación. Podemos redactar cantidades ingentes de texto que sin una correcta validación siempre corremos el riego de salir a producción con soluciones no accesibles. Además, la accesibilidad es un elemento vivo (a la par de los estándares web) por lo que lo que ayer era accesible puede que hoy haya dejado de serlo... o seguramente haya una mejor forma de hacerlo accesible.

En esta documentación vamos a cubrir tres opciones básicas de validación. Todas perfectamente completas por si mismas.

5.1 Integradas en el navegador (Google chrome lighthouse)

La herramienta de accesibilidad más directa es... instalar google chrome. Google lleva mucho tiempo empujando el tema de la accesibilidad por lo que en 2018 actualizó sus herramientas de accesibilidad para dar a luz a google lighthouse, que pasó en el plazo de un mes a estar integrado directamente en el navegador. También está disponible comoextensión del navegador permitiendo así un acceso más directo si cabe a las herramientas de optimización y accesibilidad (más información en la sección de anexos).

Acceder a la herramienta google lighthouse es muy simple. Basta con hacer click derecho en cualquier punto de la página web y pinchar en inspeccionar. Otra opción es usar el atajo de teclado: Ctrl + Mayúsculas + I

41 / 46

Ilustración 33: Acceso a las herramientas de desarrolladores


Una vez abiertas las herramientas de desarrolladores basta con acceder a la última pestaña disponible: Audits

Desde esta pestaña podremos establecer las opciones que deseemos para realizar los tests y nos permitirá lanzar la batería de pruebas bajo distintas velocidades hipotéticas.

Las métricas obtenidas en la validación se dividen entre:

• Rendimiento: Cómo de eficientemente carga nuestro portal

• Accesibilidad: El % de cumplimiento de los estándares por parte de nuestra web

• Buenas prácticas: Cumplimiento de las diferentes recomendaciones web.

• SEO: Optimización para impactar en los resultados de google.

42 / 46

Ilustración 34: Vista general de las opciones de auditoría

Ilustración 35: Resultado de una prueba de validación


• Web progresiva: Cumplimiento o no de los estándares de web progresiva.

5.2 Instalables como extensión (WAVE Evaluation Tool)

Wave es una herramienta/servicio proporcionado por webAim. Es una herramienta bastante exhaustiva en su validación de contenidos, siendo particularmente útil a la hora de realizar validaciones de contraste y de accesibilidad visual.

Para utilizar wave podemos acceder a la sección de herramientas de la web de webAim (anexo). Una vez dentro accederemos a la web de wave desde donde podremos lanzar los tests de accesibilidad sobre urls públicas.

Para realizar validaciones sobre webs que no se encuentren publicadas es recomendable utilizar algunas de las extensiones que ofrece webAim para los distintos navegadores.

Una vez lanzados los test de accesibilidad wave nos ofrecerá un análisis bastante exhaustivo de los contenidos de accesibilidad de nuestro portal.

43 / 46

Ilustración 36: Web de la herramienta wave


Los resultados del test wave se dividen en los siguientes apartados:

• Errores: Problemas que hay que resolver. Idealmente este contador debe estar a cero.

• Avisos: Posibles errores que se deben revisar. No tienen por qué ser realmente un error, pero necesitan al menos de comprobación por parte de un humano para comprobar que efectivamente son correctos.

• Características: Número de características adicionales empleadas para mejorar la accesibilidad.

• Html5 y ARIA: Número de etiquetas html5 y atributos ARIA empleados para mejorarla accesibilidad web.

44 / 46

Ilustración 37: Resultado de ejecutra wave sobre dipucadiz v3


• Errores de contraste: Posibles errores de contraste. En ocasiones el validador muestra como error algo que una vez accedes a la herramienta funciona correctamente. Pero... en todo caso requiere de nuestra atención y comprobación.

5.3 Institucionales (Observatorio de accesibilidad)

Aunque esta solución no es para todo el mundo (solo está disponibles para entes públicos) es totalmente recomendable y casi obligatoria si disponemos de ella.

El portal de administración electrónica dispone de un observatorio de accesibilidad.Además de estar ricamente poblado de guías y documentación, cuenta con un servicio de validación bastante interesante.

Podemos acceder al servicio desde las herramientas de la comunidad de accesibilidad. Una vez dentro bastará con acceder al servicio disponible en la comunidad y obtendremos un informe en nuestro correo con toda la información sobre el cumplimiento de las normas de accesibilidad.

45 / 46

Ilustración 38: Servicio de validación de la comunidad de accesibilidad

https://administracionelectronica.gob.es/comunidades/verPestanaGeneral.htm?idComunidad=accesibilidad#.XQIXUI-LlhE

https://administracionelectronica.gob.es/comunidades/verPestanaGeneral.htm?idComunidad=accesibilidad#.XQIXUI-LlhE


6. Más información• Mozilla developer network: Red de desarrolladores de Mozilla. Información

interesante sobre la accesibilidad web con ejemplos

• Empieza hoy a desarrollar aplicaciones web accesibles: Una excelente serie de videos tutoriales por Marcy Sutton.

• Recursos de la Universidad Deque : Incluye ejemplos de códigos, referencias de lectores de pantalla y otros recursos útiles.

• Recursos de WebAIM : Montañas de información sobre la accesibilidad. WebAIM = Web Accesibility In Mind.

• Estándares de accesibilidad del W3c: Información sobre los estándares de accesibilidad que hay que complir de la mano del propio W3c.

• Guías de accesibilidad del W3c: Guías del propio W3c para la correcta aplicación de sus estándares de accesibilidad

• RD 1112/2018: Real Decreto 1112/2018 de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público.

• Ejemplos de tablas complejos: Construcciones complejas con tablas. Múltiples encabezados con múltiples filas y columnas.

• MathML: Crea expresiones matemáticas como fórmulas y ecuaciones de forma semánticamente correcta.

• Google Lighthouse: Herramientas de ayudas al desarrollador/editor. Entre muchas otras recomendaciones viene con una interesante guía de accesibilidad.

• WAVE tool: Herramienta de evaluación de la accesibilidad. Puede emplearse directamente desde su página web o instalando la extensión disponible para google chrome.

• Observatorio de accesibilidad: Iniciativa que tiene como objetivo mejorar el grado de accesibilidad de las administraciones públicas.

46 / 46

https://administracionelectronica.gob.es/pae_Home/pae_Estrategias/pae_Accesibilidad/pae_Observatorio_de_Accesibilidad.html#.XQIXQ4-LlhE

http://wave.webaim.org/

https://developers.google.com/web/tools/lighthouse/

https://www.w3.org/Math/

https://www.w3.org/WAI/tutorials/tables/multi-level/

https://www.boe.es/boe/dias/2018/09/19/pdfs/BOE-A-2018-12699.pdf

https://www.w3.org/WAI/standards-guidelines/wcag/

https://www.w3.org/standards/webdesign/accessibility

http://webaim.org/resources/

https://dequeuniversity.com/resources/

https://egghead.io/courses/start-building-accessible-web-applications-today

https://developer.mozilla.org/es/docs/Learn/Accessibility

Índice de contenido...• elementos reconocibles y familiares (como enlaces subrayados). •...

Documents