Barrierefreiheit und Layout für Überschriften verbessern, die mit Emoji beginnen

UX
,
1

Es ist ein gängiges Muster, Emoji am Anfang von Überschriften einzufügen, um ihnen visuelle Unterscheidung und Flair zu verleihen.

Ein Beispiel…

## :white_check_mark: Rock the Vote, diesen Dienstag!

…was wie folgt gerendert wird:

:white_check_mark: Rock the Vote, diesen Dienstag!

Der für diese Überschrift generierte Code sieht wie folgt aus:

<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, diesen Dienstag!
</h2>

Könnten wir Änderungen am img-Element vornehmen, um die Überschriften zugänglicher und visuell konsistenter zu gestalten? Zum Beispiel:

  • aria-hidden="true", damit das Emoji oder der Alt-Text nicht für Screenreader gerendert wird
  • vertical-align: middle; margin-right: 8px; für eine konsistente Ausrichtung
<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, diesen Dienstag!
</h2>
1 „Gefällt mir“