html - 将两个元素(icon 和<a>)作为一个元素的辅助功能

Question

我有一个链接，前面有一个图标。在提出可访问性投诉时，我们希望将其视为单个元素(图 1)，而不是当前场景中的两个元素(图 2)。关于如何实现这一目标的任何线索？

<div class="col-cta" style="height: 19px; margin-bottom: 0px; margin-top: 0px;">
  <a href="#" class="content-link" title="Link">
    ::before
    Link
  </a>
</div>

图片 1:

图 2:

Answer 1

<div class="col-cta" style="height: 19px; margin-bottom: 0px; margin-top: 0px;">
  <a href="#" class="content-link" aria-label="Link to xx">
    <span role="presentation">&#8250;&#160;</span>Link
  </a>
</div>

解释

• 使用 aria-label超链接上的属性并为其指定一个易于访问的名称。

• <span>其中包含的图标已被赋予 role=presentation 当元素需要在 DOM 中，但它们的语义不准确或不必要时使用。