Mejorar la accesibilidad y el diseño de los encabezados que comienzan con emoji

UX
,
1

Es un patrón común incluir emojis al principio de los encabezados para añadir distinción visual y estilo.

Un ejemplo…

## :white_check_mark: ¡Vota, este martes!

…que se renderiza como:

:white_check_mark: ¡Vota, este martes!

El código generado para ese encabezado se ve así:

<h2 dir="auto">
  <a name="p-9969-white_check_mark-rock-the-vote-this-tuesday-1" class="anchor" href="#p-9969-white_check_mark-rock-the-vote-this-tuesday-1"></a>
  <img src="https://emoji.discourse-cdn.com/twitter/white_check_mark.png?v=15" 
       title=":white_check_mark:" 
       class="emoji" 
       alt=":white_check_mark:" 
       loading="lazy" 
       width="20" 
       height="20" 
       style="aspect-ratio: 20 / 20;">
  Rock the Vote, this Tuesday!
</h2>

¿Podríamos hacer cambios en el elemento img para que los encabezados sean más accesibles y visualmente consistentes? Por ejemplo:

  • aria-hidden="true" para que el emoji o el alt no se rendericen para lectores de pantalla.
  • vertical-align: middle; margin-right: 8px; para una alineación consistente.
<h2 dir="auto">
  <a name="p-9969-white_check_mark-rock-the-vote-this-tuesday-1" class="anchor" href="#p-9969-white_check_mark-rock-the-vote-this-tuesday-1"></a>
  <img src="https://emoji.discourse-cdn.com/twitter/white_check_mark.png?v=15" 
       title=":white_check_mark:" 
       class="emoji" 
       alt=":white_check_mark:" 
       aria-hidden="true" 
       loading="lazy" 
       width="20" 
       height="20" 
       style="aspect-ratio: 20 / 20; vertical-align: middle; margin-right: 8px;">
  Rock the Vote, this Tuesday!
</h2>
1 me gusta