El documento

Además de la estructura, hay muchos elementos HTML de respaldo que se deben tener en cuenta cuando se compila y diseña para la accesibilidad digital. A lo largo del curso Aprende sobre accesibilidad, abarcamos muchos elementos.

Este módulo se centra en elementos muy específicos que no encajan del todo en ninguno de los otros módulos, pero que son útiles de comprender.

Título de la página

El elemento HTML <title> define el contenido de la página o pantalla que un usuario está por experimentar. Se encuentra en la sección <head> de un documento HTML y equivale al <h1> o al 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), <title> se controla de una manera ligeramente diferente, ya que los usuarios no navegan entre páginas como lo hacen en los sitios web de varias páginas. En el caso de las SPA, el valor de la propiedad document.title se puede agregar de forma manual o mediante 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 descriptivos de las páginas son ideales para los usuarios y para la optimización de 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 AT visita una página, debe ser preciso, único y descriptivo, pero también conciso.

Cuando escribas los títulos de las páginas, también se recomienda "cargar por adelantado" la página interior o el contenido importante primero y, luego, agregar las páginas o la información anteriores. De esta manera, los usuarios de AT no tienen que examinar la información que ya escucharon.

Qué no debes hacer
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Sí
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Lenguaje

Idioma de la página

El atributo de idioma de la página (lang) establece el idioma predeterminado de 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 para indicar la AT a qué idioma se debe usar.

Te recomendamos que uses códigos de idioma ISO de dos caracteres para una mayor cobertura de AT, ya que muchos de ellos no admiten códigos de idioma extendido.

Cuando falta un atributo de idioma por completo, la AT se establecerá de forma predeterminada en el idioma programado del usuario. Por ejemplo, si una AT se configuró en español, pero un usuario visitó un sitio web o una app en inglés, la AT 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.

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

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

Qué no debes hacer
<html lang="ar,en,fr,pt">...</html>
No se admiten varios idiomas.
Sí
<html lang="ar">...</html>
Establece 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 los cambios de idioma en el contenido. Se aplican las mismas reglas básicas que para el atributo de idioma de página completa, excepto que lo agregues al elemento de anuncio in-page apropiado en lugar de a la etiqueta <html>.

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

En el caso de los elementos de anuncios in-page escritos en un idioma diferente, agrega el atributo lang al elemento wrapper adecuado. Esto anulará la configuración de idioma de nivel superior hasta que se cierre ese 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>
Sí
<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 en la página. Básicamente, coloca otra página web dentro de la página principal. 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. 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 dentro de <iframe>.

En segundo lugar, como práctica recomendada, se recomienda configurar el desplazamiento en "auto" o "yes" en la configuración de la etiqueta <iframe>. Esto permite que las personas con visión reducida puedan desplazarse al contenido dentro de <iframe> que, de otra manera, no podrían ver. Lo ideal sería que el contenedor <iframe> también fuera flexible en su altura y ancho.

Qué no debes hacer
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
Sí
<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 documentos.

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

No te preocupes, la AT puede leer automáticamente cada idioma.
Si bien algunas AT pueden tener habilidades de detección de idioma, 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.
Establece un lang principal para el <html> y otros idiomas en 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.