Los sitios web deben ser accesibles para todos. Esto es lo que necesita saber.

Crear una página web no es solo crear una página web. Un aspecto importante del desarrollo front-end es garantizar que las interfaces de usuario sean accesibles para todos en Internet, incluidas las personas con discapacidades visuales y auditivas. Tienes que escribir tu código con estas personas en mente. ¿Cómo le da a las personas con discapacidades visuales el mismo acceso a su sitio web que a las personas sin discapacidades visuales? Lee este articulo para saber.

¿Por qué los desarrolladores deberían preocuparse por la accesibilidad web?

La accesibilidad web gira en torno a la idea de que todos deben tener el mismo acceso a la web, independientemente de cualquier discapacidad o discapacidad. Tener un sitio web accesible facilita llegar a un público más amplio (alrededor del 16% del mundo sufre de una u otra discapacidad).

La accesibilidad digital no debería ser una opción para desarrolladores. Es una necesidad para cualquier marca profesional. Esto se toma en serio: según lo informado por

instagram viewer
Variedad, alguien demandó a The Pokémon Company en 2019 debido a un sitio web no accesible.

Accesibilidad web con HTML

En HTML, existen reglas para garantizar el desarrollo de sitios web accesibles. Esta sección explicará algunas de esas reglas.

Usar elementos semánticos

Los elementos semánticos en HTML son elementos que tienen significados. En HTML5, hay alrededor de 100 elementos. Algunos elementos, como y, no son semánticos, mientras que otras etiquetas HTML son semánticas. Aunque puede ser imposible dejar de usar estos elementos no semánticos, es importante incorporar tantos elementos semánticos como puedas en tu trabajo. Aquí hay una lista de elementos semánticos populares:

Considere este ejemplo de Taaskly:

Un vistazo a la imagen de arriba revelará los siguientes elementos:

  • un encabezado
  • Una imagen
  • Un párrafo
  • tres botones

Es fácil suponer que los desarrolladores usaron etiquetas para organizar los elementos en la pantalla. Con una mirada más cercana a los códigos, observará que en su lugar utilizaron seis etiquetas semánticas. El código simplificado se ve así:

<sección>
<imagenorigen="/héroe.png"alternativa="héroe">
<artículo>
<h1>Encuentre los productos y servicios adecuados en el momento adecuado.h1>
<pag>
 Calzado artesanal, arreglo de cabello, administrador de redes sociales, envío de mandados, fuente de ingresosb>— lo que sea, Taaskly lo consiguió. Encuentre todos los productos o servicios que necesita hoy cuando se registre y use Taaskly. 
pag>
<ahref="/principal/casa">Subcontratar una tareaa>
<ahref="/principal/servicios"> Encuentre un servicioa>
<ahref="/principal/mercado" >Encuentra una tiendaa>
artículo>
sección>

Desde el fragmento de código HTML, puede observar lo siguiente:

  1. Las imágenes, el texto y los botones están dentro de un elemento.
  2. El elemento divide equitativamente el y elementos.
  3. El elemento sostiene el, , y elementos.
  4. Los botones están codificados como elementos; por lo tanto, son enlaces, no botones. Como regla general, siempre use enlaces para dirigir al usuario a otra página o vista, y use botones cuando solo quiera que el usuario realice una acción en la misma vista. Ver Página de botones de Angular para más información sobre esto.

Use puntos de referencia para proporcionar una estructura de página clara

Los puntos de referencia son etiquetas semánticas que ayudan a los usuarios invidentes a navegar por una página web con lectores de pantalla. Con puntos de referencia, es fácil definir diferentes partes de una página web. sitio web de Apple utiliza puntos de referencia.

La imagen de arriba muestra cuatro puntos de referencia diferentes. Puedes usar el Perspectivas de accesibilidad extensión para visualizar estos puntos de referencia.

En la imagen, podemos deducir una en la parte superior, un que contiene un, y un elemento. Cabe destacar que la imagen muestra "navegación", "región", y "información de contenido". Estos se conocen como los roles, que veremos más adelante.

Siempre que tenga que utilizar varios puntos de referencia para una página, diferencie siempre mediante una etiqueta. Por ejemplo, si usa varios elementos como los que tiene Apple, hay que etiquetarlos. Debes etiquetarlos con el etiqueta aria atributo. Así que puedes escribir algo como cualquiera de estos:

<navegaciónetiqueta aria = "global">
<navegaciónetiqueta aria = "navegación local">
<navegaciónetiqueta aria = "directorio de manzanas">

El uso de etiquetas puede ayudar a los lectores de pantalla a saltar a cualquier navegación.

Utilizar atributos de rol, nombre y valor

A veces, puede ser imposible usar elementos HTML con funciones de accesibilidad integradas. Tales casos pueden ser cualquiera de estos dos:

  1. No hay ningún elemento HTML nativo para lo que desea lograr. Por ejemplo, si tiene que usar un porque ningún otro elemento parece encajar en el papel.
  2. No puede utilizar elementos semánticos debido a problemas técnicos. Si usa un marco que usa cuando hubiera sido mejor usar, será su deber definir un control personalizado.

Para definir un control personalizado, necesita un rol, un nombre y un valor (a veces) para su elemento.

Role

Por defecto, un elemento tiene la función de navegación, mientras que un elemento El elemento tiene el rol de banner. Solo debe usar estos elementos para los fines previstos para ayudar a las tecnologías de asistencia a comprender la estructura de una página web. Si tiene que usar uno en lugar del otro, debe especificar el rol de esta manera:

<encabezamientorole = "navegación">
<navegaciónrole = "bandera">
<divisiónrole = "navegación">

Nombre

Un nombre es un texto descriptivo o una etiqueta asociada a un elemento HTML. La forma más fácil de un nombre es el texto de un elemento. Aquí hay un ejemplo:

<divisiónrole = "botón">¡Haz click en mi!división>

En el fragmento anterior, "¡Haz click en mi!" es el nombre del elemento. También se conoce como el nombre accesible.

Para elementos como navegación, desplegables, etc., asignar un nombre es más complejo que en el ejemplo anterior. Es diferente porque estos elementos tienen elementos secundarios en ellos. Para asignar un nombre a la navegación anterior, utilice el etiqueta aria atributo. Mira este ejemplo:

<navegaciónrole = "navegación"etiqueta aria = "navegación global">...navegación>

Debe tener en cuenta que un nombre atributo es diferente de un nombre accesible. Este fragmento de código da una mejor comprensión:

 atributo de nombre 
<navegaciónrole = "navegación"nombre = "navegación global">...navegación>
 nombre accesible 
<navegaciónrole = "navegación"etiqueta aria = "navegación global">...navegación>

Ver Artículo de TGPi sobre nombres accesibles para obtener una comprensión más profunda de esto.

Valor

En HTML, el atributo de valor puede proporcionar información adicional sobre un elemento. Los valores proporcionan información sobre el estado del componente para componentes personalizados como acordeones. Por ejemplo, un acordeón puede abrirse o cerrarse.

Puede agregar valor a sus elementos de varias maneras. Este fragmento muestra algunas de las formas en que puede hacerlo:

 aria-valorahora 
valor
<aportetipo="caja"nombre="producto[]"valor="1">

Priorizar la accesibilidad web para una experiencia en línea inclusiva

La accesibilidad web va más allá de seguir reglas; también se trata de garantizar que todos tengan el mismo acceso a su sitio web. La incorporación de elementos semánticos, puntos de referencia y atributos como el rol, el nombre y el valor en su HTML puede hacer que su sitio web sea más accesible para las personas con discapacidades. No pienses en la accesibilidad web como una opción; considerarlo una necesidad.