Cómo usar ARIA en el HTML de tu sitio de WordPress

Uno de los principales objetivos del desarrollo de sitios web es crear una experiencia de usuario atractiva. A menudo hace esto mediante la incorporación de funciones interactivas y excelentes imágenes en su sitio. Sin embargo, estos aspectos no son necesariamente accesibles para todos los visitantes potenciales, especialmente para aquellos que usan lectores de pantalla.

Afortunadamente, existe un sistema que puede ayudar todos Sus usuarios experimentan los resultados de su arduo trabajo. Inclusión Acceso a aplicaciones ricas de Internet (ARIA) en el html de su sitio web solo requiere un pequeño esfuerzo adicional y puede brindarle grandes beneficios. Esta publicación le presentará ARIA y cómo usarlo. ¡Vamos!

Introducción a ARIA: qué es y por qué deberías usarlo

En resumen, ARIA es manera de especificar atributos HTML para que los lectores de pantalla puedan identificarlo con precisión y luego transmitirlo a los visitantes. Este es un aspecto clave para hacer sitios web accesibles y ayuda a crear un entorno más preciso para los usuarios de lectores de pantalla.

Esto se debe a que incluir ARIA en su código HTML afecta la forma en que los navegadores modifican sus páginas web para los lectores de pantalla. Este contenido modificado se presenta en árbol de disponibilidady ARIA se hace cargo de la tarea de traducir los elementos HTML en él.

Por ejemplo, suponga que tiene una página con una casilla de verificación y está utilizando ARIA en su código HTML. ARIA le indicará 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.

Considere la frecuencia con la que usa la web, no solo en el trabajo sino también en su vida diaria. Ahora imagina si una gran parte de la web no te fuera útil. Tendrías acceso a menos recursos para educación, empleo, salud, información, comunicación e incluso entretenimiento.

Uso de las mejores prácticas en el campo de la desarrollo web disponible es una de las formas de hacer de Internet un lugar de igualdad de oportunidades para todos, independientemente de su edad o habilidades. Esto se considera que es derecho humano básico por las Naciones Unidas y es un objetivo que vale la pena perseguir por los propios méritos.

Sin embargo, si eso no es suficiente para que invierta en el uso de ARIA, también puede encontrar que la programación accesible también es útil desde una perspectiva empresarial. Se alinea 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 requerido por la ley. En otras palabras, hay muchas razones por las que debería seguir unos sencillos pasos para hacer que su sitio web sea más accesible.

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

Le recomendamos enfáticamente que continúe informándose sobre ARIA y la accesibilidad web más allá del alcance de esta publicación. Debe considerar especialmente probar la disponibilidad actual de su sitio.

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

1. Usando ARIA con HTML semántico

Antes de discutir cómo aplicar ARIA a su HTML, es importante recordar cuando deberías usarlo. Si bien el HTML nativo por sí solo no hace que el contenido web sea accesible, hay algunos elementos semánticos lo que hará que ARIA sea redundante o entrará en conflicto con ARIA si no se usa correctamente.

Elementos semánticos, como , y – describir el propósito de su código HTML. Sería superfluo incluir ARIA en estos elementos, ya que el HTML semántico ya implica el rol del elemento (hablaremos más sobre los roles de ARIA en un momento).

Además, existen algunas reglas sobre el uso de ARIA para evitar que los desarrolladores lo usen de una manera que entre en conflicto con el HTML semántico. El Consorcio World Wide Web (W3C) ha mesa útil esto desglosa qué elementos HTML semánticos tienen los roles ARIA sugeridos:

La primera columna especifica el elemento HTML y la segunda contiene el rol implícito. Si un elemento tiene una función implícita en la lista, no necesita incluir una función ARIA adicional para él. La tercera columna enumera las funciones que cada elemento HTML puede tener según las mejores prácticas.

2. Agregar roles a las etiquetas HTML

Una vez que esté seguro de que el elemento HTML en el que está trabajando requiere ARIA, puede pasar a usar «roles» y «atributos». Es posible que ya sepa qué hacen los roles de ARIA en la sección anterior. Determinan el tipo del elemento contenido en la etiqueta y determinan el propósito del elemento.

Por ejemplo, si desea crear una alerta que indique a los usuarios que necesitan instalar una actualización, use la función de «alerta» de la siguiente manera:

<div role="alert">
<p>Please install the latest update!</p>
</div>

Como explicamos anteriormente, no necesita asignar un rol si el elemento es semántico e implica un rol, y no debe asignar un nuevo rol a un elemento que entre en conflicto con su rol implícito. Tenga en cuenta, sin embargo, que solo puede asignar una función a cada elemento.

Piénselo de esta manera: el rol determina qué es un elemento es. Un elemento no puede ser dos cosas al mismo tiempo, así que elija el rol que mejor lo describa. Dicho esto, cuando lo necesite, puede optar por anidar un elemento dentro de otro elemento con una función diferente.

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

<header><div role="alert">
<p>Please install the latest update!</p>
</div></header>

En lugar de indicar que un único elemento es a la vez un encabezado y una alerta, está claro que hay una alerta en el encabezado.

3. Adjuntar atributos a los estados y propiedades de las notas

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

estados proporcionar información sobre funciones que están sujetas a cambios a medida que interactúa con ellas. Por ejemplo, esto podría incluir casillas de verificación o botones de radio.
Bienes raíces indicar funciones que es poco probable que cambien durante el uso. Un elemento que describe a otro elemento, o el nivel jerárquico en el que reside el elemento, son propiedades.

Ambos son fáciles de detectar porque siempre comienzan con aria- seguido por el estado específico o la propiedad que se utiliza. Por ejemplo, el estado utilizado para informar al lector de pantalla que la casilla de verificación está llena de forma predeterminada es aria-comprobado, como en este ejemplo:

<span role="checkbox" 
aria-checked="true"
tabindex="0"
id="simulatedcheckbox">
</span>

Asimismo, la propiedad que se utiliza para marcar cuando un elemento significa otro es aria-etiquetada por. Puede aplicar este atributo a una imagen, por ejemplo, para indicar un título asociado:

<figure aria-labelledby="operahouse_1" role="group">
<img src="https://www.elegantthemes.com/blog/wordpress/operahousesteps.jpg" alt="The Sydney Opera House">
<figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>

Le recomendamos que se familiarice con la lista W3C roles, estados y propiedades permitidospara obtener más ejemplos de atributos que puede usar.

Solicitud

Cuando se trata del desarrollo de sitios web, la creación de contenido accesible puede no ser lo primero que tenga en mente. Sin embargo, siguiendo las mejores prácticas de accesibilidad web e incorporando ARIA HTML en su sitio, puede desempeñar un papel en hacer que su web sea accesible para todos los usuarios.

Las tres prácticas clave para usar ARIA en un sitio de WordPress incluyen: