W3Docs

Apariencia

Español

Consideraciones de accesibilidad en el desarrollo web ​

Garantizar la accesibilidad web es esencial para crear experiencias digitales inclusivas. La accesibilidad no solo beneficia a los usuarios con discapacidades, sino que también mejora la experiencia de usuario general y amplía el alcance de tu audiencia. Esta guía cubre la importancia de la accesibilidad, técnicas para hacer accesible la manipulación del DOM y el papel de ARIA (Accessible Rich Internet Applications) en la mejora de la accesibilidad.

Creación de contenido accesible ​

Importancia de la accesibilidad en el desarrollo web ​

La accesibilidad en el desarrollo web garantiza que todos los usuarios, incluidos aquellos con discapacidades, puedan acceder e interactuar con el contenido web de manera efectiva. La Organización Mundial de la Salud estima que más de mil millones de personas viven con alguna forma de discapacidad. Al hacer que tu contenido web sea accesible, atiendes a una audiencia más amplia, mejoras la usabilidad y cumples con estándares legales como la Ley de Estadounidenses con Discapacidades (ADA) y las Pautas de Accesibilidad para el Contenido Web (WCAG).

Beneficios de la accesibilidad ​

  1. Inclusividad: Permite que los usuarios con diversas discapacidades accedan a información y servicios.
  2. Mejora del SEO: Los motores de búsqueda suelen recompensar los sitios web accesibles con mejores posiciones.
  3. Cumplimiento legal: Ayuda a evitar posibles problemas legales relacionados con los estándares de accesibilidad.
  4. Usabilidad mejorada: Mejora la experiencia de usuario general para todos los visitantes, incluidos aquellos sin discapacidades.

Técnicas para hacer accesible la manipulación del DOM ​

Asegúrate de que todos los elementos interactivos sean accesibles mediante el teclado. Confía en el orden natural del DOM para la navegación por tabulación y mantén un flujo lógico. Evita valores explícitos de tabindex a menos que sean necesarios para diseños complejos, ya que los valores positivos alteran el orden natural de tabulación y pueden confundir a los usuarios de teclado. Asegúrate de que los indicadores de enfoque visibles estén estilizados para que los usuarios de teclado puedan ver claramente qué elemento está enfocado.

html
<!DOCTYPE html>
<html>
<head>
    <title>Keyboard Navigation Example</title>
</head>
<body>
<h4>Press the 'Tab' key to navigate through the buttons!</h4>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</body>
</html>
Try it Yourself »

Este ejemplo se basa en el orden natural del DOM para los botones, lo que facilita la navegación a los usuarios de teclado.

Componentes interactivos accesibles ​

Este ejemplo demuestra cómo crear un acordeón accesible utilizando roles y propiedades ARIA, y gestionando el enfoque de manera efectiva.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accessible Accordion Example</title>
    <style>
        .accordion {
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 20px 0;
        }
        .accordion-header {
            padding: 10px;
            cursor: pointer;
            background-color: #f0f0f0;
            border-bottom: 1px solid #ccc;
            width: 100%;
            text-align: left;
        }
        .accordion-content {
            display: none;
            padding: 10px;
        }
    </style>
</head>
<body>

<h1>Accessible Accordion Example</h1>
<h4>Use your keyboard (Enter or Space key) to toggle the accordion!</h4>

<div class="accordion">
    <button class="accordion-header" id="accordion-header-1" aria-controls="accordion-content-1" aria-expanded="false">
        Section 1
    </button>
    <div class="accordion-content" id="accordion-content-1" role="region" aria-labelledby="accordion-header-1" tabindex="-1">
        <p>This is the content of section 1.</p>
    </div>
</div>

<div class="accordion">
    <button class="accordion-header" id="accordion-header-2" aria-controls="accordion-content-2" aria-expanded="false">
        Section 2
    </button>
    <div class="accordion-content" id="accordion-content-2" role="region" aria-labelledby="accordion-header-2" tabindex="-1">
        <p>This is the content of section 2.</p>
    </div>
</div>

<div class="accordion">
    <button class="accordion-header" id="accordion-header-3" aria-controls="accordion-content-3" aria-expanded="false">
        Section 3
    </button>
    <div class="accordion-content" id="accordion-content-3" role="region" aria-labelledby="accordion-header-3" tabindex="-1">
        <p>This is the content of section 3.</p>
    </div>
</div>

<script>
    document.querySelectorAll('.accordion-header').forEach(header => {
        header.addEventListener('click', function () {
            const expanded = this.getAttribute('aria-expanded') === 'true';
            this.setAttribute('aria-expanded', !expanded);
            const content = document.getElementById(this.getAttribute('aria-controls'));
            content.style.display = !expanded ? 'block' : 'none';
        });

        header.addEventListener('keydown', function (event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                this.click();
            }
        });
    });
</script>

</body>
</html>
Try it Yourself »
  • Estructura del acordeón: El acordeón consta de encabezados que, al hacer clic, expanden o colapsan su contenido asociado.
  • HTML semántico y ARIA:
    • Se utilizan elementos <button> nativos para los encabezados para garantizar el soporte integrado de teclado y lectores de pantalla.
    • aria-controls asocia los encabezados con su contenido.
    • aria-expanded indica el estado de la sección del acordeón.
    • role="region" en las secciones de contenido las identifica como regiones significativas.
  • Accesibilidad por teclado:
    • Los listeners de eventos manejan los eventos click y keydown para permitir alternar el acordeón usando el teclado (Enter o Espacio).

Beneficios: ​

  • Usabilidad mejorada: Garantiza que el acordeón sea utilizable mediante el mouse y el teclado.
  • Accesibilidad mejorada: Utiliza atributos ARIA para comunicar el estado y la estructura a las tecnologías de asistencia, haciéndolo accesible para usuarios de lectores de pantalla.
  • Gestión del enfoque: El enfoque permanece en el botón activador, siguiendo los patrones estándar de los acordeones y evitando saltos de navegación inesperados para los usuarios de teclado.

HTML semántico ​

Utiliza elementos HTML semánticos para transmitir el significado y la estructura del contenido. Esto ayuda a las tecnologías de asistencia a interpretar y navegar por el contenido web de manera efectiva.

html
<!DOCTYPE html>
<html>
<head>
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>Main Heading</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
        </ul>
    </nav>
    <main>
        <section id="section1">
            <h2>Section 1</h2>
            <p>Content for section 1.</p>
        </section>
        <section id="section2">
            <h2>Section 2</h2>
            <p>Content for section 2.</p>
        </section>
    </main>
    <footer>
        <p>Footer content</p>
    </footer>
</body>
</html>
Try it Yourself »

Este ejemplo utiliza elementos HTML semánticos como <header>, <nav>, <main>, <section> y <footer> para definir la estructura de la página.

ARIA (Accessible Rich Internet Applications) ​

Más sobre ARIA ​

Como has aprendido hasta ahora, ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que se pueden agregar a elementos HTML para mejorar la accesibilidad para usuarios de tecnologías de asistencia como los lectores de pantalla. Los atributos ARIA ayudan a definir roles, propiedades y estados de los elementos, haciendo que las aplicaciones web sean más accesibles.

Uso de atributos ARIA para mejorar la accesibilidad ​

Roles ARIA ​

Los roles ARIA definen el tipo de elemento, ayudando a las tecnologías de asistencia a comprender su propósito.

html
<div role="button" aria-pressed="false">Toggle</div>

Este elemento no interactivo utiliza el estado aria-pressed para indicar su estado de alternancia.

Propiedades y estados ARIA ​

Las propiedades y estados ARIA proporcionan información adicional sobre los elementos.

html
<!DOCTYPE html>
<html>
<head>
    <title>ARIA Example</title>
</head>
<body>
    <div role="alert" id="live-region">
        <!-- Dynamic content goes here -->
    </div>

    <script>
        document.getElementById('live-region').textContent = "This is an important message.";
    </script>
</body>
</html>
Try it Yourself »

Este ejemplo utiliza propiedades ARIA para crear una región en vivo que anuncia mensajes importantes de forma dinámica.

Mejores prácticas ​

  1. Usa HTML semántico: Prefiere siempre elementos HTML semánticos para proporcionar un significado y estructura claros al contenido.
  2. Implementa accesibilidad por teclado: Asegúrate de que todos los elementos interactivos puedan accederse y operarse mediante el teclado.
  3. Gestiona el enfoque de manera efectiva: Controla el enfoque de forma programática para guiar a los usuarios a través de cambios dinámicos en el contenido.
  4. Usa ARIA con prudencia: Aplica roles, propiedades y estados ARIA para mejorar, no reemplazar, la semántica de los elementos HTML nativos.
  5. Prueba con tecnologías de asistencia: Prueba regularmente tus aplicaciones web con lectores de pantalla y otras tecnologías de asistencia para garantizar la accesibilidad.
  6. Usa herramientas de prueba automatizadas: Ejecuta verificaciones con herramientas como axe o Lighthouse para detectar problemas comunes de accesibilidad temprano.

INFO

Asegúrate siempre de que tus modales y otros elementos dinámicos sean accesibles gestionando el enfoque de manera efectiva. Utiliza JavaScript para atrapar el enfoque dentro de los modales, recorriendo los elementos enfocables con la tecla Tab para evitar que los usuarios de teclado naveguen fuera del diálogo accidentalmente. Esto mejora la accesibilidad y proporciona una mejor experiencia de usuario.

Conclusión ​

La accesibilidad es un aspecto fundamental del desarrollo web que garantiza que tu contenido sea utilizable por todas las personas, independientemente de sus capacidades. Al crear contenido accesible, utilizar técnicas para hacer accesible la manipulación del DOM y aprovechar los atributos ARIA, puedes mejorar significativamente la inclusividad y usabilidad de tus aplicaciones web. Implementar estas prácticas no solo ayuda a cumplir con los estándares legales, sino que también mejora la experiencia de usuario en general.

Práctica ​

¿Cuáles de las siguientes son consideraciones importantes para garantizar la accesibilidad en el desarrollo web?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.