¿Qué son los atributos de Aria en HTML y por qué son importantes?

Los diseñadores web que son nuevos en HTML pueden encontrarse con un conjunto de atributos desconocidos. Con el prefijo de la palabra ARIA, estos atributos aparecen en toda la web, pero su propósito puede ser un misterio para los nuevos usuarios.

Los atributos de ARIA tienen un propósito importante en la accesibilidad de sus sitios web. Describen tanto el contenido de un elemento dado como la forma en que un elemento se relaciona con una página o con los demás elementos que lo rodean.

Agregar estos atributos tan importantes a su sitio ayudará a garantizar que todos los visitantes obtengan la misma experiencia, independientemente de la tecnología que estén utilizando.

¿Qué son los atributos de ARIA?

ARIA es un acrónimo de Aplicaciones ricas en Internet accesibles. En el HTML moderno, especialmente en las aplicaciones ricas en JavaScript, no siempre es inmediatamente obvio en función de la sintaxis qué función cumplen los elementos individuales.

La dificultad para discernir roles puede ser un problema cuando los usuarios ven el sitio usando herramientas de accesibilidad como lectores de pantalla. Al carecer del HTML semántico adecuado, es posible que su usuario final no pueda navegar por un sitio cuando utiliza herramientas de accesibilidad.

Si bien la forma preferida de resolver este problema es usar los elementos semánticos adecuados en HTML5, esto no siempre es práctico o posible. Aquí es donde intervienen los atributos ARIA en los elementos HTML. Estos atributos ayudan a definir la función y los atributos de su elemento de una manera que las herramientas de accesibilidad son capaces de procesar.

¿Por qué son importantes los atributos de ARIA?

En resumen, los atributos de ARIA hacen posible que los usuarios con discapacidad utilicen su sitio web. Estos roles y atributos definen información adicional sobre varios elementos en su sitio que de otro modo no estarían disponibles.

Existe una amplia variedad de atributos ARIA que puede asignar. Debe usarlos en cualquier lugar que necesite contexto adicional para permitir que el documento tenga sentido de una manera no visual.

Por ejemplo, considere un sitio que tiene una navegación principal compuesta por un elemento envuelto en un elemento, en lugar de un elemento:

<divisiónclase="navegación">
<ul>
<li>Hogarli>
<li>Comercioli>
<li>Acerca deli>
ul>
división>

Puede utilizar los atributos de ARIA para ayudar a los usuarios a navegar. Agregar los atributos role y aria-label al El elemento permite que el lector de pantalla y las tecnologías de asistencia sepan dónde está su menú.

<divisiónclase="navegación">
<ulrole="navegación"etiqueta aria="Principal">
<li>Hogarli>
<li>Comercioli>
<li>Acerca deli>
ul>
división>

Si bien en la mayoría de los casos debe usar los elementos adecuados, es posible que esto no siempre sea posible dentro de las limitaciones de lo que está haciendo. Si, por ejemplo, su sitio requiere el uso de una barra de progreso, pero desea un diseño que la barra estándar no permite.

En este escenario, podría crear un conjunto personalizado de elementos para mostrar su barra de progreso. Sin embargo, para un lector de pantalla, estos elementos parecerán un revoltijo; no podrá entregar información útil a los visitantes de su sitio.

Al establecer el rol del contenedor en barra de progreso, y agregando aria-valorahora, aria-valuemin, y aria-valuemax atributos al contenedor, aún puede indicar el progreso.

En la era moderna, crear sitios web accesibles es más importante que nunca. Hay varias bibliotecas de componentes React creadas teniendo en cuenta la accesibilidad.

Tener un sitio web accesible no solo puede ayudarlo con su clasificación de búsqueda para varios motores de búsqueda importantes, sino que también garantiza que no esté cortando un grupo potencial de usuarios de su base de usuarios.

Agregar los atributos ARIA apropiados a su sitio ayudará a garantizar que presente la información a todos los usuarios. El resultado final será un sitio que acoja a todos los públicos y presente la experiencia más cercana posible a todos.

¿Qué atributos de ARIA debo usar?

Hay muchos atributos diferentes que debería utilizar en su sitio. En general, estos atributos se dividen en dos categorías diferentes. El primero son los atributos del widget que generalmente describen un elemento interactivo personalizado.

La otra categoría que debe tener en cuenta son los atributos de relación. Estos son atributos que transmiten información a las tecnologías de asistencia sobre cómo un elemento en particular se relaciona con el resto del sitio o con otros elementos.

Cuando se trata de considerar qué atributos de ARIA debe incluir, la respuesta simple es tantos como sea posible. En cualquier lugar donde el elemento que esté utilizando no describa la función que cumple el elemento, debe utilizar el atributo de función.

Si tiene un campo con una etiqueta, ese campo debe tener el aria-etiquetada por atributo. Siempre que los atributos que esté utilizando tengan sentido, solo estará haciendo que su sitio sea más accesible al agregarlos.

Atributos de widget es la categoría mucho más grande. Contiene la mayoría de los atributos de ARIA que necesitará agregar a un sitio estándar. En el ejemplo anterior de la barra de progreso personalizada, aria-valuenow, aria-valuemin y aria-valuemax son todos atributos de widget. Describen el estado o posibles estados del elemento en el que se encuentran.

Hay muchos atributos diferentes que puede usar para describir el estado de un elemento. Uno de los más comunes es etiqueta aria. Este atributo aplica una etiqueta al elemento en el que lo coloca que solo es visible para las tecnologías de asistencia.

Otro par común de atributos ARIA que entran en esta categoría son aria-oculto y aria-discapacitado. Estos pueden comunicar el estado actual de un elemento y si un lector de pantalla debe leerlo al usuario. Esto es útil para una variedad de dispositivos diferentes con sus propios lectores de pantalla.

Atributos de relación

A diferencia de los atributos de widget, los atributos de relación brindan a las tecnologías de asistencia indicaciones sobre la relación y el uso de un elemento con otros elementos a su alrededor. El más común de estos es el atributo de rol. El rol especifica para qué sirve un elemento dentro de un sitio.

Si configura el role atribuir a navegación, se identificará inmediatamente como un contenedor de navegación.

Algunos atributos de relación definen cómo un elemento se relaciona con otros elementos a su alrededor. El aria-etiquetada por El atributo, por ejemplo, muestra qué elemento actúa como una etiqueta para este elemento. Esto puede ser útil cuando se usan diseños que tienen sentido visualmente pero tienen etiquetas para controles de formulario específicos después de ellos en el flujo del documento.

Si bien hay menos atributos de relación que atributos de widget, estos atributos a menudo tienen una mayor importancia. A menudo, pueden describir el flujo y el control de un documento y brindar detalles adicionales sobre la forma en que un usuario puede navegar por su sitio.

Estos atributos son de particular importancia cuando diseña formularios y elementos de navegación en su sitio.

Por qué es tan importante incluir atributos ARIA en su HTML

Los atributos ARIA tienen un propósito simple y necesario en su sitio web. Sirven para garantizar que el sitio sea accesible para todos los usuarios, independientemente del uso del software de accesibilidad. Para los usuarios con discapacidades, tener estos atributos en su sitio puede hacer que el sitio sea utilizable.

El método preferido para trabajar con tecnología de asistencia es utilizar los elementos semánticos adecuados. Sin embargo, cuando no es posible hacerlo, los atributos de ARIA permiten trabajar libremente sin que los usuarios pierdan contenido.