Técnicas para las pautas de accesibilidad

Segun el documento WCAG, se recogen un listado de 420 técnicas aproximadamente, por lo que listar cada una de ellas, se haría super extenso esta página.
Veremos las técnicas más importantes agrupandolas en varios grupos.

• Técnicas generales



En este tipo de técnicas se agrupan la mayor parte de técnicas en una página.
En general nos comenta sobre como realizar un diseño accesible para poder presentar el contenido o información.

• Agregar un enlace en la parte superior de la página dirigido al área de contenido principal.



• Permitir que el contenido se pause , podiendo reiniciarse desde donde se pausó.



• Permitir al usuario realizar una actividad sin limite de tiempo



• Todo contenido que se encuentre en parpadeo, no debe durar más de 5 segundos.



Por ejemplo, una sección de novedades, podemos incluir una etiqueta "nuevo" y parpadear en no más de 5 segundos.

Una de las reglas nos dice que no debe parpadear mas de 3 veces por segundo.

NUEVO PRODUCTO

• Asegurar de que haya una relación de contraste 7:1 entre el texto (o imágenes) y el fondo detrás del texto. El objetivo es garantizar que el texto sea totalmente legible con un color de fondo.



• Para cada página web, titulo descriptivo..
  

Orientan y ayudan a los usuarios a la navegación de un sitio web.




• Para cada enlace, poner textos de enlace



El texto tiene que describir el propósito del enlace.

Crea un enlace a la página de inicio de google.

También indicar que el enlace abra en una nueva pestaña o ventana, nunca en la misma página. Siempre advirtiendo de forma avanzada al abrir una nueva ventana o pestaña.

Disponer de mapas de sitios, índices o glosarios que ayuda al usuario a poder situarse en una página.





• Proporcionar alternativas de texto para contenidos como imagenes. Un buscador dispone de un logo de lupa pero el texto descriptivo no se llama lupa, se llamaría buscar.



• Auditar y proporcionar la corrección de errores por parte del usuario antes de enviar.
  

  Por ejemplo, no cumple con uno de los requisitos para una contraseña. En esta parte, se informa al usuario el foco de donde esta ocurriendo el error, indicando más información de lo que esta ocurriendo.
  Nombre:

  
  
  


• Utilizar imagenes o simbolos para comprender mejor.



Utilizar esquemas, diagramas, fotografías o videos.

• Agregar enlaces en la parte superior de la página a cada área de contenido:

Enlace a contenido principal del sitio web, campo de busqueda y barra de navegación del sitio web (enlaces a otras páginas).

• Uso de los area como alternativa de texto o contenido. Coordenadas bien definidas y con información de guía para el usuario.

Hablaremos del uso de las técnicas HTML y XHTML orientadas como objetivo de ofrecer el nivel de accesbilidad necesario.

• Combinar enlaces con imagenes:



Proporcionaremos otra forma de representar un enlace, dando un objetivo del uso de enlaces sin que sean confusos o no legibles para los usuarios o tecnologías de asistencia.

<a href="inicio.html">
    <img src="logo.png" alt="Enlace a inicio en el logo">
</a>


• Utilización de mapas de imagenes:



Gracias a la etiqueta map en HTML, podemos crear enlaces u otras alternativas dentro del contenido de la imagen de forma que obtenemos un mapa de imagenes. Un ejemplo es el uso de un mapa de un país para poder seleccionar provincias o comunidades.

Pulsa en los círculos para acceder a las secciones!

• Ofrecer un título con title



Utilizar title dentro de head y sobre todo, cada página tendrá un titulo diferente para ayudar a localizar al usuario y orientarse.





• Un formulario tiene que tener un botón de envio:



Para ello, utilizaremos un input de tipo submit para poder enviar el formulario.
No es solo por enviar el formulario, también hay que ser claros con este tipo de botones para que el usuario pueda localizarlo de forma sencilla.

Usuario:


• Complementar el texto de enlace con atributo title



Ofrece un texto adicional para describir el enlace. Si antes hemos comentado que title nombra el titulo de la página, también podemos dar titulos a los enlaces, otra forma de complementar el propósito del enlace.

Twitch

• Uso del atributo alt para describir imagen o para etiquetar un boton



Con el atributo alt, podemos dar la descripción a nuestra imagen pero también para dar una etiqueta para los inputs de un formulario. Es importante si hay varios botones de envío en una página y cada uno de ellos llevan a un resultado diferente.

<form action="http://localhost/login.php" method="post">
  <input type="text" name="nombre" alt="Nombre">
  <input type="text" name="apellidos" alt="Apellidos">


• Empleo de h1-h6 para organizar la información



Las tecnologías de asistencia interpretarán los encabezados como puntos claves antes de representar el contenido, ayudando al usuario a situarse y navegar por los encabezados de forma rápida. Algunas tecnologiías marcan los encabezados con el objetivo de que el usuario perciba una presentación visual clara.

h2

h3

h4

h5

h6

• Uso de etiquetas de texto en cada input de un formulario



Válido para input de tipo text, checkbox, radio, file, password, textarea y select.
El uso de label da información al usuario del input. Se asigna la etiqueta al input.
El uso del atributo for en label debe ser el mismo que el id del atributo de input. No utilizaremos label para botones y para inputs de tipo hidden y image

<label for="nombre">Nombre:</label>

<input type="text" name="nombre" id="nombre">

• Uso de listas ordenadas (ol), desordenadas(ul) o grupo de enlaces(dl)



• Uso de tabulaciones en formularios, tablas o enlaces



Ofrece la legibilidad necesaria para interpretar la información de forma sencilla.

Mejorar la percepción visual de la información es uno de los objetivos claves para lograr páginas webs accesibles. En CSS, existen varias técnicas importantes a tener en cuenta.

• Uso de posicionamiento estructural



El objetivo es mejorar la apariencia visual con una presentación significativa. Es el caso de la estructura de una página web donde posicionamos nuestro menú de navegación y luego posicionaremos el contenido de la página y/o una barra de navegación lateral.

• Dar legibilidad al contenido



Podemos dar:

• Espaciado como margin o padding





• Tamaño del contenido en porcentaje o la unidad em, adaptable para la pantalla





• No usar un color de fondo que repercuta en la legibilidad del texto





• Dar legibilidad al texto



Utilizaremos las siguientes pautas:

• Espaciado de texto



Ejemplo sin espacios

Ejemplo con espacios

• Utilizar unidad em o porcentaje para las fuentes, ofreciendo el contenido de manera adaptativa para las pantallas.



• Utilizar pseudoclases para la modificación de diseño para resaltar o mejorar la visualización si acercamos el raton o hacemos click



• Utilizar alineaciones de texto a la izquierda, derecha o centro (Sin justificar el texto).
  
  






• Usar selectores de estilo para dar una versión alternativa



Ideal para poder dar otra forma alternativa de visualización facilitando la legibilidad del contenido.

En caso de que se utilice JavaScript en alguna funcionalidad dinámica o algún comportamiento en la interfaz, siempre debemos facilitar dicha funcionalidad

Proporcionar un script que advierte al usuario que el límite de tiempo está a punto de vencer.

El objetivo de esta técnica es notificar a los usuarios que están casi fuera de tiempo para completar una interacción. Cuando los scripts proporcionan una funcionalidad que tiene límites de tiempo, el script puede incluir una funcionalidad para advertir al usuario de límites de tiempo inminentes y proporcionar un mecanismo para solicitar más tiempo.

Uso de scripts para controlar el parpadeo y detenerlo en cinco segundos o menos.

El objetivo de esta técnica es controlar el parpadeo con un script para que el script pueda configurarlo para que se detenga en menos de cinco segundos.

Las técnicas WAI-ARIA, Web Accessibility Iniciative- Accessible Rich Internet Applications, (Iniciativa de Accesibilidad Web-Aplicaciones Enriquecidas de Internet Accesibles). es una especificación del W3C, recomendación desde el 20 de marzo de 2014.

Se refiere a un conjunto de información y/o atributos semánticos que se pueden añadir en un documento web de cara a facilitar el trabajo a la web para ayudar a las tecnologías de asistencia, como los lectores de pantalla para ciegos, a dar sentido a ciertas cosas que no son nativas de HTML.

WAI-ARIA se centra sobre todo en componentes dinámicos y en elementos de interfaz relacionados con JavaScript. Estos controles,que pueden tener mezcla de HTML, AJAX y JavaScript, generan comportamientos y contenido dinámico que puede dificultar el acceso a la información a determinados usuarios.

Alguno de los puntos a tener en cuenta con ARIA son los siguientes:

• REGLA DE ORO: No usar ARIA al menos que sea necesario. Si el objetivo que se persigue puede hacerse con estándares comunes de HTML y CSS es preferible ya que está mejor soportado.
• ARIA jamás sustituye las tareas habituales al desarrollar un sitio web, sino que es un complemento a esas tareas, aportando una capa extra de accesibilidad que no existía en el HTML tradicional, y permitiendo la comunicación con los productos de apoyo.

Algunas de las técnicas ARIA recomendadas consisten básicamente en emplear atributos en los componentes HTML.

Atributos más importantes

TABINDEX

Teniendo en cuenta que en HTML sólo pueden recibir el foco del teclado los enlaces, botones y elementos de formulario.
Por ello, no se debería de incluir nunca eventos JavaScript tales como onclick u okeyoress en elementos de maquetación, puesto que dejariamos fuera a usuarios que acceden sin ratón, como pueden s transmitiendo a las APIs de accesibilidad de los navegadores web información sobre el comportamiento de la interfaz y su estructura, para que los productos de apoyo puedan acceder a dicha información.

Ejemplo:

<div onclick="alert('¡Saludo!');">Púlsame</div>

Lo que se hace es crear una capa div que simula el comportamiento de un enlace o botón, que no es su propósito y además, jamás se podrá acceder por teclado ya que este elemento nunca recibirá el foco.
Por esta razón, no se debería agregar eventos javascript a elementos que no sean enlaces, botones u elementos de formulario.
Pero en ocasiones se hace necesario utilizar elementos de marca y maquetación como div o li para realizar acciones dinámicas, en estos cosases útil emplear el elemento WAI-ARIA tabindex para informar a los navegadores web que ese elemento puede recibir el foco y por tanto, ejecutar eventos como onclick.
Si volvemos al ejemplo anterior y le añadimos el atributo tabindex con el valor 0 para indicar que el elemento puede recibir el foco:

Ejemplo:

<div onclick="alert('¡Saludo!');" tabindex="0">Púlsame </div>

De esta manera, si en un navegador web, vamos pulsando la tecla TAB de nuestro teclado, el foco se irá colocando sobre los enlaces, botones, elementos de formulario y los elementos marcados con tabindex="0".

Valores del atributo tabindex

tabindex="0": permite que un elemento de marca o maquetación como div, p, li, ..., que no pueden recibir el foco por defecto, puedan recibirlo. De esta forma se podrá acceder con el tabulador hasta él y el orden en el que se incorpora en la página es el lugar que ocupa en el código HTML.


Pincha aquí
tabindex="1": se diferencia del caso anterior en que no podremos tabular hasta el elemento. Lo que permite es que pueda coger el foco mediante JavasScript con la función focus(), para hacer scroll a una parte de la página.


Pincha aquí
tabindex="x": donde x es un número entero. Define un orden de tabulación explícito: 1,2, 3, etc.
No se recomienda su uso pues puede crear confusión.


Pincha aquí

ROLES

Incluir información sobre el rol o función de un elemento de nuestra página mediante ARIA es tan sencillo como añadir a la etiqueta del elemento role=[nombre_del_rol].
No se debe cambiar dinámicamente el rol de un elemento, este es fijo. Si se quiere cambiar habría que eliminar del DOM el elemento y crear uno nuevo con el nuevo rol.
Podemos encontrar dos tipos de roles, lo que definen elementos de interfaz y los que definen la estructura de la página.

Landmark Roles: Dentro de los roles que definen la estructura de la página nos encontramos con: landmark roles, que se usan para identificar áreas separadas de la pagina y transmitir la naturaleza de las mismas.
Se trata de añadir características útiles de navegación global, consistentes en cualquier documento (X)HTML, que transmiten información de la estructura de la página e información semántica sobre estas zonas.

Rols de estructura y su función:

role="banner":Sólo debe existir uno en la página y es para marcar generalmente la cabecera de la página web.



role="navigation": Se de utilizar para marcar los elementos que que forman un menú.



role="main":Marca donde está el contenido principal de la página.



role="complementary": Contenidos que no son imprescindibles el contenido.



role="conteninfo":Para marcar una zona en la que hay información sobre la página y que se repite en todas, por ejemplo la informaición legal, enlaces de navegación de un sitio y demás información.

role="search": Para marcar las zonas donde hay un buscador en la página.



role="form": Para marcar las zonas donde hay formularios.

role="application": Se marca esta zona si hay una aplicación web interactiva, como juegos y similar que cambian las reglas del uso normal del teclado.

Otros atributos:

aria-required: Para campos requeridos. Tomará valores True en el caso de ser verdadero o false en el caso de no ser requerido.

Ejemplo:

<label for="lastName">Last name:</label> <input id="lastName" type="text" aria-required="true" />

Last name:

arial-label : Sirve para dar nombre accesible a un elemento. Debe usarse sólo en ocasiones que lo requieran, por defecto el nombre de un elemento debe ser su contenido.

Ejemplo:

si tenemos un enlace que cierra un cuadro modal y lo escribimos con una X, el nombre accesible debería ser cerrar:

<a href="#" aria-label="Cerrar">X</a>

X

aria-describedby: permite asociar una descripción larga a un elemento indicando el id del elemento que proporciona la descripción.

Hola que tal

Aria-labelledby: sirve para dar un nombre a un elemento HTML.

PDF
DOC

la diferencia es que con aria-label es que se indica directamente el textomientras que con aria-labelledby el id/ids del elemento/s de la página que actúa/n como contenido.

Ejemplo:

<p id="titulo-informe"> Descargar el informe de accesibilidad en: </p> <a aria-labelledby="titulo-informe pdf" href="pdf.pdf" id="pdf" PDF/a | a aria-labelledby="titulo-informe docx" href="word.docx" id="docx"Word /a> | <a aria-labelledby="report-title pptx" href="ppt.pptx" id="pptx">PowerPoint</a> </p>

Descargar el informe de accesibilidad en:

| PowerPoint

Esta línea tambien la podemos marcar con el tabulador

En los ficheros pdf, formato muy extendido en cualquier plataforma, existen técnicas para mejorar la accesibilidad hacia el documento. Casi la gran mayoría de acciones estan dedicadas para los lectores de pantalla aunque por otro lado, debemos de aplicar técnicas para que dichos lectores de pantalla interpreten la información correctamente.

Para ello, aplicaremos algunas de las técnicas más importantes:

• Declarar el idioma del documento.



Si fueran dos idiomas diferentes, se declara el idioma en cada contenido para que el lector pueda interpretar el idioma adecuadamente.
Para ello utilizaremos la etiqueta <lang>

• Utilizar texto alternativo para las imágenes informativas



Pero no utilizaremos texto solo si la imagen es decorativo.

• Uso de etiquetas para organizar el contenido.



El lector de pantallas hablará por partes en la cual, el usuario puede ir saltando mediante el teclado. Hay que destacar que las etiquetas depende de la organización de información. Puede ocurrir errores que se requieren de correcciones.
Un contenido organizado puede evitar demasiados errores de etiquetado.

• Revisar el orden de lectura



Desde el principio y hasta el final del documento.

• Uso de encabezados en cada sección de contenido



• Uso de las etiquetas de control de formulario



Garantizar que las etiquetas de formulario como inputs, botones de formularios o la información sea perceptible y que las tecnologías de asistencia puedan interpretarlas correctamente.

• Crear hipervínculos



Uso de hipervínculos con texto descriptivo, diseño legible definido para un hipervínculo. Los hipervínculos se crean antes de la conversión a PDF. Se puede usar en enlaces alternativos referidos al tipo de información en el contenido.
Uso de more o más información ...

• Activar y diseñar los encabezados de la página y píes de página



Referidos para indicar el título del documento, capítulo, fecha, páginas o información del autor.

• Uso de listas ordenadas o desordenadas



De esta manera, la información viene organizada en varios puntos, ayudando al usuario a visualizar la información. También viene bien para las tecnologías de acceso pero resaltar que la lista debe crearse de forma correcta (no utilizar un enter entre varios puntos de una lista, causando confusión).

En el siguiente enlace, podras descargar un fichero PDF accesible donde se ha probado reglas de accesibilidad PDF.

Descargar PDF accesible

Estos pueden ser algunos de los errores que pueden suceder por no usar accesibilidad en nuestra página web
Son un total de 93 fallos típicos con referencias precisas a los criterios:

- Alineación de texto justificado

- Fallo por mostrar una imagen sin un texto de acompañamiento

- Fallo por utilizar enlaces con información poco específica

- Fallo por utilizar elementos de tipo blink (parpadeo de texto)

- Los captha (Completely Automated Public Turing test to tell Computers and Humans Apart) son imágenes con letras y números distorsionados que sirven para que los "robots" de spam u otro tipo de software automáticos accedan a zonas restringidas y que se descarguen todo tipo de archivos tipo, videos, audios, etc, pero representan un problema de accesibilidad para algunos usuarios.
Una propuesta interesante es un complemento de firefox llamado WebVisum en el que le mandas el captcha y te lo devuelven resuelto.
Google también ha sacado el suyo, como se muestra en el siguiente gif.

A la hora de poner recursos audiovisuales en nuestra pagina web hay que tener en cuenta dos factores esenciales para que estos sean accesibles: que tengan voz y que esten subtitulados.

Subtitulado de video:

- Centrados en la parte inferior, excepto los subtítulos que representen efectos sonoros que se sitúan en la parte superior.

- Tienen que aparecer en pantalla el tiempo suficiente para ser leídos.

- Es preferible que los subtítulos no ocupen más de dos líneas en pantalla.

- Interlineado sencillo

- Todo lo que se dice se debe subtitular

- La persona que habla debe ser identificada cuando hay más de dos personas en pantalla. Código de color para identificar a las personas.

- Emplear puntuación y evitar errores ortográficos.

Ejemplo de video subtitulado