Html 将两个元素（图标和<；a>；）作为一个元素的可访问性_Html_Accessibility

Html 将两个元素（图标和<；a>；）作为一个元素的可访问性

html

Html 将两个元素（图标和<；a>；）作为一个元素的可访问性,html,accessibility,Html,Accessibility,我有一个前面有图标的链接。在对其进行可访问性投诉时，我们希望将其视为单个元素（图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&

我有一个前面有图标的链接。在对其进行可访问性投诉时，我们希望将其视为单个元素（图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：

可访问性将两个元素（图标和标签）作为一个元素，您可以制作手风琴来解决此问题。此处是文档链接：

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i


手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
文本对齐：左对齐；
边界：无；
大纲：无；
过渡：0.4s；
}
/*如果单击按钮（使用JS添加.active类），并将鼠标移到按钮上（悬停），则为按钮添加背景色*/
.活动，.手风琴：悬停{
背景色：#ccc；
}
/*设计手风琴面板的样式。注意：默认情况下隐藏*/
.小组{
填充：0 18px；
背景色：白色；
显示：无；
溢出：隐藏；
}
.手风琴，我{
浮动：对；
}


图1
乱数假文
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书
图2
乱数假文
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书
图3
乱数假文
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书

解释

使用超链接上的
```
aria标签
```
属性，并为其指定一个可访问的名称
包含图标的
被赋予了在元素需要位于DOM中时使用的属性，但它们的语义不准确或不必要

Q:Do：：在
之前和之后
伪元素是否出现在元素的内容框中
A:是的。请参阅背景颜色和焦点轮廓。

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

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