Accesibilidad

lh-ui-plus se compromete a ofrecer una experiencia de UI accesible para usuarios de todo el mundo.

Navegación con teclado

Todos los componentes interactivos admiten la operación con teclado:

Tecla	Acción
Tab	Se desplaza entre los elementos enfocables
Enter / Space	Activa botones e interruptores
Escape	Cierra las capas emergentes de Dialog/Select
Arrow Up/Down	Se desplaza arriba/abajo entre las opciones de Select/Cascader

Atributos ARIA

Los componentes emiten atributos ARIA según se necesitan (a continuación se muestran los resultados reales del renderizado):

<!-- Button en estado deshabilitado: disabled nativo, que Tab puede saltar -->
<button disabled>...</button>

<!-- Switch interruptor: button + role/aria-checked -->
<button role="switch" aria-checked="false">...</button>

<!-- Checkbox: input nativo, la semántica la aporta la etiqueta -->
<input type="checkbox" />

<!-- Dialog: aria-modal + aria-label apuntando al título -->
<div role="dialog" aria-modal="true" aria-label="Título del diálogo">
  ...
</div>

Prioridad de la semántica nativa: Button utiliza el disabled nativo y Checkbox el <input type="checkbox"> nativo, sin volver a añadir aria-disabled / role="checkbox"; apilar ARIA redundante sobre elementos nativos contradice la especificación.

Lectores de pantalla

• Los botones con solo icono deben recibir un aria-label manual (consulta las recomendaciones de desarrollo más abajo)
• El botón de cierre de Dialog incluye aria-label="close"
• Los componentes delegan los atributos nativos: cualquier propiedad no gestionada explícitamente cae en el elemento raíz, de modo que se pueden añadir aria-* según se necesite

Contraste de color

El texto y los tonos principales se han elegido con el objetivo de WCAG 2.1 AA (texto normal ≥ 4.5:1, texto grande y elementos no textuales ≥ 3:1); con la paleta china de baja saturación se recomienda utilizar la jerarquía --lh-text-color-* de Personalización de temas en lugar de colores elegidos a mano, para garantizar el contraste.

Gestión del foco

• El elemento raíz ofrece de forma uniforme un anillo de foco :focus-visible: visible en la navegación con teclado, no visible al hacer clic con el ratón
• Las capas emergentes de Dialog/Select admiten el cierre con Escape
• Operabilidad con teclado: los elementos enfocables son todos <button> / <input> nativos, que admiten el recorrido con Tab de forma natural

La trampa de foco y la restauración del foco (enfocar el primer elemento al abrir un Dialog y regresar al botón disparador tras cerrarlo) aún no están implementadas; puedes hacer seguimiento en Issue.

Recomendaciones de desarrollo

Añadir un aria-label a un componente

<LhButton aria-label="Cerrar el diálogo" @click="close">
  <LhIcon name="close" />
</LhButton>

Usar una región activa para anuncios

<script setup lang="ts">
import { ref } from 'vue'
const message = ref('')
</script>

<template>
  <div aria-live="polite">{{ message }}</div>
</template>

Skip Navigation

<a href="#main" class="skip-link">Saltar al contenido principal</a>

Herramientas de prueba

Se recomiendan las siguientes herramientas para detectar problemas de accesibilidad:

• axe DevTools — extensión del navegador
• WAVE — Web Accessibility Evaluation Tool
• lighthouse — auditoría de accesibilidad integrada

---

La accesibilidad no es una función opcional, sino un derecho humano fundamental. — Web Accessibility Initiative (WAI)