Revisando el elemento abbr

Una irresistible inmersión en elementos HTML de Ire Aderinokun, esta vez sobre el abbrelemento de abreviaturas. Puedes usarlo ( JUI ) y funciona bien, pero si esperas crear información sobre herramientas para ellos (que también funciona en pantallas táctiles), entonces es mucho más complicado.

El resultado final es dejar el HTML semántico solo y mejorarlo progresivamente con ~50 líneas de JavaScript que agregan elementos envolventes interactivos y controladores de eventos.

Siento que este es el tipo de cosa perfecta para convertirla en un componente web que podría/debería distribuirse ampliamente para su uso. Quizás un a11y-abbrcomponente o algo así. ¿Pueden los componentes web ampliar otros elementos HTML nativos? Si no, supongo que estamos volviendo a lo que es esencialmente un span, por lo que tal vez eso no sea ideal.

Me atrevo a decirlo, este es también el tipo de cosas en las que React puede sobresalir. Por ejemplo, uso Reach Router y, de forma predeterminada, al crear enlaces ( Links que se convierten en as), obtienen el aria-currentatributo adecuado cuando se trata de la página actual. Esa es una buena accesibilidad que estás obteniendo de forma gratuita porque la biblioteca fue lo suficientemente buena como para obtener ese detalle correctamente. Por mucho que se señale a bibliotecas como React por su accesibilidad problemática, existe un gran potencial para mejoras de accesibilidad a través de la abstracción. Algo así como la forma en que Brad Frost ha estado aplicando las mejores prácticas de accesibilidad en los componentes de React .