Cómo usar 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 lo hará 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 confían en lectores de pantalla.

Afortunadamente, existe un sistema para ayudar todas de sus usuarios experimentan los resultados de su arduo trabajo. Incorporando Aplicaciones de Internet enriquecidas accesibles (ARIA) en el HTML de su sitio solo requiere un pequeño esfuerzo adicional, y puede tener grandes beneficios. Esta publicación te presentará ARIA y cómo usarlo. ¡Vamonos!

Una 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, supongamos que tiene una página con una casilla de verificación y ha utilizado ARIA en su 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 solo.

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

Usar las mejores prácticas para desarrollo web accesible es una forma de hacer su parte para que Internet sea un lugar de igualdad de oportunidades para todos, independientemente de su edad o capacidad. Esto se considera un derecho humano básico por las Naciones Unidas, y es un objetivo que vale la pena perseguir por su propio mérito.

Sin embargo, si eso no es suficiente para que invierta en el uso de ARIA, también puede 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 requerido por la ley. En otras palabras, hay muchas razones para tomar algunos pasos simples para hacer que su sitio sea más accesible.

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

Definitivamente, le recomendamos que continúe educá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 prácticas a continuación debería proporcionarle una base sólida.

1. Usando ARIA con HTML Semántico

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

Elementos semánticos, como

,

y