0

我对客户网站进行了某种可访问性测试（针对盲人、聋人用户等），并且还提供了如何提高可访问性的提示。

提示之一是图像按钮：

此外，按钮应该得到一个简短而有意义的描述，例如一个不可见的文本。不可见的文本不应使用属性 display:none 和 visibility:hidden 进行标记。相反，应该将文本移出视口：

<a href=”...”&gt;[Font-Icon] <span class=“invisible“&gt;Delete</span></a>
.invisible { position:absolute;  left:-10000px;  overflow:hidden;}

我想问一下这是否仍然是推荐的解决方案。这对我来说似乎已经过时了。我应该使用某种aria标签而不是不可见元素，还是建议的解决方案可以？

4

1 回答 1

1

按钮应该得到一个简短而有意义的描述，例如一个不可见的文本。

这对我来说似乎已经过时了。

你是对的，这不是解决方案。

在谈论可访问性时，我们不必只关注使用屏幕阅读器的盲人，而是关注各种残疾。将文本移出视口完全是胡说八道。在不支持 ARIA 时，对于一小部分使用屏幕阅读器的人来说，这曾经是一个（糟糕的）解决方案，但这不再是一个真正的解决方案。

最好的解决方案显然仍然是写全文：

<a href="...">[Font-Icon] Delete</a>

是的，很明显，但值得一说。

第二种解决方案是使用title属性。如果屏幕阅读器不支持它，为什么要使用它？因为 99% 的人口不使用屏幕阅读器。而“[Font-Icon]”应该有一个替代方案。（为了更好的可访问性支持，这个title属性应该有一种在键盘焦点上可见的方法。）

<a href="..." title="Delete">[Font-Icon]</a>

最终的解决方案是添加屏幕阅读器用户，将属性aria-label留给其他人。title

<a href="..." title="Delete" aria-label="Delete">[Font-Icon]</a>
于 2017-10-03T09:33:47.060 回答