Tabla de contenidos
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.
Como hemos visto en el punto anterior, 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.
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.
Tus compañeros de desarrollo web tienen dudas sobre cuál es la combinación de color más accesible entre las siguientes opciones:
¿Cómo les ayudarías a seleccionar la mejor opción?
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.
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?
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!
¿Cómo podrías ver una web como la vería una persona que tuviera las imágenes y el código JavaScript deshabilitado?
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 .
Como hemos visto, el marcador de idioma beneficia a todos los usuarios:
¿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?
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>
¿Le pondrías un texto alternativo al logotipo de una empresa? ¿Qué texto alternativo? ¿y a una imagen decorativa?
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="">
¿Qué nivel de conformidad exigirías para un sitio web muy complejo?
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).
¿Por qué crees que es importante separar los estilos (CSS) de los contenidos y la estructura del documento (HTML)?
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.
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?
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.
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?
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>
¿Qué alternativas hay al uso de un CAPTCHA? ¿Cómo es el nuevo reCAPTCHA v3 de Google y qué mejoras trae?
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.
¿Para qué usarías el atributo acceskey?
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:
Ejemplo de aplicación:
<a href="https://w3.org" accesskey="1">Home page</a>
¿Para qué usarías el atributo tabindex? ¿Qué valor puedes darle a tabindex para eliminar un el elemento del orden de pestañas?
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>)
¿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?
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"/>