DEV Community: Flkt Crnpio

a11y. Cómo solucionar los 6 errores más comunes de accesibilidad web

Flkt Crnpio — Thu, 19 Dec 2024 16:32:03 +0000

Hace algún tiempo me encontré con un reporte de accesibilidad analizando un millón de páginas web que publicó WebAIM (uno de los grandes referentes del tema en Estados Unidos) webaim.org/projects/million

En este reporte aparecen, entre otras cosas, los seis errores más comunes de accesibilidad y la verdad me sorprendió la lista… son cosas super simples que … porque olvidamos?

Si no tenemos tiempo de leernos la documentación de accesibilidad y sensibilizarnos con el tema, al menos podemos colaborar a la vida evitando caer en el mismo error una y otra vez.

Los errores más comunes que debemos evitar 🫡

Del millón de páginas revisadas, se ordenaron los errores que en porcentaje se repiten en su homepage

Tener bajo contraste de texto (81.0%)
Utilizar imágenes sin texto alternativo (54.5%)
No etiquetar correctamente los campos de entrada (48.6%)
Tener enlaces vacíos!! (44.6%)
Tener botones vacíos! (28.2%)
No agregar atributos de lenguaje al documento (17.1%)

1.Verificar el contraste del texto

Por lo general este error lo resuelve el equipo de diseño. Al seleccionar la paleta de color que utilizará el sitio o sistema de diseño, deberán asegurarse que el contraste sea apropiado para la lectura.

Al equipo de desarrollo simplemente nos pasan una lista de hexadecimales que utilizar… aun así… si notas algo raro, no olvides reportarlo a tu diseñadora favorita… que normalmente en el área de diseño no tienen QA, no se porque! de que privilegios gozan ?! u.u

2. Agregar texto alternativo a las imágenes

Si cuentas con un equipo de contenido (quienquiera que esté escribiendo la información que se verá en pantalla), debería de existir un documento en donde para cada imagen que se requiera poner en pantalla, se agrega el texto alternativo que ésta debe de tener, incluso si va vacío como el caso de las imágenes decorativas.

El equipo de desarrollo debe cerciorarse de que toda etiqueta de imagen lleve siempre el atributo alt con o sin contenido, como se haya especificado por el equipo.

<img alt="texto alternativo">

3. Etiquetar los campos de entrada

Dependiendo del diseño, hay distintas formas en las que se puede etiquetar un campo.

Cuando el campo de entrada tiene visible la etiqueta de nombre, unicamente es importante recordar ligar ambos elementos con el for del <label> y el id del <input>.

<label for="nombreunico">
  Nombre completo
</label>
<input 
  id="nombreunico" 
  type="text" 
  placeholder="Ejemplo: Alma Leticia"
/>

Cuando únicamente se ve el campo de entrada, puede utilizarse el atributo aria-label en la etiqueta del campo <input>, selector <select> o área de texto <textarea> para agregarle la información del nombre al campo.

<input 
  aria-label="Nombre completo" 
  type="text" 
  placeholder="Ejemplo: Alma Leticia"
/>

4. Agregar contenido a los enlaces

Parecido que con las imágenes, es un trabajo en equipo, es necesario que quien escriba el contenido siempre piense que texto significativo debe verse cuando se agrega un enlace, mientras que el equipo de desarrollo debe cerciorarse de que no se escriba nunca una etiqueta de enlace <a> ni sin enlace href=”” ni sin contenido > … <

<a href="enlace"> texto significativo </a>

5. Agregar contenido a los botones

Tanto el equipo de diseño como el equipo de contenido están envueltos en resolver que se verá y que se escuchará en un botón.

Para un botón sencillo <button> con texto, nada más es verificar que funcione y se vea como se debe leer, la acción a realizar por la persona usuaria.

<button type="button"> Acción a realizar </button>

Cuando un botón contiene texto y pictograma, el texto debe decir qué acción se va a realizar, mientras que el pictograma debe ocultarse auditivamente mediante el atributo aria-hidden que se incluye en el elemento que contenga el pictograma, en éste ejemplo un <span>

<button type="button">
  Acción a realizar
  <span class="pictograma" aria-hidden="true"> :} </pictograma>
</button>

Para un botón que contiene únicamente el pictograma, se mantiene el aria-hidden en el <span> del pictograma y se agrega un aria-label al elemento botón <button> para especificar la acción a realizar.

<button 
  type="button"
  aria-label="Acción a realizar"
>
  <span class="pictograma" aria-hidden="true"> :} </pictograma>
</button>

6. Agregar atributo de lenguaje al documento HTML

Es un atributo que la mayoría de los frameworks ya traen siempre escrito, aunque como la mayoría están en inglés, habrá que cambiarle este atributo a la página al español.

El lenguaje general del documento se declara en la etiqueta raíz de HTML

<!DOCTYPE html>
<html lang="es-mx">

Cuando existen fragmentos de la página en otro idioma es necesario agregarle el atributo lang a la etiqueta que contenga el texto en particular.

<span lang="en">hello</span>

— Con esto solucionamos los errores más comunes. 🎉

Otras recomendaciones generales para mejorar accesibilidad mediante el código 🤓

Utilizar HTML semántico.
Agregar un enlace para ir al contenido principal, al inicio de la página antes de la navegación y cabecera.
Agregar un título a cada página en el <header>
Organizar la estructura principal del sitio con etiquetas de región como <nav>, <header>, <main>, <footer>, <section>, <article>, <aside>
Verificar que solo exista un <main> por vista.
Utilizar solo un <h1> por página.
No brincar entre jerarquías de títulos, después del <h1> el siguiente título que necesitemos debe ser un <h2>
Para formularios complejos, utilizar el <fieldset> y <legend> para agrupar campos de información en secciones.

Escucha la página

El orden de la lectura es igual al orden de la estructura del código, puedes intentar escuchar la página una vez que esté terminada para verificar que se comprenda, también ayuda a corregir la ortografía y puede ayudar en general a mejorar la estructura.

Navega la página

Revisa que todos los elementos interactivos tengan estado de enfoque y que el orden en el que navegas entre uno y otro, utilizando el tabulador, sea el esperado. Puedes navegar el sitio con el teclado para verificarlo.

Verifica la accesibilidad básica con herramientas automáticas 🦇

Existen un montón de herramientas que se pueden instalar en el navegador para verificar la accesibilidad.

De mis favoritas serían las de IBM y la de Google Chrome

También me gusta mucho una enfocada particularmente los aria y landmarks, para ver la estructura del sitio.

ARIA DevTools

Y para validación del código fuente durante la etapa de desarrollo, se puede agregar una extensión de Visual Studio Code

axe Accessibility Linter

Descansa🌟

La mayor parte de los errores los cometemos cuando estamos desveladas, presionadas, sin comer, sin café (o lo que sea que te de pila) …. la vida no se trata solo del trabajo! pero si ya lo vamos a hacer hay que hacerlo bien :}

Respiren, tomen agüita

— flkt

edición del con CSS

Flkt Crnpio — Tue, 11 Apr 2023 20:33:19 +0000

de las cosas mas difíciles e interesantes para mi siempre han sido los elementos de HTML de formulario, desde hacer que se vean del mismo modo en todos los navegadores, luchar contra instalar un plugin que hace magia en sus node_modules para ponerle mil elementos encima que se ven hermosos, o jugar para ver hasta donde puede llegar un elemento que cada que sacan nuevo es 'ineditable'

el <input type="color" /> es un elemento que se ve re diferente en todos los navegadores ( ni hablar de su menú contextual ! )

color en Chrome, Safari y Firefox, en ese orden

como se medio aprecia en la imagen (salió re chiquita) es un bloque de color dentro de algún contenedor con color de fondo y borde, que ni en su casa han de saber como quisieron alinear

homogeneizando el

en CSS es empezar de general a particular, así que comenzando por normalizar el elemento, hay que alinearlo, quitarle el padding, el borde y el color de fondo al contenedor

$height: 40px; 
$radius: 2px;

[type="color"] {
  display: inline-flex;
  vertical-align: bottom;
  border: none;
  border-radius: $radius;
  padding: 0; // para quitar el pading en FF
  height: $height;
  width: 100%;
  cursor: pointer;
}

para quitar el padding en chrome y safari se necesita editar el sub-elemento ::-webkit-color-swatch-wrapper

::-webkit-color-swatch-wrapper {
  padding: 0;
}

por ultimo, para editar el bloque de color, necesitamos editar los sub-elementos ::-webkit-color-swatch y ::-moz-color-swatch para quitarles los bordes y redondearlo como necesitemos

::-webkit-color-swatch {
  border: 0;
  border-radius: $radius;
}

::-moz-color-swatch {
  border: 0;
  border-radius: $radius;
}

listo! ya se ve igual en todos los navegadores (que estaba probando al menos)

ahora vamo a ponerlo buapo

para hacerlo en tarjetas tipo pantone primero hay que agregarle un elemento mas que pueda contener al y al

para quienes no lo hayan utilizado, el es un elemento de html muy bonito de los formularios, al que se le puede conectar su contenido con alguna formula definida en el formulario o en un

con el atributo oninput="colorhex.value=value" se liga el valor del color con el valor del que tenga el id colorhex

<input type="color" value="#6600ff" oninput="colorhex.value=value">
<output id="colorhex">#6600ff</output>

de esta manera cada que se seleccione un color diferente en el , veremos el valor hexadecimal en el (pa’ poder hacer más rápido el copy&paste)

para crear las tarjetas, agregamos un contenedor para tener en columnas los elementos y y editamos un poco los atributos de ambos para darle el estilo final

$radius: 10px;
$height: 220px;

.pantone-card {
  background: #fff;
  display: grid;
  width: $height * 1.25;
  border-radius: $radius;
  box-shadow: 0 2px 4px #0001;
  border: 4px solid #fff;
}

como cambiamos la variable height, el color del quedará del nuevo valor de alto y se ajustará al ancho que tome la tarjeta… únicamente nos resta acomodarle el border-radius de los sub-elementos ::-webkit-color-swatch y ::-moz-color-swatch para que el bloque de color quede redondeado de arriba y abajo quede recto

[type="color"] {
  display: inline-flex; // esto ya no se necesita 
  vertical-align: bottom; // esto tampoco
  border: none;
  border-radius: $radius;
  padding: 0;
  height: $height;
  width: 100%;
  cursor: pointer;

  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  &::-webkit-color-swatch {
    border: 0;
    border-radius: $radius $radius 0 0; // arriba redondeado y abajo recto
  }

  &::-moz-color-swatch {
    border: 0;
    border-radius: $radius $radius 0 0; // arriba redondeado y abajo recto
  }
}

al final nada mas nos resta agregarle los estilos al para que parezca el texto típico de las tarjetas de pantone

output {
  display: block;
  background: #fff;
  font-size: 28px;
  padding: 16px;
  line-height: 1em;
  font-family: 'helvetica', sans-serif;

  &:before {
    content: 'HEXADECIMAL';
    font-size: 14px;
    font-weight: bold;
    display: block;
  }
}

al final tendremos tarjetas de color seleccionable, con los elementos nativos de HTML y

. . .

de referencia, acá dejo el ejemplo corriendo

codepen.io/flkt-crnpio/pen/dygbBxy