↓Saltar al Contenido principal

Accesibilidad digital sin ser un peligro

Una guía sobre lo que, como desarrollador, no tienes que repetir.

En un mundo cada vez más interconectado y donde las leyes sobre la accesibilidad parece que van tomando fuerza, la accesibilidad web se ha convertido en un componente esencial del diseño y desarrollo de sitios web. Cómo crear contenido digital accesible sin ser un peligro es una guía práctica diseñada para ayudar a desarrolladores, diseñadores y gestores de contenido a crear experiencias web inclusivas y accesibles para todas las personas sin cometer errores fáciles de cometer por desconocimiento.

Este libro nace de la creciente necesidad de entender la accesibilidad desde un punto de vista técnico. No estoy aquí para hablarte de los últimos avances en leyes y normas en Estados Unidos y la Unión Europea, o para enseñarte a hacer menús desplegables que funcionen bien con el teclado. Ya hay muchos libros sobre eso. Con esta pequeña guía, quiero contarte qué es lo que no hay que hacer. Es un compendio de algunos de los errores más apabullantes en páginas web o aplicaciones que he encontrado en proyectos y empresas donde he trabajado o contenido digital con el que me he topado como usuario.

A lo largo de este libro, veremos algunos de los errores más enrevesados cometidos en materia de accesibilidad, por supuesto sin citar fuentes. No es mi intención ridiculizar a nadie. La idea es que este libro sirva de guía educativa para evitar cometer las mismas atrocidades, con un poco de humor negro que quienes me conocen, saben que a veces me caracteriza, proporcionando ejemplos prácticos y consejos accionables. Quiero que dispongas de las herramientas necesarias para que puedas desarollar páginas webs accesibles sin que se rían de ti.

Prepárate para descubrir cómo no hacer skip links que hacen que el foco de teclado desaparezca y qué es lo que has hecho mal para que el aria-label que acabas de poner en tu web aparezca en Mastodon de lo inútil o malo que es.

Reciente

El cuadro de edición que abre diálogo y el foco que desapareció

Por Oriol Gómez Sentís··4 mins

Hace un tiempo estuve trabajando con un equipo de desarrolladores en un design system. Nos tocaba modificar un componente de calendario típico, donde el usuario podía hacer click sobre un campo de texto para ingresar una fecha, y al hacerlo, se desplegaría un modal con un selector de día, mes y año.

La idea, de primeras, parecía bastante sencilla. Yo acababa de entrar en el proyecto y no había visto los diseños que se habían hecho para este componente ni tampoco la documentación de accesibilidad, por lo que me dí de lleno con la página del componente en su Storybook. Agárrate los pantalones porque se viene idea revolucionaria:

El curioso caso de Pressed Button

Por Oriol Gómez Sentís··3 mins

Con este encabezado, cuyo título tiene bastante parecido a cierta película bastante buena, quiero presentaros otro caso que estoy viendo últimamente muchas veces en páginas webs de transmisión de audio y vídeo. atención a este código:

    <button id="muteButton" aria-pressed="false" onclick="toggleMicrophoneState()">Silenciar el micrófono</button>

        function toggleMicrophoneState() {
            var button = document.getElementById('muteButton');
            let isPressed = button.getAttribute('aria-pressed') == 'true';
            isPressed = !isPressed;

            // Cambia el estado de aria-pressed
            button.setAttribute('aria-pressed', isPressed);

            // Cambia el texto del botón
            if (isPressed) {
                button.textContent = 'Reactivar el Micrófono';
            } else {
                button.textContent = 'Silenciar el Micrófono';
            }
        }

A priori es una idea bastante chula. qué guay, le estoy diciendo al usuario de lector de pantalla que el botón, cuando está pulsado, significa que el micro está muteado y que si hace click lo volverá a desactivar. Vamos a cambiar el texto del botón también, para que así haya menos confusión aún, para que quede bien claro. ¿No?

Rich Text Editor, BODY: el correo en el que han copiado el cKEditor sin más.

Por Oriol Gómez Sentís··5 mins

Hoy no os traigo un caso de un design system, ni de una auditoría en producción, ni de un Storybook con ideas revolucionarias. Hoy viene algo mucho más doméstico y bueno, de envíos a casa va la cosa. Un correo electrónico. Uno de esos de “utilice este código para verificar su cuenta”. Lo de toda la vida. Pides el código, te llega, lo copias, lo pegas y a otra cosa mariposa. ¿Qué puede salir mal en un correo con un número de seis cifras? Agárrate los pantalones, que se viene curva.

Los artículos sin foco

Por Oriol Gómez Sentís··2 mins

Hace un tiempo estuve enredado con una web donde teníamos una serie de artículos al que el usuario podía acceder mediante enlaces, típico de las webs de noticias. La idea era que el artículo hiciera su aparición estelar tipo SPA, sin que cambiase la URL ni el título de la página (otro fallo de accesibilidad, quedarse con el título de la página principal en toda la app).

A alguien se le encendió la lucecita y en producción, al hacer la auditoría, me topé con algo así: