La accesibilidad es un tema importante en el mundo online de hoy. Hoy en día, tener un sitio web que mucha gente lucha por navegar es considerado inaceptable.
El marcado de ARIA es un paso en la dirección correcta. Es una respuesta a la pregunta de cómo puede hacer que su sitio web sea más usable para las personas con discapacidades.
¿Qué es ARIA? Un conjunto de atributos de código que amplían las capacidades de HTML y facilitan la optimización de su sitio para los lectores de pantalla. Para ello, hace que partes de su sitio web sean visibles para la tecnología de asistencia, con la que, de lo contrario, estos dispositivos no podrían interactuar en absoluto.
¿Está listo para incluir ARIA en su sitio web? ¿O simplemente curiosidad por saber más sobre el tema? En este artículo, le explicaremos qué es ARIA, cómo hacer que su sitio sea accesible, y le daremos los recursos para que aprenda más acerca de esta inestimable tecnología.
¿Por qué hacer su sitio accesible?
Algunas personas podrían preguntarse: ¿por qué preocuparse por la accesibilidad web? ¿Realmente vale la pena poner los recursos para aprender especificaciones como ARIA? ¿La creación de un sitio web accesible realmente está causando un gran impacto?
La discapacidad no es poco común
En realidad, sí. La discapacidad no es tan rara. 18.7% de los estadounidenses tienen alguna forma de discapacidad. Aunque no todos estos factores perjudicarán su capacidad para interactuar con la web, sigue siendo un número asombroso, y sólo incluye a personas de los Estados Unidos.
3.El 3% de los estadounidenses también tiene un trastorno de la visión. Esto significa que podrían tener problemas para ver los sitios web y pueden confiar en herramientas como los lectores de pantalla. Eso también es un porcentaje significativo de su base de usuarios potenciales e incluye a los ancianos y a las personas con discapacidades temporales.
Las personas con discapacidades necesitan Internet tanto como cualquier otra persona. Muchos lo usan para comprar, socializar y encontrar información. A veces es su principal, o incluso su única manera de hacerlo.
El 54% de las personas discapacitadas están en línea, y aunque este número es menor que el de la población general, sigue siendo una parte significativa.
Además, es 2019. En estos tiempos, debemos esforzarnos por incluir a todos los grupos de usuarios lo mejor que podamos. Dar a las personas con discapacidad acceso ilimitado para navegar por la web debería ser un objetivo importante para cualquier desarrollador web.
Además, incluso viene con beneficios personales.
La accesibilidad se superpone con un buen diseño web y SEO
Un sitio que sigue los estándares de accesibilidad es a menudo uno que utiliza buenos principios de diseño web, funciona mejor en dispositivos móviles y ocupa un lugar destacado en SEO.
Por ejemplo, uno de los estándares de WCAG no incluye la reproducción automática de clips largos de audio sin una forma de detener el sonido. Esto ya es un gran no-no para los diseñadores web. Otro estándar es proporcionar suficiente contraste de color entre los elementos. Los colores que se mezclan en un sitio web son a menudo una indicación de una mala paleta.
Como consecuencia, seguir las pautas de accesibilidad conduce a un sitio que se ve mejor y es más fácil de usar. ¿Alguien puede decir»ganar-ganar»?
La accesibilidad es también una parte importante del SEO. Evitarlo puede llevar a penalizaciones de ranking de Google y otros motores de búsqueda. Pero agregar texto alternativo a sus imágenes, incluyendo controles de teclado en elementos interactivos, y usar encabezados ayuda a los visitantes discapacitados y le da un impulso de SEO.
Como puede ver, hacer que su sitio sea accesible es una buena idea, ya que tiene un impacto en todos los grupos de usuarios. Si tu objetivo es diseñar un sitio web que ofrezca a todos una buena experiencia, entonces deberías hacer todo lo posible para evitar excluir a las personas con discapacidades.
Una cosa que usted puede hacer es implementar ARIA en su diseño, para que las personas con lectores de pantalla puedan encontrar mejor su camino a través de su sitio.
¿Qué son los lectores de pantalla?
Un lector de pantalla es un programa que lee el contenido de una página o documento en voz alta mientras le permite navegar por él utilizando el teclado. Cualquiera puede descargar uno a su computadora, y hay una variedad de programas disponibles gratuitos o de pago.
Algunos de ellos también ayudan a navegar por el escritorio y otros programas, así como por sitios web. Pueden ampliar el texto y las imágenes para las personas con discapacidad visual, y algunas pueden producir una pantalla en braille que se puede refrescar. Esta guía explica cómo funcionan los lectores de pantalla.
Sin lectores de pantalla, las personas con discapacidad visual tendrían dificultades para usar una computadora e Internet, o no podrían usarlos en absoluto.
El marcado de ARIA juega un papel importante en el funcionamiento de estas herramientas. Proporciona información adicional, dándoles más opciones y la capacidad de interactuar con partes de la interfaz de usuario que de otro modo serían invisibles para ellos.
Pero, ¿qué es exactamente ARIA y cómo puede mejorar su sitio web incluyéndolo? Demos un breve resumen de esta especificación y de cómo funciona.
¿Qué es ARIA?
ARIA son las siglas de Accessible Rich Internet Applications. Es un conjunto de atributos que proporcionan un contexto adicional para la forma en que se presenta una página web y lo que hay dentro de ella. En otras palabras, proporcionan más información sobre partes de la interfaz de usuario, como alertas emergentes, menús o incluso secciones completas de la página.
Si alguna vez ha visto un sitio web con las herramientas de desarrollo de navegadores, es posible que lo haya visto antes.
1 | <Subtítulos por aRGENTeaM |
Para citar la documentación de Mozilla: «El papel de hito complementario se utiliza para designar una sección de apoyo que se relaciona con el contenido principal, pero que puede ser independiente cuando se separa.» Así que, básicamente, esta parte del marcado permite a los lectores de pantalla saber con qué parte del diseño están tratando.
Por consiguiente, ARIA le permite crear interfaces y widgets accesibles sin tener que cambiar su aspecto ni su comportamiento en la parte frontal. La mayoría de las personas ni siquiera podrán darse cuenta de que el margen de beneficio está presente. Pero agregue un poco de código, y los lectores de pantalla podrán interactuar sin problemas con su interfaz.
¿Cuándo es realmente necesario ARIA?
Por defecto, los lectores de pantalla pueden entender la mayoría de los elementos HTML y HTML5. Si tiene un sitio muy simple y estático, es posible que no necesite implementar ARIA en absoluto. Pero algunos elementos Javascript, dinámicos e interactivos no pueden ser vistos por los lectores de pantalla, y aquí es donde entra en juego el marcado.
Por otro lado, no debería usar ARIA cuando lo que está definiendo ya es accesible. Por ejemplo, el elemento HTML <botón> es reconocido por los lectores de pantalla. No necesita tener un botón ARIA. Sólo debe incluir funciones cuando no utilice elementos HTML compatibles con dispositivos de asistencia.
En la misma línea, técnicamente no necesito añadir el papel complementario a un elemento aparte, ya que ambos describen la misma cosa. Sin embargo, este margen de beneficio se encuentra muy a menudo, como en el caso anterior.
¿Sigues confundido? Hablemos un poco más sobre cómo funciona ARIA.
Entendiendo ARIA
Las cosas pueden volverse muy complejas con ARIA, y es fácil sentirse abrumado. Pero lo básico es bastante fácil de desglosar. Una vez que los entiendas, aprenderás conceptos más avanzados en un abrir y cerrar de ojos.
El marcado ARIA se compone de tres atributos: roles, estados y propiedades.
Roles de ARIA
Los roles definen elementos en una página, como botones y casillas de verificación. Ayudan a los lectores de pantalla a determinar lo que hacen las partes de una página, y tienen cuatro subcategorías diferentes: puntos de referencia, documentos, widgets y funciones abstractas.
- Funciones clave – Separe un sitio en diferentes secciones, como el contenido principal, la navegación y las áreas complementarias. Esto puede ayudar a los visitantes a orientarse y a encontrar más fácilmente lo que buscan en una página.
- Funciones de documentos: describa secciones específicas dentro de una página, como artículos, documentos, listas y filas.
- Roles de widgets – Definir elementos e interfaces. Pestañas, cuadros de texto, alertas y botones son algunos de los elementos que ARIA puede describir. Cuando HTML no define estos elementos, o está usando un widget hecho de muchas partes diferentes, los roles de los widgets pueden ayudar.
- Roles abstractos – Estos son utilizados por el navegador. No tienes que preocuparte por ellos.
Estados y Propiedades
Los estados y las propiedades funcionan de manera similar entre sí. Las propiedades una vez establecidas raramente cambian, ya que sólo describen relaciones con otros elementos. Los estados son dinámicos y pueden cambiar por sí solos o con la interacción del usuario.
Un ejemplo de un estado es aria-busy, que indica al lector de pantalla que el elemento se está actualizando. Otra es la pulsación de aria, que indica que se ha pulsado un botón. Estos son elementos que pueden cambiar activamente.
Por otro lado, las propiedades incluyen atributos como aria-valuemax que establece el número máximo en un selector de rango, o aria-haspopup que indica que un elemento desencadenará un popup. Es poco probable que se actualicen.
Y eso es lo básico de ARIA. Mucho más simple una vez que se descompone, ¿verdad? Pero te sorprendería lo mucho que puedes hacer con él.
Para obtener más información, consulte la documentación oficial de WAI-ARIA o la introducción para desarrolladores de Google para principiantes.
Pruebas de accesibilidad de ARIA
Una vez que haya implementado ARIA, es posible que desee asegurarse de que todo funciona correctamente. ¿Cómo se ve realmente su sitio en dispositivos de asistencia?
La forma más obvia es descargar un lector de pantalla gratuito como NVDA, vendarse los ojos e ir a la ciudad. Esto le dará la experiencia completa.
También puede saltarse la venda de los ojos y pasar el ratón por encima de los elementos en los que desea comprobar los atributos ARIA, pero se perderá información clave como lo difícil que es encontrar esos elementos.
Incluso esta no es una representación perfecta de lo que es usar un lector de pantalla, ya que se necesita mucha práctica para aprender, por lo que es mejor pedir a los usuarios reales que prueben su sitio web.
También hay muchas herramientas de inspección como el Inspector de Accesibilidad de Firefox que le permite ver información sobre los elementos seleccionados. WAVE señala varios errores, incluyendo aquellos con ARIA.
Por último, esta lista de comprobación de widgets de ARIA es una excelente herramienta de auditoría para el diseño.
Otras maneras de hacer su sitio accesible
Las marcas de ARIA son sólo el principio cuando se trata de la accesibilidad web. Hay muchas otras normas que debe seguir para que su sitio sea utilizable por personas con problemas de visión, audición, movilidad y otros impedimentos.
He aquí algunos ejemplos de un puñado de pautas que debe seguir.
- El contenido del sitio web es sensible y funciona mientras se amplía.
- El sitio y sus elementos pueden ser utilizados con un solo teclado.
- El texto está debidamente contrastado con el fondo.
- Todo el contenido que no sea de texto tiene alternativas de texto, incluyendo subtítulos/transcripciones de audio y video.
- Asegúrese de que la mayoría de las imágenes tienen texto alternativo descriptivo, y las imágenes decorativas tienen texto alternativo vacío.
- Ninguna información se transmite únicamente a través de la vista, el sonido o el color.
- Evite la reproducción automática de audio sin necesidad de un botón de silenciamiento.
- Los elementos que se mueven automáticamente pueden pausarse o detenerse.
Eso es sólo un puñado de lo que usted puede hacer para hacer su sitio verdaderamente accesible. Si esto te parece demasiado, prueba con la simple lista de comprobación de accesibilidad. Utilícelo como base para su diseño antes de pasar a las directrices más detalladas de WCAG.
Haciendo su sitio utilizable para todos
Evitar la accesibilidad puede tener un impacto negativo en su base de usuarios e incluso en su reputación. Las personas con discapacidad constituyen un gran porcentaje de los usuarios de la web, y es importante asegurarse de que la mayor parte de Internet no esté cerrada para ellos.
Al implementar los estándares de accesibilidad, incluido el marcado ARIA, los usuarios de lectores de pantalla tienen la posibilidad de ver más de la Web y de que su sitio web crezca tanto como sea posible.
Una vez que sepas cómo incluir especificaciones como ARIA, la accesibilidad parecerá mucho menos confusa. Hacer que su sitio web sea más fácil de usar para todo el mundo significa que habrá más gente dispuesta a quedarse, por lo que no hay razón para no utilizar ARIA si su sitio web lo necesita. Muchos temas también lo ofrecen fuera de la caja por ahora.
Estas normas no sólo ayudan a las personas con discapacidades, sino a todos. Las pautas de accesibilidad a menudo se solapan con las buenas prácticas de diseño web y se implementan rápidamente una vez que se conocen.
Así que recuerda incluir ARIA cuando estés desarrollando un sitio web. Es mejor para ti y para todos tus usuarios.
¿Alguna vez ha tenido problemas para navegar por los sitios web? ¿Qué podrían hacer los diseñadores y desarrolladores web para mejorar la situación? Háganos saber sus experiencias con la accesibilidad en línea (o la falta de ella) en los comentarios!
2ZuOwar