Clase 14 de 35 • Curso de Accesibilidad Web
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
Roberto Carlos Landázuri Estrella
Manuel Cruz
Juliana Gomez
rebeca Narvaez
Efraín Hernández García
Felipe Bernardo González Barranco
Karina Bárcena Anguiano
Dani Villalon
Jose Ever Muñoz Muñoz
Efraín Hernández García
Sergio Estrella
Eliseo Ávila
Daniel Andres Rojas Paredes
Misael Valdez
Erick Daniel Pérez Mata
Felipe Bernardo González Barranco
Daniel Andres Rojas Paredes
Luis Angel Castillo Vega
José Alberto Ramírez Quiroz
Giuseppe Ramirez
Roger Carlos Ariel Alba
Giuseppe Ramirez
Juan Esteban Galvis
Usuario anónimo
Eliseo Ávila
Anyelo Leonardy Alvarez Baquero
Tomás Felipe Beltrán Pulido
Christian David Sánchez
Carolina Gómez
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.
Es por lo reciente... supongo Hay unos que si los tienen!
Muy buena sugerencia, muchas gracias Robert
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!
Si, tomar el curso de programación básica ayuda mucho
Muy buena recomendación!!
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
Wow! Muchas gracias Karina. No sabía la existencia de este tipo de diagramas y me ha venido genial. Gracias por compartir!
muy util reina
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
Poco a poco me voy acostumbrando a ponerle alt a todas las imágenes que pongo ;)
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" .
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 ?
Que satisfactorio es ver Y ENTENDER !!
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); }
Well done!!
hola , me gustaria saber si hay alguna persona que escriba codigo usando nvda en la comunidad, tengo algunas preguntas.
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>
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/
¿Qué tan recomendables son los figure tag y el figcaption para encerrar a los img, son necesarios, complementarios, dependen de algo?
Hola,
Son para semántica y accesibilidad, la imagen como tal funcionará sin ellos, pero de nuevo semántica y accesibilidad.
Gracias Carlos, lo tengo claro por semántica muchas gracias, pero en accesibilidad, ¿qué lo mejora?
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.
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í:
:v
<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" />
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.
Accesibilidad> -HTML semántico
Refactorización con HTML semántico
En esta clase se trabaja la refactorización de una página construida solo con div, para convertirla en una estructura con HTML semántico, mejorando la accesibilidad y la comunicación con el navegador.
Uso del elemento <header>
El <header> representa la parte principal de la página, donde se muestra la información más importante para el usuario: título, subtítulo e información de navegación. Se identifica que originalmente esta sección estaba construida solo con div, lo cual no le indica al navegador su función real. Se envuelve esta sección dentro de la etiqueta <header></header> para comunicar que es una parte clave del sitio.
Uso correcto de imágenes
La imagen del encabezado estaba definida como background-image en CSS dentro de un div. Se reemplaza por una etiqueta <img>, lo que comunica claramente al navegador que se trata de una imagen. Se mantiene la clase para conservar los estilos y se agrega el atributo alt, que describe brevemente el contenido o propósito de la imagen. El texto alternativo no debe ser excesivamente detallado, sino describir lo que la imagen comunica.
Ajustes en CSS
Al cambiar la estructura HTML, algunos estilos se rompen, por lo que se actualiza el CSS:
Uso de headings para el texto
Los textos que antes estaban en div se reemplazan por encabezados semánticos:
Navegación semántica con <nav>
La navegación, que antes era un div, se reemplaza por la etiqueta <nav>, indicando al navegador que se trata de un menú de navegación. Se mantiene la clase para conservar estilos y se agregan propiedades CSS necesarias.
Listas para los elementos de navegación
Los botones de navegación se reconocen como una lista, por lo que se estructuran usando:
Uso de enlaces
Cada ítem de navegación se convierte en un enlace <a> con su respectivo href, indicando que al hacer clic el usuario será dirigido a otra sección o página. Se aplican estilos CSS a los enlaces para mantener la apariencia visual.
Resultado final
Visualmente, la página se ve igual para el usuario, pero internamente: