Haciendo la Web Accesible: Propiedades HTML Clave para la Inclusión

La accesibilidad web se trata de asegurar que todos los usuarios, incluyendo aquellos con discapacidades, puedan acceder y utilizar la información en línea. Implementar características de accesibilidad no solo es una buena práctica, sino también una responsabilidad ética.

HTML ofrece una serie de atributos que facilitan la creación de sitios web inclusivos. Aquí te presentamos algunas de las propiedades más comunes y útiles:

1. aria-label:

Este atributo proporciona una etiqueta alternativa para elementos que no tienen una etiqueta visible en la página. Es especialmente útil para elementos interactivos como botones o enlaces con imágenes.

<button aria-label="Cerrar ventana">
  <img src="cerrar.svg" alt="Cerrar"> 
</button>

2. aria-labelledby:

Similar a aria-label, pero en lugar de proporcionar una etiqueta directamente, aria-labelledby referencia el ID de otro elemento en la página que contiene la etiqueta descriptiva.

<h2 id="titulo-modal">Iniciar Sesión</h2>
<div role="dialog" aria-labelledby="titulo-modal">
  </div>

3. aria-describedby:

Este atributo proporciona una descripción más detallada de un elemento, a menudo utilizada para campos de formulario o elementos interactivos complejos.

<input type="text" id="contraseña" aria-describedby="descripcion-contraseña">
<p id="descripcion-contraseña">La contraseña debe tener al menos 8 caracteres.</p>

4. role:

Define el rol de un elemento en la página, proporcionando información semántica a las tecnologías de asistencia. Algunos roles comunes incluyen banner, navigation, main, complementary, y contentinfo.

<nav role="navigation">
  </nav>
  <main role="main">
  </main>

5. tabindex:

Controla el orden de tabulación del teclado. Un valor de 0 incluye el elemento en el orden natural de tabulación, mientras que un valor de -1 lo elimina del orden.

<button tabindex="0">Siguiente</button>
<div tabindex="-1">Contenido no interactivo</div>

6. alt (en imágenes):

Aunque no es un atributo ARIA, alt es crucial para la accesibilidad. Proporciona una descripción textual de la imagen para usuarios que no pueden verla.

<img src="imagen.jpg" alt="Descripción de la imagen">

Consejos Adicionales:

• Utiliza encabezados (<h1> a <h6>) de forma jerárquica para estructurar el contenido y facilitar la navegación.
• Asegúrate de que el contraste de color entre el texto y el fondo sea suficiente.
• Proporciona subtítulos y transcripciones para contenido multimedia.

Implementar estas propiedades y seguir las mejores prácticas de accesibilidad hará que tu sitio web sea más inclusivo y usable para todos.