El documento

Además de la estructura, hay muchos elementos HTML de apoyo que se deben tener en cuenta al momento de crear y diseñar para la accesibilidad digital. Durante el aprendizaje Accesibilidad, abordamos muchos elementos.

Este módulo se enfoca en elementos muy específicos otros módulos, pero es útil entenderlos.

Título de página

El archivo HTML <title> define el contenido de la página o pantalla a la que está a punto de una experiencia fluida a los desarrolladores. Se encuentra en Sección <head> de un documento HTML y es equivalente al <h1> o al tema principal de la página. El del título se muestra en la pestaña del navegador y ayuda a los usuarios a comprender qué página que está visitando, pero no se muestra en el sitio web o la aplicación en sí.

En una app de una sola página (SPA), <title> se controla de una manera ligeramente diferente, ya que los usuarios no navegan entre páginas, como en los sitios web de varias páginas. Para las SPA, el valor del document.title puedes agregar manualmente o con un paquete de ayuda, según la framework de JavaScript. Anunciar el títulos de páginas actualizados a un usuario de lector de pantalla podría requerir un trabajo adicional.

Los títulos de página descriptivos son útiles tanto para los usuarios como para optimización para motores de búsqueda (SEO), pero no se exceda y agregue muchas palabras clave. Como el título es el primero cuando un usuario de AT visita una página, esta debe ser precisa, única y descriptivos pero también concisos.

Al escribir los títulos de las páginas, también se recomienda "cargar al principio". el interior página o contenido importante y, luego, agrega la información o las páginas anteriores después. De esta manera, los usuarios de AT no tendrán que leer la información que tienen ya se escuchó.

Qué no debes hacer
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Qué debes hacer
<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 etiqueta <html>. Se debe agregar un atributo de idioma válido a cada página, ya que le indica a la AT el idioma que se debe usar.

Se recomienda que uses dos caracteres Códigos de idioma ISO para una mayor cobertura de AT, ya que muchos de ellos no admiten códigos de idioma extendidos.

Cuando falta un atributo de idioma, la AT se establecerá de forma predeterminada en el lenguaje programado del usuario. Por ejemplo, si una AT estuviera configurada en español, pero una usuario visitó un sitio web o una aplicación en inglés, la AT intentaría leer el idioma texto con acentos y cadencia en español. Esta combinación da como resultado una prueba con un producto digital y un usuario frustrado.

Qué no debes hacer
<html>...</html>
Qué debes hacer
<html lang="en">...</html>

El atributo lang solo puede tener un idioma asociado. Esto significa el atributo <html> solo puede tener un idioma, incluso si hay varios idiomas de la página. Configura lang como el idioma principal de la página.

Qué no debes hacer
<html lang="ar,en,fr,pt">...</html>
Varios idiomas no son compatibles.
Qué debes hacer
<html lang="ar">...</html>
Configura solo el idioma principal de la página. En este caso, el idioma es el árabe.

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 agregues al elemento de anuncio in-page correspondiente en lugar de hacerlo en la etiqueta <html>.

Recuerda que el idioma que agregas al elemento <html> cae en cascada los elementos contenidos, así que siempre debes establecer el idioma principal de la página el atributo lang de nivel superior primero.

Si hay elementos in-page escritos en otro idioma, agrega lang. al elemento de wrapper apropiado. Esto anulará el configuración de idioma de nivel superior hasta que se cierre el elemento.

Qué no debes hacer
<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>
Qué debes hacer
<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>) es usarse para alojar otra página HTML o contenido de terceros dentro de la página. Integra básicamente, coloca otra página web en la página principal. Los iframes suelen se usan para anuncios, videos incorporados, analítica web y contenido.

Para que tu <iframe> sea accesible, debes tener en cuenta algunos aspectos. Primero, 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 AT más información sobre el contenido de <iframe>.

En segundo lugar, como práctica recomendada, es bueno configurar el desplazamiento en “automático”. o "sí" en la configuración de la etiqueta <iframe>. Esto permite que las personas con visión reducida puedan desplazarse hacia el contenido dentro de <iframe> que, de otro modo, no podrían ver. Lo ideal sería que el contenedor <iframe> también fuera flexible en su alto y ancho.

Qué no debes hacer
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
Qué debes hacer
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre la accesibilidad de los documentos.

Tu sitio es un libro de texto en línea con varios idiomas, que aparece en una sola página. ¿Cuál es la mejor manera de indicarle a la tecnología de accesibilidad el idioma de la copia?

No te preocupes, la AT puede leer automáticamente cada idioma.
Si bien algunas AT pueden tener conocimientos de detección de idiomas, no puedes garantizar que la AT adivine correctamente.
Incluye todos los idiomas en el elemento <html>. Por ejemplo: <html lang="en,lt,pl,pt">.
El atributo lang solo puede tener un idioma asociado.
Configura un lang principal para el <html>, así como idiomas adicionales para cualquier elemento que tenga contenido en un idioma diferente.
La AT se basará principalmente en el atributo de idioma <html> para leer el documento. Si tienes texto en varios idiomas, asegúrate de agregar un atributo lang al elemento correspondiente (como una sección o un párrafo) con el código ISO correcto de dos letras.