具有两个元素的可访问性（图标和<a>) as one element

Question

I have a link with an icon before it. When making it accessibility complaint, we want it to be treated as a single element (Image 1) and not two elements(Image 2) which is the current scenario. Any leads on how to make this happen?

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

Image 1:

图片2：

Answer 1

public function testGetRouteDistance()
{
    $polygon = factory(Polygon::class, 1)->create();

说明

• 使用超链接上的<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赋予了role=presentation，该元素在元素需要包含在DOM中但元素的语义不准确或不必要时会使用。

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

图标和链接文本已经是同一元素。 ::before伪元素在语义上是<a>元素内容的一部分。在可访问性方面，这只是一个链接，可访问名称为“链接”。如果这就是您需要传达的所有信息，那么这根本没有什么错。 （尽管title="Link"属性在此没有用，应将其删除。）

包装器<div>在这里是红色鲱鱼；就可访问性而言，它根本不起作用。

该图标是否传达了链接文本中没有的任何重要信息？如果是这样，则需要替代文本。使用<img alt="whatever" src="icon.png">内嵌套的<span class="icon visually-hidden>whatever</span>或<a>。请注意，在::before伪元素中CSS生成的内容构成了链接accessible name calculation的一部分，因此请注意在此处使用标点符号/表情符号，因为它们可能会被屏幕阅读器宣布。例如，a::before { content: '>'; }可能会导致屏幕阅读器在链接名中宣布“大于”，这可能不是您打算传达的。

a::before伪元素还可视地出现在<a>元素的内容框中。因此，就焦点轮廓而言，它已经是一个方框了。在这方面，开发工具的屏幕截图可能会产生误导。尝试通过按键盘上的TAB键使链接集中；焦点轮廓也应包含::before伪元素。这是演示此内容的代码段：

a {
  background-color: lightgray;
  font-size: 1.2em; 
}

a:hover {
  background-color: yellow;
}

a:focus {
 outline: 2px dotted red; 
}

a::before,
a::after {
   /* Star icon from https://github.com/ry5n/libricons
    * It has an MIT license.
    */
   content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTEyLjIzNiAxNWMtLjE0NiAwLS4yODMtLjA0MS0uNDA2LS4xMjRsLTMuODI4LTIuNTgzLTMuODMgMi41ODNjLS4xMjMuMDgzLS4yNjUuMTI0LS40MDYuMTI0LS4xNDUgMC0uMjg5LS4wNDMtLjQxMy0uMTI5LS4yNDYtLjE3MS0uMzYyLS40NzUtLjI5Mi0uNzY2bDEuMTIyLTQuNzMtMy40MzktMy4xMDdjLS4yMjUtLjItLjMwMy0uNTE5LS4xOTYtLjguMTA2LS4yODIuMzc2LS40NjguNjc4LS40NjhoNC4yNTlsMS44NDMtNC41NDJjLjEwOS0uMjc3LjM3Ny0uNDU4LjY3NC0uNDU4LjI5NyAwIC41NjQuMTgxLjY3NC40NThsMS44NCA0LjU0Mmg0LjI2MmMuMzA2IDAgLjU3LjE4Ni42ODMuNDY4LjEwNC4yODEuMDI0LjYwMS0uMTk2LjhsLTMuNDM5IDMuMTA3IDEuMTIxIDQuNzNjLjA2NS4yOTEtLjA0Ny41OTUtLjI5My43NjYtLjEyOS4wODYtLjI3My4xMjktLjQxOC4xMjl6Ii8+PC9zdmc+);
}

<p>Q: Do <code>::before</code> and <code>::after</code> pseudo-elements appear inside the element's content box?</p>
<a href="#">Geronimo</a>
<p>A: Yes they do.  See the background colour, and focus outline.</p>