```
¿Puedes identificar el problema? El botón "Añadir al carrito" está posicionado visualmente en la parte inferior de la pantalla, pero en el código HTML aparece antes que toda la información del producto. Esto viola directamente el criterio 1.3.2 de las WCAG.
Esto se puede apreciar claramente si quitamos los estilos y vemos el resultado del HTML sin CSS:
Añadir al carrito
## SPEED TRAINER
795 €
Las icónicas zapatillas Speed Trainer. Diseño minimalista
con un ajuste tipo calcetín y suela innovadora para máximo confort y estilo.
Perfectas para el día a día o para ocasiones especiales.
Talla
3940414243
Nuevo
**Pero, ¿por qué es esto un problema?**
Un lector de pantalla anunciará "añadir al carrito, botón" antes de que el usuario conozca qué producto está viendo, su precio o sus características. Además, los usuarios que navegan con teclado encontrarán el foco en el botón de compra antes de acceder a la información del producto y seleccionar la talla.
Para corregir este problema y cumplir con este criterio, deberíamos restructurar nuestro HTML de la siguiente manera:
```html focus-visible:focus-style
SPEED TRAINER
795 €
Las icónicas zapatillas Speed Trainer...
```
## Ejemplo avanzado: Tarjeta de producto con múltiples elementos
Veamos ahora el caso de las tarjetas de producto. Si probamos a navegar con el teclado o un lector de pantalla, la experiencia y el contexto es confuso:
- -20%
★★★★☆(4.2)
## Zapatillas Ultra Boost
119.99€149.99€
Zapatillas de running con tecnología de amortiguación superior para máximo confort.
Añadir a la cesta
- -25%
★★★★☆(4.2)
## Camiseta Técnica Dry-Fit
29.99€39.99€
Camiseta transpirable de alto rendimiento para tus entrenamientos más intensos.
Añadir a la cesta
- -19%
★★★★☆(4.2)
## Zapatillas Air Max
129.99€159.99€
Zapatillas con tecnología de amortiguación Air para una comodidad suprema durante todo el día.
Añadir a la cesta
- -20%
★★★★☆(4.2)
## Mochila Aventura Pro
79.99€99.99€
Mochila resistente y espaciosa, ideal para tus aventuras al aire libre o viajes urbanos.
Añadir a la cesta
La estructura HTML muy simplificada de la tarjeta de producto sería algo como esto:
```html focus-visible:focus-style
-20%★★★★☆ (4.2)
Zapatillas Ultra Boost
119.99€149.99€
Zapatillas de running con tecnología...
```
**Pero, ¿qué es lo que falla exactamente?**
El código HTML prioriza elementos visualmente secundarios. Por ejemplo, el badget del "-20%" aparece antes que el título del producto en el flujo del lectura. El lector de pantalla narra algo parecido a lo siguiente:
_«-20%. Zapatillas Ultra Boost, imagen. estrella negra estrella negra... 4.2. Encabezamiento de nivel 2, Zapatillas Ultra Boost. 119.99 €. 149.99 €. Zapatillas de running con tecnología... Añadir a la cesta, botón»_
Ahora te pregunto, ¿crees que ese orden tiene sentido? ¿tú te enteras de algo?. Puede que si, pero vas a necesitar revisar varias veces este texto para intentar averiguar la contextualización que te falta para interpretar el contenido correctamente.
Es como si en un supermercado te pusieran la caja registradora antes de las estanterías. **¿Cómo vas a comprar algo que no has visto ni elegido?**
Ahora vamos a ver los errores que existen y una posible solución:
- **El primer problema es que orden en el código debe ser igual a la orden de la experiencia esperada.** Es decir,primero debería de ir el título. Luego el nombre, precio y detalles. Al final, el botón de acción y la imagen. Con este orden, el lector de pantalla anuncia el contenido con una estructura lógica parecida a la siguiente: _«Titulo -> Descripción -> Descuento -> Precio antes de descuento -> Precio después del descuento -> Valoración -> Añadir a la cesta -> Imagen»_. Esto es un orden propuesto que podría encajar, pero es algo subjetivo que podría tener ligeras modificaciones como en qué lugar se debería de anunciar la imagen o la valoración.
- **El segundo problema es que existen elementos visuales que necesitan más contexto.** El «-20%» no es un adorno y necesita más contexto adicional para que se comprenda de manera adecuada. También pasa con las estrellas de valoración (★★★★☆) se deben de complementar con contenido textual adicionalmente para que se anuncien con sentido.
Una estructura HTML muy simplificada y que tendría más sentido podría ser algo parecido a lo siguiente:
```html focus-visible:focus-style
Zapatillas Ultra Boost
Zapatillas de running con tecnología...
Descuento del
-20%
Precio original:
149.99€
Precio con descuento:
119.99€
Valoración de 4.2 sobre 5 estrellas★★★★☆ (4.2)
```
Ahora el orden de los elementos tiene mucho más sentido. También hacemos uso de la clase `sr-only` que tiene como objetivo que solo los lectores de pantalla puedan anunciar su contenido sin necesidad de que fuera de manera visual. La declaración CSS de esta clase sería algo parecido a lo siguiente:
```html focus-visible:focus-style
```
Y por último, hacemos uso del atributo `aria-hidden` que oculta el contenido de la etiqueta a los lectores de pantalla. Así evitamos que el lector de pantalla anuncie _<>._
Con esta solución aplicada el lector de pantalla lo anunciaría en el siguiente orden:
_«E_ _ncabezamiento de nivel 2, Zapatillas Ultra Boost._ _Zapatillas de running con tecnología.... Descuento del_ _-20%. Precio original: 149.99 €. Precio con descuento: 119.99€. Valoración de 4.2 sobre 5 estrellas. Añadir a la cesta, botón. Vista frontal de las Zapatillas Ultra Boost de color azul marino, imagen»_
Mucho mejor ahora, ¿no?.
## Conclusión
A lo largo de este artículo, hemos explorado la crucial diferencia entre el orden visual y el orden de lectura en el diseño web, centrándonos en el criterio 1.3.2 de las WCAG. Hemos visto cómo este principio aparentemente simple puede tener un impacto profundo en la accesibilidad de nuestros productos digitales.
Si bien es cierto que no hemos profundizado en cuestiones más avanzadas (como conseguir posicionar los elementos visualmente en el orden correcto independientemente del orden que definamos en el HTML), es cierto que el objetivo era la compresión de la importancia de la secuencia y como puede afectar a la contextualización que realizamos.
Llévate estos 3 puntos que considero los más importantes:
- El orden visual no siempre coincide con el orden de lectura, y es este último el que determina la experiencia de los usuarios de tecnologías de asistencia.
- El criterio 1.3.2 de las WCAG nos exige que el orden del contenido en el código HTML siga una secuencia lógica y significativa, independientemente de cómo se presente visualmente.
- Incluso en diseños complejos, como las tarjetas, es importante mantener una estructura de código que priorice la comprensión y la navegación lógica. Solo tenemos que pensar cúal es el orden más lógico por el que se debería de empezar a leer.
## Escrito por:
- 
### CarlosGarrido Marín
Fundador de weAAAre y experto en accesibilidad digital aplicada a tecnologías web [Visita su perfil de LinkedIn(abre nueva pestaña)](https://www.linkedin.com/in/cgm164/)
## Únete a nuestra comunidad para aprender y estar al día sobre accesibilidad digital.
Recibirás recursos y artículos semanalmente para que puedas aprender, compartir y ser parte de la comunidad de accesibilidad digital.
He leído y acepto la [política de privacidad](https://weaaare.com/legal/privacy)
¡Me apunto!
¿Quieres colaborar en nuestra Newsletter? Escríbenos a [hola@weaaare.com](mailto:hola@weaaare.com)
## VoiceOver and TalkBack Course
[Saltar al contenido principal](https://weaaare.com/courses/curso-lectores-de-pantalla-voiceover-y-talkback-1x6YdiChxblniosCN1lIDk#main)
1. [Inicio](https://weaaare.com/)
2. [Cursos](https://weaaare.com/courses)
3. Lectores de pantalla VoiceOver y Talkback
# Lectores de pantalla VoiceOver y Talkback
- TemáticasDiseño UX/UI, Desarrollo, QA
- ProfesoradoDavid Fernández
- Contenido21 lecciones - 1.5horas
- NivelPrincipiante
- Publicado17 / 03 / 25.lunes, 17 de marzo de 2025
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
## Sobre el curso
Este curso te guía a través del funcionamiento de VoiceOver (iOS) y TalkBack (Android), enseñándote desde la activación básica hasta gestos avanzados y navegación con teclado Bluetooth. Aprenderás a navegar mediante gestos y comandos de teclado, utilizar el rotor para navegar rápidamente, y aplicar técnicas prácticas para auditar la accesibilidad en productos digitales. Este curso es ideal para desarrolladores, diseñadores y profesionales que buscan garantizar que sus productos digitales sean verdaderamente inclusivos para personas con discapacidad visual.
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
- CertificadoConseguirás un certificado acreditando tus conocimientos al completar el curso.
- Teórico y prácticoAplicarás la teoría aprendida en casos prácticos.
- A tu ritmoAsíncrono para que avances a tu ritmo, pero te ayudaremos cuando lo necesites.
- Asistencia de los profesoresLos profesores resolverán todas tus dudas y corregirán tus ejercicios.
- Actualizado para siempreIremos actualizando el curso para que siempre estés al a última.
- Profesorado topProfesores con experiencia que te ayudarán a aplicar los aprendizajes.
### Certificado
Conseguirás un certificado acreditando tus conocimientos al completar el curso.
### Teórico y práctico
Aplicarás la teoría aprendida en casos prácticos.
### A tu ritmo
Asíncrono para que avances a tu ritmo, pero te ayudaremos cuando lo necesites.
### Asistencia de los profesores
Los profesores resolverán todas tus dudas y corregirán tus ejercicios.
### Actualizado para siempre
Iremos actualizando el curso para que siempre estés al a última.
### Profesorado top
Profesores con experiencia que te ayudarán a aplicar los aprendizajes.
## Temario del curso
### 1. Presentación
- 1.1BienvenidaTiempo estimado1 min
- 1.2ObjetivosTiempo estimado1 min
- 1.3Presentación de contenidosTiempo estimado1 min
- 1.4Quién soyTiempo estimado1 min
### 2. Comprendiendo qué son lectores de pantalla
- 2.1¿Qué son los lectores de pantalla?Tiempo estimado9 min
- 2.2Beneficios de los lectores de pantallaTiempo estimado4 min
### 3. VoiceOver: Lector de pantalla para iOS
- 3.1Activación y configuración de VoiceOverTiempo estimado5 min
- 3.2Gestos básicos de VoiceOverTiempo estimado3 min
- 3.3Gestos avanzados y uso del rotor de VoiceOverTiempo estimado9 min
- 3.4Consejos y trucos para VoiceOverTiempo estimado3 min
- 3.5Ejercicio práctico con VoiceOverTiempo estimado5 min
### 4. Talkback: Lector de pantalla para Android
- 4.1Activación y configuración de TalkbackTiempo estimado5 min
- 4.2Gestos básicos de TalkbackTiempo estimado3 min
- 4.3Gestos avanzados y uso del rotor de TalkbackTiempo estimado4 min
- 4.4Consejos y trucos para TalkbackTiempo estimado2 min
- 4.5Ejercicio práctico con TalkbackTiempo estimado5 min
### 5. Teclado Bluetooth para móviles
- 5.1Primeros pasos con Teclado BluetoothTiempo estimado5 min
- 5.2Navegando con teclado Bluetooth en AndroidTiempo estimado10 min
- 5.3Navegando con teclado Bluetooth en iOSTiempo estimado7 min
- 5.4Reflexión y conclusiónTiempo estimado3 min
- 5.5Examen final del cursoTiempo estimado
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
## Profesorado
- 
### DavidFernández
Auditor Rocket de Accesibilidad. DHS Trusted Tester Certificate.
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
## Accessibility Testing Course
[Saltar al contenido principal](https://weaaare.com/courses/curso-pruebas-de-accesibilidad-con-lector-de-pantalla-nvda-2sBdzsGYPGxZXsHzkYWoEv#main)
1. [Inicio](https://weaaare.com/)
2. [Cursos](https://weaaare.com/courses)
3. Pruebas de accesibilidad con lector de pantalla NVDA
# Pruebas de accesibilidad con lector de pantalla NVDA
- TemáticasDesarrollo, QA
- ProfesoradoJosias Vásquez
- Contenido25 lecciones - 3.5horas
- NivelPrincipiante
- Publicado10 / 04 / 25.jueves, 10 de abril de 2025
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
## Sobre el curso
Este curso te guía a través del uso del lector de pantalla NVDA para realizar pruebas de accesibilidad en sitios web y aplicaciones. Comenzarás comprendiendo qué son los lectores de pantalla, su historia y la importancia de NVDA como herramienta de código abierto. Aprenderás paso a paso la instalación, configuración y personalización del software según tus necesidades. El curso profundiza en los cinco modos de navegación: básica con teclas de cursor y Tab, navegación por objetos, revisión de pantalla, modo exploración/foco, y navegación con letras y listados de elementos. Dominarás técnicas para identificar errores comunes como formularios sin etiquetas, tablas mal estructuradas, contenido dinámico inaccesible, y problemas con mayúsculas sostenidas
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
- CertificadoConseguirás un certificado acreditando tus conocimientos al completar el curso.
- Teórico y prácticoAplicarás la teoría aprendida en casos prácticos.
- A tu ritmoAsíncrono para que avances a tu ritmo, pero te ayudaremos cuando lo necesites.
- Asistencia de los profesoresLos profesores resolverán todas tus dudas y corregirán tus ejercicios.
- Actualizado para siempreIremos actualizando el curso para que siempre estés al a última.
- Profesorado topProfesores con experiencia que te ayudarán a aplicar los aprendizajes.
### Certificado
Conseguirás un certificado acreditando tus conocimientos al completar el curso.
### Teórico y práctico
Aplicarás la teoría aprendida en casos prácticos.
### A tu ritmo
Asíncrono para que avances a tu ritmo, pero te ayudaremos cuando lo necesites.
### Asistencia de los profesores
Los profesores resolverán todas tus dudas y corregirán tus ejercicios.
### Actualizado para siempre
Iremos actualizando el curso para que siempre estés al a última.
### Profesorado top
Profesores con experiencia que te ayudarán a aplicar los aprendizajes.
## Temario del curso
### 1. Presentación
- 1.1BienvenidaTiempo estimado2 min
- 1.2Objetivos y contenidosTiempo estimado4 min
- 1.3Quién soyTiempo estimado2 min
### 2. Comprendiendo qué son lectores de pantalla
- 2.1Lectores de pantalla existentesTiempo estimado5 min
- 2.2Lectores de pantalla existentesTiempo estimado5 min
- 2.3Historia de NVDATiempo estimado4 min
### 3. Instalación y configuración de NVDA
- 3.1Descarga de NVDATiempo estimado8 min
- 3.2Instalación de NVDATiempo estimado7 min
- 3.3Configuraciones de voz del lector de pantallaTiempo estimado13 min
- 3.4Configuraciones del modo exploración y formateado de documentos e NVDATiempo estimado11 min
- 3.5Configuraciones y otras funciones de NVDATiempo estimado10 min
- 3.6Examen de los módulos 2 y 3Tiempo estimado
### 4. Modos de navegación de NVDA
- 4.1Navegación básica con NVDA usando solo teclas de cursor Tab y ShiftTiempo estimado18 min
- 4.2Modo de navegación por objetos de NVDATiempo estimado5 min
- 4.3Modo de revisión de pantalla de NVDATiempo estimado7 min
- 4.4Modo exploración, modo foco y diseño de pantalla en NVDATiempo estimado9 min
- 4.5Navegación usando las letras, números y listados de elementos en NVDATiempo estimado11 min
### 5. Errores frecuentes al desarrollar sitios web y aplicaciones
- 5.1Revisando Wikipedia para identificar posibles erroresTiempo estimado8 min
- 5.2Error al usar mayúscula sostenida y tablas para maquetarTiempo estimado9 min
- 5.3Errores comunes al presentar tablas en sitios webTiempo estimado13 min
- 5.4Errores comunes en formularios y regiones con contenido dinámicoTiempo estimado9 min
### 6. Poniendo a prueba tus conocimientos sobre NVDA
- 6.1Exploración del sitio web: XatakaTiempo estimado12 min
- 6.2Exploración del sitio web: TemuTiempo estimado10 min
- 6.3Exploración del sitio web: El PaísTiempo estimado13 min
- 6.4Examen finalTiempo estimado
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
## Profesorado
- 
### JosiasVásquez
Especialista en accesibilidad digital y tecnologías asistivas.
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
## Inclusive Interview Course
[Saltar al contenido principal](https://weaaare.com/courses/curso-entrevistas-inclusivas-y-accesibles-70o8tJ8E86iX76dnMDpXf1#main)
1. [Inicio](https://weaaare.com/)
2. [Cursos](https://weaaare.com/courses)
3. Entrevistas inclusivas y accesibles
# Entrevistas inclusivas y accesibles
- TemáticasDiseño UX/UI, Producto
- ProfesoradoConsuelo Correa
- Contenido42 lecciones - 2horas
- NivelIntermedio
- Publicado09 / 12 / 24.lunes, 9 de diciembre de 2024
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
[iframe](https://player.vimeo.com/video/1037232772?title=true&byline=true&color=00ADEF&portrait=true&controls=false&h=config&keyboard=false&transparent=true&playsinline=true&dnt=true)
AirPlay
Google Cast
Activar transcripción
Desactivar subtítulos
Ajustes
Silenciar
0%
Reproducir
0:00
/
1:11
Entrevistas inclusivas y accesibles
Pantalla completa
0:00
1:11
## Sobre el curso
Descubre cómo transformar tu investigación digital a través de nuestro curso especializado en entrevistas inclusivas y accesibles. Aprende a diseñar, conducir y analizar entrevistas que capturen genuinamente las perspectivas diversas de todas las personas usuarias, incluyendo aquellas con discapacidad. Desarrolla las habilidades necesarias para crear experiencias digitales verdaderamente inclusivas, donde la accesibilidad no sea un agregado, sino el fundamento de tu metodología de investigación.
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
- CertificadoConseguirás un certificado acreditando tus conocimientos al completar el curso.
- Teórico y prácticoAplicarás la teoría aprendida en casos prácticos.
- A tu ritmoAsíncrono para que avances a tu ritmo, pero te ayudaremos cuando lo necesites.
- Asistencia de los profesoresLos profesores resolverán todas tus dudas y corregirán tus ejercicios.
- Actualizado para siempreIremos actualizando el curso para que siempre estés al a última.
- Profesorado topProfesores con experiencia que te ayudarán a aplicar los aprendizajes.
### Certificado
Conseguirás un certificado acreditando tus conocimientos al completar el curso.
### Teórico y práctico
Aplicarás la teoría aprendida en casos prácticos.
### A tu ritmo
Asíncrono para que avances a tu ritmo, pero te ayudaremos cuando lo necesites.
### Asistencia de los profesores
Los profesores resolverán todas tus dudas y corregirán tus ejercicios.
### Actualizado para siempre
Iremos actualizando el curso para que siempre estés al a última.
### Profesorado top
Profesores con experiencia que te ayudarán a aplicar los aprendizajes.
## Temario del curso
### 1. Presentación
- 1.1PresentaciónTiempo estimado2 min
- 1.2A quien está dirigidoTiempo estimado1 min
- 1.3ObjetivosTiempo estimado1 min
- 1.4Presentación de contenidosTiempo estimado2 min
- 1.5Quien soyTiempo estimado1 min
### 2. Metodología
- 2.1MetodologíaTiempo estimado4 min
- 2.2Investigación centrada en las personas usuariasTiempo estimado3 min
- 2.3Diversidad de personas usuariasTiempo estimado2 min
- 2.4Métodos adaptativosTiempo estimado1 min
- 2.5Identificación de barrerasTiempo estimado2 min
### 3. Planificación de la investigación
- 3.1Planificación de la investigaciónTiempo estimado3 min
- 3.2Formulación de hipótesisTiempo estimado2 min
- 3.3Selección del equipo encargadoTiempo estimado5 min
- 3.4Identificación de tipo de investigación e instrumentosTiempo estimado3 min
- 3.5Definición del entorno de investigaciónTiempo estimado6 min
- 3.6Cronograma para entrevistas inclusivasTiempo estimado3 min
- 3.7Examen módulo 2 y 3Tiempo estimado
### 4. Preparación del material
- 4.1Preparación del materialTiempo estimado5 min
- 4.2Consentimiento informadoTiempo estimado3 min
- 4.3Pautas de entrevistasTiempo estimado8 min
- 4.4IncentivosTiempo estimado2 min
- 4.5Testear y ajustar los instrumentosTiempo estimado2 min
### 5. Reclutación para la participación inclusiva
- 5.1Reclutación para la participación inclusivaTiempo estimado3 min
- 5.2Screneer de reclutamientoTiempo estimado4 min
- 5.3Dónde encontrar participantesTiempo estimado2 min
- 5.4Selección de participantesTiempo estimado5 min
- 5.5Limitaciones de las investigacionesTiempo estimado1 min
- 5.6Examen módulo 4 y 5Tiempo estimado
### 6. Entrevistas
- 6.1EntrevistasTiempo estimado2 min
- 6.2Estructura de una entrevistaTiempo estimado2 min
- 6.3Dar la bienvenidaTiempo estimado4 min
- 6.4Configurar el espacioTiempo estimado4 min
- 6.5Durante la entrevistaTiempo estimado4 min
- 6.6Después de la entrevistaTiempo estimado2 min
### 7. Análisis de resultados
- 7.1Análisis de resultadosTiempo estimado7 min
- 7.2Protección de datosTiempo estimado3 min
- 7.3Examen módulos 6 y 7Tiempo estimado
### 8. Presentación de resultados
- 8.1Presentación de resultadosTiempo estimado3 min
- 8.2DesafíosTiempo estimado4 min
- 8.3Síntesis de resultadosTiempo estimado2 min
- 8.4Análisis de personas usuariasTiempo estimado7 min
- 8.5Examen final Tiempo estimado
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
## Profesorado
- 
### ConsueloCorrea
Consuelo es cofundadora de Globallys, Startup pionera en accesibilidad digital. Organizadora del Congreso CLAU y fundadora de la corporación Cuídame. Docente en el Diplomado de Diseño Accesible para Plataformas Digitales en la Universidad del Desarrollo.
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
[iframe](https://www.google.com/recaptcha/api2/anchor?ar=1&k=6Lfa-0oqAAAAAC5yKtQR6-zhJxzDE8DjBsH6UG2A&co=aHR0cHM6Ly93ZWFhYXJlLmNvbTo0NDM.&hl=en&v=hbAq-YhJxOnlU-7cpgBoAJHb&size=invisible&cb=aa4r6li93w9c)
## Semantic HTML Importance
[Saltar al contenido principal](https://weaaare.com/blog/html-semantico-importancia-en-accesibilidad#main)
[Volver a la página del blog](https://weaaare.com/blog)
# HTML Semántico y su importancia en la accesibilidad
Tiempo de lectura: 5 min
AutorCarlos Garrido MarínFecha de publicación28 de marzo de 2025
Si alguna vez te has preguntado por qué algunos desarrolladores insisten tanto en usar etiquetas HTML específicas cuando aparentemente todas hacen lo mismo visualmente, ¡has llegado al lugar correcto!
En este artículo vamos a hablar sobre HTML semántico y accesibilidad, dos conceptos que, aunque suenan técnicos, en este artículo los abordaremos de una sencilla para que lo puedas comprender.
## Árbol de accesibilidad
Cuando un navegador renderiza una web, crea dos estructuras principales: el DOM (Document Object Model) que los desarrolladores conocemos, y el árbol de accesibilidad.
El árbol de accesibilidad es una versión simplificada del DOM que contiene información sobre el rol, nombre, estado y otras propiedades de cada elemento. Sirve para determinar cómo las tecnologías de asistencia (como lectores de pantalla) interpretan el contenido de una web.
Veamos cómo funciona esto de manera sencilla. Imaginemos que tenemos el siguiente elemento:
Añadir a la cesta
El DOM cuando se renderiza el botón, es el siguiente:
```html focus-visible:focus-style hljs language-xml
```
Y el árbol de accesibilidad (AOM) generado es el siguiente:
Como puedes observar, el árbol de accesibilidad proporciona tres elementos clave: rol, nombre y estado. En este caso, el rol "button", el nombre "Añadir a la cesta" y estado por defecto.
Esta información es la que utilizan las tecnologías de asistencia para interpretar el contenido de una página web. Una tecnología de asistencia como un lector de pantalla (en este caso VoiceOver), interpreta este contenido de la siguiente manera:
## HTML semántico y su importancia
Para entender por qué el HTML semántico importa tanto, veamos cómo afecta al árbol de accesibilidad con un ejemplo sencillo:
```html focus-visible:focus-style hljs language-xml
Mi Blog Personal
Inicio
Artículos
Mi primer artículo
Este es el contenido de mi artículo...
```
El elemento [HTML(abre nueva pestaña)](https://developer.mozilla.org/es/docs/Web/HTML) `
` es un tipo de elemento genérico para el contenido. No tiene efecto semántico ni visual. Normalmente, en la construcción de sitios web modernos se abusa de él, ya que es una etiqueta muy cómoda para aplicar con CSS.
A esto se le conoce como [_div soup_(abre nueva pestaña)](https://www.reddit.com/r/css/comments/146c56y/what_is_div_soup/) o [_divitis_(abre nueva pestaña)](https://en.wiktionary.org/wiki/divitis).Antes de ver de analizar la importancia del HTML semántico en este contenido, veamos cómo podría verse a nivel visual este contenido.
Mi Blog Personal
Inicio
Artículos
Mi primer artículo
Este es el contenido de mi artículo...
A simple vista, parece que no hay ningún problema, todo parece estar bien. Ahora vemos el árbol de accesibilidad generado:
¿Ves el problema? Todo se marca como "StaticText", es decir, aunque visualmente "Mi Blog Personal" es un título, el árbol de accesibilidad no entiende que es un título porque en HTML no lo hemos indicado de ninguna manera.
Ahora vamos a ver como este código lo interpreta una tecnología de asistencia como un lector de pantalla:
\[Blog\] - HTML Semántico y su importancia - 1 from Carlos Garrido Marín on Vimeo
Playing in picture-in-picture
Play
00:00
00:07
CC/Subtitles
Off
Español (autogenerados)
Customize
TranscriptSettings
QualityAuto
SpeedNormal
Fullscreen
;
Cómo has podido escuchar, solo menciona el texto sin ninguna contextualización más. Ahora imagina que una persona ciega usa el lector de pantalla y se encuentra con esto, ¿cómo reconoce que "Inicio" y "Artículos" son enlaces? ¿cómo reconoce que "Mi blog personal" es un encabezado? lo tendría complicado, ¿no?.
Pero, ¿cuál es la solución a este problema? el HTML semántico. Como hemos visto antes en el ejemplo del "botón", hay que darle al árbol de accesibilidad la suficiente información como para que la tecnología de asistencia pueda interpretar el contenido de la mejor manera posible.
Vamos a ver qué pasa cuando etiquetamos el código anterior con etiquetas de HTML que sí proporcionan semántica:
```html focus-visible:focus-style hljs language-xml
Mi Blog Personal
Mi primer artículo
Este es el contenido de mi artículo...
```
Lo primero que estarás preguntando al ver este código es, ¿cómo sabemos qué etiquetas semánticas existen y para qué?, bueno, aquí no hay otra ciencia que ir aprendiéndolas, pero te dejo un [Cheatseet de etiquetas HTML semánticas y su propósito(abre nueva pestaña)](https://learntheweb.courses/topics/html-semantics-cheat-sheet/) que seguro que te será de gran ayuda.
En este código hemos hecho uso de:
- **header** para indicar que el contenido es un banner.
- **h1** para indicar que es un título.
- **nav** para indicar que es un bloque de navegación.
- **a** para indicar que los elementos son enlaces.
- **main** para indicar que es el contenido principal de la página.
- **article** para indicar que ese contenido es parte de un artículo.
- **h2** para indicar que es un subtítulo.
- **p** para indicar que es un párrafo.
El código corregido con las etiquetas semánticas de HTML correctas genera el siguiente árbol de accesibilidad:
Ahora veamos cómo interpreta este árbol un lector de pantalla:
\[Blog\] - HTML Semántico y su importancia - 2 from Carlos Garrido Marín on Vimeo
Playing in picture-in-picture
Play
00:00
00:21
CC/Subtitles
Off
Español (autogenerados)
Customize
TranscriptSettings
QualityAuto
SpeedNormal
Fullscreen
;
¿Ves la diferencia? hemos conseguido que haciendo un código HTML semántico el lector de pantalla sea capaz de interpretar en contenido de manera mucho más clara y comprensible; ahora los enlaces se pronuncia bien, junto a los encabezamientos, las secciones y el resto de elementos.
## HTML semántico y la interacción por teclado
Otra de las características que nos da HTML semántico es la navegación e interacción por teclado de manera implícita.
Por ejemplo, un enlace creado con `
:`
Inicio
Con un código cómo el siguiente:
```html focus-visible:focus-style hljs language-xml
Inicio
```
No será alcanzable por [navegación con teclado(abre nueva pestaña)](https://webaim.org/techniques/keyboard/), lo cual es fundamental para la accesibilidad. Lo puedes comprobar tú mismo navegando con las teclas **Tab** para avanzar hacia el siguiente elemento interativo de la página y con **Shift + Tab** para volver al anterior elemento interactivo. Verás que nunca llegarás alcanzar el enlace que acabamos de crear "Inicio".
En cambio, si este mismo elemento lo hacemos con su equivalente semántico, es decir, con < **a>,** el elemento si será alcanzable por teclado y, por lo tanto, aquellos usuarios que usen sólo navegación por teclado podrán interactuar con él.
Prueba tú mismo a alcanzar ahora el enlace en esta versión donde hacemos uso de la etiqueta < **a>:**
[Inicio](https://weaaare.com/blog/html-semantico-importancia-en-accesibilidad#)
Además, otro aspecto importante del teclado es la interacción de los elementos solo con teclado. En el caso del enlace, si pulsamos **Enter** cuando tenemos el [elemento enfocado(abre nueva pestaña)](https://web.dev/learn/html/focus?hl=es-419), este se debería navegar a la URL del enlace al igual que si le hiciéramos clic con el ratón. Si pulsamos **Ctrl + Enter**, debería navegar a la URL del enlace en una nueva pestaña, etc.
Todas estás interacciones con teclado pueden suponer cierta complejidad hacerlas con Javascript, no obstante, las etiquetas semánticas te las dan a coste cero, es decir, de manera implícita.
## Conclusión
HTMl semántico además de lo visto anteriormente da otro tipo de beneficios. **¿Quieres descubrir todo lo que nos da HTML semántico y aprender desde cero?** Hoy, viernes 28 de marzo de 2025, vamos a hacer un [taller especial de HTML Semántico para diseñadores(abre nueva pestaña)](https://weaaare.com/workshops#workshops), donde descubrirás todos los secretos de HTML semántico y cómo usarlo de manera correcta.
## Escrito por:
- 
### CarlosGarrido Marín
Fundador de weAAAre y experto en accesibilidad digital aplicada a tecnologías web [Visita su perfil de LinkedIn(abre nueva pestaña)](https://www.linkedin.com/in/cgm164/)
## Únete a nuestra comunidad para aprender y estar al día sobre accesibilidad digital.
Recibirás recursos y artículos semanalmente para que puedas aprender, compartir y ser parte de la comunidad de accesibilidad digital.
He leído y acepto la [política de privacidad](https://weaaare.com/legal/privacy)
¡Me apunto!
¿Quieres colaborar en nuestra Newsletter? Escríbenos a [hola@weaaare.com](mailto:hola@weaaare.com)
## Accessible Design Course
[Saltar al contenido principal](https://weaaare.com/courses/curso-diseno-accesible:-botones-y-enlaces-4FLQT9MeJHKyeLDEu2NJNP#main)
1. [Inicio](https://weaaare.com/)
2. [Cursos](https://weaaare.com/courses)
3. Diseño accesible: botones y enlaces
# Diseño accesible: botones y enlaces
- TemáticasDiseño UX/UI
- ProfesoradoConsuelo Correa
- Contenido18 lecciones - 1hora
- NivelPrincipiante
- Publicado29 / 01 / 25.miércoles, 29 de enero de 2025
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
## Sobre el curso
Este curso introductorio te guiará en el diseño y desarrollo de botones y enlaces accesibles, elementos fundamentales en cualquier interfaz digital. Aprenderás a diferenciar entre botones y enlaces, cuándo usar cada uno y cómo garantizar que cumplan con los estándares de accesibilidad establecidos en las WCAG 2.2. Además, explorarás cómo identificar y corregir brechas en tus diseños para asegurar que todas las personas, independientemente de sus capacidades, puedan navegar y utilizar tus productos digitales de manera efectiva.
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
- CertificadoConseguirás un certificado acreditando tus conocimientos al completar el curso.
- Teórico y prácticoAplicarás la teoría aprendida en casos prácticos.
- A tu ritmoAsíncrono para que avances a tu ritmo, pero te ayudaremos cuando lo necesites.
- Asistencia de los profesoresLos profesores resolverán todas tus dudas y corregirán tus ejercicios.
- Actualizado para siempreIremos actualizando el curso para que siempre estés al a última.
- Profesorado topProfesores con experiencia que te ayudarán a aplicar los aprendizajes.
### Certificado
Conseguirás un certificado acreditando tus conocimientos al completar el curso.
### Teórico y práctico
Aplicarás la teoría aprendida en casos prácticos.
### A tu ritmo
Asíncrono para que avances a tu ritmo, pero te ayudaremos cuando lo necesites.
### Asistencia de los profesores
Los profesores resolverán todas tus dudas y corregirán tus ejercicios.
### Actualizado para siempre
Iremos actualizando el curso para que siempre estés al a última.
### Profesorado top
Profesores con experiencia que te ayudarán a aplicar los aprendizajes.
## Temario del curso
### 1. Presentación
- 1.1BienvenidaTiempo estimado1 min
- 1.2A quién está dirigidoTiempo estimado1 min
- 1.3ObjetivosTiempo estimado2 min
- 1.4Presentación contenidosTiempo estimado1 min
- 1.5Quién soyTiempo estimado1 min
### 2. Diferencias entre botones y enlaces
- 2.1Diferencias de usoTiempo estimado2 min
- 2.2¿Qué es un botón?Tiempo estimado1 min
- 2.3¿Qué es un enlace?Tiempo estimado1 min
- 2.4Botones y enlaces en menúTiempo estimado1 min
### 3. Botones accesibles
- 3.1Características de los botones según los 4 principios de accesibilidadTiempo estimado5 min
- 3.2Tamaño de los botonesTiempo estimado2 min
- 3.3Tipos de botonesTiempo estimado3 min
- 3.4Jerarquía visualTiempo estimado2 min
- 3.5Uso de etiquetasTiempo estimado3 min
- 3.6Estado de los botonesTiempo estimado3 min
### 4. Enlaces accesibles
- 4.1Características de los enlaces según los 4 principios de accesibilidadTiempo estimado6 min
- 4.2Estados de los enlacesTiempo estimado2 min
- 4.3Examen finalTiempo estimado
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
## Profesorado
- 
### ConsueloCorrea
Consuelo es cofundadora de Globallys, Startup pionera en accesibilidad digital. Organizadora del Congreso CLAU y fundadora de la corporación Cuídame. Docente en el Diplomado de Diseño Accesible para Plataformas Digitales en la Universidad del Desarrollo.
[Comienza tu aprendizaje](https://weaaare.com/auth/register)
