Se encuentra en:
Simple A
LIBP-0077 (Libro de pautas)
- Área: Accesibilidad en aplicaciones web (WCAG)
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
Pautas
| Título | Carácter |
|---|---|
| Teclado | Obligatoria |
| Foco | Obligatoria |
| Saltar bloques | Obligatoria |
| Título | Obligatoria |
| Idioma | Obligatoria |
| Recepción del foco | Obligatoria |
| Análisis | Obligatoria |
| Componentes personalizados | Obligatoria |
| Adaptabilidad | Obligatoria |
| Características sensoriales | Obligatoria |
| Uso del color | Obligatoria |
| Límite de tiempo ajustable | Obligatoria |
| Pausar, detener, ocultar | Obligatoria |
| Propósito de un vínculo | Obligatoria |
| Cambiar configuración | Obligatoria |
| Identificación de errores | Obligatoria |
| Etiquetas o instrucciones | Obligatoria |
| Alternativa textual | Obligatoria |
| CAPTCHA | Obligatoria |
| Destellos | Obligatoria |
| Subtítulos | Obligatoria |
| Video pregrabado (sin audio) | Obligatoria |
| Control de audio | Obligatoria |
| Audio pregrabado | Obligatoria |
Teclado
Hacer accesible toda la funcionalidad a través del teclado, sin que exista un tiempo límite para realizar las pulsaciones.
Aquí se presenta como excepción las funcionalidades que, de forma conocida, no puedan realizarse con el teclado. Por ejemplo: dibujo a mano alzada.
Los atajos de teclado y elementos similares no deben entrar en conflicto con las funcionalidades del navegador y/o el lector de pantalla.
Foco
Dar la capacidad al usuario de mover el foco por todos los elementos navegables de forma lógica y ordenada, utilizando únicamente el teclado.
El foco del teclado no debe estar bloqueado o fijado en un elemento concreto de la página. El usuario podrá acceder y salir de cualquier componente utilizando únicamente el tabulador o las flechas de dirección. Además, el foco debe seguir un orden que conserve el significado y operatividad de la página.
Saltar bloques
Ofrecer un mecanismo que permita saltar bloques de contenido que se repiten en múltiples páginas.
Deben existir enlaces que permitan a los usuarios saltar bloques comunes que se repiten en muchas páginas distintas, por ejemplo la navegación.
Una estructura adecuada de encabezados puede considerarse una técnica suficiente pero se debe tener en cuenta que la navegación por encabezados no está soportada por todos los navegadores.
Título
Establecer un título para todas las páginas.
Todas las páginas deben tener un título que describa su tema o propósito.
Idioma
Especificar el idioma de la página.
El idioma de la página debe estar especificado dentro del tag html.
Ejemplo: <html lang="es">
Recepción del foco
No provocar ningún cambio de contexto al recibir el foco por parte de cualquier componente.
Cuando un elemento reciba el foco no se deberá iniciar un cambio en la página que confunda o desoriente al usuario.
Si la entrada de datos produjese algún cambio de contexto, el usuario debe ser advertido antes de usar el componente.
Análisis
Desarrollar páginas con etiquetas completas de apertura y cierre, anidadas correctamente, sin atributos duplicados y con identificadores únicos.
La estructura de la página debe adaptarse a la sintaxis XHTML.
Las principales diferencias entre HTML y XHTML son las siguientes:
- Los elementos vacíos y no vacíos deben cerrarse siempre:
- Incorrecto: <br>
- Correcto: <br />
- Incorrecto: <p>texto A<p>texto B
- Correcto: <p>texto A</p><p>texto B</p>
- Los elementos anidados deben tener un orden correcto de apertura/cierre:
- Incorrecto: <em><strong>texto</em></strong>
- Correcto: <em><strong>texto</strong></em>
- Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles):
- Incorrecto: <td rowspan=3>
- Correcto: <td rowspan="3">, <td rowspan='3'>
- Los nombres de elementos y atributos deben ir en minúsculas.
- Incorrecto: <A HREF="/servicios/madeja/url">Nombre</A>
- Correcto: <a href="/servicios/madeja/url">Nombre</a>
- No usar el nombre del atributo como valor:
- Incorrecto: <textarea readonly>texto</textarea>
- Correcto: <textarea readonly="readonly">texto</textarea>
- Los atributos desaprobados en HTML 4.01 no forman parte de XHTML.
- Incorrecto: <font color="#0000FF">texto</font>
- Correcto: <span style="color: #0000FF;">texto</span>
Componentes personalizados
Seguir las especificaciones de XHTML en cualquier componente que se desarrolle o personalice.
Cualquier componente de interfaz de usuario debe determinar su nombre y rol de forma que puedan ser identificados por los agentes de usuario, así como cualquier cambio en los mismos.
Adaptabilidad
Crear contenidos de forma que puedan presentarse de diversas maneras sin perder la información ni su estructura.
El propósito es asegurarse de que toda la información está disponible en una forma que pueda ser percibida por todos los usuarios, como puede ser mediante voz o presentada en un diseño más simple visual. Si toda la información está disponible en una forma que puede ser determinado por el software, entonces puede ser presentada a los usuarios de diferentes maneras (visual, audible, al tacto, etc.). Para ello se deben cumplir los siguientes puntos:
- Utilizar marcado semántico para distinguir encabezados (h1,..., h6), listas (ul, ol) y texto (strong, code, blockquote, etc.).
- Usar tablas para marcar datos tabulados, usando "td" para celdas de datos y "th" para encabezados.
- Asociar etiquetas "label" con sus campos correspondientes de los formularios y agruparlos mediante "fieldset".
- Mantener un orden de navegación y lectura lógico.
Características sensoriales
No basar las instrucciones que se ofrecen para utilizar un contenido en sólo características sensoriales como forma, tamaño, ubicación, orientación o sonido.
Las instrucciones que se ofrezcan no deben depender de características sensoriales. Ejemplos:
- "Haga clic en el icono cuadrado para continuar": depende de la forma del icono al que se refiere.
- "Un sonido beep indica que puede continuar": depende de un sonido.
Con esto se pretende asegurar que todos los usuarios puedan acceder a las instrucciones para el uso del contenido, incluso cuando no pueden percibir información de la forma, el tamaño, el uso sobre la ubicación o la orientación espacial.
Uso del color
No utilizar el color como único medio para transmitir información.
No se debe utilizar el color como único método para transmitir el contenido o distinguir elementos visuales.
Los enlaces deben distinguirse de los elementos y el texto que los rodean. Si se utiliza el color para diferenciarlos, debe usarse una forma adicional para ello como por ejemplo subrayarlo cuando reciben el foco.
Límite de tiempo ajustable
Ofrecer mecanismos para apagar, ajustar o aumentar el tiempo límite que posee una página para realizar una tarea.
Si un contenido posee un límite de tiempo para terminar una tarea, debe cumplir uno de los siguientes puntos:
- Permitir desactivar el límite de tiempo antes de encontrarse con él.
- Ajustar la limitación del límite de tiempo antes de encontrarse con él hasta un máximo de diez veces el tiempo inicial.
- Extender el límite de tiempo con al menos una antelación de 20 segundos por medio de una acción fácil y que esta extensión pueda repetirse al menos 10 veces.
Esta pauta no es de aplicación para eventos en tiempo real, como por ejemplo subastas.
Pausar, detener, ocultar
Ofrecer al usuario la posibilidad de pausar, detener u ocultar cualquier movimiento, parpadeo o desplazamiento automático.
Si existe un contenido que posee un movimiento, parpadeo, desplazamiento que dure más de 3 segundos o que se actualice automáticamente y éste se presenta en paralelo a otro contenido, se debe permitir pausar, detener u ocultar por el usuario, excepto si la acción es esencial para el contenido.
Propósito de un vínculo
Redactar los textos de los enlaces de forma que tengan sentido con el vínculo descontextualizado o desde el enlace en su contexto.
Siempre que el propósito de un enlace no sea ambiguo, su texto debe ser lo suficientemente descriptivo como para identificar su propósito directamente desde el texto enlazado o desde el enlace en su contexto. Además, los enlaces con los mismos destinos deberían tener las mismas descripciones.
Cambiar configuración
Advertir al usuario con antelación al uso de un componente, de cualquier cambio de configuración que éste pueda provocar.
Se debe advertir al usuario con antelación de los cambios en la configuración de cualquier elemento de la interfaz que causen una modificación en la página.
Identificación de errores
Informar al usuario a través de texto e identificando el ítem concreto, de cualquier error detectado automáticamente en la introducción de datos.
Cuando se utiliza la validación de formularios, se debe ofrecer la información sobre los errores y avisos de forma eficiente, intuitiva y accesible. Los errores deben estar claramente identificados y explicados mediante texto para permitir que el usuario pueda fácilmente solucionar el error y reenviar los datos del formulario. Una buena práctica es ofrecer un acceso rápido al ítem erróneo desde la descripción del error.
Etiquetas o instrucciones
Proporcionar etiquetas o instrucciones para la entrada de datos por parte del usuario.
Los diferentes campos de un formulario deben contener etiquetas descriptivas para los elementos a los que hacen referencia. Para ello debe utilizarse la etiqueta "label" y su atributo "for".
La agrupación de campos y su etiquetado debe realizarse empleando las etiquetas "fieldset" y "legend" respectivamente.
Alternativa textual
Ofrecer alternativas textuales adecuadas a todo el contenido no textual.
Todas las imágenes y contenidos no textuales que transmitan información deben poseer un texto alternativo adecuado, que describa la información que se puede observar en el mismo.
Las imágenes deben utilizar el atributo "alt". Si la imagen es compleja, se utiliza el atributo "alt" para una descripción breve y el contenido alternativo extenso se debe mostrar a través de una página enlazada mediante el atributo "longdesc". Las imágenes que no transmiten contenidos deben tener su atributo "alt" vacío o estar aplicadas como fondos.
CAPTCHA
Proporcionar maneras alternativas dirigidas a diferentes sentidos de demostrar que el usuario es humano.
Cuando el propósito es determinar que el usuario es humano se deben ofrecer, al menos, dos opciones para su comprensión dirigidas a diferentes sentidos y que se ajusten a diferentes discapacidades. Además, la imagen debe poseer texto alternativo que indique su objetivo.
Destellos
No crear contenidos que destellen más de 3 veces en un segundo o el destello esté por encima de los umbrales de destello general y de destello rojo.
No se deben crear contenidos que destellen más de tres veces por segundo a menos que el parpadeo sea lo suficientemente pequeño, los destellos sean de bajo contraste y no contengan demasiado rojo.
- Umbral general de destello:
Una secuencia de destellos o secuencias de imágenes que cambian rápidamente no se permiten cuando se dan las dos siguientes circunstancias a la vez:
- El área combinada de destellos que ocurren al mismo tiempo (pero no necesariamente contiguos) ocupa más de un cuarto de cualquier rectángulo de 355 x 268 píxeles dispuesto en cualquier parte de la pantalla cuando el contenido se muestra con un tamaño de 1024 x 768 píxeles.
- Hay más de tres destellos por segundo.
- Umbral de destello rojo:
Una transición a o desde un rojo saturado en cualquier nivel de luminiscencia no está permitido cuando ocurre lo siguiente:
- El área combinada de destellos concurrentes ocupa más de un cuarto de un rectángulo de 355 x 268 píxeles dispuesto en cualquier lugar de una pantalla cuyo contenido se muestra con un tamaño de 1024 x 768 píxeles.
- Se dan más de tres destellos por segundo.
Subtítulos
Proporcionar subtítulos para todo audio presente en cualquier contenido multimedia pregrabado.
Deben proporcionarse subtítulos para cualquier contenido multimedia pregrabado que posea una locución, como por ejemplo vídeos de YouTube.
Video pregrabado (sin audio)
Ofrecer una descripción auditiva o textual del vídeo.
Se debe proporcionar una alternativa al video pregrabado, ya sea una pista de audio o un texto equivalentes.
Control de audio
Ofrecer un mecanismo para parar, pausar, silenciar o ajustar el volumen de cualquier sonido que se reproduzca automáticamente durante más de tres segundos.
Si un audio se reproduce automáticamente en una página web durante más de tres segundos, debe existir un mecanismo que permita pausar o detener el audio, o bien que permita controlar el volumen de manera independiente al del resto del sistema.
Audio pregrabado
Ofrecer una transcripción descriptiva del audio.
Se debe proporcionar una alternativa al audio que contenga la información equivalente del contenido. Esta alternativa debe ser una transcripción descriptiva del audio.
