html - 将两个元素（图标和）作为​​一个元素的可访问性

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：

标签： htmlaccessibility

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>包含图标的 which 已被赋予whichrole=presentation用于当元素需要位于 DOM 中时，但它们的语义不准确或不必要。