Componentes accesibles con Angular y Tailwind CSS

La accesibilidad web no es solo una recomendación, sino una necesidad para garantizar que las aplicaciones sean utilizables por todas las personas, independientemente de sus capacidades. En este artículo, exploraremos cómo crear componentes accesibles utilizando Angular y Tailwind CSS, siguiendo los estándares WCAG (Web Content Accessibility Guidelines).

¿Por qué es importante la accesibilidad web?

Según la Organización Mundial de la Salud, más de mil millones de personas (aproximadamente el 15% de la población mundial) vive con algún tipo de discapacidad. La accesibilidad web no solo beneficia a personas con discapacidades permanentes, sino también a aquellas con limitaciones temporales o situacionales.

Además de ser lo correcto desde un punto de vista ético, implementar la accesibilidad ofrece varios beneficios:

•
Mayor alcance de audiencia: Al hacer tu aplicación accesible, puedes llegar a un público más amplio
•
Mejor SEO: Muchas prácticas de accesibilidad mejoran también el posicionamiento en buscadores
•
Cumplimiento legal: En muchas jurisdicciones, la accesibilidad web es un requisito legal
•
Mejor experiencia para todos: Las mejoras de accesibilidad benefician a todos los usuarios
•
Código más limpio y semántico: Seguir estándares de accesibilidad resulta en código más mantenible

Entendiendo WCAG

Las Web Content Accessibility Guidelines (WCAG) son el estándar más ampliamente aceptado para la accesibilidad web. Estas guías se organizan en torno a cuatro principios fundamentales, conocidos como POUR:

•
Perceptible: La información debe ser presentable de manera que los usuarios puedan percibirla
•
Operable: Los componentes de la interfaz deben ser operables por todos los usuarios
•
Comprensible: La información y el funcionamiento de la interfaz deben ser comprensibles
•
Robusto: El contenido debe ser suficientemente robusto para ser interpretado por diferentes tecnologías de asistencia

WCAG define tres niveles de conformidad: A (mínimo), AA (recomendado) y AAA (óptimo). La mayoría de los sitios buscan cumplir al menos con el nivel AA.

Configurando Angular para la accesibilidad

Angular proporciona herramientas nativas que facilitan la creación de aplicaciones accesibles. Comencemos configurando nuestro proyecto para soportar las mejores prácticas de accesibilidad.

Instalando dependencias útiles

bash

npm install @angular/cdk --save
npm install axe-core --save-dev

El Angular CDK (Component Development Kit) incluye utilidades para la accesibilidad, mientras que axe-core es una herramienta para probar la accesibilidad en tiempo de desarrollo.

Activando comprobación de accesibilidad durante el desarrollo

Podemos añadir axe-core a nuestra aplicación para detectar problemas de accesibilidad durante el desarrollo:

typescript

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

import 'axe-core';

// Solo en desarrollo
if (!environment.production) {
  import('axe-core').then(axe => {
    // Espera a que la aplicación se cargue
    setTimeout(() => {
      axe.default.run((err, results) => {
        if (err) throw err;
        if (results.violations.length) {
          console.warn('Problemas de accesibilidad detectados:');
          console.table(
            results.violations.map(v => ({
              'Impacto': v.impact,
              'Descripción': v.description,
              'Elementos': v.nodes.length
            }))
          );
        }
      });
    }, 1000);
  });
}

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

Implementando componentes accesibles con Tailwind CSS

Veamos ahora cómo crear componentes accesibles utilizando Angular y Tailwind CSS. Trabajaremos con algunos ejemplos comunes.

1. Botones accesibles

Los botones son uno de los componentes más básicos en cualquier interfaz. Aquí hay un ejemplo de un botón accesible:

html

<!-- button.component.html -->
<button
  [attr.aria-label]="ariaLabel || null"
  [attr.aria-labelledby]="ariaLabelledby || null"
  [attr.aria-describedby]="ariaDescribedby || null"
  [attr.aria-pressed]="ariaPressed || null"
  [disabled]="disabled"
  [ngClass]="{
    'bg-blue-600 hover:bg-blue-700 text-white': variant === 'primary' && !disabled,
    'bg-gray-200 hover:bg-gray-300 text-gray-800': variant === 'secondary' && !disabled,
    'bg-red-600 hover:bg-red-700 text-white': variant === 'danger' && !disabled,
    'opacity-50 cursor-not-allowed': disabled,
    'focus:ring-2 focus:ring-offset-2': !disabled
  }"
  class="px-4 py-2 rounded font-medium transition-colors duration-200 focus:outline-none"
  type="button"
  [type]="type">
  <ng-content></ng-content>
</button>

typescript

// button.component.ts
import { Component, Input } from '@angular/core';
import { NgClass } from '@angular/common';

@Component({
  selector: 'app-button',
  standalone: true,
  imports: [NgClass],
  templateUrl: './button.component.html'
})
export class ButtonComponent {
  @Input() variant: 'primary' | 'secondary' | 'danger' = 'primary';
  @Input() type: 'button' | 'submit' | 'reset' = 'button';
  @Input() disabled = false;
  @Input() ariaLabel?: string;
  @Input() ariaLabelledby?: string;
  @Input() ariaDescribedby?: string;
  @Input() ariaPressed?: boolean;
}

Este botón incluye características importantes para la accesibilidad:

•
Atributos ARIA: aria-label, aria-labelledby, aria-describedby para descripciones alternativas
•
Estados visuales claros: Diferentes estilos para estados normal, hover, focus y disabled
•
Indicadores de foco: Ring visible cuando se navega con teclado
•
Tipos de botón apropiados: Soporte para diferentes tipos semánticos

2. Formularos accesibles

Los formularios son otro componente esencial que requiere especial atención para la accesibilidad:

html

<!-- input-field.component.html -->
<div class="mb-4">
  <label 
    [for]="id" 
    class="block text-sm font-medium text-[var(--primary-900)] mb-1">
    {{ label }}<span *ngIf="required" class="text-red-500 ml-1">*</span>
  </label>
  
  <input
    [id]="id"
    [type]="type"
    [formControl]="control"
    [attr.aria-invalid]="control.invalid && control.touched ? true : null"
    [attr.aria-describedby]="errorId"
    [required]="required"
    [placeholder]="placeholder || ''"
    class="w-full px-3 py-2 border rounded-md text-[var(--primary-900)] bg-[var(--background-primary)]
           focus:outline-none focus:ring-2 focus:ring-[var(--primary-500)]
           disabled:bg-[var(--background-secondary)] disabled:text-[var(--text-secondary)] disabled:cursor-not-allowed
           transition-colors duration-200"
    [ngClass]="{
      'border-red-500 focus:ring-red-500': control.invalid && control.touched,
      'border-[var(--primary-300)]': !control.invalid || !control.touched
    }"
  />
  
  <div 
    *ngIf="control.invalid && control.touched" 
    [id]="errorId"
    role="alert"
    class="mt-1 text-sm text-red-600">
    <ng-container *ngIf="control.hasError('required')">Este campo es obligatorio.</ng-container>
    <ng-container *ngIf="control.hasError('email')">Ingresa un correo electrónico válido.</ng-container>
    <ng-container *ngIf="control.hasError('minlength')">Debe tener al menos {{ control.getError('minlength').requiredLength }} caracteres.</ng-container>
    <!-- Otros errores personalizados -->
    <ng-content select="[error]"></ng-content>
  </div>
</div>

typescript

// input-field.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { NgIf, NgClass } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-input-field',
  standalone: true,
  imports: [NgIf, NgClass, ReactiveFormsModule],
  templateUrl: './input-field.component.html'
})
export class InputFieldComponent implements OnInit {
  @Input() label = '';
  @Input() control!: FormControl;
  @Input() type = 'text';
  @Input() placeholder = '';
  @Input() required = false;
  @Input() id = '';
  
  errorId = '';
  
  ngOnInit() {
    // Generamos IDs únicos para los campos sin ID explícito
    if (!this.id) {
      this.id = `input-${Math.random().toString(36).substring(2, 9)}`;
    }
    
    this.errorId = `${this.id}-error`;
  }
}

Este componente de campo de formulario incluye características importantes para la accesibilidad:

•
Etiquetas correctamente asociadas con los campos de entrada usando for y id.
•
Indicación clara de campos obligatorios, tanto visual como semánticamente.
•
Atributo aria-invalid para comunicar a los lectores de pantalla cuando hay errores.
•
Mensajes de error asociados mediante aria-describedby.
•
Atributo role="alert" para notificar a las tecnologías asistivas de los errores.
•
Estados visuales claros para diferentes estados del campo (normal, error, deshabilitado, foco).

3. Diálogos modales accesibles

Los diálogos modales presentan desafíos particulares para la accesibilidad:

html

<!-- modal.component.html - Primera parte -->
<div
  *ngIf="isOpen"
  class="fixed inset-0 z-50 overflow-y-auto"
  role="dialog"
  [attr.aria-labelledby]="titleId"
  [attr.aria-modal]="true"
  (keydown.escape)="closeModal()">
  
  <!-- Backdrop -->
  <div 
    class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
    (click)="closeOnBackdrop && closeModal()"></div>
  
  <!-- Diálogo -->
  <div class="flex min-h-screen items-center justify-center p-4">
    <div 
      #modalContent
      class="relative bg-[var(--background-primary)] rounded-lg shadow-xl max-w-md w-full p-6"
      [ngClass]="{'animate-modal-in': isOpen}"
      tabindex="-1">
      <!-- Contenido continúa en la siguiente parte -->
    </div>
  </div>
</div>

html

<!-- modal.component.html - Segunda parte -->
      <!-- Cabecera -->
      <div class="flex items-start justify-between mb-4">
        <h2 [id]="titleId" class="text-xl font-semibold text-[var(--primary-900)]">
          {{ title }}
        </h2>
        
        <button
          type="button"
          class="text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
          aria-label="Cerrar"
          (click)="closeModal()">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
      
      <!-- Contenido y Footer -->
      <div class="mb-4"><ng-content></ng-content></div>
      <div class="flex justify-end gap-3"><ng-content select="[footer]"></ng-content></div>

typescript

// modal.component.ts
import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { NgIf, NgClass } from '@angular/common';
import { A11yModule, FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';

@Component({
  selector: 'app-modal',
  standalone: true,
  imports: [NgIf, NgClass, A11yModule],
  templateUrl: './modal.component.html',
})
export class ModalComponent implements AfterViewInit {
  @Input() isOpen = false;
  @Input() title = 'Modal';
  @Input() closeOnBackdrop = true;
  
  @Output() closed = new EventEmitter<void>();
  
  @ViewChild('modalContent') modalContent!: ElementRef<HTMLElement>;
  
  titleId = `modal-title-${Math.random().toString(36).substring(2, 9)}`;
  private focusTrap!: FocusTrap;
  private previouslyFocusedElement!: HTMLElement;
  
  constructor(private focusTrapFactory: FocusTrapFactory) {}
  
  ngAfterViewInit(): void {
    if (this.isOpen) {
      this.setupModal();
    }
  }
  
  ngOnChanges() {
    if (this.isOpen) {
      setTimeout(() => {
        this.setupModal();
      });
    } else {
      this.cleanupModal();
    }
  }
  
  closeModal(): void {
    this.isOpen = false;
    this.closed.emit();
    this.cleanupModal();
  }
  
  private setupModal(): void {
    if (!this.modalContent) return;
    
    // Guardar el elemento con foco actual
    this.previouslyFocusedElement = document.activeElement as HTMLElement;
    
    // Crear una trampa de foco
    this.focusTrap = this.focusTrapFactory.create(this.modalContent.nativeElement);
    this.focusTrap.focusInitialElement() || this.modalContent.nativeElement.focus();
    
    // Evitar scroll en el body
    document.body.style.overflow = 'hidden';
  }
  
  private cleanupModal(): void {
    if (this.focusTrap) {
      this.focusTrap.destroy();
    }
    
    // Restaurar el foco al elemento anterior
    if (this.previouslyFocusedElement) {
      this.previouslyFocusedElement.focus();
    }
    
    // Restaurar scroll
    document.body.style.overflow = '';
  }
}

Este modal incorpora importantes características de accesibilidad:

•
Trampa de foco utilizando el CDK de Angular para mantener el foco dentro del modal.
•
Restauración del foco al elemento que abrió el modal cuando éste se cierra.
•
Uso adecuado de atributos ARIA (role="dialog", aria-labelledby, aria-modal).
•
Cierre del modal presionando ESC.
•
Título del modal correctamente asociado utilizando id y aria-labelledby.
•
Botón de cierre con etiqueta accesible.

Mejores prácticas para el contraste de colores con Tailwind

El contraste de colores es crucial para la accesibilidad visual. Tailwind CSS puede ayudarnos a implementar esquemas de colores accesibles.

Una buena práctica es definir variables CSS personalizadas que respeten los estándares de contraste WCAG, y luego asignarlas a las clases de utilidad de Tailwind:

javascript

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: 'var(--primary-100)',
          200: 'var(--primary-200)',
          300: 'var(--primary-300)',
          400: 'var(--primary-400)',
          500: 'var(--primary-500)',
          600: 'var(--primary-600)',
          700: 'var(--primary-700)',
          800: 'var(--primary-800)',
          900: 'var(--primary-900)'
        },
        // ...otros colores
      }
    },
  },
  plugins: [
    require('@tailwindcss/forms')({ strategy: 'class' }),
  ],
};

Luego, podemos definir estas variables en CSS, asegurándonos de que los contrastes sean adecuados:

css

:root {
  /* Modo claro */
  --primary-100: #f0f7ff; /* Fondo muy claro */
  --primary-500: #3b82f6; /* Color base que cumple con AA en texto normal */
  --primary-700: #1d4ed8; /* Color para textos pequeños sobre fondo claro */
  --primary-900: #1e3a8a; /* Máximo contraste */
  
  /* ...otras variables */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Modo oscuro */
    --primary-100: #172554; /* Fondo oscuro */
    --primary-500: #60a5fa; /* Color base más claro para AA */
    --primary-700: #93c5fd; /* Color para textos pequeños */
    --primary-900: #e0f2fe; /* Máximo contraste */
    
    /* ...otras variables */
  }
}

Probando la accesibilidad de nuestros componentes

Una vez implementados nuestros componentes, es crucial probarlos para asegurar que cumplen con los estándares de accesibilidad.

Herramientas de prueba automática

•
axe DevTools: Extensión del navegador para auditorías de accesibilidad.
•
Lighthouse: Integrado en Chrome DevTools, incluye auditorías de accesibilidad.
•
Pa11y: Herramienta de línea de comandos para pruebas automatizadas de accesibilidad.
•
WAVE: Extensión del navegador que ofrece evaluación visual de accesibilidad.

Pruebas manuales esenciales

Las pruebas automáticas no capturan todos los problemas de accesibilidad. Por eso, es importante realizar también pruebas manuales:

•
Navegación por teclado: Asegurarse de que toda la funcionalidad es accesible usando solo el teclado.
•
Lectores de pantalla: Probar con NVDA (Windows), VoiceOver (Mac/iOS) o TalkBack (Android).
•
Ampliación: Comprobar cómo se comporta la interfaz al ampliarla hasta un 200%.
•
Alto contraste: Verificar la legibilidad en modo de alto contraste.
•
Reducción de movimiento: Comprobar que las animaciones respetan la preferencia prefers-reduced-motion.

Implementando la preferencia de movimiento reducido

Un aspecto importante de la accesibilidad es respetar la preferencia de reducción de movimiento. Esto es especialmente relevante para usuarios que sufren de trastornos vestibulares o sensibilidad a los movimientos.

css

/* En tu archivo global de estilos */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

En Tailwind, podemos usar el modificador motion-reduce para aplicar estilos específicos cuando se detecta esta preferencia:

html

<div class="transition-transform hover:scale-110 motion-reduce:transition-none motion-reduce:hover:transform-none">
  Contenido con animación (desactivada con motion-reduce)
</div>

Diagrama mostrando los niveles de conformidad WCAG: A, AA y AAA

Conclusiones

La creación de componentes accesibles con Angular y Tailwind CSS requiere atención a los detalles y un compromiso con las mejores prácticas de accesibilidad, pero los beneficios valen la pena. Un diseño accesible no solo amplía el alcance de tu aplicación, sino que mejora la experiencia de usuario para todos.

Recuerda:

•
Diseña con la accesibilidad en mente desde el principio, no como una ocurrencia tardía.
•
Prueba regularmente con herramientas automáticas y evaluaciones manuales.
•
Usa correctamente los atributos ARIA, pero solo cuando sean realmente necesarios.
•
Crea componentes flexibles que respeten las preferencias del usuario.
•
Mantente actualizado con las evoluciones de los estándares de accesibilidad.

La accesibilidad web es un viaje continuo, no un destino final. Cada mejora que implementes hará tu aplicación más inclusiva y utilizable para todos los usuarios, independientemente de sus capacidades.

Recursos adicionales

Explorar recursos de accesibilidad web