Question

假设我在旋转木马的两端有两个箭头，当点击旋转旋转木马时。我可能有标记：

<a class="carousel-prev" alt="Previous Item"><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next" alt="Next Item"><i class="icon-angle-right" aria-hidden="true"></i></a>

在这种情况下，aria-hidden="true"属性中断可访问性，还是可以，因为外部<a>标记是可列表的并且正在使用替代文字？

Answer 1

alt属性不是链接的有效属性，因此它不仅是可访问性问题，而且也是无效的html。如果您想了解更多内容，请参阅此stackoverflow帖子： Is it correct to use alt tag for an anchor link?

我建议您从链接中移除alt，而是包含一个＆＃34; screenreader-only＆＃34;允许读取文本但在屏幕上隐藏的类。请参阅a11yproject.com上的链接，了解如何实现此目的：

http://a11yproject.com/posts/how-to-hide-content/

我建议改变代码看起来像这样：

＆＃13;

.sr-only {
  position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

＆＃13;

<a class="carousel-prev"><span class="sr-only">Previous Item</span><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next"><span class="sr-only">Next Item</span><i class="icon-angle-right" aria-hidden="true"></i></a>

＆＃13;

Answer 2

为什么不在锚标签上加上aria-label？应该是将alt =更改为aria-label =的简单问题。无需使用屏幕阅读器类的嵌套跨度。

<a class="carousel-prev" aria-label="Previous Item"><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next" aria-label="Next Item"><i class="icon-angle-right" aria-hidden="true"></i></a>

它是有效的HTML。查看＆＃34;允许的ARIA状态和属性属性＆＃34; https://www.w3.org/TR/html51/textlevel-semantics.html#the-a-element的部分。允许使用所有咏叹调标签。

Answer 3

首先，WAI提供了一个工作轮播的完整示例：https://www.w3.org/WAI/tutorials/carousels/

一些个人观察：

您必须问自己，为盲人用户轮换旋转木马的兴趣。处理盲人用户用户体验的一种方法是让他们忽略他们正在浏览的内容是旋转木马（例如，当键盘焦点移动时自动切换项目）。
aria-hidden不会破坏辅助功能，因为i标记中没有任何内容，标记不会被用作portmanteau标记（如span）。< / p>
正如@DiscoInfiltrator所指出的alt不是链接的有效属性
由于视障用户的一小部分使用了屏幕阅读器，因此您应该使用title标记上的a属性，以便为每个人提供此信息，而不是{{1这也是一个不错的选择。

链接中的图标可访问性（aria-hidden）

3 个答案: