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ó.
<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 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.
<html>...</html>
<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.
<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 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.
<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>
) 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.
<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>
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?
<html>
. Por ejemplo: <html lang="en,lt,pl,pt">
.lang
principal para el <html>
, así como idiomas adicionales para cualquier elemento que tenga contenido en un idioma diferente.