Capítulo 1. Estructuración de documentos
Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: translation-feedback@oreilly.com
Este libro de se centra en la escritura de componentes accesibles, pero la accesibilidad comienza en la primera línea de tu documento HTML. Tus componentes viven en una página, y tu página forma parte de un documento. Varios elementos, especialmente en <head> de tu documento, afectan a la accesibilidad.
1.1 Definir el lenguaje natural
Problema
Si una página no contiene una definición explícita del lenguaje natural en que está escrita, es posible que el software no pueda traducir correctamente el contenido. El término lenguaje natural se refiere al lenguaje que utilizas para el contenido de la página, no al lenguaje de programación. Esta falta de información puede dar lugar a traducciones defectuosas, formatos erróneos y contenidos difíciles de entender para los usuarios de lectores de pantalla.
Solución
En puedes definir el lenguaje natural de una página utilizando el atributo lang del elemento <html>. Véase el Ejemplo 1-1.
Ejemplo 1-1. El inglés definido como lengua natural de la página
<!DOCTYPE html><htmllang="en"></html>
También puedes definir un dialecto específico de la lengua base. Consulta el Ejemplo 1-2.
Ejemplo 1-2. Inglés británico definido como la lengua natural de la página
<!DOCTYPE html><htmllang="en-GB"></html>
El atributo lang es global, lo que significa que puedes utilizarlo en cualquier elemento, aunque puede que no afecte a algunos de ellos. Puede ser útil si una página está escrita en una lengua pero contiene pasajes de texto o incluso palabras sueltas en otras lenguas. Véase el Ejemplo 1-3.
Ejemplo 1-3. Japonés transliterado en alfabeto latino utilizado en una página escrita en inglés
<!DOCTYPE html><htmllang="en"><head></head><body><p>The Wind-Up Bird Chronicle (<spanlang="ja-Latn">Nejimakidori Kuronikuru</span>) is a novel published in 1994 by Japanese author Haruki Murakami.</p></body></html>
Utiliza la pseudoclase lang para ajustar la tipografía y el diseño a determinados idiomas. Consulta el Ejemplo 1-4.
Ejemplo 1-4. Seleccionar todos los elementos en lengua serbia
:lang(sr){font-family:'Cyrillic font',sans-serif;}
Debate
La tecnología de asistencia y otros programas informáticos pueden no ser capaces de determinar automáticamente el idioma natural de una página. Ciertas funciones de HTML y de las Hojas de Estilo en Cascada (CSS) se basan en esa información para ayudar a localizar el contenido del software y proporcionar una excelente experiencia general al usuario. Debes establecer el idioma de cada página mediante programación y de forma explícita utilizando el atributo lang en el elemento <html>, como se muestra en el Ejemplo 1-1. Para los pasajes de texto escritos en un idioma distinto del idioma principal de la página, también puedes utilizar el atributo, como se muestra en el Ejemplo 1-3. Eso permite a los lectores de pantalla mejorar la pronunciación cambiando los perfiles de voz en consecuencia para determinadas palabras o frases. Procura hacerlo con moderación, porque cambiar de perfil de voz puede resultar molesto, ya que interrumpe el flujo de lectura. Para palabras extranjeras bien establecidas, puede no ser necesario. Ejemplos en alemán son palabras inglesas como "Download", "Workshop" o "Link".
Utilización
El valor del atributo lang debe ser una etiqueta lingüística BCP 47 válida, compuesta por una o más subetiquetas . Una subetiqueta es una secuencia de caracteres alfanuméricos distinguidos y separados de otras subetiquetas por un guión.
La subetiqueta de idioma es un código de 2 ó 3 caracteres que define el idioma principal: por ejemplo, en para el inglés, de para el alemán o fr para el francés, como se muestra en el Ejemplo 1-5.
Ejemplo 1-5. El español definido como lengua natural de la página
<htmllang="es"></html>
La subetiqueta opcional de escritura es un código de 4 caracteres que define el sistema de escritura utilizado para la lengua, como se muestra en el Ejemplo 1-6.
Ejemplo 1-6. Un nombre en alfabeto cirílico junto al mismo nombre en alfabeto latino marcado como tal
Никола Јокић (<spanlang="sr-Latn">Nikola Jokić</span>).
La subetiqueta opcional de región suele ser un código de país de 2 caracteres escrito en mayúsculas y define un dialecto de la lengua base, como se muestra en el Ejemplo 1-7.
Ejemplo 1-7. Alemán austriaco definido como lengua natural de la página
<!DOCTYPE html><htmllang="de-AT"></html>
Debes utilizar el código de idioma primario de 2 caracteres y añadir subetiquetas de región sólo cuando sea necesario para diferenciar contenidos en distintos dialectos que puedan no ser mutuamente comprensibles. Al menos para los usuarios de lectores de pantalla, no añadir subetiquetas de región no debería suponer ninguna diferencia porque el software suele ignorarlas.
Puedes encontrar una lista de todas las etiquetas y subetiquetas en la búsqueda de subetiquetas del idioma BCP 47.
Beneficios
El atributo lang es potente y afecta a muchos aspectos de la accesibilidad web y de la experiencia del usuario en general. Entre ellos se incluyen:
Tecnología asistencial
Los sintetizadores de voz que admiten varios idiomas adaptan su pronunciación y sintaxis al idioma de la página, pronunciando el texto con el acento apropiado y la pronunciación adecuada. Para una página con contenido en alemán en la que el idioma de la página esté configurado en inglés (lang="en"), el software lector de pantalla puede elegir un perfil de voz sintética en inglés y leer el texto en alemán con pronunciación inglesa. Si no estableces ningún idioma, los lectores de pantalla pueden recurrir a la configuración predeterminada del sistema del usuario, que puede no ser la adecuada. El resultado puede ser difícil de entender, confuso o incluso completamente erróneo. Todos los lectores de pantalla admiten numerosos idiomas. Algunos programas cambian de idioma automáticamente, mientras que en otros los usuarios tienen que instalar y configurar manualmente voces o paquetes de idiomas.
La definición de atributos también permite al software de traducción Braille optimizar la salida y evitar que cree erróneamente contracciones Braille de Grado 2.
Traducción
Las herramientas de traducción como Google Translate utilizan la información del atributo lang para traducir el contenido de la página. Aunque este tipo de software suele ser bueno detectando automáticamente el idioma de la página, un desajuste entre el idioma real y el idioma definido puede dar lugar a traducciones inesperadas y no deseadas.
Citas
Las comillas pueden cambiar según el idioma natural de la página. Por ejemplo, el inglés utiliza comillas diferentes que el alemán o el francés, y el lang correcto ayuda a los navegadores a elegir los glifos adecuados, como se ilustra en los Ejemplos 1-8, 1-9 y 1-10.
Ejemplo 1-8. Comillas automáticas utilizando el elemento <q> en inglés
<plang="en"><q>A quote in English.</q></p><!-- Results in: “A quote in English.” -->
Ejemplo 1-9. Comillas automáticas utilizando el elemento <q> en alemán
<plang="de"><q>Ein Zitat auf Deutsch.</q></p><!-- Results in: „Ein Zitat auf Deutsch.“ -->
Ejemplo 1-10. Comillas automáticas utilizando el elemento <q> en francés
<plang="fr"><q>Une citation en français.</q></p><!-- Results in: « Une citation en français. » -->
Separación silábica
lang puede afectar a la separación silábica en CSS. Véase el Ejemplo 1-11.
Ejemplo 1-11. Un párrafo con una anchura máxima de 28 caracteres y la separación silábica activada
p{max-width:28ch;hyphens:auto;}
En los Ejemplos 1-12, 1-13 y 1-14, puedes ver cómo el mismo párrafo escrito en alemán, al que se le ha dado un valor de atributo lang diferente, se muestra de forma distinta en Google Chrome. Las palabras no se rompen o se rompen en posiciones diferentes. Sólo el primer y el segundo ejemplo son correctos. Merece la pena señalar que los navegadores se comportan de forma diferente.
Ejemplo 1-12. Texto alemán con guión correcto en un párrafo definido como alemán
<plang="de">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.</p><!-- Results in:Weit hinten, hinter den Wortbergen,fern der Länder Vokalien und Konso-nantien leben die Blindtexte. Abge-schieden wohnen sie in Buchstab-hausen an der Küste des Semantik,eines großen Sprachozeans.-->
Ejemplo 1-13. Sin separación silábica del texto alemán en un párrafo definido como inglés
<plang="en">Weit hinten,…</p><!-- Results in:Weit hinten, hinter den Wortbergen,fern der Länder Vokalien undKonsonantien leben die Blindtexte.Abgeschieden wohnen sie inBuchstabhausen an der Küste desSemantik, eines großenSprachozeans.-->
Ejemplo 1-14. Separación silábica incorrecta del texto alemán en un párrafo definido como Francés
<plang="fr">Weit hinten,…</p><!-- Results in:Weit hinten, hinter den Wortbergen,fern der Länder Vokalien und Konso-nantien leben die Blindtexte. Abges-chieden wohnen sie in Buchstabhau-sen an der Küste des Semantik, einesgroßen Sprachozeans.-->
Selección de fuentes
Los navegadores pueden seleccionar fuentes adecuadas al idioma para mostrar detalles en caracteres ideográficos que varían de un idioma a otro, como el chino, el japonés y el coreano (conocidos como " idiomas CJK" ).
1.2 Describe el Documento
Solución
Puedes nombrar las páginas utilizando el elemento <title> en HTML. El título debe ser único y describir el tema o propósito de cada página de forma concisa. Véase el Ejemplo 1-15.
Ejemplo 1-15. Un título de página sucinto y descriptivo
<!DOCTYPE html><htmllang="en"><head><title>Products - Johanna’s Toy Store</title></head></html>
Para las previsualizaciones de redes sociales, puedes utilizar opcionalmente una etiqueta de open graph meta para incluir más información o información diferente, como se muestra en el Ejemplo 1-16.
Ejemplo 1-16. Un título de página más pegadizo para las vistas previas de las redes sociales
<!DOCTYPE html><htmllang="en"><head><title>Products - Johanna’s Toy Store</title><metaproperty="og:title"content="Find dolls, toy cars, and more in Johanna's Toy Store"></head></html>
Añadir contexto en función del estado de la página puede ser útil (véanse los Ejemplos 1-17, 1-18, 1-19 y 1-20).
Ejemplo 1-17. El título incluye el paso actual y el número total de pasos de un proceso de pago
<title>Checkout (step 3 of 4) - Johanna’s Toy Store</title>
Ejemplo 1-18. Número de errores de validación en el título de una página de registro
<title>2 errors - Sign Up - Johanna’s Toy Store</title>
Ejemplo 1-19. Número de resultados en el título de una página de búsqueda
<title>21 results for term “crocodile” - Johanna’s Toy Store</title>
Ejemplo 1-20. El título que indica la página de resultados de la búsqueda actual
<title>Page 2 - Product Search Results - Johanna’s Toy Store</title>
Debate
A veces cuesta orientarse en un sitio web, como cuando los usuarios aterrizan en una página procedente de un recurso externo, como un motor de búsqueda, o si se producen cambios en la página de forma inesperada o sin previo aviso. Esto es especialmente cierto para las aplicaciones de una sola página (SPA), en las que la navegación por las páginas funciona de forma diferente a la mayoría de los sitios.
El título de la página es uno de los elementos esenciales de un documento HTML, y los usuarios se benefician de un título de página bien formado y descriptivo.
Los usuarios del lector de pantalla pueden utilizar atajos para anunciar el título de la página. Por ejemplo, si hacen clic en un enlace de una SPA y el contenido cambia, pero no hay ningún anuncio de que se han producido cambios, pueden utilizar un atajo para orientarse y comprobar si han aterrizado en una página diferente. Puedes probarlo tú mismo utilizando uno de los atajos de la Tabla 1-1.
| Lector de pantalla | Mando | Anuncio |
|---|---|---|
JAWS |
|
Título de la página |
NVDA |
|
Título de la página |
VoiceOver macOS |
|
Resumen de la página, incluido el título |
VoiceOver macOS |
|
Título de la página |
Nota
Por defecto , VO representa la combinación de pulsar Control y Option al mismo tiempo en VoiceOver en macOS. Alternativamente, puedes asignar VO a Caps Lock en los ajustes de la Utilidad VoiceOver.
Hay otras razones para escribir buenos títulos de página: sirven como etiquetas para las páginas marcadas como favoritas, y los motores de búsqueda utilizan el título en sus páginas de resultados. Los sitios de redes sociales, las aplicaciones de chat y correo, y software similar utilizan el título en las vistas previas de los enlaces cuando no se especifica ningún otro título. Ten en cuenta que la metaetiqueta open graph mostrada en el Ejemplo 1-16 no es una alternativa al elemento <title>. Que un sitio o aplicación interprete el título de open graph depende del sitio. Idealmente, el contenido del título nativo debería ser lo suficientemente bueno para servir a todos los propósitos.
Hay varias buenas prácticas que debes seguir al escribir los títulos de las páginas:
El título debe ser único
El <title> sirve como etiqueta en las pestañas o ventanas del navegador. Los títulos únicos ayudan a distinguir una página de otra si hay abiertas varias pestañas del mismo sitio. Un problema común es que el título sea el mismo en todas las páginas (ver Ejemplo 1-21). El resultado se muestra en la Figura 1-1.
Ejemplo 1-21. Mala práctica: Tres páginas diferentes con el mismo título
<!-- products.html --><title>Johanna’s Toy Store</title><!-- team.html --><title>Johanna’s Toy Store</title><!-- contact.html --><title>Johanna’s Toy Store</title>
Figura 1-1. Es imposible distinguir estas páginas mirando las pestañas
Utiliza títulos únicos para comunicar la finalidad de la página y mejorar la orientación (véase el Ejemplo 1-22 y el resultado en la Figura 1-2).
Ejemplo 1-22. Tres páginas diferentes, cada una con un título único
<!-- products.html --><title>Products - Johanna’s Toy Store</title><!-- team.html --><title>Our Team - Johanna’s Toy Store</title><!-- contact.html --><title>Get in Touch - Johanna’s Toy Store</title>
Figura 1-2. Mirando las pestañas, puedes saber de qué trata cada página
Esto se aplica a los sitios web con varias páginas, pero también a las SPA. Puede que tengas que dar pasos adicionales en una SPA , pero si el usuario navega por una ruta diferente, el título de la página también debe cambiar. Hidde De Vries explica cómo hacerlo en "Títulos de página accesibles en una Single Page App".
El título debe ser conciso
El título de debe ser conciso y describir con precisión la finalidad de la página. Es la primera información que recibe un usuario de lector de pantalla cuando accede a una página. No necesitan un resumen detallado del contenido de la página, sino una descripción sucinta.
Otra razón para limitar la longitud del título es que suele cortarse en las páginas de resultados de búsqueda a partir de una determinada longitud de caracteres (aproximadamente de 50 a 60 caracteres).
El título debe ser descriptivo
Cuando titules una página, hazlo pensando en el usuario. Aunque el SEO es importante, la experiencia del usuario lo es mucho más. El título debe describir el propósito de la página y no debe incluir términos de marketing o SEO únicamente para mejorar la clasificación de la página.
La información relevante es lo primero
El título de debe comenzar con el nombre de la página, seguido del nombre del sitio, empresa u organización, como se muestra en el Ejemplo 1-15. Poner primero la información relevante reduce la repetición para los usuarios de lectores de pantalla que visitan varias páginas de un sitio, porque obtienen primero los detalles específicos de la página. Esta forma de organizar el contenido facilita el escaneo y la identificación de las páginas cuando hay numerosas pestañas abiertas, como se muestra en la Figura 1-3.
Figura 1-3. El nombre de la página es la primera información de la pestaña del navegador
No pongas primero el nombre de la organización (como en el Ejemplo 1-23) porque la información relevante podría quedar cortada, como puedes ver en la Figura 1-4.
Ejemplo 1-23. Mala práctica: Nombre del sitio seguido del nombre de la página
<title>Johanna’s Toy Store - Products</title>
Figura 1-4. Con el nombre del sitio como primera información en la pestaña del navegador, en algunos casos se corta el nombre de la página
Información dependiente del contexto
A veces resulta útil añadir contexto o información adicional. Por ejemplo, si divides una página en varios pasos, el título debe incluir el paso actual. El ejemplo 1-17 muestra el título del tercero de los cuatro pasos de un proceso de pago. Si hay errores de validación en un formulario, puedes indicar el número de errores (ver Ejemplo 1-18). Para las páginas de resultados de búsqueda, puedes añadir el número de resultados o la página actual, como se muestra en en los Ejemplos 1-19 y 1-20.
1.3 Establecer la anchura de la ventana gráfica
Solución
Configura la metaetiqueta viewport de forma que te permita la máxima flexibilidad. Evita los ajustes restrictivos.
La etiqueta meta del Ejemplo 1-24 sirve para la mayoría de sitios y aplicaciones web. Es todo lo que necesitas para configurar los ajustes de la ventana gráfica y crear un sitio web flexible, adaptable y con capacidad de respuesta.
Ejemplo 1-24. La página utiliza la anchura disponible del dispositivo como anchura de la ventana gráfica
<metaname="viewport"content="width=device-width, initial-scale=1">
Hay propiedades o valores concretos que debes evitar.
Establecer el valor de la propiedad width a cualquier valor distinto de device-width puede causar problemas. Si la anchura definida de la ventana gráfica es mayor que la anchura disponible en la pantalla, el contenido puede desbordarse, provocando barras de desplazamiento horizontal . El Ejemplo 1-25 aplica una anchura explícita a la ventana gráfica.
Ejemplo 1-25. Mala práctica: Anchura de la ventana fijada a un valor absoluto
<metaname="viewport"content="width=500, initial-scale=1">
maximum-scale te permite limitar el nivel máximo de zoom, que es 10 por defecto en la mayoría de los navegadores. Si lo estableces en 1, estarás desactivando el zoom en algunos navegadores (ver Ejemplo 1-26).
Ejemplo 1-26. Mala práctica: Desactivar el zoom ajustando la escala máxima a 1
<metaname="viewport"content="width=device-width, maximum-scale=1, initial-scale=1">
El ajuste user-scalable define si se permite el zoom. Si se establece en no o 0, se desactiva el zoom, como se muestra en el Ejemplo 1-27.
Ejemplo 1-27. Mala práctica: Desactiva el zoom configurando user-scalable como "no".
<metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1">
Debate
Los usuarios deben poder personalizar su experiencia de navegación en función de sus preferencias y necesidades. Los navegadores ofrecen distintos ajustes y funciones para ello. La posibilidad de establecer tamaños de letra más grandes o de ampliar la página es esencial, pero muchos sitios web no permiten el zoom en los dispositivos portátiles.
Antes de que el diseño web adaptable se convirtiera en algo habitual, los sitios web se diseñaban para grandes puertos de visualización, a menudo utilizando valores de anchura fijos de como 960px o 1024px para el cuerpo o contenido principal de la página. Con el auge de los teléfonos inteligentes y otros dispositivos portátiles, esto se convirtió en un problema porque la anchura en píxeles de las pantallas de estos dispositivos solía ser mucho menor que 960px. El bloque contenedor inicial, el rectángulo en el que vive el elemento raíz (<html>), tiene las dimensiones de la ventana gráfica. Si la página es mayor que la ventana gráfica, esto puede dar lugar a envolturas de diseño no deseadas, contenido recortado y desagradables límites desplazables. Por eso los navegadores móviles suelen utilizar una anchura fija (normalmente 980px a 1024px) para el bloque contenedor inicial. El diseño resultante se reduce para ajustarse al espacio disponible en la pantalla. Esto mitiga los problemas, pero también significa que el tamaño en píxeles del CSS en estas páginas será mucho menor, obligando a los usuarios a hacer zoom.
En los sitios web adaptativos, esto no es un problema, ya que han sido creados para funcionar bien en diferentes ventanas gráficas. Sin embargo, tienes que cambiar la anchura fija del bloque contenedor en dispositivos móviles a una anchura relativa a las dimensiones de la ventana gráfica para que funcione bien con diseños adaptables. Puedes hacerlo utilizando la etiqueta viewport meta, como se ilustra en el Ejemplo 1-24.
width=device-width ajusta la anchura de la ventana gráfica a la anchura disponible del dispositivo.
initial-scale=1 garantiza que el nivel de zoom por defecto sea del 100%. Puede que éste no sea siempre el predeterminado en todos los navegadores. Por eso recomiendo establecerlo explícitamente.
El hecho de que una página sea responsive y esté optimizada para viewports pequeños no significa que los usuarios no quieran hacer zoom. Adrian Roselli enumera varias razones por las que la posibilidad de hacer zoom es esencial en su artículo "No desactives el zoom":
-
El texto puede ser demasiado pequeño para que el usuario pueda leerlo.
-
El usuario puede querer ver más detalles en una imagen.
-
Seleccionar palabras para copiar/pegar puede ser más fácil para los usuarios cuando el texto es más grande.
-
El usuario quiere recortar los elementos animados fuera de la vista para reducir las distracciones.
-
El desarrollador hizo un mal trabajo de diseño responsivo, y el usuario necesita hacer zoom sólo para utilizar la página.
-
Hay un error en el navegador que hace que el nivel de zoom por defecto sea extraño.
-
Puede ser confuso para los usuarios que el navegador interprete un gesto de pellizcar/extender como otra cosa.
Que los sitios web desactiven el zoom es un problema frecuente. Según el capítulo Accesibilidad del Almanaque Web 2022, el 23% de las páginas de inicio de escritorio y el 28% de las páginas de inicio para móviles intentan desactivar el zoom. El autor del informe utiliza el término intento, porque algunos navegadores, como Safari en iOS o Samsung Internet en Android, ignoran las propiedades maximum-scale=1 y user-scalable=no. Chrome y Firefox no lo hacen, pero los usuarios pueden forzar el zoom en la configuración del navegador. En Firefox, busca la configuración del navegador, selecciona "Accesibilidad" y activa "Zoom en todos los sitios web". En Chrome, busca la configuración del navegador, selecciona "Accesibilidad" y activa "Forzar activación del zoom".
Razones justificadas para desactivar el zoom
En el sitio web medio, no hay ninguna buena razón para desactivar el zoom. Lo mismo se aplica a los sitios web parecidos a aplicaciones nativas. Hay raras excepciones en las que los gestos para hacer zoom interferirían con la funcionalidad del sitio web. Un ejemplo sería un sitio que sólo contenga un mapa interactivo. Si ese es el caso, podría estar bien desactivar la función nativa de zoom, pero debes proporcionar una solución alternativa personalizada .
1.4 Optimizar el orden de renderizado
Problema
La cabecera de un documento puede contener varios elementos que sirven a diferentes propósitos: metaetiquetas, scripts, enlaces a otros recursos, etc. Pueden estar en cualquier orden, pero algunos elementos deben ir antes que otros para garantizar un buen rendimiento de la carga. Una carga ineficaz de los recursos impide que los usuarios obtengan la información rápidamente, si es que la obtienen.
Solución
El experto en rendimiento web Harry Roberts sugiere un orden específico de los elementos dentro de <head> para garantizar la mejor estrategia de carga posible, como se muestra en el Ejemplo 1-28.
Ejemplo 1-28. El orden ideal de los elementos de la <head>
<head><!-- Character encoding --><metacharset="UTF-8"><!-- Viewport meta tag --><metaname="viewport"content="width=device-width, initial-scale=1"><!-- CSP headers --><metahttp-equiv="Content-Security-Policy"content="upgrade-insecure-requests"><!-- Page title --><title>Johanna’s Toy Store</title><!-- preconnect --><linkrel="preconnect"href="#"/><!-- Asynchronous JavaScript --><scriptsrc=""async></script><!-- CSS that includes @import --><style>@import"file.css";</style><!-- Synchronous JavaScript --><scriptsrc=""></script><!-- Synchronous CSS --><linkrel="stylesheet"href="#"><!-- preload --><linkrel="preload"href="#"/><!-- Deferred JavaScript --><scriptsrc=""defer></script><scriptsrc=""type="module"></script><!-- prefetch / prerender --><linkrel="prefetch"href="#"/><linkrel="prerender"href="#"/><!-- Everything else (meta tags, icons, open graphs, etc.) --><metaname="description"content=""></head>
Debate
Existen distintos campos dentro del diseño y desarrollo web, como la accesibilidad, la usabilidad, la experiencia del usuario, el rendimiento y la seguridad. Todos ellos se centran en cosas diferentes, pero no son mutuamente excluyentes. La accesibilidad, por ejemplo, se solapa con todos ellos. Mejorar la accesibilidad de los campos de formulario puede redundar en una mejor experiencia de usuario para todos. Si un sitio web se carga lentamente, afecta a la experiencia de los usuarios y a la accesibilidad. Un sitio web que se carga durante demasiado tiempo o no se carga en absoluto con una conexión lenta no es accesible. Diseñar y construir sitios web accesibles significa crear experiencias inclusivas sin barreras que impidan a las personas interactuar con la web. Estas barreras incluyen las discapacidades físicas, temporales y situacionales y las restricciones socioeconómicas de hardware, ancho de banda y velocidad.
Conseguir el orden correcto de los elementos en <head> afecta al rendimiento en general, pero también afecta a la representación de elementos específicos que pueden contener información crítica para los usuarios de tecnología de asistencia. El HTML se analiza línea por línea, lo que significa que un navegador no sabe que existe la línea 4 cuando la línea 3 no ha terminado de analizarse. Si algo bloquea la visualización al principio de un documento, las líneas siguientes tienen que esperar hasta que el navegador haya terminado de analizar las líneas precedentes. Esto hace que el orden correcto de los elementos en <head> sea crucial para el rendimiento y la accesibilidad de la web.
Los expertos en rendimiento sugieren varias reglas y optimizaciones, entre ellas
-
Si algo no tiene que estar en
<head>, elimínalo o ponlo en<body>. Eso incluye scripts de baja prioridad, redireccionamientos o cualquier carga útil innecesaria. -
Autoaloja en la medida de lo posible y no dependas de redes de distribución de contenidos (CDN) de terceros. Harry Roberts explica por qué en su artículo "Autoaloja tus activos estáticos".
-
Valida tu código HTML, porque los elementos no válidos en
<head>pueden causar problemas de rendimiento. -
Los metadatos sobre la página, como la codificación de caracteres y la información sobre la ventana gráfica, van primero.
-
Nada que bloquee la renderización debe ir antes que
<title>. -
El JavaScript sincrónico es anterior al CSS, porque el CSS bloquea la ejecución del JavaScript posterior.
-
Evita
@importen CSS. -
Las metaetiquetas SEO y sociales van en último lugar.
Harry Roberts ha creado un archivo CSS llamado ct.css, también disponible como bookmarklet, que puedes utilizar para realizar pruebas con tus elementos <head> (véase la Figura 1-5).
Figura 1-5. ct.css mostrando mensajes en una página después de ejecutar pruebas
1.5 Estructura del documento
Solución
Utiliza puntos de referencia: regiones que representan la organización y estructura de una página web. Suelen identificar áreas a las que el usuario puede querer acceder rápidamente.
El Capítulo 2, "Estructuración de páginas", se centra en las regiones de página, pero también hay puntos de referencia comunes que utilizarás en todo tu sitio, como <header>, <main> y <footer>. Cada elemento de la página debe estar dentro de uno de estos puntos de referencia, como se muestra en el Ejemplo 1-29.
Ejemplo 1-29. Estructura ejemplar de una página web
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Products - Johanna’s Toy Store</title></head><body><header><ahref="/">Johanna’s Toy Store</a><navaria-label="Main"><ul><li><ahref="/home">Home</a></li><li><ahref="/products"aria-current="page">Products</a></li><li><ahref="/team">Team</a></li><li><ahref="/contact">Contact</a></li></ul></nav><formrole="search"><labelfor="search">Search</label><inputtype="text"id="search"></form></header><mainid="content"><h1>All products</h1></main><footer>©2024</footer></body></html>
La cabecera del sitio (banner de referencia).
La navegación principal (hito de navegación).
La búsqueda del sitio (hito de búsqueda).
El contenido principal (hito principal).
El pie de página del sitio (contentinfo landmark).
Debate
Utilizar elementos semánticos dentro de los componentes y regiones de una página es la base de cualquier sitio web accesible, pero los usuarios también pueden beneficiarse de grupos semánticos más amplios. La página debe comunicar cómo está estructurada y agrupar elementos comunes de todo el sitio y específicos de la página. Los puntos de referencia en HTML ayudan a ello.
Puedes definir puntos de referencia con los elementos HTML adecuados o utilizar el atributo role cuando no exista ningún elemento. Los elementos del Ejemplo 1-30 son semánticamente iguales.
Ejemplo 1-30. Dos puntos de referencia de banner
<!-- <header> with an implicit banner role --><header></header><!-- <div> with an explicit banner role --><divrole="banner"></div>
Consejo
La mayoría de los elementos semánticos de HTML transmiten dos informaciones: su función accesible y un nombre accesible. El rol define qué tipo de elemento es: un botón, un enlace, una imagen, etc. El nombre accesible es un texto mediante el cual el software puede identificar un componente, procedente del contenido textual del elemento, de otro elemento asociado como <label>, o de un atributo como aria-label, aria-labelledby, alt o title.
Sigue la primera regla de uso de las Aplicaciones de Internet Ricas Accesibles (ARIA) y prefiere los elementos con roles implícitos al uso del atributo role si el soporte del navegador lo permite. Los navegadores y lectores de pantalla más antiguos que no admiten elementos con roles implícitos de referencia necesitaban antes el rol explícito adicional, como se muestra en el Ejemplo 1-31, pero especificar ambos ya no es necesario.
Ejemplo 1-31. <header> con un rol explícito adicional de banner
<headerrole="banner"></header>
Hay distintos tipos de regiones que sirven para otros fines en contextos diferentes. La Tabla 1-2 enumera los elementos HTML, sus roles ARIA correspondientes y el contexto en el que se exponen como puntos de referencia.
| Elemento | Función ARIA | Condiciones |
|---|---|---|
|
banner |
Sólo en el contexto del elemento body; no cuando es descendiente de |
|
navegación |
|
|
principal |
|
|
región |
Cuando tenga un nombre accesible. |
|
formulario |
Cuando tenga un nombre accesible. |
|
busca en |
O forma con |
|
complementario |
|
|
contentinfo |
Sólo en el contexto del elemento body; no cuando es descendiente de |
Beneficios
En hay muchas razones para utilizar puntos de referencia. El resto de esta sección explicará varias de esas razones en detalle.
Navegación
Pantalla Los usuarios de lectores pueden saltar de un punto de referencia a otro mediante atajos de teclado o gestos, que proporcionan una forma cómoda de saltar a zonas concretas sin interactuar con el resto de la página (consulta la Tabla 1-3).
En VoiceOver en iOS, puedes seleccionar la opción "puntos de referencia" en el rotor, que te proporciona acceso directo a determinados elementos de la página, y utilizar los gestos de deslizar hacia arriba y hacia abajo para navegar entre los puntos de referencia. En TalkBack en Android, puedes establecer los controles de lectura en "puntos de referencia" y deslizar hacia arriba y hacia abajo para navegar. En NVDA en Windows, puedes pulsar D o Shift + D, y en JAWS en Windows, R y Shift + R para hacer lo mismo (ver Tabla 1-3).
| Lector de pantalla | Mando |
|---|---|
NVDA |
|
JAWS |
|
Narrador |
|
VoiceOver en iOS |
Rotor |
TalkBack en Android |
Controles de lectura |
Son sobre todo los usuarios de lectores de pantalla los que se benefician de tener puntos de referencia, pero también extensiones del navegador como "Navegación de puntos de referencia mediante teclado o ventana emergente" añaden atajos de teclado al navegador, facilitando el acceso a los puntos de referencia a los usuarios de que no son lectores de pantalla. Véase la Figura 1-6.
Visión general
Pantalla Los usuarios de lectores pueden listar todos los puntos de referencia de una página y acceder a ellos directamente (consulta la Tabla 1-4).
| Lector de pantalla | Mando |
|---|---|
NVDA |
|
JAWS |
|
VoiceOver en macOS |
Rotor |
Figura 1-6. El punto de referencia main en handbuch.wien.gv.at, resaltado por la extensión del navegador "Landmark Navigation".
Hitos específicos del lugar
Los tres hitos principales más relevantes son <header>, <main>, y <footer>.
banner hito
El <header>, con su función implícita banner, contiene principalmente contenido orientado al sitio y no específico de la página. Suele ser un logotipo, enlaces de salto, la navegación principal, navegaciones secundarias, un widget de búsqueda y otros contenidos relevantes y visibles en todas las páginas.
No todos los <header> son puntos de referencia. Si está anidado dentro de <article>, <aside>, <main>, <nav>, o <section>, es semánticamente similar a un <div> y ya no se expone como hito. Tener varios elementos header en una página está bien, pero sólo debes añadir un único hito banner.
Normalmente, encontrarás los puntos de referencia banner al principio de <body> en el documento. Visualmente, suele estar en la parte superior de la página. Es un patrón común, pero no una regla estricta; también puede parecer una barra lateral. La posición no afecta a su finalidad semántica. Que esté situado en un lateral no significa que su función tenga que cambiar.
hito principal
La función implícita main del elemento <main> representa el contenido principal de la página. Sólo debe haber un elemento principal visible en una página, y sus ancestros deben limitarse a html y body para garantizar una estructura jerárquicamente correcta. Si es necesario, es posible envolverlo en elementos <div>.
Si trabajas con una SPA con varios elementos <main> en una página, oculta todos los inactivos, como se muestra en el Ejemplo 1-32. Tener más de un hito principal visible y accesible en una página puede confundir a los usuarios y hacer que se pierdan contenido, porque normalmente esperan que haya sólo uno por página.
Ejemplo 1-32. Varios elementos main, pero sólo uno es visible
<mainhidden><h1>Home</h1></main><main><h1>Products</h1></main><mainhidden><h1>Team</h1></main><mainhidden><h1>Contact</h1></main>
punto de referencia contentinfo
La función implícita contentinfo del elemento <footer> también contiene contenido orientado al sitio. Suelen ser datos de copyright, navegaciones secundarias y otros enlaces.
Al igual que <header>, <footer> sólo es un punto de referencia en el contexto de <body>. Si está anidado dentro de <article>, <aside>, <main>, <nav>, o <section>, ya no es un hito. Tener varios elementos footer en una página está bien, pero sólo debes añadir un único hito contentinfo .
Get Recetario de accesibilidad web now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
