-
Notifications
You must be signed in to change notification settings - Fork 2
Accesibilidad
Julio Nicolás Santarelli edited this page Apr 26, 2021
·
30 revisions
Es la práctica inclusiva que garantiza que los productos digitales, y especialmente su contenido, estén diseñados y desarrollados para ser utilizados por una amplia gama de personas, incluidas aquellas con alguna disminución en sus capacidades, ya sea visual, motora, auditiva, del habla o cognitiva.
- Perceptible
- Operable
- Entendible
- Robusta
- Ceguera, en cualquiera de sus grados
- Daltonismo o problemas con el procesamiento del color
- Sordera o audición disminuida
- Discapacidad motriz que afecta a la utilización de pantallas o dispositivos
- Problemas relacionados con la compresión o el procesamiento de la información
- Convulsiones (especialmente epilepsia fotosensible)
- Incidentales (ej.: un usuario que padece insomnio o se quebró un brazo)
- Contextuales (ej.: un usuario en un ambiente ruidoso o con baja conectividad)
- Listados
- Mantener botoneras dentro de los items que integran los listados (de modo que el screen-reader los perciba en orden sin recurrir a tabindex)
- Evitar uso de botoneras junto a sets de pestañas dado que alteran el orden de lectura del screen-reader
- HTML semántico
Pertinencia en el uso de tags y atributos HTML - Imágenes con texto alternativo
El uso del atributoaltylongdesc - CSS Accesible
Pertinencia y cautela en el uso de clases y propiedades CSS - Subtitulado / transcripciones
Tratamiento del contenido multimedia(videos, audios, interactivos) - Validación de formularios
Estructurar, etiquetar e indicar según recomendaciones para formularios - Cromaticidad accesible
Contrastes óptimos, valores lumínicos mínimos aceptables, no uso de degrades - Legibilidad y lecturabilidad
Familias sans serif, interlineados, interletrados, grosores de astas, etc - Contenido escalable
Permitir user-scale, elementos y textos zoomeables
- Posibilidad de operar sólo con teclado
- Indicador de foco
- Sliders, scrolls controlables
- Títulos de secciones
- Saltar contenidos repetidos
- Alternativas para encontrar contenido
- Hipervínculos descriptivos
- Lenguaje definido, lecturabilidad
- Comportamiento predictivo de elementos
- Navegación consistente
- Notificaciones de errores y confirmación claras y útiles
- HTML válido
Tags semánticos. Jerarquización mediante headings - ARIA Markup, ARIA Roles
Útil en elementos dinámicos, emergentes y/o solapados que no brindan información suficiente
- Jerarquíazación de los elementos (el tabeo matchea el orden visual)
- Distribución (cercanía y agrupamiento de elementos)
- Uso de un
titlegeneral para presentar la pantalla - Uso de headings y/o
plex-labelpara contenidos secundarios - Diferenciar acciones de links. Notificar apertura de nuevas pestañas.
- Elementos emergentes perceptibles (alertas, notificaciones)
- Autofoco sólo cuando es necesario
- HTML Válido
- Aria Markup
- Atributo alt en imágenes y elementos gráficos
- Etiquetas label en formularios
- Evitar inputs de formularios sin labels
- No se permiten inputs con placeholders que funcionan como labels
- Las notificaciones (de ayuda, errores) se implementan con aria-describedby
- role="tablist" al contenedor de las tabs (otorga semántica al elemento, detectando la cantidad de pestañas)
- role="tab" al elementos tabeable de la pestaña (identifica al
<li>como pestaña) - role="presentation" para que el screen-reader ignore la semantica de la
<ul>(que no diga lista, que diga lista de pestañas)
- aria-selected (screen-reader menciona la pestaña activa)
- aria-label (screen-reader menciona descripción del título y botones "cerrar")
- Focusable con tab
- Agregar evento keydown para que con enter se acceda a la pestaña activa
- Navegación entre tabs con arrows (flechas del teclado)