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 es importante señalar poner los recursos para aprender especificaciones como ARIA? ¿La creación de un sitio web accesible realmente está provocando 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 al mismo tiempo 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 al mismo tiempo 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.
A la vez, 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.
A la vez, 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.
A modo de 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 items. Los colores que se mezclan en un sitio web son a menudo una indicación de una mala paleta.
Como resultado, 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 al mismo tiempo 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 items 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, dado 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 viable para evitar excluir a las personas con discapacidades.
Una cosa que usted puede hacer es llevar a la práctica ARIA en su diseño, para que las personas con lectores de pantalla puedan encontrar mejor su camino a través de 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 posibilita navegar por él utilizando el teclado. Cualquiera puede descargar uno a su computadora, y hay una gama de programas disponibles gratuitos o de pago.
Algunos de ellos al mismo tiempo 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 viable que lo haya visto antes.
<Subtítulos por aRGENTeaM
|
<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.» De este modo, básicamente, esta parte del marcado posibilita a los lectores de pantalla saber con qué parte del diseño están tratando.
En consecuencia, ARIA le posibilita 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 comprender la mayoría de los items HTML y HTML5. Si tiene un sitio muy simple y estático, es viable que no necesite llevar a la práctica ARIA en absoluto. Pero algunos items Javascript, dinámicos e interactivos no pueden ser vistos por los lectores de pantalla, y aquí es donde entra en juego el marcado.
A parte de esto, no debería usar ARIA cuando lo que está definiendo ya es accesible. A modo de 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 items HTML compatibles con dispositivos de asistencia.
En la misma línea, técnicamente no necesito añadir el papel complementario a un elemento aparte, dado que ambos describen la misma cosa. A pesar de todo, este margen de beneficio se encuentra muy a menudo, como en el caso anterior.
¿Sigues confundido? Hablemos un poco más acerca de 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 items 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 – Determinar items e interfaces. Pestañas, cuadros de texto, alertas y botones son algunos de los items que ARIA puede describir. Cuando HTML no define estos items, o está usando un widget hecho de muchas partes diferentes, los roles de los widgets pueden contribuir.
- Roles abstractos – Estos son utilizados por el navegador. No debes de preocuparte por ellos.
Estados y Propiedades
Los estados y las propiedades funcionan de manera equivalente entre sí. Las propiedades una vez establecidas raramente cambian, dado que sólo describen relaciones con otros items. 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 items que pueden cambiar activamente.
A parte de esto, 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 viable 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.
Al mismo tiempo puede saltarse la venda de los ojos y pasar el ratón por encima de los items en los que desea comprobar los atributos ARIA, pero se perderá información clave como lo difícil que es encontrar esos items.
Incluso esta no es una representación perfecta de lo que es usar un lector de pantalla, dado que se necesita mucha práctica para aprender, por lo que es mejor pedir a los usuarios reales que prueben su sitio web.
Al mismo tiempo hay muchas herramientas de inspección como el Inspector de Accesibilidad de Firefox que le posibilita ver información sobre los items 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 items 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 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 items que se mueven de forma automática 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 llevar a la práctica 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 viable.
Una vez es importante es importante 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 al mismo tiempo 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.
De este modo 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
