# Creación de Páginas Web Accesibles
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title Tu aventura de aprendizaje sobre accesibilidad
section Fundamentos
Entendiendo a los usuarios: 5: You
Herramientas de prueba: 4: You
Principios POUR: 5: You
section Desarrollo de habilidades
HTML semántico: 4: You
Diseño visual: 5: You
Técnicas ARIA: 4: You
section Práctica avanzada
Navegación con teclado: 5: You
Accesibilidad de formularios: 4: You
Pruebas en el mundo real: 5: You
```
## Cuestionario previo a la clase
[Cuestionario previo a la clase](https://ff-quizzes.netlify.app/web/)
> El poder de la Web está en su universalidad. El acceso para todos, independientemente de la discapacidad, es un aspecto esencial.
>
> \- Sir Timothy Berners-Lee, Director del W3C e inventor de la World Wide Web
Aquí hay algo que podría sorprenderte: cuando construyes sitios web accesibles, no solo ayudas a personas con discapacidades, ¡sino que en realidad mejoras la web para todos!
¿Alguna vez has notado esos rebajes en las esquinas de las calles? Originalmente fueron diseñados para sillas de ruedas, pero ahora ayudan a personas con cochecitos, trabajadores de entregas con carros, viajeros con maletas con ruedas y también a ciclistas. Así es exactamente como funciona el diseño web accesible: soluciones que ayudan a un grupo a menudo terminan beneficiando a todos. ¿Bastante genial, verdad?
En esta lección, exploraremos cómo crear sitios web que realmente funcionen para todos, sin importar cómo naveguen por la web. Descubrirás técnicas prácticas que ya están integradas en los estándares web, practicarás con herramientas de prueba y verás cómo la accesibilidad hace que tus sitios sean más usables para todos los usuarios.
Al final de esta lección, tendrás la confianza para hacer de la accesibilidad una parte natural de tu flujo de trabajo de desarrollo. ¿Listo para explorar cómo las decisiones de diseño reflexivas pueden abrir la web a miles de millones de usuarios? ¡Vamos a sumergirnos!
```mermaid
mindmap
root((Accesibilidad Web))
Users
Lectores de pantalla
Navegación por teclado
Control por voz
Magnificación
Technologies
Semántica HTML
Atributos ARIA
Indicadores de enfoque CSS
Eventos de teclado
Benefits
Audiencia más amplia
Mejor SEO
Cumplimiento legal
Diseño universal
Testing
Herramientas automatizadas
Pruebas manuales
Retroalimentación de usuarios
Tecnología asistiva real
```
> ¡Puedes tomar esta lección en [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
## Comprendiendo las Tecnologías Asistivas
Antes de lanzarnos a codificar, tomemos un momento para entender cómo las personas con diferentes habilidades realmente experimentan la web. Esto no es solo teoría: comprender estos patrones reales de navegación te hará un desarrollador mucho mejor.
Las tecnologías asistivas son herramientas bastante increíbles que ayudan a las personas con discapacidades a interactuar con los sitios web de maneras que podrían sorprenderte. Una vez que entiendes cómo funcionan estas tecnologías, crear experiencias web accesibles se vuelve mucho más intuitivo. Es como aprender a ver tu código a través de los ojos de otra persona.
### Lectores de pantalla
[Los lectores de pantalla](https://en.wikipedia.org/wiki/Screen_reader) son piezas de tecnología bastante sofisticadas que convierten texto digital en salida hablada o braille. Aunque son usados principalmente por personas con discapacidades visuales, también son muy útiles para usuarios con discapacidades de aprendizaje como la dislexia.
Me gusta pensar en un lector de pantalla como tener un narrador muy inteligente que te lee un libro. Lee el contenido en voz alta en un orden lógico, anuncia elementos interactivos como "botón" o "enlace" y proporciona atajos de teclado para saltar por una página. Pero aquí está la cosa: los lectores de pantalla solo pueden hacer su magia si construimos sitios web con estructura adecuada y contenido significativo. ¡Ahí es donde entras tú como desarrollador!
**Lectores de pantalla populares en distintas plataformas:**
- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (gratuito y el más popular), [JAWS](https://webaim.org/articles/jaws/), [Narrador](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (integrado)
- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (integrado y muy capaz)
- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (integrado)
- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (libre y de código abierto)
**Cómo navegan los lectores de pantalla el contenido web:**
Los lectores de pantalla ofrecen múltiples métodos de navegación que hacen que la exploración sea eficiente para usuarios experimentados:
- **Lectura secuencial**: Lee el contenido de arriba a abajo, como seguir un libro
- **Navegación por puntos de referencia**: Salta entre secciones de la página (encabezado, navegación, principal, pie de página)
- **Navegación por encabezados**: Salta entre encabezados para entender la estructura de la página
- **Listas de enlaces**: Genera una lista de todos los enlaces para acceso rápido
- **Controles de formularios**: Navega directamente entre campos de entrada y botones
> 💡 **Esto me sorprendió mucho**: El 68 % de usuarios de lectores de pantalla navegan principalmente por encabezados ([Encuesta WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). Esto significa que tu estructura de encabezados es como un mapa para los usuarios—cuando la haces bien, literalmente ayudas a las personas a orientarse y encontrar contenido más rápido.
### Construyendo tu flujo de trabajo de pruebas
Aquí hay una buena noticia: ¡las pruebas efectivas de accesibilidad no tienen que ser abrumadoras! Querrás combinar herramientas automáticas (son fantásticas para detectar problemas evidentes) con algunas pruebas manuales. Aquí tienes un enfoque sistemático que he encontrado que detecta la mayoría de problemas sin comerse todo tu día:
**Flujo de trabajo esencial para pruebas manuales:**
```mermaid
flowchart TD
A[🚀 Iniciar Pruebas] --> B{⌨️ Navegación por Teclado}
B --> C[Tabular por todos los elementos interactivos]
C --> D{🎧 Prueba de Lector de Pantalla}
D --> E[Probar con NVDA/VoiceOver]
E --> F{🔍 Prueba de Zoom}
F --> G[Ampliar al 200% y probar funcionalidad]
G --> H{🎨 Comprobación de Color/Contraste}
H --> I[Verificar que todo el texto cumpla con los ratios de contraste]
I --> J{👁️ Gestión del Foco}
J --> K[Asegurar que los indicadores de foco sean visibles]
K --> L[✅ Pruebas Completadas]
style A fill:#e3f2fd
style L fill:#e8f5e8
style B fill:#fff3e0
style D fill:#f3e5f5
style F fill:#e0f2f1
style H fill:#fce4ec
style J fill:#e8eaf6
```
**Lista de verificación paso a paso para pruebas:**
1. **Navegación solo con teclado**: Usa solo Tab, Shift+Tab, Enter, Espacio y teclas de flechas
2. **Prueba con lector de pantalla**: Activa NVDA, VoiceOver o Narrador y navega con los ojos cerrados
3. **Pruebas de zoom**: Prueba en niveles de zoom 200 % y 400 %
4. **Verificación contra contraste de color**: Revisa todos los textos y componentes de la interfaz
5. **Prueba del indicador de enfoque**: Asegúrate que todos los elementos interactivos tengan estados visibles de enfoque
✅ **Comienza con Lighthouse**: Abre las DevTools de tu navegador, realiza una auditoría de accesibilidad con Lighthouse, y usa los resultados para guiar tu enfoque en pruebas manuales.
### Herramientas de zoom y ampliación
¿Sabes cómo a veces haces pellizco para hacer zoom en tu teléfono cuando el texto es muy pequeño, o entrecierras los ojos frente a la pantalla de la laptop a plena luz solar? Muchos usuarios confían en herramientas de ampliación para hacer que el contenido sea legible todos los días. Esto incluye a personas con baja visión, adultos mayores y cualquiera que haya intentado leer un sitio web al aire libre.
Las tecnologías modernas de zoom han evolucionado más allá de solo hacer las cosas más grandes. Entender cómo funcionan estas herramientas te ayudará a crear diseños responsivos que sigan siendo funcionales y atractivos a cualquier nivel de ampliación.
**Capacidades modernas de zoom en navegadores:**
- **Zoom de página**: Escala todo el contenido proporcionalmente (texto, imágenes, diseño) - este es el método preferido
- **Zoom solo en texto**: Aumenta el tamaño de fuente manteniendo el diseño original
- **Pellizcar para hacer zoom**: Soporte con gestos móviles para ampliación temporal
- **Soporte en navegadores**: Todos los navegadores modernos soportan zoom hasta 500 % sin romper funcionalidad
**Software especializado de ampliación:**
- **Windows**: [Lupa](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (integrado), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (integrado con funciones avanzadas)
> ⚠️ **Consideración de diseño**: WCAG exige que el contenido siga siendo funcional con zoom al 200%. En este nivel, el desplazamiento horizontal debe ser mínimo y todos los elementos interactivos deben seguir siendo accesibles.
✅ **Prueba tu diseño responsivo**: Haz zoom en tu navegador a 200 % y 400 %. ¿Tu diseño se adapta con elegancia? ¿Puedes acceder a toda la funcionalidad sin desplazamientos excesivos?
## Herramientas modernas para pruebas de accesibilidad
Ahora que entiendes cómo las personas navegan por la web con tecnologías asistivas, exploremos las herramientas que te ayudan a construir y probar sitios web accesibles.
Piénsalo así: las herramientas automáticas son geniales para detectar problemas obvios (como texto alternativo faltante), mientras que las pruebas manuales te ayudan a asegurar que tu sitio se sienta bien en el uso real. Juntas, te dan confianza de que tus sitios funcionan para todos.
### Prueba de contraste de color
Aquí una buena noticia: el contraste de color es uno de los problemas de accesibilidad más comunes, pero también uno de los más fáciles de solucionar. Un buen contraste beneficia a todos: desde usuarios con discapacidades visuales hasta personas que intentan leer sus teléfonos en la playa.
**Requisitos de contraste según WCAG:**
| Tipo de texto | WCAG AA (Mínimo) | WCAG AAA (Mejorado) |
|---------------|------------------|---------------------|
| **Texto normal** (menor a 18pt) | Ratio de contraste 4.5:1 | Ratio de contraste 7:1 |
| **Texto grande** (18pt+ o 14pt+ en negrita) | Ratio de contraste 3:1 | Ratio de contraste 4.5:1 |
| **Componentes de UI** (botones, bordes de formularios) | Ratio de contraste 3:1 | Ratio de contraste 3:1 |
**Herramientas esenciales para pruebas:**
- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - App de escritorio con selector de color
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Basado en web con retroalimentación instantánea
- [Stark](https://www.getstark.co/) - Plugin para herramientas de diseño Figma, Sketch, Adobe XD
- [Accessible Colors](https://accessible-colors.com/) - Encuentra paletas de colores accesibles
✅ **Crea mejores paletas de colores**: Comienza con los colores de tu marca y usa verificadores de contraste para crear variaciones accesibles. Documenta estas como los tokens de color accesibles de tu sistema de diseño.
### Auditorías comprensivas de accesibilidad
La prueba de accesibilidad más efectiva combina múltiples enfoques. Ninguna herramienta sola detecta todo, así que crear una rutina de pruebas con varios métodos asegura una cobertura completa.
**Pruebas basadas en navegador (integradas en DevTools):**
- **Chrome/Edge**: Auditoría de accesibilidad con Lighthouse + Panel de accesibilidad
- **Firefox**: Inspector de accesibilidad con vista detallada del árbol
- **Safari**: Pestaña de auditoría en Web Inspector con simulación de VoiceOver
**Extensiones profesionales para pruebas:**
- [axe DevTools](https://www.deque.com/axe/devtools/) - Pruebas automatizadas estándar en la industria
- [WAVE](https://wave.webaim.org/extension/) - Retroalimentación visual con resaltado de errores
- [Accessibility Insights](https://accessibilityinsights.io/) - Suite completa de pruebas de Microsoft
**Integración en línea de comandos y CI/CD:**
- [axe-core](https://github.com/dequelabs/axe-core) - Biblioteca JavaScript para pruebas automatizadas
- [Pa11y](https://pa11y.org/) - Herramienta de pruebas de accesibilidad en línea de comandos
- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Puntuación automática de accesibilidad
> 🎯 **Meta de pruebas**: Apunta a una puntuación de accesibilidad de Lighthouse de 95+ como línea base. Recuerda, las herramientas automáticas solo detectan cerca del 30-40 % de los problemas de accesibilidad—las pruebas manuales siguen siendo esenciales.
### 🧠 **Chequeo de habilidades en pruebas: ¿Listo para encontrar problemas?**
**Veamos cómo te sientes respecto a las pruebas de accesibilidad:**
- ¿Qué método de prueba te parece más accesible ahora mismo?
- ¿Puedes imaginarte navegando solo con teclado durante un día completo?
- ¿Cuál es una barrera de accesibilidad que hayas experimentado personalmente en línea?
```mermaid
pie title "Problemas de Accesibilidad Detectados por Diferentes Métodos"
"Herramientas Automatizadas" : 35
"Pruebas Manuales" : 40
"Comentarios de Usuarios" : 25
```
> **Refuerzo de confianza**: Los testers profesionales de accesibilidad usan esta misma combinación de métodos. ¡Estás aprendiendo prácticas estándar de la industria!
## Construyendo la accesibilidad desde cero
La clave del éxito en accesibilidad es integrarla desde el principio, desde el primer día. Sé que es tentador pensar "añadiré accesibilidad después," pero eso es como intentar agregar una rampa a una casa ya construida. ¿Posible? Sí. ¿Fácil? No realmente.
Piensa en la accesibilidad como planear una casa: es mucho más fácil incluir accesibilidad para silla de ruedas en tus planes arquitectónicos iniciales que hacer una adaptación después.
### Los principios POUR: tu base de accesibilidad
Las Pautas de Accesibilidad para el Contenido Web (WCAG) están construidas alrededor de cuatro principios fundamentales que forman la palabra POUR. No te preocupes—¡no son conceptos académicos aburridos! Son guías prácticas para hacer contenido que funcione para todos.
Una vez que comprendes POUR, tomar decisiones de accesibilidad se vuelve mucho más intuitivo. Es como tener una lista mental que guía tus elecciones de diseño. Vamos a desglosarlo:
```mermaid
flowchart LR
A[🔍 PERCEBIBLE ¿Pueden los usuarios percibirlo?] --> B[🎮 OPERABLE ¿Pueden los usuarios usarlo?]
B --> C[📖 COMPRENSIBLE ¿Pueden los usuarios entenderlo?]
C --> D[💪 ROBUSTO ¿Funciona en todas partes?]
A1[Texto alternativo Subtítulos Contraste] --> A
B1[Acceso por teclado Sin convulsiones Límites de tiempo] --> B
C1[Lenguaje claro Predecible Ayuda con errores] --> C
D1[Código válido Compatible Preparado para el futuro] --> D
style A fill:#e1f5fe
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
```
**🔍 Percibible**: La información debe ser presentable de maneras en que los usuarios puedan percibirla a través de sus sentidos disponibles
- Proporciona alternativas de texto para contenido no textual (imágenes, videos, audio)
- Asegura suficiente contraste de color para todo texto y componentes de interfaz
- Ofrece subtítulos y transcripciones para contenido multimedia
- Diseña contenido que siga siendo funcional al redimensionar hasta el 200%
- Usa múltiples características sensoriales (no solo color) para transmitir información
**🎮 Operable**: Todos los componentes de la interfaz deben ser operables mediante los métodos de entrada disponibles
- Haz que toda la funcionalidad sea accesible mediante navegación con teclado
- Proporciona a los usuarios tiempo suficiente para leer e interactuar con el contenido
- Evita contenido que cause convulsiones o trastornos vestibulares
- Ayuda a los usuarios a navegar eficientemente con estructura clara y puntos de referencia
- Asegura que los elementos interactivos tengan tamaños adecuados para ser seleccionados (mínimo 44px)
**📖 Comprensible**: La información y la operación de la interfaz deben ser claras y comprensibles
- Usa lenguaje claro y simple adecuado para tu audiencia
- Asegura que el contenido aparezca y funcione de manera predecible y consistente
- Proporciona instrucciones claras y mensajes de error para entradas del usuario
- Ayuda a los usuarios a entender y corregir errores en formularios
- Organiza el contenido con un orden de lectura lógico y jerarquía informativa
**💪 Robusto**: El contenido debe funcionar confiablemente con distintas tecnologías y dispositivos asistivos
- **Usa HTML válido y semántico como base**
- **Asegura compatibilidad con tecnologías asistivas actuales y futuras**
- **Sigue estándares web y buenas prácticas para el marcado**
- **Prueba en diferentes navegadores, dispositivos y herramientas asistivas**
- **Estructura el contenido para que degrade de manera adecuada cuando las funciones avanzadas no estén soportadas**
### 🎯 **Revisión de los principios POUR: Haciendo que perdure**
**Reflexión rápida sobre los fundamentos:**
- ¿Puedes pensar en una característica de un sitio web que falle en cada principio POUR?
- ¿Cuál principio te resulta más natural como desarrollador?
- ¿Cómo podrían estos principios mejorar el diseño para todos, no solo para usuarios con discapacidad?
```mermaid
quadrantChart
title Matriz de Impacto de los Principios POUR
x-axis Bajo Esfuerzo --> Alto Esfuerzo
y-axis Bajo Impacto --> Alto Impacto
quadrant-1 Ganancias Rápidas
quadrant-2 Proyectos Mayores
quadrant-3 Considerar Más Tarde
quadrant-4 Enfoque Estratégico
Alt Text: [0.2, 0.9]
Color Contrast: [0.3, 0.8]
Semantic HTML: [0.4, 0.9]
Keyboard Nav: [0.6, 0.8]
ARIA Complex: [0.8, 0.7]
Screen Reader Testing: [0.7, 0.6]
```
> **Recuerda**: Empieza con mejoras de alto impacto y bajo esfuerzo. ¡HTML semántico y texto alternativo te brindan el mayor impulso en accesibilidad con el menor esfuerzo!
## Creando Diseño Visual Accesible
El buen diseño visual y la accesibilidad van de la mano. Cuando diseñas pensando en la accesibilidad, a menudo descubres que estas restricciones conducen a soluciones más limpias y elegantes que benefician a todos los usuarios.
Exploremos cómo crear diseños visualmente atractivos que funcionen para todos, independientemente de sus habilidades visuales o las condiciones en las que estén viendo tu contenido.
### Estrategias de color y accesibilidad visual
El color es poderoso para la comunicación, pero nunca debería ser la única forma en que transmites información importante. Diseñar más allá del color crea experiencias más sólidas e inclusivas que funcionan en más situaciones.
**Diseña para diferencias en la visión del color:**
Aproximadamente el 8% de los hombres y el 0.5% de las mujeres tienen alguna forma de diferencia en la visión del color (a menudo llamada "daltonismo"). Los tipos más comunes son:
- **Deuteranopía**: Dificultad para distinguir rojo y verde
- **Protanopía**: El rojo parece más tenue
- **Tritanopía**: Dificultad con azul y amarillo (raro)
**Estrategias de color inclusivas:**
```css
/* ❌ Bad: Using only color to indicate status */
.error { color: red; }
.success { color: green; }
/* ✅ Good: Color plus icons and context */
.error {
color: #d32f2f;
border-left: 4px solid #d32f2f;
}
.error::before {
content: "⚠️";
margin-right: 8px;
}
.success {
color: #2e7d32;
border-left: 4px solid #2e7d32;
}
.success::before {
content: "✅";
margin-right: 8px;
}
```
**Más allá de los requisitos básicos de contraste:**
- Prueba tus combinaciones de color con simuladores para daltónicos
- Usa patrones, texturas o formas junto con el código de colores
- Asegúrate de que los estados interactivos sean distinguibles sin color
- Considera cómo se ve tu diseño en modo alto contraste
✅ **Prueba la accesibilidad del color**: Usa herramientas como [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) para ver cómo aparece tu sitio a usuarios con diferentes tipos de visión del color.
### Indicadores de enfoque y diseño de interacción
Los indicadores de enfoque son el equivalente digital del cursor: muestran a los usuarios que usan teclado dónde están en la página. Los indicadores de enfoque bien diseñados mejoran la experiencia para todos al hacer las interacciones claras y predecibles.
**Mejores prácticas modernas para indicadores de enfoque:**
```css
/* Enhanced focus styles that work across browsers */
button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);
}
/* Remove focus outline for mouse users, preserve for keyboard users */
button:focus:not(:focus-visible) {
outline: none;
}
/* Focus-within for complex components */
.card:focus-within {
box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5);
border-color: #4A90A4;
}
/* Ensure focus indicators meet contrast requirements */
.custom-focus:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 6px #000000;
}
```
**Requisitos de indicadores de enfoque:**
- **Visibilidad**: Deben tener al menos una relación de contraste 3:1 con los elementos circundantes
- **Ancho**: Grosor mínimo de 2px alrededor de todo el elemento
- **Persistencia**: Deben permanecer visibles hasta que el enfoque se mueva a otro lugar
- **Distinción**: Deben ser visualmente diferentes de otros estados de UI
> 💡 **Consejo de diseño**: Los buenos indicadores de enfoque suelen usar una combinación de contorno, sombra y cambios de color para garantizar visibilidad sobre diferentes fondos y contextos.
✅ **Audita tus indicadores de enfoque**: Navega usando Tab por tu sitio y anota qué elementos tienen indicadores de enfoque claros. ¿Alguno es difícil de ver o falta por completo?
### HTML semántico: La base de la accesibilidad
El HTML semántico es como darle a las tecnologías asistivas un sistema GPS para tu sitio web. Cuando usas los elementos HTML correctos para su propósito, básicamente proporcionas a los lectores de pantalla, teclados y otras herramientas un mapa detallado para ayudar a los usuarios a navegar eficazmente.
Aquí tienes una analogía que realmente me ayudó: el HTML semántico es la diferencia entre una biblioteca bien organizada con categorías claras y señales útiles versus un almacén donde los libros están esparcidos al azar. Ambos lugares tienen los mismos libros, pero ¿en cuál preferirías intentar buscar algo? ¡Exacto!
```mermaid
flowchart TD
A[🏠 Documento HTML] --> B[📰 encabezado]
A --> C[🧭 navegación]
A --> D[📄 principal]
A --> E[📋 pie de página]
B --> B1[h1: Nombre del sitio Logo y marca]
C --> C1[ul: Navegación Enlaces principales]
D --> D1[artículo: Contenido sección: Subsecciones]
D --> D2[aside: Barra lateral Contenido relacionado]
E --> E1[navegación: Enlaces de pie de página Información de derechos de autor]
D1 --> D1a[h1: Título de la página h2: Secciones principales h3: Subsecciones]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
**Bloques de construcción de la estructura accesible de la página:**
```html
Your Site Name
Article Title
Published on
First Section
Content that relates to this section...
Second Section
More related content...
```
**Por qué el HTML semántico transforma la accesibilidad:**
| Elemento Semántico | Propósito | Beneficio para lectores de pantalla |
|--------------------|-----------|------------------------------------|
| `` | Encabezado de página o sección | "Marcador de banner" - navegación rápida al inicio |
| `