"aria-label"탐지기의 확장 기능은 HTML에 적용되지 않습니다.

Quería compartir con ustedes un proyecto que hice hace unos meses.

Cree una extension para el navegador que detecta los aria-label no aplicados en las etiquetas HTML que para mí personalmente son las más Importantes.

Es muy sencilla en realidad, solo se inyecta un código CSS , que marca un borde amarillo en las etiquetas que no sea detectado el aria-label .

Por ejemplo un button que cierre un menuú.

예시:

<button type="button" aria-label="Cerrar Menú">X</button>

Si no contiene este atributo la extensión marcara un borde amarillo en el botón.

Otro ejemplo puede ser al abrir un menu, más que seguro que vas a encontrar el famoso menuú hamburguesa y ahí de nuevo necesitas declarar este atributo.

Es bastante normal ver botones que cierran menús con un icono de X o directamente una "X", solo pregúntate ¿como leé el lector de pantalla este botón o mejor como se lo pronuncia a una persona con baja visión o que directamente no tiene visión?, Bueno para eso es este atributo, obviamente que hay muchos más atributosaria .

Ejemplo de como se ve:


Hay cientos de ejemplos en etiquetas HTML que puede ser aplicado este atributo.

Y si te에는 preguntado como funciona esto, osea como sabe la extensión que ahí no hay unaria-label, bueno solo es unCSS이 있습니다.
Funciona de la siguiente manera:

button:not([aria-label]) {
  outline: 2px dashed #ffd900 !important;
}

Es muy fácil entender esto, si no hay un aria-label pinta un outline de 2px tipo dashed que es una línea con puntos como se ve en la imagen y el color, el !important es necesario por qué es un CSS inyectado a una X página, si no colocamos esto, el CSS no se inyectará correctamente.

No voy a profundizar en como crear una extensión, questas lo deje para otro artículo.
Solo quería compartir esta idea con ustedes.

결론

더 이상 프로그램이 필요하지 않습니다. Está muy "verde"aún, pero creo que es un paso.

está extension no está publicada, solo en github.

Puedes ver el repositorio y mirar que es muy sencillo en realidad.

레포: Aria Observation Tool

감사합니다!!!