book

Recetario de accesibilidad web

by Manuel Matuzovic

September 2024

Intermediate to advanced

382 pages

8h 39m

Spanish

O'Reilly Media, Inc.

Read now

Unlock full access

A quién va dirigido este libroQué hay en este libro/OrganizaciónConvenciones utilizadas en este libroUtilizar ejemplos de código y software compatibleAprendizaje en línea O'ReillyCómo contactar con nosotrosAgradecimientos
1.1. Definir el lenguaje natural1.2. Describe el Documento1.3. Establecer la anchura de la ventana gráfica1.4. Optimizar el orden de renderizado1.5. Estructura del documento
2.1. Crear puntos de referencia de navegación2.2. Crear hitos de forma2.3. Etiquetar puntos de referencia2.4. Estructurar el contenido principal2.5. Crear un esquema de documento sonoro2.6. Presentar el contenido en orden
3.1. Elige el elemento adecuado3.2. Enlaces de estilo3.3. Crear enlaces de descarga3.4. Crear enlaces de correo electrónico3.5. Imágenes de enlace3.6. Informar a los usuarios de los cambios de contexto3.7. Corregir el renderizado del lado del cliente3.8. Añadir enlaces a grupos de elementos
4.1. Elige el elemento adecuado4.2. Etiqueta claramente los botones4.3. Eliminar estilos de botones por defecto4.4. Añadir estados y propiedades4.5. No desactives los botones
5.1. Trabajar con el color5.2. Respetar las preferencias del usuario5.3. Trabajar con unidades y tamaños5.4. Preservar la información semántica y la operatividad5.5. Añadir movimiento y animación
6.1. Proporcionar estilos de enfoque6.2. Haz que los elementos sean enfocables6.3. Mover el foco6.4. Mantén la concentración6.5. Preservar el orden6.6. Permitir que los usuarios omitan elementos
7.1. Crear una navegación principal7.2. Resaltar la página activa7.3. Anunciar el número de elementos7.4. Proporcionar acceso rápido7.5. Ocultar la navegación en ventanas estrechas7.6. Añadir una animación deslizante7.7. Añadir submenús7.8. Evitar confusiones con los menús
8.1. Ocultar contenido8.2. Crear un Widget Nativo de Divulgación8.3. Crear un Widget de Divulgación Personalizado8.4. Crear grupos de widgets de divulgación

9.1. Crear formularios9.2. Identificar los elementos del formulario9.3. Describir campos del formulario9.4. Resaltar campos erróneos9.5. Agrupar campos en un formulario9.6. Dividir formularios en pasos
10.1. Crear un formulario10.2. Filtrar los datos10.3. Paginar resultados10.4. Ordenar y mostrar resultados10.5. Filtros de grupo
11.1. Elige los elementos adecuados11.2. Tablas de estructura11.3. Añadir elementos interactivos11.4. Ordenar columnas
12.1. Trabajar con identificadores12.2. Crear referencias ARIA12.3. Enfocar elementos en DOM en la sombra12.4. Depuración y pruebas12.5. Hacer cumplir las buenas prácticas
13.1. Encontrar problemas de accesibilidad automáticamente13.2. Explorar el árbol de accesibilidad13.3. Roles, nombres, propiedades y estados de depuración13.4. Visualizar el orden de las pestañas13.5. Emular deficiencias de color, movimiento reducido y más13.6. Escribir reglas de depuración personalizadas

Content preview from Recetario de accesibilidad web

Capítulo 12. Creación de elementos personalizados

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: translation-feedback@oreilly.com

Los componentes web son un conjunto de API de plataforma web que te permiten construir tus propios elementos DOM con todas las funciones.

Poder crear elementos personalizados para construir sitios web interactivos de forma nativa es emocionante, pero también introduce nuevos problemas de accesibilidad. Debes ser consciente de las limitaciones y oportunidades de los elementos personalizados y sus API relacionadas. Con la arquitectura adecuada y la planificación suficiente, los componentes web pueden fomentar una mentalidad de desarrollo que dé prioridad a la accesibilidad y crear grandes experiencias. También pueden romper la accesibilidad de forma inherente, si se utilizan sin precaución.

12.1 Trabajar con identificadores

Problema

Es imposible hacer referencia a un elemento del DOM de la Luz en el DOM de la Sombra, o viceversa, utilizando el atributo id. Si no eres consciente de esta limitación e intentas crear estas referencias de todos modos, la relación rota puede afectar a los usuarios:

Los enlaces de salto pueden no funcionar, lo que dificulta la navegación.
Los elementos del formulario pueden no tener etiquetas adecuadas, lo que dificulta su distinción a los usuarios de lectores de pantalla.
Las referencias ARIA pueden romperse, con la consiguiente falta de información o de respuesta para los usuarios ...