El curioso caso de Pressed Button

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?

Bien, presta atención a lo que dice NVDA cuando el usuario pasa por encima de este botón:

Silenciar el Micrófono  botón conmutador  sin pulsar

Hasta ahí bien. Nos está diciendo que el micrófono está silenciado. Si lo pulso, el botón estará pulsado y ya está, ¿no?

Reactivar el Micrófono  botón conmutador  pulsado

vamos a desgranar esto. Por un lado nos está diciendo que tenemos un botón, que se llama Reactivar Micrófono, y que está pulsado. ¿Eso significa que el micrófono está activado o que está silenciado y que el botón está pulsado. ¿Tengo el micro encendido o apagado?

Incluso en Google Meet lo hacen un poquito mal (a estos sí que no me importa mencionarlos, ahora veréis por qué digo que solo lo hacen un poquito mal). Cuando estamos en una llamada de Google Meet, tenemos lo siguiente.

Desactivar micrófono  botón conmutador  sin pulsar  
intro
Tu micrófono está desactivado. 
Activar micrófono  botón conmutador  pulsado  
intro
Tu micrófono está activado. 
Desactivar micrófono  botón conmutador  sin pulsar  
`` 

Esto es de los comportamientos más liosos que me he encontrado. Por un lado, está guay que creen una región dinámica que anuncie el estado del micro y que haya un acceso directo (Control + D) para cambiar el estado del micro rápidamente. ¿Pero realmente hacía falta que ese botón cambiara su texto de forma dinámica?

Mi opinión es que no. Tan solo con añadir el texto silenciar Micrófono, y cambiando su atributo aria-pressed de true a false, tendríamos una experiencia mucho más fluida, algo así como:

```sr
Silenciar micrófono botón conmutador  sin pulsar

Quiero mutear el micrófono y le doy al espacio...

Silenciar el Micrófono botón conmutador  pulsado

De esta manera, es mucho más sencillo para el usuario saber si el micrófono está silenciado o no, sin tener que recurrir a preguntar si se le escucha o fijarse en una región dinámica (que no todas las plataformas de transmisión tienen).

Este mismo comportamiento me lo he encontrado en multitud de páginas webs y en multitud de acciones, por ejemplo:

Haciendo el código para este ejemplo me he liado hasta yo. Me han hecho falta 3 o 4 iteraciones para ver cuándo tenía que poner silenciar y cuándo reactivar, para que veáis lo curioso de la situación.

Conclusión sobre este caso

No te líes, y haz pruebas. Si eres desarrollador y te han mandado programar esto, asegúrate de que haces pruebas con la persona de tu empresa que se encarga de la accesibilidad. Enseguida se dará cuenta de que el comportamiento es extraño. Todos cometemos errores, y este es uno muy fácil de cometer. Pero por favor, no lo subas a producción.