El linter estaba señalando la línea correcta por el motivo equivocado

Mientras arreglaba algo sin relación, noté que mi linter fallaba en una línea que nadie había tocado en un buen tiempo: tabindex="0" en un elemento <pre>, marcado como “should only be declared on interactive elements.” Pensé que sería un arreglo fácil. Agregar una excepción y seguir adelante.

Antes de hacerlo, me hice una pregunta que el linter no podía responder: ¿todavía hace falta este atributo? Recién había acortado el texto dentro de ese <pre> de una URL larga de dependencia a un comando de instalación corto. Texto más corto, presumiblemente sin más desborde, presumiblemente sin más necesidad de desplazamiento con teclado. Casi lo borré por esa suposición.

Medir en vez de suponer

En el ancho de escritorio en el que corre mi suite de accesibilidad, el texto entraba bien. Sin desborde. En un ancho de teléfono de 375 píxeles, el más largo de mis cuatro comandos de instalación seguía desbordando su caja por unos cien píxeles. El atributo todavía cumplía una función real. Mi suite de pruebas simplemente nunca había revisado una pantalla lo bastante angosta para notarlo, ni si el error existía, ni si mi cambio lo había hecho desaparecer.

El replanteo

Eso cambió cuál era el problema real. La queja del linter nunca fue en realidad “quita este atributo.” Era “este atributo existe sin cumplir bien su función.” Un elemento enfocable que un lector de pantalla anuncia como nada es peor que uno que directamente no es enfocable: una parada sin explicación, la misma forma que una insignia que no llevaba a ningún lado.

Así que el arreglo real no fue silenciar al linter. Fue darle un nombre a esa caja desplazable, un rol de región y una etiqueta, de modo que llegar a ella con el teclado indique sobre qué se aterrizó.

Lo que queda

Mi verificación automática de accesibilidad pasó tanto antes como después de cada versión de esto, la rota y la arreglada. Solo revisa un tamaño de pantalla. Si la longitud del contenido o el diseño depende del ancho del viewport, y en muchos casos depende, esa verificación no confirma nada sobre el ancho en el que están los usuarios reales, algo que ya había aprendido una vez en un teléfono real y que, al parecer, hacía falta aprender de nuevo en un navegador.