Además de la estructura, hay muchos elementos HTML complementarios que se deben tener en cuenta cuando se compila y se diseña para la accesibilidad digital. A lo largo del curso Aprende sobre accesibilidad, abordamos muchos elementos.
Este módulo se enfoca en elementos muy específicos que no encajan en ninguno de los otros módulos, pero que son útiles para comprender.
Título de la página
El elemento HTML <title>
define el contenido de la página o pantalla que un usuario está a punto de
experimentar. Se encuentra en la
<head> sección de
un documento HTML y es equivalente al <h1> o tema principal de la página. El contenido del título se muestra en la pestaña del navegador y ayuda a los usuarios a comprender qué página están visitando, pero no se muestra en el sitio web ni en la app.
En una app de una sola página (SPA),
el <title> se maneja de una manera ligeramente diferente, ya que los usuarios no navegan
entre páginas como lo hacen en sitios web de varias páginas. En el caso de las SPA, el valor de la
document.title
propiedad se puede agregar de forma manual o con un paquete auxiliar, según el
framework de JavaScript. Anunciar los
títulos de página actualizados
a un usuario de lector de pantalla puede requerir trabajo adicional.
Los títulos de página descriptivos son buenos para los usuarios y la optimización para motores de búsqueda (SEO), pero no te excedas y agregues muchas palabras clave. Dado que el título es lo primero que se anuncia cuando un usuario de tecnología de asistencia visita una página, debe ser preciso, único y descriptivo, pero también conciso.
Cuando escribas títulos de página, también es una práctica recomendada "cargar primero" la página interior o el contenido importante y, luego, agregar las páginas o la información anteriores. De esta manera, los usuarios de tecnología de asistencia no tienen que escuchar la información que ya escucharon.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
Idioma
Idioma de la página
El atributo de idioma de la página (lang) establece el idioma predeterminado para toda la página. Este atributo se agrega a la <html> etiqueta. Se debe agregar un atributo de idioma válido a cada página, ya que le indica a la tecnología de asistencia qué idioma debe usar.
Te recomendamos que uses códigos de idioma ISO de dos caracteres para una mayor cobertura de la tecnología de asistencia, ya que muchos de ellos no admiten códigos de idioma extendidos.
Cuando falta por completo un atributo de idioma, la tecnología de asistencia usará de forma predeterminada el idioma programado del usuario. Por ejemplo, si una tecnología de asistencia se configuró en español, pero un usuario visitó un sitio web o una app en inglés, la tecnología de asistencia intentaría leer el texto en inglés con acentos y cadencia en español. Esta combinación da como resultado un producto digital inutilizable y un usuario frustrado.
<html>...</html>
<html lang="en">...</html>
El atributo lang solo puede tener un idioma asociado. Esto significa
el <html> atributo solo puede tener un idioma, incluso si hay varios
idiomas en la página. Establece lang en el idioma principal de la página.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
Idioma de la sección
También puedes usar el atributo de idioma (lang) para cambiar de idioma en el contenido. Se aplican las mismas reglas básicas que el atributo de idioma de página completa, excepto que lo agregas al elemento adecuado de la página en lugar de la etiqueta <html>.
Recuerda que el idioma que agregas al elemento <html> se aplica en cascada a todos
los elementos contenidos, por lo que siempre debes establecer primero el atributo lang de nivel superior del idioma principal de la página.
Para cualquier elemento de la página escrito en un idioma diferente, agrega ese atributo lang al elemento contenedor adecuado. Esto anulará la configuración de idioma de nivel superior hasta que se cierre ese elemento.
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
"Kas sa räägid inglise keelt?" when I met someone new.</p>
</div>
</body>
</html><html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
<span lang="et">"Kas sa räägid inglise keelt?"</span>
when I met someone new.</p>
</div>
</body>
</html>iFrames
El elemento iFrame
(<iframe>) se
usa para alojar otra página HTML o el contenido de un tercero dentro de la página. Esencialmente, coloca otra página web dentro de la página superior. Los iFrames se usan comúnmente para anuncios, videos incorporados, estadísticas web y contenido interactivo.
Para que tu <iframe> sea accesible, debes tener en cuenta algunos aspectos. En primer lugar, cada <iframe> con contenido distinto debe incluir un elemento de título dentro de la etiqueta superior. Este título proporciona a los usuarios de tecnología de asistencia más información sobre el contenido dentro del <iframe>.
En segundo lugar, como práctica recomendada, es bueno establecer el desplazamiento en "auto" o "yes" en la configuración de la etiqueta <iframe>. Esto permite que las personas con baja visión puedan desplazarse por el contenido dentro del <iframe> que, de otro modo, no podrían ver. Lo ideal es que el <iframe> contenedor también sea flexible en su altura y ancho.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>