Semántica

Garantizar la accesibilidad a nuestro contenido es un gesto democratico (para todos) e inclusivo (para habilidades diferentes). Asi se adquiere conocimiento, se desarrolla tecnología e implementan instrumentos desde diversas disiciplinas que benefician a todos. Sin ciencia no hay futuro.

La accesibilidad es MUY importante, y siempre deberías tenerla en cuenta, y si realmente no te preocupa porque sientes que a ti no te afecta, entonces hazlo por el SEO, el SEO tiene muy en cuenta la accesibilidad, y si no tienes una buena accesibilidad en tu página entonces para Google prácticamente no existes.

Por acá les comparto esta información sobre accesibilidad que les puede ser muy útil:

1. Accessibility (Fundamentals) by Google
2. The Accessibility Tree by Google

Aquí tenemos un claro ejemplo de problemas de accesibilidad

Y aquí es donde mejoramos la accesibilidad.

Productos para todos: Todas las personas pueden acceder a nuestro producto.

Semántica

La semántica está relacionada con las etiquetas contenedoras en HTML5, por ejemplo: header, main, sidebar y footer. Estas agregan información importante para aquellos que tengan problemas con la visualización de la página. Les permite a estos usuarios orientarse en qué sección de la página se encuentran.

• Por eso, es importante utilizar las diferentes etiquetas que HTML5 ofrece para tener la mejor semántica posible y la accesibilidad.

la accesibilidad es un tema muy importante en USA es por ley obligatorio.

En los formularios, la propiedad tabindex="" se agrega en los inputs para indicar el flujo de la tecla tab del teclado en tu página. Esto mejora la experiencia de usuario, y también la accesibilidad.

<input  type="text" tabindex="1"/>

Tabindex | MDN

En la lista. ✨✨ https://platzi.com/clases/accesibilidad-web/

Las WCAG se organizan sobre la base de cuatro principios a menudo llamados con la palabra POUR:

Perceptible: ¿pueden los usuarios percibir el contenido? Esto nos ayuda a tener en cuenta que solo porque algo sea perceptible con un sentido, como la vista, no significa que todos los usuarios puedan percibirlo.

Manejable: ¿pueden los usuarios componentes de IU y navegar por el contenido? Por ejemplo, alguien que no puede usar mouse o pantalla táctil no puede manejar algo que demanda interacción de desplazamiento.

Comprensible: ¿pueden los usuarios comprender el contenido? ¿Pueden los usuarios comprender la interfaz y es esta lo suficientemente consistente como para evitar confusiones?

Sólido: ¿puede una amplia variedad de usuarios-agentes (navegadores) consumir el contenido? ¿Funciona con tecnología asistencial?

Pensé que la web semántica era importante sólo para SEO.
“Soy todo orejas”

Jamas había pensado en Utilizar una buena semántica para personas con alguna capacidad diferente!
Muy bien explicado ese punto y no solo desde el lado abstracto de que es buena practica.
Claro que es buena practica pero también que bueno que se hable de otros casos de los que nadie menciona y por eso los que vamos empezando no tenemos en mente.
Grande Diego 😃

HTML refernce para una cheat sheet de las etiquetas, sus usos, y ejemplos.
Incluye clasificacion de las semanticas
https://htmlreference.io/

Clase 51 - Semántica

¿Para qué nos sirve la accesibilidad?

• Para crear productos para todas las personas, sin importar si tienen una discapacidad auditiva o visual.

¿Necesitamos JavaScript para implementar una buena accesibilidad en nuestros productos?

• Sí.

¿Qué es HTML semántico en desarrollo web?

• Esto significa usar las etiquetas adecuadas para cada contenido que vayamos a agregar a nuestro proyecto/producto web.

¿Por qué es importante usar HTML Semántico en cuanto al tema de accesibilidad?

• Porque ayudamos a que las personas con discapacidades visuales y auditivas sean capaces de consumir más fácilmente nuestros productos, por medio del uso de software especial para ellos.

Esta etiquetas las compartió el equipo de desarrollo web

Compañeros les comparto una pagina donde les explican mas a fondo como utilizar correctamente la semántica en html.

¿Qué es NVDA?

NVDA (Non Visual Desktop Access) es un lector de pantalla libre y gratuito desarrollado por NV Access que permite a las personas ciegas y con discapacidad visual usar ordenadores. Para ello lee el texto que se muestra en pantalla mediante una voz sintética. Se puede controlar lo que NVDA lee moviendo el cursor al área relevante que contiene el texto, tanto poniendo el ratón encima como usando las flechas del teclado.

NVDA también puede convertir el texto en braille si el usuario del ordenador posee un dispositivo llamado «pantalla braille».

NVDA abre la puerta de la educación y el empleo a muchas personas ciegas. También da acceso a las redes sociales, la banca, compras en línea y noticias.

NVDA funciona con Microsoft Windows. Puedes descargarlo e instalarlo en tu ordenador, o llevarlo en una unidad USB a todas partes.

Normalmente los lectores de pantalla son muy caros, volviéndose inasequibles para muchas personas. NVDA es gratis. Ya se ha descargado más de 70000 veces, y está traducido a más de 43 idiomas.

Un proyecto WEB profesional debe estar optimizado para que personas con diferentes tipos de discapacidades o condiciones puedan acceder y comprender la información en el sitio WEB y garantizar una buena UX. Esto se consigue generando una estructura semántica del HTML utilizando las etiquetas adecuadas para cada tipo de contenedor.

Solo teniendo buen HTML semántico nos ahorramos muchos problemas de accesibilidad

Cuando Diego dice que hay mucho contenido detrás de “Accesibilidad”, lo dice en serio. Hay toda una rama de la tecnología que se dedica a hacer esta más accesible para todas las personas, y es importante incorporar lo más posible a nuestros proyectos, por más pequeños que sean.

Para tener una pagina accesible se debe tener en cuenta:

1. La semántica de HTML
2. Textos (enamoremonos del Rem , ya es hora de abandonar el px 😛)
3. labels - alt - tiitles

Que es la accesibilidad?: Garantizar la accesibilidad de nuestro sitio es hacerlo inclusivo. Permitir que personas con discapacidades puedan acceder y disfrutar el contenido de una forma fácil para ellos.

Se más empatetico and keep in mind that people de todo el mundo verá tu página.

Ahora más que nunca entiendo la necesidad de la semántica HTML y las buenas prácticas en todo momento. Excelente cierre al curso con este tema tan importante.

En la accesibilidad es importante usar la semántica:

Esto ayuda al software de accesibilidad, si usamos solo <div>, esto hará que el usuario no sepa dónde está.

Aquí el curso de accesibildad web
Curso de accesibilidad WEb

Semantica: Hace referencia a todas las etiquetas que nos indican en qué parte del proyecto/Sitio web estamos ubicados.

Estructurar nuestro html de forma semántica es una forma de estar en conciencia de los demás, es ética técnica que beneficiará a los otros sin conocerlos.

Súper recomendable el Curso de Accesibilidad Web, en ese curso entiendes y te concientisas de porque necesitas respetar la semántica y para que sirve respetarla.

Básicamente, el código semántico 1 es aquel en el que los elementos marcan los contenidos de acuerdo con su estructura. … Se ha empleado una tabla para maquetar el contenido, cuando las tablas se crearon para marcar semánticamente datos tabulares. El encabezado se ha marcado como un párrafo, y no como un encabezado.

La accesibilidad web combina la programación, el diseño y la tecnología para construir un Internet sin barreras que permita a todos los usuarios el entendimiento, el aprendizaje, la navegación y la plena interacción con la web

Resumen del capitulo en Notion
https://acortar.link/8N4WSA

51.-Semántica

Son todas las etiquetas que nos indican donde estamos. Esto es importante porque existen ciertos softwares (si tenemos alguna discapacidad) que nos ayudan a leer la pantalla y si tiene buena semántica le puede decir al usuario en que sección están. Solo usar los <div> cuando tengamos contenedores de algo muy específico.

• HTML Semántico es usar las etiquetas de html en lugar de usar muchos div.
• La semántica nos indica en que sección del documento nos encontramos y esto es muy importante cuando implementamos la accesibilidad en nuestra aplicación web.
• La etiqueta div, debe usarse, cuando haya una etiqueta de html, para la sección que quieras implementar.

GRACIAS

Accesibilidad

Semántica: ayuda al software a leer la pantalla, y le dice al usuario en que sección de la página esta.

🐱‍💻 HTML semántico significa aplicar a cada parte del contenido la etiqueta más adecuada a su tipo.

La semántica en HTML y CSS se refiere a la estructuración y marcado del contenido de una página web de manera que refleje su significado y propósito. Utilizar una semántica adecuada mejora la accesibilidad, el mantenimiento del código y el SEO (Optimización para Motores de Búsqueda). Aquí hay algunas prácticas semánticas comunes en CSS:

Uso de Elementos Semánticos en HTML:

Utiliza elementos HTML semánticos como <header>, <nav>, <main>, <article>, <section>, <aside>, y <footer> para estructurar el contenido de tu página de manera significativa.
html
Copy code
<header>
<!-- Contenido del encabezado -->
</header>
<nav>
<!-- Menú de navegación -->
</nav>
<main>
<!-- Contenido principal -->
</main>
<footer>
<!-- Contenido del pie de página -->
</footer>
Clases y ID Descriptivos:

Utiliza nombres de clases y ID descriptivos para aplicar estilos en CSS. Esto hace que el código sea más fácil de entender y mantener.
html
Copy code
<div class=“header-container”>
<!-- Contenido del encabezado -->
</div>
<nav id=“main-navigation”>
<!-- Menú de navegación -->
</nav>
Evita el Uso Excesivo de Divs:

Usa elementos semánticos en lugar de divs genéricos siempre que sea posible. Por ejemplo, en lugar de <div class=“article”>, utiliza directamente <article>.
html
Copy code
<article>
<!-- Contenido del artículo -->
</article>
Etiquetas de Lista para Listas:

Usa las etiquetas <ul>, <ol>, y <li> para marcar listas, en lugar de simplemente usar divs o spans.
html
Copy code
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
Uso de Selectores de Atributo:

Utiliza selectores de atributo para aplicar estilos a elementos basados en sus atributos.
css
Copy code
input[type=“text”] {
/* Estilos para campos de texto */
}
Comentarios Significativos:

Agrega comentarios en tu código CSS para explicar secciones específicas o reglas complejas.
css
Copy code
/* Estilos para la barra de navegación /
nav {
/ … */
}
Orden Lógico de las Reglas CSS:

Organiza las reglas CSS en un orden lógico, como agrupar estilos relacionados y colocar estilos generales al principio.
css
Copy code
/* Estilos para el encabezado /
header {
/ … */
}

/* Estilos para la navegación /
nav {
/ … */
}
La semántica en CSS se refiere tanto al marcado HTML semántico como a la organización clara y descriptiva de las reglas CSS. La combinación de ambas prácticas contribuye a un código más legible, mantenible y accesible.

RESUMEN CLASE 51:
SEMANTICA

Mi conclusión de todo lo aprendido sobre accesibilidad.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <section>
      <article></article>
    </section>
    <aside></aside>
  </main>
  <footer></footer>
</body>
</html>

La accesibilidad web es importante.

Es un aspecto que no debemos pasar de largo al Hacer nuestros proyectos, esto incluso tiene obligación legal en Estados Unidos: Sección 508

¡Gracias Diego! muy importante que como desarrolladores seamos participes de lograr adaptar la información a distintos públicos y con ello dar más oportunidades de acceder a dicha información. La accesibilidad debe ser uno de los ítems presentes a la hora de crear entornos web.

Ya se tiene un curso.Revisen la ESCUELA DE DESARROLLO WEB (Curso de Accesibilidad Web).

Me gusto mas esta explicación de la semántica porque por lo general lo explican desde una forma muy abstracta

Nunca había pensado en la importancia de las etiquetas hasta ahora. No solo sirven para dividir nuestro proyecto.

Vi muchas páginas que solo están llenas de div. Creo que no le hace nada bueno al SEO luego

Me encanta que se añadan secciones para hablar de esto, de verdad que es un tema de gran importancia al que no se le da la visibilidad que se debería. Esto si que es verdadera inclusividad.

APUNTES:
*Para cada contenido hay una etiqueta.
*Utilizar la etiqueta div, como comodín y/o en
ocasiones especificas.
*¡Productos para todos!

CONCLUSIÓN: cuando hablamos de HTML semántico, nos referimos a utilizar todas y cada una de las etiquetas según el contenido. Y no saturar el contenido con repetidas etiquetas.

Pienso que la semántica nos ayuda a mejorar nuestro posicionamiento SEO y a supersivar nuestro código con ayuda de software externo para dar una mejor experiencia a todo tipo de usuario.

Muy importante la accesibilidad

Muy buena explicación profe…

Les dejo una Tabla por si quieren explorar para que sirve cada etiqueta…
Tabla Periodica

• La accesibilidad hace que tus sitios web puedan ser utilizados por el mayor número de personas posible. Tradicionalmente, se ideó para las personas con discapacidad, pero la creación de sitios accesibles también beneficia a otros grupos, como los que utilizan los dispositivos móviles o los que tienen conexiones de red lentas.

Semántica se refiere al uso correcto de todas las etiquetas de HTML de acuerdo a cada parte del sitio web, con los nombres adecuados y evitando usar demasiado ciertas etiquetas como <div>. De manera que sólo coloques divs para contenedores específicos o que sean cosas que no tienen una etiqueta específica a la cual referirse dentro de la sección <main> o <body>, por ejemplo.

Siempre creí que html semántico era para optimización SEO, por eso lo usaba. Ahora me doy cuenta de la verdadera razon.

Información resumida de esta clase
#EstudiantesDePlatzi

• HTML semántico es utilizar las etiquetas correspondientes a cada caso de manera correcta y esto es importante

• Algunas etiquetas importantes son: Header, logo,navegation, main, sidebar, footer

• Los div son etiquetas que usaremos para casos muy específicos y no debemos abusar de ella

Les dejo una maravillosa herramienta Lamada ANDI, diseñada para crear (testear) paginas web siempre teniendo en cuenta el tema de la accesibilidad: https://www.ssa.gov/accessibility/andi/help/install.html

El tema de accesibilidad tiene que ver mucho con la inclusion y como vinculamos a todos los usuarios a navegar nuestro producto web sin importar si tienen discapacidades. Un tema que sin duda si o si debe saber a profundidad un buen programador Web. continuamos aprendiendo.

EXCELENTE CLASE DE REPASO 😄

🤖🤖🤖
https://allthetags.com
🤖🤖🤖

Esto si es evolución, estos detalles cambian todo 👏👏👏

Semantica para accesibilidad

Muy buena clase!

Muy buenos principios que uno puede implementar

¡Qué buena clase!

Accesibilidad first

Dark Mode hace parte de la accesibilidad?

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

genial !

Accesibilidad

👌👌

El master Diego nos ha enseñado mucho y lo que aun falta.