El contenido bien estructurado permite una navegación y procesamiento más
eficientes. Use HTML y WAI-ARIA para mejorar la navegación y la orientación en
páginas web y en aplicaciones
Regiones de una página
Las regiones de las páginas web tendrán que estar definidas por las siguientes
etiquetas:
-
Header:
Donde puede llegar a contener el logotipo, funciones de búsqueda y opciones de
navegación.
-
Nav:
Va a contener menú de navegación.
-
Main:
Identificará el contenido principal de la página.
-
Aside:
Va a contener regiones que admitan el contenido principal, pero que sean
secciones separadas y significativas por sí mismas.
-
Article:
Encierra un bloque de contenido relacionado que tiene sentido por sí solo sin el
resto de la página (por ejemplo, una sola publicación de blog).
-
Section:
Es similar a article, pero sirve más para agrupar una sola parte de la página
que constituye una sola pieza de funcionalidad (p. ej., un minimapa o un
conjunto de títulos y resúmenes de artículos) o un tema. Se considera una buena
práctica comenzar cada sección con un encabezado; también tenga en cuenta que
puede dividir article en diferentes sections, o sections en diferentes articles,
según el contexto.
-
Footer:
Similar al Header, en donde también puede contener información sobre la página.
Proporcione etiquetas para distinguir dos regiones de página del mismo tipo, como
los menús "navegación principal" y "navegación secundaria" utilizando un
<nav>
elemento en la misma página.
Use
aria-labelledby
para señalar un elemento existente por su (único) id. La etiqueta de la región es
el contenido del elemento referenciado. Cada elemento puede ser una etiqueta de
esta manera. Las etiquetas deben ser cortas y descriptivas
Encabezados
Los encabezados comunican la organización del contenido en la página. Los
navegadores web, los complementos y las tecnologías de asistencia pueden usarlos para proporcionar
navegación en la página.
El título más importante tiene el rango 1
<h1>, el
título menos importante rango 6 <h6>. Los encabezados con un rango
igual o superior
comienzan una nueva sección, los encabezados con un rango inferior comienzan nuevas subsecciones que
forman parte de la sección de mayor clasificación.
Saltarse las filas de encabezado puede ser confuso y debe evitarse siempre
que sea posible: Asegúrese de que una <h2>es no seguida
directamente por una
<h4>, por ejemplo. Está bien omitir filas cuando se cierran
subsecciones, por
ejemplo, al <h2> comenzar una nueva sección, puede seguir una
<h4> mientras cierra la sección anterior.
No use encabezados en imágenes o cualquier otro elemento
que no sea un titular.
No use las etiquetas de encabezados para dar estilo a los
títulos, para estilar se debe aplicar una clase a cada encabezado
Estructura de contenidos
Marque el contenido del sitio web semánticamente, de modo que el sitio web sea extensible. La
semántica válida crea contenido que es reutilizable y más significativo para las tecnologías de
asistencia.
- Article: El
<article> elemento HTML5
representa una
composición completa o autónoma en la página web.
- Section: El
<section> elemento HTML5 marca
una región general
de una página web o un artículo. Se utiliza para la agrupación temática de contenido.
- Párrafos: Use el elemento de párrafo
<p> para
marcar párrafos
de texto. El estilo consistente de los párrafos mejora la legibilidad del texto. También brinda a
los usuarios más control al personalizar su vista.
- Listas: Use diferentes tipos de listas para agrupar información de acuerdo con su
naturaleza para proporcionar orientación a los usuarios.
- Las listas desordenadas se utilizan cuando el orden de los elementos no es relevante. Los
elementos de la lista en listas desordenadas están marcados con una viñeta.
- Las listas ordenadas se utilizan para obtener información secuencial y el navegador las
enumera automáticamente.
- Las listas de descripción son grupos de términos y descripciones relacionados que están
conectados mediante programación.
Los elementos de lista individuales pueden contener una variedad de elementos HTML, incluidos
párrafos, encabezados, elementos de formulario y otras listas (anidadas).
Menús
Los menús de navegación reflejan la estructura subyacente de los sitios web. Los menús de
aplicaciones proporcionan acceso a la funcionalidad esencial de una aplicación. Por lo tanto, estos
son partes críticas de las páginas web/aplicaciones y requieren una atención particular durante el
diseño y el desarrollo. El contenido del sitio web semánticamente, de modo que el sitio web sea
extensible. La semántica válida crea contenido que es reutilizable y más significativo para las
tecnologías de asistencia.
- Los usuarios del lector de pantalla y del teclado se benefician de la interoperabilidad y el
marcado del teclado que les permite operar los menús de diferentes maneras.
- Los usuarios con dificultades motoras finas y los usuarios de pantalla táctil requieren objetivos
más grandes para hacer clic o tocar. En los menús desplegables, los submenús no deberían desaparecer
inmediatamente después de que el mouse haya abandonado el área en la que se puede hacer clic.
- Las personas con atención limitada o memoria a corto plazo se benefician de menús claros y
distintos con estados fácilmente identificables, como la página actual.
Identifique el menú usando el <nav> de HTML5 para permitir a los
usuarios acceder
directamente al menú.
Transmita la estructura del menú mediante el uso de una lista. Dicha información estructural permite
que las tecnologías de asistencia anuncien la cantidad de elementos en el menú y proporcionen la
funcionalidad de navegación correspondiente.
Un estilo claro y consistente permite a los usuarios encontrar y reconocer menús más rápidamente. Tal
estilo incluye consistencia en el comportamiento, apariencia y ubicación relativa en las páginas de un
sitio web.
Ubicación
Muestra el menú donde el público objetivo del sitio web lo espera. Por ejemplo, en los sitios web, el
menú de navegación principal suele ubicarse verticalmente a la izquierda de las páginas (en idiomas de
izquierda a derecha) u horizontalmente en la parte superior. Los menús de aplicaciones generalmente se
esperan horizontalmente en la parte superior.
Identificación
Asegúrese de que los menús y sus elementos sean identificables como tales. Además del marcado
estructural, el esquema de color es necesario para comunicar visualmente la presencia de menús y
elementos.
Legibilidad
Asegure el tamaño apropiado de los menús y elementos del menú para que se ajusten a todo el texto. El
tamaño del menú también debe adaptarse a diferentes tamaños de texto, para acomodar idiomas con
palabras más largas y personas que necesitan texto más grande. Siempre que sea posible, evite todo el
texto en mayúscula, los saltos de línea y la separación silábica, ya que a menudo son molestos y
difíciles de leer.
Tamaño
Proporcione suficiente espacio en blanco, como relleno, para apoyar a las personas con destreza
reducida y pequeñas pantallas táctiles en dispositivos móviles. Al mismo tiempo, asegúrese de que los
menús no se superpongan con otros contenidos de la página cuando los usuarios aumenten el tamaño del
texto o amplíen la página.
Imágenes
Las imágenes deben tener alternativas de texto que describan la información o función representada
por ellas. Esto asegura que las imágenes puedan ser utilizadas por personas con diversas
discapacidades.
El autor debe determinar la alternativa de texto, según el uso, el contexto y el contenido de la
imagen, y en caso de que la imagen no sume valor informativo el atributo alt deberá estar vacío para
que pueda ser ignorados por las tecnologías de asistencia, como los lectores de pantalla. ( alt=”” ,
sin espacios entre las comillas).
Algunos ejemplos de decisiones sobre texto alternativo:
- La imagen contiene texto y el texto también está presente como texto real cercano.
Usa un
atributo alt vacío.
- La imagen contiene texto y el texto se muestra para efectos visuales.
Usa un atributo alt
vacío.
- La imagen contiene texto y el texto tiene una función específica, por ejemplo, es un icono.
Usa
el atributo alt para comunicar la función de la imagen.
- La imagen contiene texto y el texto en la imagen no está presente de otra manera.
Usa el
atributo alt para incluir el texto de la imagen.
- Se utiliza la imagen en un enlace o un botón, y sería difícil o imposible entender qué hace el
enlace o el botón, si la imagen no estuviera allí.
Usa el atributo alt para comunicar el destino
del enlace o acción tomada.
- La imagen aporta significado a la página o contexto actual y es un simple gráfico o
fotografía.
Use una breve descripción de la imagen de una manera que transmita ese significado en
el atributo alt.
- La imagen aporta significado a la página o contexto actual y es gráfico o información
compleja.
Incluya la información contenida en la imagen en otra parte de la página.
- La imagen aporta significado a la página o contexto actual y muestra contenido que es redundante
para el texto real cercano.
Usa un atributo alt vacío.
- La imagen es puramente decorativa o no está destinada al usuario.
Usa un atributo alt vacío.
Carousel de imágenes (slider)
- Los usuarios deben poder pausar el movimiento del carousel porque puede ser demasiado rápido o
distraer, lo que dificulta la lectura del texto.
- Toda la funcionalidad, incluida la navegación entre elementos de carousel, debe ser operable por
teclado.
- Los cambios en los elementos del carousel deben comunicarse a todos los usuarios, incluidos los
usuarios de lectores de pantalla.
- La posición del teclado ("foco") se gestiona de manera razonable y comprensible.
Contraste
Se debe proporcionar suficiente contraste entre el texto y su fondo para que pueda ser leído por
personas con una visión moderadamente baja. Para poder cumplir con este requerimiento se debe
proporcionar un contraste de al menos 4,5:1 excepto para los siguientes casos:
- Textos grandes: 3:1
- Incidental: No tienen requisitos de contraste.
- Logotipos: No tienen requisitos de contraste.
