El documento

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

Este módulo se enfoca en elementos muy específicos que no se ajustan a 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 sección <head> de un documento HTML y equivale 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), <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 con un paquete de ayuda, según el framework de JavaScript. Anunciar los títulos de las páginas actualizados a un usuario de lector de pantalla puede requerir trabajo adicional.

Los títulos descriptivos son buenos para los usuarios y la optimización para motores de búsqueda (SEO), pero no te excedas y no 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 te recomendamos que primero "cargues en primer plano" la página interior o el contenido importante y, luego, agregues las páginas o la información anteriores. De esta manera, los usuarios de AT no tienen que escuchar la información que ya conocen.

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 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 al AT qué idioma debe usar.

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

Cuando falta un atributo de idioma por completo, el AT usará de forma predeterminada el idioma programado del usuario. Por ejemplo, si un AT se configuró en español, pero un usuario visitó un sitio web o una app en inglés, el AT intentará leer el texto en inglés con acentos y cadencia en español. Esta combinación genera un producto digital inutilizable 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 que el atributo <html> solo puede tener un idioma, incluso si hay varios idiomas en la página. Establece lang en el idioma principal de la página.

Qué no debes hacer
<html lang="ar,en,fr,pt">...</html>
No se admiten varios idiomas.
Qué debes hacer
<html lang="ar">...</html>
Establece solo el idioma principal de la página. En este caso, el idioma es á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 para el atributo de idioma de la página completa, excepto que lo agregas al elemento en la página correspondiente en lugar de a la etiqueta <html>.

Recuerda que el idioma que agregues al elemento <html> se propaga a todos los elementos contenidos, por lo que siempre debes configurar primero el idioma principal del atributo lang de nivel superior de la página.

Para los elementos de la página escritos en otro idioma, agrega ese atributo lang al elemento de wrapper correspondiente. 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>
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>) se usa para alojar otra página HTML o el contenido de un tercero dentro de la página. En esencia, 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, hay algunos aspectos que debes tener en cuenta. Primero, cada <iframe> con contenido distinto debe incluir un elemento de título dentro de la etiqueta superior. Este título les proporciona a los usuarios de AT más información sobre el contenido dentro de <iframe>.

En segundo lugar, como práctica recomendada, es bueno establecer el desplazamiento en "auto" o "sí" en la configuración de la etiqueta <iframe>. Esto permite que las personas con baja visión puedan desplazarse por el contenido dentro de <iframe> que, de otro modo, no podrían ver. Idealmente, el contenedor <iframe> también sería flexible en su altura 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 tu comprensión

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

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

Establece un lang principal para el <html> y otros idiomas en cualquier elemento que tenga contenido en un idioma diferente.
Incluye todos los idiomas en el elemento <html>. Por ejemplo, <html lang="en,lt,pl,pt">
No te preocupes, el AT puede leer automáticamente cada idioma.