Descubra los conceptos básicos de accesibilidad en HTML
Es importante que diseñemos nuestro HTML teniendo en cuenta la accesibilidad.
Tener HTML accesible significa que las personas con discapacidades pueden usar la Web. Hay usuarios totalmente ciegos o con problemas visuales, personas con problemas de audición y una multitud de otras discapacidades diferentes.
Lamentablemente este tema no toma la importancia que necesita, y no parece tan interesante como otros.
¿Qué pasa si una persona no puede ver tu página, pero aun así quiere consumir su contenido? En primer lugar, ¿cómo lo hace? No puede usar el mouse, usa algo llamado lector de pantalla . No tienes que imaginarlo. Puedes probar uno ahora: Google proporciona la extensión gratuita ChromeVox para Chrome . La accesibilidad también debe ocuparse de permitir que las herramientas seleccionen elementos o naveguen por las páginas fácilmente.
Las páginas web y las aplicaciones web no siempre se crean teniendo en cuenta la accesibilidad como uno de sus principales objetivos, y puede que la versión 1 que se lanza no sea accesible, pero es posible hacer que una página web sea accesible después del hecho. Cuanto antes mejor, pero nunca es demasiado tarde.
Es importante y en mi país, los sitios web creados por el gobierno u otras organizaciones públicas deben ser accesibles.
¿Qué significa que un código HTML sea accesible? Permítanme ilustrarles los aspectos principales que deben tener en cuenta.
Nota: hay otras cosas de las que hay que ocuparse, que podrían incluirse en el tema CSS, como los colores, el contraste y las fuentes, o cómo hacer que las imágenes SVG sean accesibles . No hablo de eso aquí.
Utilice HTML semántico
El HTML semántico es muy importante y es uno de los aspectos principales que debes tener en cuenta. Permíteme ilustrar algunos escenarios comunes.
Es importante utilizar la estructura correcta para las etiquetas de encabezado. La más importante es h1
, y se utilizan números más altos para las menos importantes, pero todos los encabezados del mismo nivel deben tener el mismo significado (piense en ello como una estructura de árbol)
h1h2h3h2h2h3h4
Utilice strong
and em
en lugar de b
and i
. Visualmente se ven iguales, pero los primeros 2 tienen más significado asociado a ellos. b
and i
son más elementos visuales.
Las listas son importantes. Un lector de pantalla puede detectar una lista y ofrecer una descripción general, para luego permitir que el usuario elija si desea ingresar a la lista o no.
Una tabla debe tener una caption
etiqueta que describa su contenido:
table captionDogs age/caption tr thDog/th thAge/th /tr tr tdRoger/td td7/td /tr/table
Usar altatributos para imágenes
Todas las imágenes deben tener una alt
etiqueta que describa el contenido de la imagen. No es solo una buena práctica, sino que lo exige el estándar HTML y el HTML sin ella no se valida.
img src="dog.png" alt="picture of my dog"
También es bueno para los motores de búsqueda, si eso es un incentivo para agregarlo.
Utilice el roleatributo
El role
atributo le permite asignar roles específicos a los distintos elementos de su página.
Puede asignar muchos roles diferentes: complementario, lista, elemento de lista, principal, navegación, región, pestaña, alerta, aplicación, artículo, banner, botón, celda, casilla de verificación, información de contenido, diálogo, documento, feed, figura, formulario, cuadrícula, celda de cuadrícula, encabezado, img, cuadro de lista, fila, grupo de filas, búsqueda, interruptor, tabla, panel de pestañas, cuadro de texto, temporizador. Juegos porno
Son muchas y para la referencia completa de cada una de ellas te dejo este enlace de MDN . Pero no necesitas asignar un rol a cada elemento de la página. Los lectores de pantalla pueden inferir a partir de la etiqueta HTML en la mayoría de los casos. Por ejemplo, no necesitas agregar una etiqueta de rol a las etiquetas semánticas como nav
, button
, form
.
Tomemos nav
como ejemplo la etiqueta. Puedes usarla para definir la navegación de la página de la siguiente manera:
nav ul lia href="/"Home/a/li lia href="/blog"Blog/a/li /ul/nav
Si te obligaran a usar una div
etiqueta en lugar de nav
, usarías el navigation
rol:
div role="navigation" ul lia href="/"Home/a/li lia href="/blog"Blog/a/li /ul/div
Así que aquí tienes un ejemplo práctico: role
se utiliza para asignar un valor significativo cuando la etiqueta aún no transmite el significado.
Utilice el tabindexatributo
El tabindex
atributo permite cambiar el orden en el que al presionar la tecla Tab se seleccionan los elementos “seleccionables”. De manera predeterminada, solo los enlaces y los elementos de formulario son “seleccionables” mediante la navegación con la tecla Tab (y no es necesario configurarlos tabindex
).
Agregar tabindex="0"
hace que un elemento sea seleccionable:
div tabindex="0".../div
Usar tabindex="-1"
en su lugar elimina un elemento de esta navegación basada en pestañas y puede resultar bastante útil.
Utilice los ariaatributos
ARIA es un acrónimo que significa Aplicaciones de Internet Enriquecidas Accesibles y define la semántica que se puede aplicar a los elementos.
etiqueta aria
Este atributo se utiliza para agregar una cadena para describir un elemento.
Ejemplo:
p aria-label="The description of the product".../p
Utilizo este atributo en la barra lateral de mi blog, donde tengo un cuadro de entrada para búsqueda sin una etiqueta explícita, ya que tiene un atributo de marcador de posición.
aria-etiquetadapor
Este atributo establece una correlación entre el elemento actual y el que lo etiqueta.
Si sabes cómo input
se puede asociar un elemento a otro label
elemento, es similar.
Pasamos el id del elemento que describe el elemento actual.
Ejemplo:
h3The description of the product/h3p aria-labelledby="description".../p
aria-descrita por
Este atributo nos permite asociar un elemento con otro elemento que sirve como descripción.
Ejemplo:
button aria-describedby="payNowDescription" Pay now/buttondivClicking the button will send you to our Stripe form!/div
Utilice aria-hidden para ocultar contenido
Me gusta que mis sitios tengan un diseño minimalista. Mi blog, por ejemplo, está compuesto principalmente de contenido, con algunos enlaces en la barra lateral. Sin embargo, algunas cosas de la barra lateral son solo elementos visuales que no aportan nada a la experiencia de una persona que no puede ver la página, como la imagen de mi logotipo o el selector de tema oscuro/brillante.
Agregar el aria-hidden="true"
atributo indicará a los lectores de pantalla que ignoren ese elemento.
Dónde aprender más
Esta es solo una introducción al tema. Para aprender más, recomiendo estos recursos:
- https://www.w3.org/TR/WCAG20/
- https://webaim.org
- https://developers.google.com/web/fundamentals/accessibility/
Tips de HTML
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Accesibilidad en la Web
Utilice HTML semánticoUsar altatributos para imágenesUtilice el roleatributoUtilice el tabindexatributoUtilice los ariaatributosDónde aprender más
programar
es
https://aprendeprogramando.es/static/images/programar-accesibilidad-en-la-web-2133-0.jpg
2025-01-22

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente