Question

我使用<i>标记来显示社交媒体图标和链接。但是，WCAG要求使用文字或img alt属性来表示合规性。

我想知道在title标记上添加<i>属性是否合规：

<i class="this-is-the-icon" title="Icon Title"></i>

如果没有，确保这些href符合要求的解决方法是什么？

Answer 1

仅使用屏幕阅读器文本。对于有视力的用户来说，这是不可见的，但屏幕阅读器仍会将其读出来。

<i class="this-is-the-icon"><span class="screen-reader-only">Icon 
Title</span></i>

.screen-reader-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

这是WebAim [https://webaim.org/techniques/css/invisiblecontent]

倡导的方法

没有文本的WCAG链接<i>标记

1 个答案: