Dominar las bases de la accesibilidad

1

¿Listo para hacer la web un mejor lugar para todos sus usuarios?

2

Conociendo la importancia de la accesibilidad web

3

Aprendiendo sobre WCAG y sus criterios de conformidad

4

Profundizando los 12 criterios de conformidad

5

Los 4 principios de WCAG

6

Tecnología Asistivas - cuáles son y cómo funcionan

Presentar el proyecto

7

Instalación del proyecto y primeros pasos

Evaluar la accessibilidad de sitios web

8

Pruebas automáticas con Lighthouse

9

Pruebas con simuladores de discapacidades visuales

10

Pruebas manuales con tu teclado

11

Pruebas manuales con lectores de pantalla

12

Pruebas manuales con VoiceOver

Refactorizar HTML para ser mas accessible

13

Usando HTML semántico en el header de nuestro sitio

14

¿Qué es el HTML semántico y por qué es importante?

15

Usando HTML semántico en el contenido principal de nuestro sitio

16

Usando HTML semántico en footer de nuestro sitio

17

ARIA - Accessible Rich Internet Applications

18

ARIA roles

19

ARIA properties

20

ARIA states

21

Overview del proyecto con los retos resueltos

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Contrastes de color

23

Iconos

24

Skip Links

25

Estilos de foco y hover

26

Overview retos resueltos con CSS

Extender la accesibilidad usando JavaScript

27

Manejando el foco del teclado - botones

28

Manejando el foco del teclado - el carousel

29

Coordinando el foco del teclado con el foco de lectores de pantallas

30

Manejando modales

31

Mejorando la accesibilidad con teclado de nuestro modal

32

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

33

Validando formularios

34

Manejando cambios dinámicos

Conclusión

35

Siguientes pasos

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

¿Qué es el HTML semántico y por qué es importante?

14/35
Recursos

El HTML semántico es un concepto para estructurar y escribir código HTML, de manera que el significado del contenido de una página web sea más claro a través de sus etiquetas.

Cómo funciona el HTML semántico

Las etiquetas semánticas pueden utilizarse en lugar de las etiquetas de presentación estándar y esto ayuda a mejorar la legibilidad y la usabilidad, al tiempo que reduce la necesidad de datos estructurados. Esta nueva forma de concebir la programación permite crear sitios web más accesibles y más significativos para los motores de búsqueda. El marcado semántico también es beneficioso porque permite hacer hojas de estilo CSS separadas para cada sección de su sitio web.

Ejemplos de HTML semántico

En el siguiente ejemplo, vamos a ver cómo se muestra un código HTML no semántico Vs. uno semántico. A los ojos del usuario, la información presentada en el navegador va a ser la misma, pero para legibilidad del código y SEO, la diferencia es muy marcada:

Código sin HTML semántico

<div></div>
	<div><div></div></div>
<div></div>

Código con HTML semántico

<header></header>
	<article><img /></article>
<footer></footer>

¿Cuál es la diferencia entre el HTML semántico dinámico y estático?

Una de las partes más importantes del desarrollo web son los atributos semánticos del HTML. La semántica estática es el significado de una palabra o frase que se mantiene constante independientemente del contexto, mientras que la semántica dinámica cambia en función de su uso.

Semántica estática

La semántica estática se utiliza para definir diferentes tipos de etiquetas en HTML. No dependen de ningún otro dato contextual, sino que permanecen constantes independientemente de su uso. Por ejemplo:

Al definir una etiqueta de párrafo, el navegador sabe que es un párrafo, independientemente de si se utiliza para poesía o prosa.

Semántica dinámica

Se utiliza para definir dinámicamente el contenido de un elemento. El significado cambia en función del texto que hay dentro y de las palabras que lo rodean. Por ejemplo, si tiene un elemento que define la ubicación de una empresa como Bogotá, el HTML mostrará “Bogotá” cuando el cursor pase por encima de ese elemento concreto en una página web o cuando se vea ese elemento en Google Maps.

Aportes 23

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

¿Qué es el HTML semántico y por qué es importante?
El HTML semántico nos ayuda con algunos aspectos de presentación y le agrega significado a nuestro contenido en el navegador.

![](

En pocas palabras el Html semántico es saber usar las etiquetas Html y no solo usar <div> para todo.

Utilizar código semántico ofrece varias ventajas:
Posicionamiento en buscadores. …
Accesibilidad. …
Practicidad. …
Reusabilidad.

HTML Semántico = manejo adecuado de las etiquetas HTML

  • El HTML semántico es una de las herramientas más poderosas a la mano a la hora de implementar la accesibilidad web
<h3>Qué es</h3>
  • No solo nos ayuda con algunos aspectos de presentación pero le agrega significado a nuestro contenido. Es decir agregarle significado al navegador

Sin HTML semántico

<div></div>
	<div></div><div></div>
<div></div>
  • Se puede crear una estructura visual buena con CSS pero realmente difícilmente los navegadores entenderán la semántica del sitio web construido

Con HTML semántico

<header></header>
	<article></article>
<footer></footer>
  • Usamos una variedad de elementos con significado que el navegador lee e implementa la presentación y alguna interacción.
  • El navegador incluye esto en el árbol de accesibilidad, este lo usan los lectores de pantalla

Se acabo lo de div para todo.

La semántica es poderosa para la accessibilidad web. Le da significado a nuestro contenido, el nevagador sabrá qué elementos son. El árbol de accessibilidad le sacará mucho provecho.

Sin semántica 💢

<div></div>
  <div><div></div></div>
<div></div>

Con semántica ✅

<header></header>
  <article><img /></article>
<footer></footer>

Todas las etiquetas de HTML tiene un porque y un para que. La accesibilidad depende de como usas las etiquetas

  • Posicionamiento en buscadores. Los motores de búsqueda analizan el código para saber qué clase de contenido muestran (y así, saber cómo mostrarlo). La semántica del código todavía puede ser un factor secundario, pero indudablemente es cada vez más importante.
  • Accesibilidad. Los lectores de pantalla para usuarios ciegos organizan la lectura del contenido de acuerdo con la estructura del código.
  • Practicidad. El código semántico es más fácil de entender y mantener.
  • Reusabilidad. La separación del contenido de la presentación permite que una página sea rediseñada cambiando sólo el CSS.
<h4>Ideas/conceptos claves</h4>

HTML Semántico es el uso de las etiquetas HTML para reforzar la semántica, o el significado, de la información en las páginas web más que simplemente redefinir su forma de presentación (apariencia)

<h4>Apuntes</h4>

HTML Semántico

  • No solo nos ayuda con algunos aspectos de presentación, pero le agrega significado a nuestro contenido
    • El navegador sabra de mejor forma que interacciones tiene y algunos aspectos de presentación

Sin HTML semántico

<div></div>
	<div></div><div></div>
<div></div>

  • Se puede crear una estructura visual buena con CSS, pero realmente difícilmente los navegadores entenderán la semántica del sitio web construido

Con HTML semántico

<header></header>
	<article></article>
<footer></footer>
  • Esto ayuda al arbol de accesibilidad, es decir que ayuda a los lectores de pantalla a mapear el sitio y brindar el contenido de una mejor forma a los usuarios

RESUMEN: El HTML semántico es un mejor uso de las etiquetas HTML para tener un contenido más claro y organizado para los usuarios y el nabegador de los mismos

Al principio me preguntaba ¿Por qué hay tantas etiquetas para generar la misma caja en HTML?
Y pues, llegó el HTML Semántico y la accesibilidad a contestarme 😅

Ventajas de HTML semántico:

  1. Código más claro y fácil de mantener.
  2. Ayuda a tu sitio a ser accesible
  3. Mejora tu posicionamiento SEO

Me estresan todos esos <div>

Las buenas practicas son con HTML semántico, porque hasta ahora lo que yo he aprendido desde el principio ha sido incluyendo headers, footers y demás

excelente

Todas las etiquetas de HTML tiene un porque y un para que. La accesibilidad depende de como usas las etiquetas

👌