HTML semántico
El HTML semántico usa cada elemento según su significado. Un botón real aporta propiedades que un bloque de texto con estilo no obtiene automáticamente.
Utilizar los elementos según su función
El HTML semántico describe contenidos y controles mediante elementos HTML adecuados. Los encabezados estructuran el contenido, un enlace lleva a un destino y un botón ejecuta una acción. Así, los navegadores y las tecnologías de apoyo reciben información sobre el significado de la interfaz.
Para guardar una dirección en un portal de ejemplo corresponde un button. Un bloque div de aspecto idéntico no obtiene automáticamente ese significado ni el comportamiento de teclado habitual. Un elemento a con un href adecuado sirve para ir a la lista de direcciones.
CSS determina la presentación; aumentar el tamaño de un texto no lo convierte en encabezado. El HTML semántico es una base importante, pero por sí solo no garantiza una aplicación totalmente accesible. Las etiquetas, los estados y el comportamiento real también deben ser adecuados.
Fuentes
Términos relacionados
- ARIAARIA añade información sobre roles, estados y propiedades para las tecnologías de apoyo. El comportamiento anunciado debe implementarse realmente.
- Lector de pantallaUn lector de pantalla facilita el acceso al contenido digital mediante voz o braille. La estructura y las etiquetas dan sentido a los controles.
- Uso mediante tecladoEl uso mediante teclado permite completar tareas sin ratón. Las acciones deben ser accesibles siguiendo un recorrido comprensible.
- Orden del focoEl orden del foco determina el recorrido por los elementos que pueden recibirlo. Debe conservar el sentido y la operabilidad ante cambios dinámicos.
- Trampa de tecladoUna trampa de teclado deja la interacción atascada en una zona. La contención deliberada del foco en un diálogo necesita una salida operable con teclado.
- Enlace para saltar al contenidoUn enlace de salto evita la navegación repetida y lleva al contenido principal. El siguiente paso con el teclado también debe continuar en el lugar correcto.
Artículos sobre el tema
Diseño y UX con ASES
Experiencia de usuario, interfaces e imagen de marca