Ejercicios sobre accesibilidad web. Problemas comunes y soluciones

Serie de retos o ejercicios sobre accesibilidad web que nos ayudarán conseguir un desarrollo web lo más accesible posible y dar solución a multitud de problemas comunes.

Contenidos del artículo

Como hemos visto en el tutorial de accesibilidad, la accesibilidad web consiste en desarrollar aplicaciones web que puedan ser utilizadas por el mayor número de usuarios con necesidades específicas. De esta forma, todas las personas podrán acceder a los contenidos web sin importar sus dificultades y circunstancias.

Gracias a diferentes normas, recomendaciones y guías de accesibilidad desarrolladas por el grupo WAI de la W3C se pueden construir sitios web accesibles según unos niveles de conformidad. Además, hemos estudiado las diferentes barreras a las que se deben enfrentar los usuarios con problemas específicos y los dispositivos de apoyo que se utilizan para acceder a la información de una web.

Ejercicios sobre accesibilidad web. Problemas comunes y soluciones

Vamos a practicar ahora los conocimientos adquiridos mediante una serie de retos o ejercicios sobre accesibilidad web. Estos ejercicios se han de resolver con el fin de conseguir un desarrollo web lo más accesible y dar solución a los problemas más comunes actualmente.

Desafío 1: Combinación de colores

Tus compañeros de desarrollo web tienen dudas sobre cuál es la combinación de color más accesible entre las siguientes opciones:

Color de texto: #1F1FFF y color de fondo: #A3A3A3.
Color de texto: #000047 y color de fondo: #B8B8B8.

¿Cómo les ayudarías a seleccionar la mejor opción?

Solución al problema planteado 1

Tal y como vimos en el apartado de herramientas, podemos utilizar la aplicación web Contrast Checker para comprobar cuál es la combinación de color más accesible. Además, también nos permite conocer su nivel de adecuación.

Desafío 2: Subtítulos en los vídeos

Los subtítulos ponen nuestro contenido a disposición de una audiencia mayor, en la que se incluyen personas con problemas auditivos, o bien personas que hablan un idioma distinto al del vídeo.. ¿Cómo incluirías subtítulos en un vídeo? ¿se puede hacer directamente desde YouTube?

Solución al problema planteado 2

En Youtube hay una opción que te permite incluir subtítulos a tus vídeos desde cero e incluso después realizar cualquier modificación. Además, hay diferentes herramientas, gratuitas y fáciles de usar, que nos permiten agregar subtítulos a nuestros vídeos en producción.

¿Crees que este vídeo es accesible mediante el teclado? ¡haz la prueba!

Desafío 3: Deshabilitar imágenes y JavaScript

¿Cómo podrías ver una web como la vería una persona que tuviera las imágenes y el código JavaScript deshabilitado?

Solución al problema planteado 3

Esta pregunta tiene múltiples soluciones. La más sencilla de todas es utilizar las opciones que vienen incluidas en el propio navegador de Chrome: botón de los tres puntos / Configuración/ Privacidad/ Configuración del sitio web/ deshabilitar imágenes y JavaScript .

Desafío 4: Idioma

Como hemos visto, el marcador de idioma beneficia a todos los usuarios:

Facilita la lectura de los lectores de pantalla y síntesis de voz baille.
Los motores de búsqueda identifican los contenidos del idioma deseado.
Se utiliza para cambiar la voz en la pronunciación de un texto en otro idioma, etc.

¿Cómo indicarías el idioma de una web? ¿y el idioma de una palabra concreta, el de una etiqueta de cita o el de una etiqueta blockquote? ¿qué harías para indicar el idioma de un enlace?

Solución al problema planteado 4

El idioma de la página se especifica en la etiqueta html con el atributo lang=»es». El idioma en cualquier parte del código se especifica mediante el atributo lang=»es». El idioma en un enlace se especifica mediante el atributo hreflang=»es».

Idioma de una web:
<html lang="es">

Idioma de las partes de una web:
<a href="eniun.com/en/" lang="en" hreflang="en" title="English translation">English</a>

Etiqueta de cita y etiqueta blockquote:
<p>Un extracto de <cite lang="en">Brave New World</cite></p>
<blockquote lang="en">Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</bloquote>

Desafío 5: Texto alternativo en las imágenes

¿Le pondrías un texto alternativo al logotipo de una empresa? ¿Qué texto alternativo? ¿y a una imagen decorativa?

Solución al problema planteado 5

Todas las imágenes deben disponer de la etiqueta alt. En el caso de una imagen decorativa, la etiqueta alt debe encontrarse vacía. En el caso del logotipo de la empresa, le pondremos el nombre de la empresa.

Recuerda que un texto alternativo no puede superar los 150 caracteres.

<img src="eniun.jpg" alt="Eniun">
<imge src="fondo.jpg" alt="">

Desafío 6: Nivel de conformidad de los proyectos

¿Qué nivel de conformidad exigirías para un sitio web muy complejo?

Solución al problema planteado 6

No es recomendable exigir un nivel AAA porque muchos contenidos no pueden llegar a alcanzar ese nivel.

En España se exige legislativamente que todas las páginas web administrativas, entre otras, tengan un nivel mínimo de conformidad doble A (AA).

Desafío 7: Separación del estilo y la estructura

¿Por qué crees que es importante separar los estilos (CSS) de los contenidos y la estructura del documento (HTML)?

Solución al problema planteado 7

Las personas daltónicas pueden utilizar sus propias hojas de estilo para modificar los colores de las fuentes y del fondo de las páginas. De esta forma, adaptan los colores a sus necesidades en vez de usar los definidos por el desarrollador. Por este motivo, es muy importante no incluir estilos en línea, tal y como vimos en la unidad 3.

Prueba la extensión Helperbird para cambiar la fuente y el tamaño de las webs que se visualizan en el navegador Chrome.

Visualiza este texto que estás leyendo y comprueba si se realiza algún cambio cuando se modifica la fuente mediante la extensión. Como puedes comprobar, tiene un tipo de letra Arial definido en línea mediante la etiqueta style, por tanto no va a poder ser modificado.

Desafío 8: Anidamiento de los encabezados

Te han encargado que mejores la accesibilidad de un sitio web que tiene graves problemas de estructuración en su contenido. Esta web no utiliza elementos semánticos ni tiene los encabezados anidados de forma correcta: h1, h2, h3. En su lugar dispone de encabezados desestructurados: h1, h3, h5 e incluso encabezados creados con divs en lugar de usar el elemento semántico correspondiente. ¿Cómo podrías mejorar este diseño? ¿Qué herramienta utilizarías para comprobar el anidamiento de los encabezados?

Solución al problema planteado 8

En primer lugar, usaría elementos semánticos para marcar la estructura: párrafos, citas en
línea, citas en bloque, cursiva y negrita para dar énfasis, etc. En segundo lugar, anidaría los encabezados de forma correcta h1, h2,h3…no así h1,h3,h5. En cualquiera de los casos, nunca utilizaría hojas de estilo para simular encabezados, utilizaría sus elementos semánticos h1,h2, etc.

Para comprobar el anidamiento de los encabezados, y otras muchas cosas, se puede utilizar la extensión Web Developer Toolbar, tal y como vimos en el apartado de herramientas a utilizar para la accesibilidad web.

Desafío 9: Web maquetada mediante tablas

Te han encargado que mejores la accesibilidad de un sitio web que se encuentra maquetado mediante tablas. Su contenido se encuentra representado de la siguiente forma:

<table>
    <tr> 
        <td colspan="2">Cabecera</td>
    </tr>
    <tr>
        <td>Menu</td>
        <td>Contenido principal</td>
    </tr>
    <tr>
        <td colspan="2">Footer</td>
    </tr>
</table>

¿Qué mejoras realizarías?

Solución al problema planteado 9

En primer lugar, no utilizaría tablas para maquetar una página web, ni para representar los contenidos. Utilizaría etiquetas semánticas y hojas de estilo para dar representación a los elementos de la siguiente manera:

CSS
header{width:100%;}
nav{width....;}
main{...}
footer{...} 

HTML
 <header>Cabecera</header>
 <nav>Menu</nav>
 <main>Contenido principal</main>
 <footer>Footer</footer>

Desafío 10: CAPTCHA

¿Qué alternativas hay al uso de un CAPTCHA? ¿Cómo es el nuevo reCAPTCHA v3 de Google y qué mejoras trae?

Solución al problema planteado 10

Como bien sabemos, los CAPTCHAS presentan muchos problemas de accesibilidad para ciertos grupos de usuarios. Las personas daltónicas o con visión reducida pueden no ver bien las combinaciones de colores con letras y números a descifrar. Por otra parte, es evidente que una persona ciega que utiliza un lector de pantalla no puede contestar a los CAPTCHAS basados en imágenes.

Un alternativa fiable al uso del CAPTCHA es utilizar operaciones matemáticas «2+5-4» o preguntas textuales «¿Cuál es la capital de España?». Sin embargo, todo CAPTCHA que implique interacción humana puede suponer un problema de accesibilidad.

Para solucionar todos estos problemas, y muchos otros, ha salido la nueva versión de CAPTCHA: reCAPTCHA v3 que ya no realiza pruebas interactivas a los usuarios. Se basa en un sistema de puntaje que determina el movimiento del ratón, el tiempo y los clics que realiza cada usuario. Mediante este sistema Google es capaz de interpretar si se trata de un bot o de un usuario. Ver toda la información sobre reCAPTCHA v3.

Desafío 11: Atributo acceskey

¿Para qué usarías el atributo acceskey?

Solución al problema planteado 11

Se utliliza para definir un atajo de teclado, es decir, una tecla de acceso directo a un elemento como un botón, un formulario o un enlace.

Existen atajos definidos en diferentes países. Por ejemplo, el Gobierno del Reino Unido estableció en 2002 las siguientes teclas de acceso rápido para sus sitios web:

S – Skip navigation
1 – Home page
2 – What’s new
3 – Site map
4 – Search
5 – Frequently Asked Questions (FAQ)
6 – Help
7 – Complaints procedure
8 – Terms and conditions
9 – Feedback form
0 – Access key details

Ejemplo de aplicación:

<a href="https://w3.org" accesskey="1">Home page</a>

Desafío 12: Atributo tabindex

¿Para qué usarías el atributo tabindex? ¿Qué valor puedes darle a tabindex para eliminar un el elemento del orden de pestañas?

Solución al problema planteado 12

Mediante el atributo tabindex se puede definir el orden de navegación cuando se usa el tabulador. Se recomienda usar el orden normal de la posición de los elementos en la página, por tanto, lo ideal es no modificar este valor. Su uso debe estar destinado a definir algún elemento interactivo al que no podamos acceder mediante el tabulador. Por ejemplo :

<div tabindex=»1″>Pulsando el tabulador accedes aquí</div>

Si queremos eliminar un elemento del orden de pestañas usamos tabindex=" -1" (por ejemplo en un <button>)

Desafío 13: Controles del formulario

¿Cómo etiquetarías correctamente los controles del siguiente formulario?

<label>Nombre:</label>
<input type="text" name="textfield" />

¿Cómo haríamos accesibles los inputs que no tienen un label asociado?

Solución al problema planteado 13

Definiendo los atributos for (en label) e id (en input). Observa que los valores de for e id son los mismos, por lo que la asociación de la etiqueta con el elemento del formulario es adecuada. Recuerda que el valor de un id debe ser único

<label for="name">Nombre:</label>
<input id="name" type="text" name="textfield" />

Para hacer accesibles los inputs que no tienen etiqueta label asociada podemos usar la etiqueta title. Por ejemplo:

<input type="text" name="buscar" title="Escribe lo que quieres buscar"/><input type="submit" value="buscar"/>