絵文字で始まる見出しのアクセシビリティとレイアウトを改善する

UX
,
1

見出しの先頭に絵文字を含めることで、視覚的な区別と装飾を加えるのは一般的なパターンです。

例として…

## :white_check_mark: Rock the Vote, this Tuesday!

…これは次のようにレンダリングされます。

:white_check_mark: Rock the Vote, this Tuesday!

その見出しのために生成されたコードは次のようになります。

<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>

見出しをよりアクセシブルで視覚的に一貫したものにするために、img 要素に変更を加えることはできますか？例えば：

  • aria-hidden="true" を追加して、スクリーンリーダーで絵文字や代替テキストがレンダリングされないようにする。
  • 一貫した配置のために vertical-align: middle; margin-right: 8px; を追加する。
<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