改进以表情符号开头的标题的可访问性和布局

用户体验
,
1

在标题开头包含 emoji 是一个常见的模式，可以增加视觉区分度和风格。

一个例子……

## :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"，这样 emoji 或 alt 文本就不会被屏幕阅读器渲染。
  • 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 个赞