Skip to content
Star

Accesibilidad

Esta página lista lo que está realmente implementado, en vez de una afirmación genérica de "es accesible" — la cobertura varía según el componente. Al momento de escribir esto, 16 de los 55 componentes de la librería tienen atributos ARIA, roles o manejo de teclado explícitos. El resto depende de la semántica nativa de sus elementos HTML (<button>, <input>, <label>), lo cual cubre la operabilidad básica por teclado pero no comportamientos específicos para lectores de pantalla como regiones live o roving tabindex.

Si la accesibilidad es un requisito estricto para tu caso de uso, trata esta lista como punto de partida para tu propia auditoría, no como una garantía.

ComponenteTeclas soportadas
PxCommandPalette / para moverse entre resultados, Enter para seleccionar, Esc para cerrar
PxDialogEsc para cerrar (cuando closable)
PxDrawerEsc para cerrar (cuando closable)

Otros componentes interactivos (botones, links, inputs nativos, checkboxes/radios construidos sobre <input> reales) obtienen el comportamiento de Tab/Espacio/Enter gratis del navegador, sin manejadores de teclas personalizados.

Roles y atributos ARIA

ComponenteQué está marcado
PxCheckboxrole="checkbox", aria-checked, aria-disabled, tabindex
PxRadioButtonrole="radio", aria-checked, aria-disabled, tabindex
PxToastrole="alert" en el toast, aria-label en el botón de cerrar
PxDialogrole="dialog", aria-modal, aria-label en el botón de cerrar
PxDrawerrole="dialog", aria-modal, aria-label en el botón de cerrar
PxCommandPaletterole="dialog", aria-modal
PxAccordionaria-expanded en cada trigger de panel
PxTabsaria-selected en la tab activa
PxDropdownMenuaria-label, aria-haspopup en el trigger, aria-hidden en su ícono
PxLabelAsociación nativa <label for> con el id del campo
PxFormWizardaria-label en el <nav> de progreso de pasos
PxPhoneInput, PxSchemaForm, PxSelectableListWithTablearia-live="polite" en el mensaje de error de validación, para que los lectores de pantalla lo anuncien al aparecer
PxDialogInput, PxGridSelect, PxSelectableListWithTablearia-label en los botones de eliminar por ítem, aria-hidden en sus íconos

Vacíos conocidos

  • Los componentes construidos sobre vue-select (selects async/categorizados/de esquema) heredan el comportamiento de accesibilidad propio de esa librería, no ARIA personalizado de Praxis Vue.
  • Ningún componente administra actualmente un tabindex rotativo para navegación con flechas dentro de listas (ej. PxTree, PxNavList, PxStepper) — la navegación es vía Tab, no con flechas, excepto en PxCommandPalette.
  • El contraste de color no ha sido auditado contra WCAG AA como conjunto; la paleta por defecto (ver Theming) es un punto de partida razonable pero no fue elegida contra un verificador de contraste.

Si encuentras un vacío específico que sea importante para tu proyecto, vale la pena reportarlo en GitHub en vez de asumir que ya está cubierto.

Built with VitePress