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

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

14

Usando HTML semántico en el header de nuestro sitio

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?

13/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.

HTML_Semantico.jpg
Fuente: Eliseo Ávila

Ventajas de HTML semántico

HTML, a lo largo de los años, se volvió más semántico. Esto quiere decir que sus etiquetas adquieren un significado propio y una razón de ser, por ello, las etiquetas definen la naturaleza del contenido que debe incluirse dentro de ellas.

Utilizar HTML semántico significa que al escribir el código todo el contenido buscará llevar la etiqueta más adecuada según su tipo. Por ejemplo: si quieres incluir un párrafo de texto, la etiqueta ideal sería

y en caso de necesitar una lista se debería de utilizar la etiqueta

    o
      .

      Si tus sitios son construidos con HTML semántico, esto quiere decir que ayudaremos a los motores de búsqueda a entender qué tipo de contenido estamos creando y esto trae las siguientes ventajas:

      1. Posicionamiento en buscadores

      Los motores de búsqueda analizan el código de los sitios web para determinar cuál es el contenido que muestran y también saber cómo mostrarlo. La semántica dentro del HTML hace que estos motores entiendan mejor el sitio web que estés construyendo.

      2. Accesibilidad

      Los lectores de pantalla para usuarios con debilidad visual organizan la lectura del contenido de acuerdo con la estructura del código. Así que un código con buenas prácticas y semánticas ayuda a que el sitio sea apto para público con diferentes necesidades.

      3. Practicidad

      Cuando se trabaja con código semántico es más fácil de entender y, por lo tanto, de mantener. Tu yo del futuro y también tu equipo de trabajo te lo agradecerán.

      4. Reusabilidad

      Separar el contenido de la presentación permite que una página se pueda rediseñar con cambiar solamente el CSS.

      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.

      Contribución creada con los aportes de: Alex Camacho.

Aportes 29

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

¿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

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 😅

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

tamalito

No debemos usar divs para todo en los sitios web, ya que impiden aspectos de accesibilidad. Es por ello que es tan importante el HTML semántico, ya que así nos valemos de las etiquetas correspondientes para armar los sitios y las vamos nombrando con un nombre adecuado y claro, todo lo cual contribuye a que los lectores de pantalla y teclado puedan leer e interpretar correctamente cada una de las etiquetas.

Utilizar el HTML semantico te ayudara principalmente como dice Juliana a que el navagedor entienda mejor el codigo, pero tambien tus equipos de trabajo, si reciben un proyecto ya empezado sera mas facil de leerlo y entenderlo que un codigo lleno de divs ademas que cuando a ti te toque leer codigo viejo podras ubicarte mejor si tomas el habito de ser cudiadoso con la semantica y con un codigo limpio

El HTML semántico le dice al navegador que aspectos interacción y de presentación tiene nuestro código.

Tengo que admitir, que así aprendí a usar html con puros div 😅

Por fin entendí que es html semántico y sus ventajas

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

👌