Artículos

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.

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í:

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?

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: