Victorias de accesibilidad rápida trucos CSS
Seamos realistas: crear un producto con acceso a AA o AAA puede ser bastante desalentador. Afortunadamente, tener un producto asequible no es todo o nada. Incluso las mejoras aparentemente pequeñas pueden tener beneficios en la calidad de vida de muchas personas.
Con ese espíritu, aquí hay cinco ganancias de accesibilidad rápidas que puede lograr hoy.
Quick win 1: especificar la página actual
Probablemente sea seguro asumir que un estilo diferente es la forma más común de comunicarse en la página actual de un sitio o aplicación. Sin embargo, incluso si estos estilos son claros y con altas relaciones de contraste, siguen siendo solo una pista visual.
Entonces, ¿qué sucede si una persona con discapacidad visual no puede ver esta separación? ¿Cómo sabrán en qué página está?
La creación de un producto asequible debe garantizar que su etiquetado comunique con tanta claridad como su diseño.
Agregar aria-current="page" al elemento de navegación activo es una forma de garantizar que el marcado y el diseño transmitan la misma información con o sin tecnología de asistencia.
<a aria-current="page" href="https://css-tricks.com/">Home</a>🎉 Bono
Use selectores de atributos CSS para diseñar aria-current="page" elemento para mantener los signos visuales y de marcado relacionados.
[aria-current="page"] {
/* Active element styles */
}Quick Win 2: idioma del documento
Si bien algunas personas pueden visitar un sitio web y determinar el idioma o la configuración regional de su contenido, no todas las personas tienen este lujo. Una vez más, la marca debe transmitir la misma información que el diseño visual, incluso si esa información puede parecer implícita.
Agregar lang atribuido a <html> etiqueta para comunicar no solo el idioma del documento, sino también su configuración regional. Esto ayudará a las tecnologías de asistencia, como los lectores de pantalla, a comprender y comunicar el contenido. Incluso si la aplicación solo admite un idioma, esto puede ser una buena mejora en la calidad de vida de muchas personas.
<html lang="en-US">Para aplicaciones que admiten varios idiomas, <html> el elemento probablemente no es el único que lo necesita lang valor definido Uso lang atributo de elementos específicos cuyo idioma difiere del resto del documento, como enlaces en el menú de cambio de idioma. En este caso, duplicar el uso de lang s en hreflang atributo para comunicar no solo el idioma de la conexión en sí, sino también su destino.
<a lang="fi" hreflang="fi" href="https://css-tricks.com/" title="Suomeksi">
<bdi>Suomeksi</bdi>
</a>Ganancia rápida 3: Usar prefers-reduced-motion
Ya sea para llamar la atención sobre la acción o las actualizaciones, o para crear una sensación de vida y encanto, agregar movimiento a una aplicación realmente puede mejorar su experiencia. Sin embargo, algunas personas pueden encontrar esta experiencia desorientadora.
Tanto Windows como MacOS ofrecen configuraciones a nivel de sistema operativo para que las personas reduzcan significativamente la cantidad de tráfico cuando usan sus sistemas. prefers-reduced-motion
Bueno, con las consultas de medios CSS, pueden hacerlo.
EN prefers-reduced-motion la consulta de medios se puede utilizar para reducir significativamente o eliminar todo el tráfico de aplicaciones cuando la configuración del sistema está habilitada.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}El enfoque general que se muestra aquí evita todo movimiento, pero puede dejar poco espacio para los matices. Lo mejor es revisar las necesidades de quienes usan el producto, pero considere estas otras opciones.
Un enfoque puede ser animar solo una propiedad a la vez prefers-reduced-motion Así que considera un <Modal /> que se desvanece y aumenta en el campo de visión con opacity y transform. Solo en entornos con tráfico reducido opacity Se eliminará el efecto de escalado, ya que suelen ser más problemáticos que el desvanecimiento.
Otra opción puede ser considerar prefers-reduced-motion Miércoles un poco más literalmente y quitar todo movimientoEsto eliminará nuestros modelos de zoom, cajones deslizantes y notificaciones de rebote, pero aún dejará espacio para transiciones de color de enlaces y botones.
Quick win 4: mostrar el estado de clasificación de datos
Un tema común en todos estos consejos es asegurarse de que el diseño visual y el marcado de la aplicación comuniquen las mismas cosas. Entonces, cuando el diseño usa una flecha para indicar la dirección de clasificación de una columna de la tabla, ¿cómo se puede informar esto también en el marcado?
Ajuste a aria-sort atribuido a ascending /descending en el encabezado de la columna ordenada activamente permite que el marcado comunique la misma estructura de contenido como un indicador visual en la interfaz de usuario.
Esto ayudará a garantizar que las personas que usan tecnología de asistencia y las que no pueden entender el contenido de la misma manera.
<thead>
<tr>
<th>First Name</th>
<th aria-sort="ascending">Last Name</th>
</tr>
</thead>Quick win 5: listas de carga perezosas
Ya sea que esté navegando a través de un flujo interminable de tweets o una lista de productos sin solución, la web está completamente aceptada. carga diferida de largas listas de datos (y aliteración, obviamente).
Eso es cuando aria-setsize y aria-posinset los atributos se vuelven muy valiosos Aunque el progreso de una persona a través de la lista se puede comunicar visualmente de muchas maneras diferentes, estos atributos se utilizan para comunicar la misma progresión a muchas tecnologías de asistencia.
Como desarrolladores, probablemente tengamos acceso a la longitud de la lista completa, así como al índice de los elementos actuales que se muestran. aria-setsize el atributo definirá la longitud total de la lista hasta aria-posinset un atributo definirá la posición específica (o índice) de un elemento en esta lista.
Si no se conoce la longitud total de la lista, entonces aria-setsize debe establecerse en -1.
Con estos atributos, las tecnologías de asistencia pueden interpretar mejor una lista y uno puede comprender mejor su posición en ella.
<h2 id="top-artists-title">Top Artists of 2021</h2>
<ul role="listbox" aria-labelledby="top-artists-title">
<li role="option" aria-setsize="20" aria-posinset="5">Bloodbound</li>
<li role="option" aria-setsize="20" aria-posinset="6">Manimal</li>
<li role="option" aria-setsize="20" aria-posinset="7">Powerwolf</li>
</ul>Escuche cómo se declaran estos atributos usando MacOS VoiceOver.
🎉 Ganancia adicional: Extensión Ax-DevTools
La implementación de estas cinco victorias de accesibilidad rápida es un gran comienzo, pero es solo el comienzo. Existe un entorno extenso de tecnologías de asistencia y conjuntos de habilidades que uno puede poseer, y navegar por uno mismo puede resultar insoportable.
Afortunadamente, existen muchas herramientas para ayudar a auditar la disponibilidad de productos que hacen que el viaje sea mucho más manejable. Mi favorito personal, mi brújula de accesibilidad confiable, es Extensión del navegador Ax-DevTools.
Ejecutar el escáner de accesibilidad Ax-DevTools puede devolver toneladas de información valiosa. No solo mostrará todos los problemas y advertencias que se encuentran en la página, sino que los agrupará por gravedad aproximada. También puede resaltar el elemento en la página o en la pestaña Elementos y proporcionar enlaces para obtener más información sobre el problema específico.
Sin embargo, lo más importante es que ofrecerá enfoques claros y concisos para abordar el problema específico.
resumiendo
El producto no está disponible de la noche a la mañana; ni siquiera se completa el trabajo sobre la disponibilidad del producto. Como todo lo demás en la web, la accesibilidad está evolucionando y requiere mantenimiento. Sin embargo, incluso las adiciones aparentemente pequeñas pueden afectar la disponibilidad del producto y la experiencia humana en general.
Después de ingresar una nueva base de código, estas son a menudo algunas de las primeras cosas que miro: algunas "frutas maduras" de accesibilidad, por así decirlo.
Alcanzar el cumplimiento AAA o incluso AA puede ser como escalar un pico de 8000 m Estos pasos no lo llevarán a la cima, pero la expedición nunca se completa en un solo paso.
Deja una respuesta