Segon dia del taller
Com a segon dia han tocat l'exposició de les dues pautes restants: Comprensible i Robust.
| La información y el manejo de la interfaz de usuario deben ser comprensibles. |
3.1 Legible.
Hacer que los contenidos textuales resulten legibles y comprensibles.
3.1.1 Idioma de la página (A)
El idioma predeterminado de cada página web puede ser predeterminado por software.
3.1.2 Idioma de las partes (AA)
El
idioma de cada pasaje o frase del contenido puede ser determinado por
software, excepto los nombres propios, términos técnicos y palabras o
frases que se hayan convertido en parte natural del texto que les rodea.
3.2 Predecible.
Hacer que las páginas web aparezcan y operen de manera predecible.
3.2.1 Al recibir el foco (A)
Cuando cualquier componente recibe el foco, no inicia ningún cambio en el contexto.
3.2.2 Al recibir entradas (A)
El
cambio de estado en cualquier componente de la interfaz de usuario no
provoca automáticamente un cambio en el contexto a menos que el usuario
haya sido advertido de ese comportamiento antes de usar el componente.
3.2.3 Navegación coherente (AA)
Los
mecanismos de navegación que se repiten en múltiples páginas web dentro
de un conjunto de páginas web aparecen siempre en el mismo orden
relativo cada vez que se repiten, a menos que el cambio sea provocado
por el propio usuario.
3.2.4 Identificación coherente (AA)
Los componentes que tienen la misma funcionalidad dentro de un conjunto de páginas web son identificados de manera coherente.
3.3 Entrada de datos asistida.
Ayudar a los usuarios a evitar y corregir los errores
3.3.1 Identificación de errores (A)
Si
se detecta automáticamente un error en la entrada de datos, el elemento
erróneo es identificado y el error se describe al usuario mediante un
texto.
Proporcionar descripciones textuales que identifiquen los campos no completados.
Proporcionar
un texto descriptivo que indique al usuario que ha introducido un dato
que no está en la lista de valores permitidos.
Proporcionar un texto descriptivo que indique al usuario que ha introducido un dato que no cumple el formato requerido.
Ventana de alerta avisando del error cuando se usa validación de cliente.
3.3.2 Etiquetas y instrucciones (A)
Se proporcionan etiquetas o instrucciones cuando el contenido requiere la introducción de datos por parte del usuario.
Proporcionar etiquetas descriptivas.
Usar elementos <label> para asociar las etiquetas con los controles de formulario mediante el atributo for.
Proporcionar una descripción de los grupos de controles de formulario usando los elementos <fieldset> y <legend>.
Usar un botón adyacente para identificar el propósito del campo.
3.3.3 Sugerencias ante errores (AA)
Si
se detecta automáticamente un error en la entrada de datos y se dispone
de sugerencias para hacer la corrección, entonces se presentan las
sugerencias al usuario, a menos que esto ponga en riesgo la seguridad o
el propósito del contenido.
3.3.4 Prevención de errores (AA)
Para
las páginas web que representan para el usuario compromisos legales o
transacciones financieras; que modifican o eliminan datos controlables
por el usuario en sistemas de almacenamiento de datos; o que envían las
respuestas del usuario a una prueba, se cumple al menos uno de los
siguientes casos:
Reversible : El envío es reversible
Revisado:
Se verifica la información para detectar errores en la entrada de datos
y se proporciona al usuario una oportunidad de corregirlos
Confirmado:
Se proporciona un mecanismo para revisar, confirmar y corregir la
información antes de finalizar el envío de los datos
| Los componentes de la interfaz de usuario y la navegación deben ser operables. |
2.1 Accesible por teclado.
Proporciona acceso a toda la funcionalidad mediante el teclado
2.1.1 Teclado (A)
Toda
la funcionalidad del contendido es operable a través de una interfaz de
teclado sin que se requiera de una determinada velocidad para cada
pulsación de teclas.
Excepciones:
Usar manejadores de evento que puedan lanzarse mediante teclado:
onkeydown equivale a onmousedown
onkeyup equivale a onmouseup
onfocus equivale a onmouseover
onblur equivale a onmouseout
dbclick y mousemove son específicos de ratón y se deben evitar
Usar onclick de enlaces y botones para hacer las acciones accesibles mediante teclado
2.1.2 Sin trampas para el foco del teclado (A)
Si
es posible mover el foco a un componente de la página usando una
interfaz de teclado, entonces el foco se puede quitar de ese componente
usando sólo la interfaz de teclado y, si se requiere algo más que teclas
de dirección o tabulación, se informa al usuario el método apropiado
para mover el foco.
Asegurar que los usuarios no son atrapados por el contenido:
Asegurar que la forma usada para avanzar el foco sale de la sección de contendido una vez que llega la final
Proporcionar una función de teclado para sacar el foco de la sección de contendido
Documentar si la tecnología usada proporciona de forma nativa una manera de salir del foco
2.2 Tiempo suficiente.
Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.
2.2.1 Tiempo ajustable (A)
Para cada límite de tiempo impuesto por el contenido, se cumple al menos uno de los siguientes casos:
- Apagar:
El usuario puede detener el límite de tiempo antes de alcanzar el
límite de tiempo; Ajustar: El usuario puede ajustar el límite de
tiempo antes de alcanzar dicho límite en un rango amplio que es, al
menos, diez veces mayor al tiempo fijado originalmente; o
- Extender:
Se advierte al usuario antes de que el tiempo expire y se le conceden
al menos 20 segundos para extender el límite temporal con una acción
simple (por ejemplo, "presione la barra de espacio") y el usuario puede
extender ese límite de tiempo al menos diez veces; o
- Excepción
de tiempo real: El límite de tiempo es un requisito que forma parte de
un evento en tiempo real (por ejemplo, una subasta) y no resulta posible
ofrecer una alternativa al límite de tiempo; o
- Excepción por ser esencial: El límite de tiempo es esencial y, si se extendiera, invalidaría la actividad; o
- Excepción de 20 horas: El límite de tiempo es mayor a 20 horas.
2.2.2 Poner en pausa, detener, ocultar (A)
Para
la información que tiene movimiento, parpadeo, se desplaza o se
actualiza automáticamente, se cumplen todos los casos siguientes:
Movimiento, parpadeo, desplazamiento: Para toda información que se
mueve, parpadea o se desplaza, que comienza automáticamente, dura más de
cinco segundos y se presenta en paralelo con otro contenido, existe un
mecanismo para que el usuario la pueda poner en pausa, detener u
ocultar, a menos que el movimiento, parpadeo o desplazamiento sea parte
esencial de una actividad; y
Actualización automática: Para
toda información que se actualiza automáticamente, que se inicia
automáticamente y se presenta en paralelo con otro contenido, existe un
mecanismo para que el usuario la pueda poner en pausa, detener u
ocultar, o controlar la frecuencia de actualización a menos que la
actualización automática sea parte esencial de una actividad.
2.3 Convulsiones.
No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones
2.3.1 Umbral de 3 destellos o menos (A)
Las
páginas web no contienen nada que destelle más de tres veces en un
segundo, o el destello está por debajo del umbral de destello general y
de destello rojo.
Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.
2.4.1 Evitar bloques (A)
Evitar la presencia de bloques de contenido de información repetidos en varias páginas o pantallas de la misma web.
Agrupar los bloques de material repetido de forma que se puedan saltar.
- Proporcionar elementos de encabezado al comienzo de cada sección del contenido.
- Agrupar enlaces mediante elementos estructurales
- Cuando empleemos marcos para agrupar bloques de material repetido, usar el atributo title de los elementos <frame> e <iframe> para identificar su contenido.
- Usar un menú desplegable para saltar bloques de contenido repetido.
Crear enlaces para saltar bloques de material repetido.
- Enlace al comienzo que vaya al área del contenido principal.
- Enlaces de salto al comienzo de bloques de contenido repetido para ir al final del bloque.
- Enlaces al comienzo de la página que vayan a cada área de contenido.
2.4.2 Titulado de páginas (A)
La
intención de este Criterio es ayudar a los usuarios a encontrar
contenido y orientarse dentro de él, garantizando que cada página Web
tiene un título descriptivo.
2.4.3 Orden del foco (A)
Garantizar
que cuando los usuarios desplazarse por el contenido, se encuentran con
la información en un orden que es consistente con el significado del
contenido, así se reduce la confusión permitiendo a los usuarios formar
un modelo mental coherente del contenido.
- Ubicar los elementos de interacción en un orden que siga las secuencias y las relaciones del contenido.
- Organizar el contenido en el código (X)HTML de forma que el orden por defecto sea el correcto.
- Si cambiamos el orden del foco por defecto, crear un orden lógico que siga las secuencias y relaciones del contenido.
- En (X)HTML usaremos el atributo tabindex en aquellos elementos de interacción para los que queramos modificar su orden.
- Si cambiamos una página dinámicamente, hacerlo de forma que el orden del foco siga teniendo sentido.
- Debemos insertar el contenido dinámico en el DOM justo a continuación del elemento que lo lanza (enlace o botón).
- El evento que lo lanza debe ser onclick.
- Al cerrar un contenido dinámico (menú o diálogo) hay que devolver el foco al siguiente elemento.
2.4.4 Propósito de los enlaces (en contexto) (A)
Ayudar
a los usuarios a entender el propósito de cada enlace para que puedan
decidir si quieren seguirlo o no. Siempre que sea posible, proporcionar
enlaces de texto que identifiquen el propósito sin necesidad de contexto
adicional.
- Usar el propio texto del enlace para describir su propósito.
- Usar un texto descriptivo para los elementos <a>.
- Usar alternativas textuales (atributo alt) descriptivas para los elementos <area> de los mapas de imagen.
- Proporcionar una descripción adicional al texto del enlace.
-
Usar CSS para ocultar parte del texto del enlace (posicionar de
forma absoluta el elemento fuera de la pantalla), pero visible para los
lectores de pantalla.
- Complementar el texto del enlace con el atributo title.
- Identificar el propósito del enlace usando su texto combinado con el texto de la frase que lo contiene.
- La información de contexto debe estar situada antes de los enlaces.
- Identificar el propósito del enlace usando el texto del enlace combinado con el contexto determinado por software.
- Elemento de lista (<li>) que contiene el enlace.
- En listas anidadas, elemento de la lista padre (<li>) que contiene la lista en la que se encuentra el enlace.
- Párrafo (<p>) que contiene el enlace.
- Celda (<td>) de la tabla que contiene al enlace y sus encabezados asociados (<th>).
- Elemento de encabezado anterior (<h1> - <h6>).
- Permitir a los usuarios escoger entre enlaces largos o cortos.
- Ofrecer dos versiones de la página, una en la que los textos de los enlaces sean cortos y otra con textos descriptivos.
- Utilizar un control al comienzo de la página que permita cambiar el texto de los enlaces.
2.4.5 Múltiples vías (AA)
Proporcionar
más de un camino para localizar una página web dentro de un conjunto de
páginas web, excepto cuando la página es el resultado, o un paso
intermedio, de un proceso.
- Proporcionar enlaces a páginas relacionadas.
- Proporcionar una tabla de contenidos de los documentos.
- Proporcionar un mapa del sitio.
- Proporcionar funciones de búsqueda.
- Proporcionar una lista de enlaces al resto de páginas web.
- Enlazar a todas las páginas del sitio desde la página de inicio.
2.4.6 Encabezados y etiquetas (AA)
Ayudar
a los usuarios a entender qué información está contenida en las páginas
web y la forma en que se organiza la información. Cuando los títulos
son claros y descriptivos, los usuarios pueden encontrar la información
que buscan con mayor facilidad, y pueden comprender las relaciones entre
las diferentes partes del contenido.
- Proporcionar encabezados significativos.
- Proporcionar etiquetas significativas para los elementos de interacción de la página.
2.4.7 Foco visible (AA)
La
intención de este criterio es asegurarse de que hay al menos un modo de
operación en la que el indicador de enfoque del teclado sea situado
visualmente. Puede ayudar a cualquier persona que se basa en el teclado
para operar la página, dejándolos determinar visualmente el componente
con el que va a interactuar.
- Usar componentes de interfaz de usuario que son resaltados por el agente de usuario al recibir el foco.
- Usar el indicador de foco por defecto de la plataforma.
- Crear un indicador de foco altamente visible.
- Usando CSS para modificar la presentación de un componente de interfaz de usuario cuando recibe el foco.
- Usando scripts para cambiar el color de fondo o bordes de los elementos con foco.
Cap comentari:
Publica un comentari a l'entrada