Accesibilidad en la Web

 

 

 

Accesibilidad en la web 1

 

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 strongand emen lugar de band i. Visualmente se ven iguales, pero los primeros 2 tienen más significado asociado a ellos. band ison 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 captionetiqueta 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 altetiqueta 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 roleatributo 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 navcomo 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 divetiqueta en lugar de nav, usarías el navigationrol:

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: rolese utiliza para asignar un valor significativo cuando la etiqueta aún no transmite el significado.

Utilice el tabindexatributo

El tabindexatributo 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 inputse puede asociar un elemento a otro labelelemento, 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:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. 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

 

Accesibilidad en la web 1
Accesibilidad en la web 1

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

 

 

Update cookies preferences