Técnica Técnicas generales WCAG 2.2
G140Separar la estructura del contenido de su aspecto visual
Nombre oficial en el W3C: Separar la información y la estructura de la presentación para permitir distintas presentaciones
En pocas palabras
La estructura (títulos, párrafos, listas, tablas) se marca con los elementos pensados para ello. El aspecto (letra, color, tamaño, posición) se define aparte, por ejemplo con CSS. Así la estructura no depende de cómo se vea, y los productos de apoyo pueden usarla.
Por qué es importante
Un texto grande y en negrita parece un título, pero para un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) es un párrafo más. Si se marca como título de verdad, la persona puede saltar de un título a otro o pedir la lista de apartados.
Separar las dos capas también permite cambiar el aspecto sin perder información. Por ejemplo, alguien con baja visión puede usar sus propios colores y tamaños de letra.
Cómo se hace
- Use los elementos HTML según su función:
h1-h6para títulos,ppara párrafos,ul/olpara listas,tablepara datos en tabla. - Lleve todo el diseño a hojas de estilo CSS. No use etiquetas o atributos de formato, como
fontoalign. - No elija un elemento por su aspecto. Si un título debe verse pequeño, cámbielo con CSS, sin cambiar el nivel.
- Use clases con nombres que expliquen la función, como
avisoodestacado. - En PDF, genere un documento etiquetado (PDF con etiquetas que indican títulos, listas y tablas).
Cómo comprobarlo
- Desactive los estilos de la página (por ejemplo, con una extensión del navegador) y compruebe que se siguen distinguiendo títulos, listas y párrafos.
- Revise el código: los títulos, listas y tablas deben usar sus elementos propios.
- Busque formato dentro del HTML, como
fonto estilos en línea que simulan estructura. - En un PDF, abra el panel de etiquetas y compruebe que la estructura está marcada.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica G140 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Cualquier tecnología
Descripción
El objetivo de esta técnica es facilitar la interacción de las tecnologías de asistencia con el contenido separando lógicamente la codificación estructural del contenido de la codificación de su presentación. La codificación estructural es la indicación de elementos como encabezados, párrafos, listas, tablas, etc., y se realiza utilizando las funciones de la tecnología reservadas para ese fin. En cambio, la codificación de la presentación es la indicación de efectos de formato, como el tipo de letra, el color, el tamaño, la posición, los bordes, etc., y también se apoya en funciones de la tecnología.
Aunque las características de presentación sugieren visualmente una estructura (los usuarios pueden reconocer encabezados, párrafos, listas, etc. a partir de las convenciones de formato empleadas), estas características no codifican la estructura con la suficiente claridad para que las tecnologías de asistencia puedan interactuar eficazmente con la página. Proporcionar capas separadas de estructura, funcionalidad y presentación permite que la semántica que el formato da a entender pase a ser determinable por software a través de la capa de estructura.
Seguir esta técnica permite a los agentes de usuario:
- Realizar transformaciones significativas de la estructura basadas en la estructura existente del contenido, como reordenar secciones o generar una lista de secciones o una lista de enlaces.
- Admitir la interacción con el contenido basada en características estructurales que las tecnologías de asistencia no pueden determinar solo a partir de la información de presentación. Por ejemplo, puede ser deseable ofrecer interacciones especiales con las listas, como indicar el número de elementos o saltar al final, pero esto solo es posible si la estructura de la lista está codificada además de su presentación.
- Modificar la presentación del contenido sustituyendo las reglas de presentación por otras alternativas asociadas a las características estructurales.
Ejemplos
HTML con CSS
Un documento HTML utiliza las características estructurales de HTML, como párrafos, listas, encabezados, etc., y evita las características de presentación, como los cambios de fuente, las indicaciones de maquetación, etc. Se utiliza CSS para dar formato al documento en función de sus propiedades estructurales. Unos atributos «class» bien pensados en el HTML amplían la semántica del marcado estructural cuando es necesario, para permitir un formato más flexible con CSS. Las tecnologías de asistencia pueden sustituir o ampliar el CSS para modificar la presentación, o ignorar el CSS e interactuar directamente con la codificación estructural.
PDF etiquetado
Un documento PDF consiste principalmente en el contenido con la información de formato incrustada. La información sobre la estructura se proporciona en una sección independiente del documento mediante etiquetas similares a las de XML; es lo que se denomina «PDF etiquetado». Las tecnologías de asistencia pueden utilizar la información de estas etiquetas para realizar transformaciones significativas de la estructura (p. ej., generar una lista de secciones) o para admitir la interacción con el contenido basada en características estructurales (p. ej., saltar al inicio de los formularios).
Pruebas
Procedimiento
- Examinar la codificación de un documento.
- Comprobar que la información estructural y la funcionalidad se proporcionan explícitamente y están separadas lógicamente de la información de presentación.
Resultados esperados
- La comprobación n.º 2 es verdadera
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G140 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.