Foto de portada por Tito Pixel en Unsplash.
Estos últimos meses he estado tratando de mejorar una extensión que desarrollé el año pasado, la idea es que puedas observar si las etiquetas HTML contienen estos atributos.
Escribí sobre está extensión hace un tiempo aquí en Dev, puedes leerlo en el siguiente enlace:
¿Qué hay de nuevo?
Mi objetivo era que está misma pudiera inyectar un código CSS mediante programación no como estaba originalmente, así tendría más control de ella y podría activarla cuando quería desde una UI (User Interface), también decidí renombrar el proyecto a "ARIA Observation Tool".
¿Qué se observa?
Por el momento no se observan todos los atributos ARIA solo los siguientes:
aria-labelaria-expandedaria-hiddenaria-haspopup
Si no están aplicados serán remarcados con un color en los bordes.
En realidad es un outline de 2px de tipo dashed.
Ejemplo:
La verdad que no tengo mucha experiencia en extensiones y me ha costado entender al principio en cómo inyectar tal código (aún sigo sin entender muchas cosas 🙃)
Después de leer varios artículos sobre cómo crear una extensión y estar en la documentación oficial de Google, logré hacer lo que quería! 🥳
En construcción...
Aún no he logrado terminarla, sigo luchando pero ya es un paso más, eso me hace sentir bien y la verdad que este proyecto me da orgullo.
No sé bien si realmente es útil o no, pero siempre aprendes algo nuevo en cada proyecto.
Problemas descubiertos
He descubierto muchos problemas cada vez que he avanzado, la accesibilidad es compleja y usar estos atributos también, no se trata simplemente de colocarlos en todas partes, hay etiquetas HTML que no es necesario colocar los atributos y en otros si.
Esto me llevo a la conclusión de que es bastante complejo desarrollar está herramienta.
Conclusión
Queda mucho por investigar y aprender sobre los atributos ARIA y cuáles son las etiquetas más importantes que deberían contenerlos.
Repo:
Dejo el repositorio por si tienes curiosidad o si deseas contribuir o dejar una estrella! 😊
Franqsanz
/
aria-observation-tool
🧐 Tool as a browser extension to observe whether ARIA attributes are applied in HTML tags.
ARIA Observation Tool Extension
Está herramienta sirve para observar algunos atributos ARIA.
aria-labelaria-expandedaria-haspopuparia-hidden
Si no están aplicados serán remarcados con un color en los bordes.
Ejemplo:
Recursos:
¡Saludos y Feliz Codificación!
Top comments (0)