HTML Semántico: Mejora la Estructura de tu Página Web

Clase 14 de 35 • Curso de Accesibilidad Web

Contenido del curso

Dominar las bases de la accesibilidad

Presentar el proyecto

7
Creación de un Portafolio Accesible con HTML, CSS y JavaScript
05:27 min

Evaluar la accessibilidad de sitios web

Refactorizar HTML para ser mas accessible

Utilizar CSS para aumentar la acessibilidad de un sitio web

Extender la accesibilidad usando JavaScript

Conclusión

35
Accesibilidad Web: Mejora Continua y Pruebas Prácticas
02:16 min

Tomar examen

Resumen

De acuerdo con la documentación de MDN sobre HTML y CSS sobre el uso de etiquetas HTML semánticas y la accesibilidad, afirma: "Se puede acceder a una gran cantidad de contenido web con solo asegurarse de que los elementos correctos del lenguaje de marcado de hipertexto se utilicen para el propósito correcto en todo momento".

Fuente: Eliseo Ávila

Comentarios

Roberto Carlos Landázuri Estrella

student•

Sabes que es interesante que estemos hablando de accesibilidad y no tenemos tus diálogos en texto para una persona sin audición jaja ... he tomado algunos cursos y el único curso realmente accesible para todas las personas fue el de Diseño centrado en el usuario donde la profe Arantxa Mendoza Bárbara puso sus archivo en formato ppt y toda su explicación la puso en letras en cada presentación super bien !!!

No es crítica pero si sería importante que lo consideren en sus cursos y ojo que no es único curso que no tiene materiales el de UX avanzado tampoco lo tiene.

Manuel Cruz

student•

Es por lo reciente... supongo Hay unos que si los tienen!

Juliana Gomez

teacher•

Muy buena sugerencia, muchas gracias Robert

rebeca Narvaez

student•

Para quienes acceden a este curso mediante la Ruta de Diseño Ux y no tengan nociones básicas de programación, o quienes acceden por cualquier motivo y no tengan estos conocimientos de programación, les recomiendo hacer primero el curso de programación básica :) Creo que si yo no lo hubiese hecho antes, me habría costado muchísimo entender esta info. Y si no me equivoco los primeros módulos son gratis!

Efraín Hernández García

student•

Si, tomar el curso de programación básica ayuda mucho

Felipe Bernardo González Barranco

student•

Muy buena recomendación!!

Karina Bárcena Anguiano

student•

Les comparto este diagrama que te ayuda a definir el texto alternativo correcto para una imagen, espero sea de ayuda: https://www.usableyaccesible.com/textosalternativosaccesibles/mapa_decision_texto_alternativo.php

Dani Villalon

student•

Wow! Muchas gracias Karina. No sabía la existencia de este tipo de diagramas y me ha venido genial. Gracias por compartir!

Jose Ever Muñoz Muñoz

student•

muy util reina

Efraín Hernández García

student•

Un resumen de las etiquetas usadas en esta clase. <header></header> Es la parte superior de nuestra pagina Lo primero que ve el usuario en cuanto orden. <img> Es la etiqueta para poner imágenes, y tiene el atributo alt="El lector de pantalla lee lo que esta aqui " <nav></nav> Es para colocar un menú de navegación <ul></ul> Es para poner una lista que no tiene un orden especifico. <li></li> Un elemento de lista

Sergio Estrella

teacher•

Poco a poco me voy acostumbrando a ponerle alt a todas las imágenes que pongo ;)

Eliseo Ávila

student•

De acuerdo con la documentación de MDN sobre HTML y CSS sobre el uso de etiquetas HTML semánticas y la accesibilidad, afirma: “Se puede acceder a una gran cantidad de contenido web con solo asegurarse de que los elementos correctos del lenguaje de marcado de hipertexto se utilicen para el propósito correcto en todo momento" .

Daniel Andres Rojas Paredes

student•

estaria cool si el reproductor de video de platzi tubviese comandos por teclado para ser controlado , como pasa con el reproductor de Youtube. con un lector de pantalla solo se entra en modo formulario y se oprime k para pausar o dar play. por cierto el boton de dejar el comentario solo esta etiquitado como boton . parece poco pero si no usas tus ojos como sabes a que boton darle clik ?

Misael Valdez

student•

Que satisfactorio es ver Y ENTENDER !!

Erick Daniel Pérez Mata

student•

Codigo de la clase index.html

<header>
      <img src="images/juliana.jpeg" alt="Juliana Gomez" class="header-img" />
      <h1 class="header">Juliana Gomez</h1>
      <h2 class="subtitle">Front End Developer</h2>
      <nav>
        <ul class="navigation">
          <li class="nav-item">
            <a href="#acerca">
              Acerca de
            </a>
          </li>
          <li class="nav-item">
            <a href="#proyectos">
              Mis Proyectos
            </a>
          </li>
          <li class="nav-item">
            <a href="#contacto">
              Contacto
            </a>
          </li>
        </ul>
      </nav>
    </header>

styles.css

body,
header,
section {
  align-items: center;
  background-color: var(--gris-medio);
  display: flex;
  flex-direction: column;
  width: 100%;
}
nav {
  width: 100%;
}
.nav-item a {
  text-decoration: none;
  color: var(--blanco);
}

Felipe Bernardo González Barranco

student•

Well done!!

Daniel Andres Rojas Paredes

student•

hola , me gustaria saber si hay alguna persona que escriba codigo usando nvda en la comunidad, tengo algunas preguntas.

Luis Angel Castillo Vega

student•

La mitad del video erepite lo que dijo en el video pasado. bla bla bla Resumen buscar tiquetas para html semantico 1. Seccionamiento de Raíz y Jerarquía

Definen las partes maestras del documento. Sin ellas, el navegador no sabe dónde empieza o termina una unidad lógica de información.

<header>: Representa un grupo de ayudas introductorias o de navegación. Puede contener títulos, logos o formularios de búsqueda.
<nav>: Sección que contiene enlaces de navegación (menús, tablas de contenido).
<main>: El contenido dominante del <body>. Solo puede haber uno por documento y no debe estar dentro de <article> o <aside>.
<article>: Una composición autónoma que tiene sentido por sí misma (un post, un widget, un comentario).
<section>: Representa una sección genérica de un documento que no tiene una etiqueta más específica. Siempre debería tener un encabezado (h1-h6).
<aside>: Contenido que está relacionado indirectamente con el contenido principal (glosarios, publicidad, barras laterales).
<footer>: El pie de una sección o de la página. Información sobre el autor, datos legales o enlaces relacionados.
<address>: Proporciona información de contacto para el autor o propietario del documento/artículo.

2. Semántica a nivel de Bloque y Flujo

Etiquetas que estructuran cómo se agrupa el contenido textual y visual.

<figure>: Contenido independiente (fotos, diagramas, código) que se referencia desde el flujo principal.
<figcaption>: El título o leyenda de un <figure>.
<blockquote>: Una sección que se cita de otra fuente externa.
<dl>: Lista de descripción (pares de términos y valores).
<dt>: El término a definir en una <dl>.
<dd>: La descripción o definición del término anterior.
<h1> - <h6>: Los seis niveles de encabezados. Establecen la arquitectura de la información (el "esqueleto" del sitio).

3. Semántica de Texto "Inline" (Fraseo)

Estas etiquetas definen el significado de fragmentos específicos de texto dentro de un párrafo o línea.

<time>: Define una fecha (24h) o una duración. Usa el atributo datetime para que sea legible por máquinas.
<strong>: Indica importancia seria o urgencia.
<em>: Indica énfasis (cambia el significado de la frase al leerse).
<mark>: Texto resaltado por su relevancia en un contexto específico (como los resultados de una búsqueda).
<cite>: El título de una obra (libro, película, canción).
<dfn>: Indica el término que se está definiendo en el contexto de una frase.
<code>: Fragmento de código de computadora.
<samp>: Muestra la salida de un programa o sistema.
<kbd>: Indica que el texto es una entrada del teclado del usuario.
<var>: Define una variable en programación o matemáticas.
<data>: Enlaza el contenido con un valor de datos procesable (ej: un ID de base de datos).
<abbr>: Define una abreviatura o acrónimo (usa el atributo title para la versión completa).

4. Semántica de Interactividad y Estado

Etiquetas que describen el estado o la función de un elemento interactivo.

<details>: Crea un widget de revelación donde el usuario puede ver u ocultar información.
<summary>: El encabezado o "rótulo" que siempre es visible en un <details>.
<dialog>: Representa una caja de diálogo, ventana modal u otro componente interactivo similar.
<progress>: Indica el progreso de finalización de una tarea.
<meter>: Representa una medida escalar dentro de un rango conocido (como el uso de batería o espacio en disco).
<output>: El resultado de un cálculo realizado por un script o acción del usuario.

Ejemplo de Semántica Completa aplicado a un Producto

Pensando en tu ProductsListComponent, así se vería un ítem de producto 100% semántico:

HTML

<article class="product-card">
  <header>
    <h3>Smartphone Pro Max</h3>
    <p>Publicado el <time datetime="2025-10-10">10 de Octubre</time></p>
  </header>

  <figure>
    <img src="phone.jpg" alt="Vista frontal del Smartphone Pro Max">
    <figcaption>Modelo 2025 con acabado en titanio.</figcaption>
  </figure>

  <section class="specs">
    <h4>Especificaciones</h4>
    <dl>
      <dt>Procesador</dt>
      <dd><var>A18 Bionic</var></dd>
      <dt>Almacenamiento</dt>
      <dd><data value="256">256 GB</data></dd>
    </dl>
  </section>

  <footer>
    <p>Precio: <strong>$999.00</strong></p>
    <button type="button">Añadir al carrito</button>
  </footer>
</article>

José Alberto Ramírez Quiroz

student•

Como aplican aquí los datos estructurados?

Se colocan atributos alt a las imagenes, etiquetas semanticas pero y las demas propiedades como itemscope afecta en la accesibilidad ? o solo en SEO

Me refieron a lo que podemos encontrar en: https://schema.org/

Giuseppe Ramirez

student•

¿Qué tan recomendables son los figure tag y el figcaption para encerrar a los img, son necesarios, complementarios, dependen de algo?

Roger Carlos Ariel Alba

student•

Hola,

Son para semántica y accesibilidad, la imagen como tal funcionará sin ellos, pero de nuevo semántica y accesibilidad.

Giuseppe Ramirez

student•

Gracias Carlos, lo tengo claro por semántica muchas gracias, pero en accesibilidad, ¿qué lo mejora?

Juan Esteban Galvis

student•

Me alegra que todo lo visto en esta clase ya lo hacía en mis proyectos, vamos bien!

Para los enlaces les pondré que al darle click vaya a la sección especifica mediante un Id.

Usuario anónimo

user•

Por el momento voy haciendo los cambios que nuestra querida profesora va comentando

Y pues hasta ahora estoy aprendiendo, pero uniendo un poco los conocimientos de prework Mac, git y este curso logré hacer algunas modificaciones y montar mi página en Github.

Por el momento va así:

https://sergioxarboleda.github.io/portfolio

Eliseo Ávila

student•

Anyelo Leonardy Alvarez Baquero

student•

<img src="./images/juliana.jpeg" alt="Juliana Gómez. Mujer joven con cabello rizado, cejas levemente levantadas, sonrisa disimulada. Esta viendo al frente, viste escote y tiene las manos en los bolsillos del pantalón." class="header-img" />

Tomás Felipe Beltrán Pulido

student•

Hay una manera, en VSC, de envolver una parte del HTML con una etiqueta: el comando ">Emmet: Wrap with abbreviation". Para acceder a él, presionen ctrl+shift+p. Luego, escriban el comando igual que si escribieran git push origin main.

Para más comodidad, pueden vincular un atajo de teclado a este comando a través del menú de atajos de VSC. Yo le puse el mío: ctrl+alt+w, seguido de ctrl+alt+r.

Christian David Sánchez

student•

Accesibilidad> -HTML semántico

Atributo ALT de las imágenes
El atributo href de las anclas.

John Edward León Muñoz

student•

Generador gratis de "alt" para imagenes con IA: https://www.tailwindapp.com/marketing/tools/image-alt-text-generator

<header>
      <img src="images/juliana.jpeg" alt="Juliana Gomez" class="header-img" />
      <h1 class="header">Juliana Gomez</h1>
      <h2 class="subtitle">Front End Developer</h2>
      <nav>
        <ul class="navigation">
          <li class="nav-item">
            <a href="#acerca">
              Acerca de
            </a>
          </li>
          <li class="nav-item">
            <a href="#proyectos">
              Mis Proyectos
            </a>
          </li>
          <li class="nav-item">
            <a href="#contacto">
              Contacto
            </a>
          </li>
        </ul>
      </nav>
    </header>

body,
header,
section {
  align-items: center;
  background-color: var(--gris-medio);
  display: flex;
  flex-direction: column;
  width: 100%;
}
nav {
  width: 100%;
}
.nav-item a {
  text-decoration: none;
  color: var(--blanco);
}

<article class="product-card">
  <header>
    <h3>Smartphone Pro Max</h3>
    <p>Publicado el <time datetime="2025-10-10">10 de Octubre</time></p>
  </header>

  <figure>
    <img src="phone.jpg" alt="Vista frontal del Smartphone Pro Max">
    <figcaption>Modelo 2025 con acabado en titanio.</figcaption>
  </figure>

  <section class="specs">
    <h4>Especificaciones</h4>
    <dl>
      <dt>Procesador</dt>
      <dd><var>A18 Bionic</var></dd>
      <dt>Almacenamiento</dt>
      <dd><data value="256">256 GB</data></dd>
    </dl>
  </section>

  <footer>
    <p>Precio: <strong>$999.00</strong></p>
    <button type="button">Añadir al carrito</button>
  </footer>
</article>

<img src="./images/juliana.jpeg" alt="Juliana Gómez. Mujer joven con cabello rizado, cejas levemente levantadas, sonrisa disimulada. Esta viendo al frente, viste escote y tiene las manos en los bolsillos del pantalón." class="header-img" />

HTML Semántico: Mejora la Estructura de tu Página Web

Dominar las bases de la accesibilidad

Bases de Accesibilidad Web y Creación de Portafolio Personal

Importancia de la Accesibilidad Web en el Desarrollo de Sitios

Pautas de Accesibilidad Web: Comprensión y Aplicación

Pautas de Accesibilidad Web: Principios y Criterios WCAG

Principios de Accesibilidad Web: Perceptible, Operable, Comprensible, Robusto

Tecnologías Asistivas para Accesibilidad Web

Presentar el proyecto

Creación de un Portafolio Accesible con HTML, CSS y JavaScript

Evaluar la accessibilidad de sitios web

Pruebas de Accesibilidad Web con Lighthouse en Chrome

Simulación de Accesibilidad Visual en Sitios Web

Pruebas de Accesibilidad Web con Teclado y Elementos Interactivos

Lectores de Pantalla: Uso y Configuración para Accesibilidad Web

Pruebas básicas con lector de pantalla VoiceOver en Mac

Refactorizar HTML para ser mas accessible

HTML Semántico para Mejora de Accesibilidad Web