Cómo utilizar ARIA en el HTML de su sitio de WordPress

Uno de los objetivos principales del desarrollo web es crear una experiencia de usuario atractiva. A menudo, hará esto al incluir funciones interactivas y elementos visuales impresionantes en su sitio web. Sin embargo, esos aspectos no son necesariamente accesibles para todos los visitantes potenciales, particularmente aquellos que dependen de los lectores de pantalla.

Afortunadamente, existe un sistema para ayudar a todos sus usuarios a experimentar los resultados de su arduo trabajo. La incorporación de aplicaciones de Internet enriquecidas y accesibles (ARIA) en el HTML de su sitio solo requiere un pequeño esfuerzo adicional y puede tener grandes beneficios. Esta publicación le presentará ARIA y cómo usarlo. ¡Vamos!

Introducción a ARIA: qué es y por qué es posible que desee utilizarlo

En resumen, ARIA es una forma de especificar atributos de HTML para que los lectores de pantalla puedan identificarlos con precisión y luego transmitirlos a los visitantes. Es un aspecto clave del desarrollo web accesible y ayuda a crear experiencias más precisas para los usuarios de lectores de pantalla.

Esto se debe a que la incorporación de ARIA en su HTML influye en la forma en que los navegadores modifican sus páginas web para los lectores de pantalla. Este contenido modificado se presenta en un árbol de accesibilidad y ARIA asume la tarea de traducir sus elementos HTML en él.

Por ejemplo, digamos que tiene una página con una casilla de verificación y ha utilizado ARIA en su HTML. ARIA le dirá al lector de pantalla que informe al usuario que hay una casilla de verificación en la página e indicará si está marcada o no. El HTML nativo no puede hacer esto por sí solo.

Piense en la frecuencia con la que utiliza la web, no solo en su trabajo sino en su vida diaria. Ahora imagínese si una gran parte de la web no se pudiera utilizar para usted. Tendría acceso a menos recursos para educación, empleo, atención médica, información, comunicación e incluso entretenimiento.

El uso de las mejores prácticas para el desarrollo web accesible es una forma de hacer su parte para hacer de Internet un lugar de igualdad de oportunidades para todos, independientemente de su edad o capacidad. Esto es considerado un derecho humano básico por las Naciones Unidas y es un objetivo que vale la pena perseguir por sus propios méritos.

Sin embargo, si eso no es suficiente para que invierta en el uso de ARIA, es posible que también desee tener en cuenta que el desarrollo accesible también es útil desde una perspectiva comercial. Se superpone con las mejores prácticas de optimización de motores de búsqueda y aumenta el alcance de su sitio web. Además, en algunos casos es obligatorio por ley. En otras palabras, hay muchas razones para tomar unos simples pasos para hacer que su sitio sea más accesible.

Cómo utilizar ARIA en el HTML de su sitio de WordPress (3 prácticas clave)

Definitivamente le recomendamos que continúe informándose sobre ARIA y la accesibilidad web más allá del alcance de esta publicación. Es posible que desee considerar especialmente probar la accesibilidad actual de su sitio.

Dicho esto, en realidad solo hay tres cosas que necesita saber para comenzar a usar ARIA en el HTML de su sitio de WordPress. Aprender las siguientes prácticas debería proporcionarle una base sólida.

1. Uso de ARIA con HTML semántico

Antes de discutir cómo aplicar ARIA a su HTML, es importante tener en cuenta cuándo es apropiado usarlo. Si bien el HTML nativo por sí solo no hace que el contenido web sea accesible, hay algunos elementos semánticos que hacen que ARIA sea innecesario o que entren en conflicto con ARIA si no se usa correctamente.

Los elementos semánticos, como <header> , <figure> y <nav> , describen el propósito de su HTML. La incorporación de ARIA en estos elementos sería redundante, ya que HTML semántico ya implica el rol del elemento (hablaremos más sobre los roles de ARIA en un momento).

Además, existen ciertas reglas que se aplican al uso de ARIA, para evitar que los desarrolladores lo utilicen de una manera que entre en conflicto con el HTML semántico. El Consorcio World Wide Web (W3C) tiene una tabla útil que desglosa qué elementos HTML semánticos tienen roles ARIA implícitos:

La primera columna especifica un elemento HTML, mientras que la segunda enumera el rol implícito. Si el elemento tiene una función implícita en la lista, no es necesario que incluya una función ARIA adicional para él. La tercera columna enumera los roles que puede tener cada elemento HTML, de acuerdo con las mejores prácticas.

2. Adición de funciones a etiquetas HTML

Una vez que esté seguro de que el elemento HTML en el que está trabajando necesita el uso de ARIA, puede comenzar a usar 'roles' y 'atributos'. Es posible que ya tenga una idea de lo que hacen los roles de ARIA en la sección anterior. Especifican el tipo de elemento contenido dentro de la etiqueta y denotan el propósito del elemento.

Entonces, por ejemplo, si quisiera crear una alerta para informar a los usuarios que necesitan instalar una actualización, usaría el rol de 'alerta' como este:

 <div role = "alerta">
<p> ¡Instale la última actualización! </p>
</div>

Como explicamos anteriormente, no necesita asignar un rol si el elemento es semántico e implica el rol, y no debe asignar un nuevo rol a un elemento que entre en conflicto con su rol implícito. Sin embargo, también debe tener en cuenta que solo puede aplicar un rol a cada elemento.

Piénsalo de esta manera - un rol define qué es un elemento. Un elemento no puede ser dos cosas al mismo tiempo, por lo que debes elegir el rol que mejor lo describa. Dicho esto, cuando lo necesite, puede optar por anidar un elemento dentro de un elemento con un rol diferente.

Por ejemplo, si desea agregar la alerta anterior a su encabezado, podría verse así:

 <header> <div role = "alert">
<p> ¡Instale la última actualización! </p>
</div> </header>

En lugar de indicar que un solo elemento es tanto un encabezado como una alerta, esto deja en claro que hay una alerta dentro del encabezado.

3. Incluir atributos para los estados y propiedades de las notas

Los atributos son el segundo elemento que componen ARIA. Se diferencian de los roles en que les dicen a los lectores de pantalla algo importante sobre un elemento en particular, en lugar de definir qué es ese elemento. Hay dos tipos de atributos ARIA:

• Los estados comparten información sobre las características que pueden cambiar cuando un usuario interactúa con ellas. Por ejemplo, esto podría incluir casillas de verificación o botones de opción.
• Las propiedades señalan características que es poco probable que cambien durante el uso. Un elemento que etiqueta a otro elemento, o el nivel jerárquico en el que se encuentra un elemento, son ambas propiedades.

Ambos son fáciles de detectar, ya que siempre comienzan con aria, seguido del estado o propiedad específicos que se están utilizando. Por ejemplo, el estado utilizado para informar a un lector de pantalla que una casilla de verificación está llena de forma predeterminada es aria-check, como en este ejemplo:

 <span role = "casilla de verificación" 
aria-comprobado = "verdadero"
tabindex = "0">
</span>

Asimismo, la propiedad que se usa para notar cuando un elemento está etiquetando a otro es aria-labelledby. Puede aplicar este atributo a una imagen, por ejemplo, para indicar el título asociado con ella:

 <figura aria-labelledby = "operahouse_1" role = "grupo">
<img src = "operahousesteps.jpg" alt = "La Ópera de Sydney">
<figcaption> ¡Vimos la ópera <cite> Barbero de Sevilla </cite> aquí! </figcaption>
</figure>

Recomendamos consultar la lista de roles, estados y propiedades permitidos del W3C para ver más ejemplos de atributos que puede usar.

Conclusión

Cuando se trata de desarrollo web, es posible que la creación de contenido accesible no sea lo primero que tenga en mente. Sin embargo, si sigue las mejores prácticas de accesibilidad web e incorpora ARIA HTML en su sitio, puede desempeñar un papel en hacer que la web esté disponible para todos.

Tres prácticas clave para usar ARIA en su sitio de WordPress incluyen:

1. Usando ARIA con HTML semántico.
2. Agregar roles a las etiquetas HTML.
3. Incluyendo atributos para anotar estados y propiedades.

¿Tiene alguna pregunta sobre el uso de ARIA en su sitio de WordPress? ¡Háganos saber en la sección de comentarios!

Imagen en miniatura del artículo EgudinKa / shutterstock.com