HTML
Tutorial HTML: Atributos de ARIA
HTML ARIA: accesibilidad y etiquetas. Aprende a mejorar la accesibilidad en HTML utilizando etiquetas ARIA con ejemplos detallados.
Aprende HTML GRATIS y certifícateLos Atributos de ARIA (Accessible Rich Internet Applications) en HTML son una serie de características especiales que pueden ser añadidas a cualquier marcado con el objetivo de mejorar la accesibilidad. Estos atributos proporcionan información adicional acerca de los widgets, estructuras y comportamientos de una interfaz para facilitar la interacción de las personas con discapacidad.
ARIA consta de tres características principales: roles, estados y propiedades.
- Los roles definen qué tipo de widget es un elemento (como 'botón', 'barra de progreso') o la estructura de la página (como 'navegación', 'banner').
- Las propiedades definen las características que son esenciales para el comportamiento o el significado de un elemento pero que no pueden determinarse a partir de la semántica HTML nativa (como 'requerido', 'posee elementos emergentes').
- Los estados son como las propiedades, pero su valor puede cambiar debido a la interacción del usuario (como 'seleccionado', 'desactivado').
A continuación se proporciona un ejemplo de cómo estos atributos podrían ser utilizados en un menú de navegación:
<nav role="navigation">
<ul role="menubar">
<li role="menuitem" aria-haspopup="true" aria-expanded="false">
Archivo
<ul role="menu">
<li role="menuitem">Nuevo</li>
<li role="menuitem">Abrir</li>
<li role="menuitem">Guardar</li>
</ul>
</li>
<li role="menuitem" aria-haspopup="true" aria-expanded="false">
Editar
<ul role="menu">
<li role="menuitem">Cortar</li>
<li role="menuitem">Copiar</li>
<li role="menuitem">Pegar</li>
</ul>
</li>
</ul>
</nav>
En este ejemplo, se ha asignado el rol navigation
a la etiqueta <nav>
para indicar que se trata de una sección de navegación principal. Los roles de menubar
, menu
y menuitem
se usan para estructurar el menú y sus elementos. Los atributos aria-haspopup
y aria-expanded
indican que el elemento del menú tiene un submenú y si el submenú está actualmente expandido o no.
Es importante destacar que los atributos ARIA no afectan la funcionalidad básica de los elementos HTML. No hacen que un elemento se comporte de cierta manera; sólo proporcionan información adicional a los lectores de pantalla y otras tecnologías de asistencia. Por lo tanto, siempre es crucial garantizar que la funcionalidad básica de una página web sea accesible sin depender únicamente de ARIA.
Por último, se debe tener en cuenta que el uso inadecuado de ARIA puede obstaculizar en lugar de ayudar a la accesibilidad. Por tanto, siempre se recomienda usar HTML semántico nativo siempre que sea posible, y solo recurrir a ARIA cuando el comportamiento o la información requerida no se puedan lograr de otra manera.
Ejercicios de esta lección Atributos de ARIA
Evalúa tus conocimientos de esta lección Atributos de ARIA con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de HTML
Accede a todas las lecciones de HTML y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Html
Introducción Y Entorno
Doctype
Sintaxis Y Estructura
Elementos Y Etiquetas
Sintaxis Y Estructura
Atributos
Sintaxis Y Estructura
Anidación De Etiquetas
Sintaxis Y Estructura
Comentarios
Sintaxis Y Estructura
Encabezados (H1-h6)
Textos Y Enlaces
Enlace (A)
Textos Y Enlaces
Párrafo (P)
Textos Y Enlaces
Listas (Ul, Ol, Li)
Textos Y Enlaces
Imagen (Img)
Textos Y Enlaces
División (Div)
Estructura De Página
Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)
Estructura De Página
Tablas (Table, Tr, Td, Th)
Estructura De Página
Formularios (Form, Input, Select, Textarea, Button)
Estructura De Página
Imágenes Vectoriales (Svg)
Elementos Multimedia
Incrustación De Contenido (Iframe)
Elementos Multimedia
Audio (Audio)
Elementos Multimedia
Video (Video)
Elementos Multimedia
Estilo Incorporado (Style)
Metadatos Y Estilización Incorporada
Metadatos (Meta, Title, Link)
Metadatos Y Estilización Incorporada
Atributos De Aria
Metadatos Y Estilización Incorporada
Navegación Por Teclado
Metadatos Y Estilización Incorporada
Contraste Y Legibilidad
Características Avanzadas Y Optimización
Validación De Html
Características Avanzadas Y Optimización
Compatibilidad Con Navegadores
Características Avanzadas Y Optimización
Optimización De La Carga De La Página (Lazy Loading)
Características Avanzadas Y Optimización
Certificados de superación de HTML
Supera todos los ejercicios de programación del curso de HTML y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el propósito de ARIA y su importancia en la accesibilidad web.
- Aprender cómo aplicar roles, estados y propiedades de ARIA para mejorar la accesibilidad en el marcado HTML.
- Identificar situaciones adecuadas para utilizar ARIA y cómo evitar su uso inadecuado.
- Adquirir conocimientos sobre la interacción entre ARIA y tecnologías de asistencia, como lectores de pantalla, para garantizar una experiencia accesible para personas con discapacidades.
- Reconocer la necesidad de priorizar el uso de HTML semántico y estructurado, y utilizar ARIA como un complemento cuando no se puede lograr la accesibilidad adecuada mediante HTML nativo.