<span>的两种不同用法:哪种是可访问性的最佳解决方案？

Question

我想用一个图像替换一段文本(例如,带有电话图标的"call"一词)和网页中的其他文本.我希望这适用于普通用户,而不会惩罚禁用css (或没有css活动)的人和无法看到图像的盲人[附录].哪个是以下两个之间更好的解决方案？

1.     <span title="call" class="s1"><span>


2.     <span class="s1 s2">call<span>

有:

.s1 {
    display:inline-block;
    background: url("call.png") no-repeat scroll 0 0 transparent;
    width:24px;
}
.s2 {
    overflow:hidden;
    text-indent: 30px;
}

PS:<img>请你别无选择.

Answer 1

在给出的两个备选方案之间,2显然是正确答案,即显然对可访问性不那么有害.当CSS关闭时,元素将缩减为单词"call",而替代1将缩减为空字符串.无法保证某些软件能够宣布title属性的值.例如,考虑在纯视觉模式下使用普通图形浏览器,没有屏幕阅读器(例如,设置可以覆盖页面CSS并强制使用适合用户的足够大的字体).

即使替代方案2也不利于可访问性.启用 CSS时,单词"call"将替换为图标.但无法保证用户可以完全看到它.并且alt无法为内容图像指定背景图像的文本.此外,你会用什么作为电话图标？大多数这样的图标都是旧式的,比如☎或✆,并且越来越多的人从未使用过这样的设备.

Answer 2

SPAN是一个非常通用的元素，当没有更好的标记元素适合该目的时应该使用。在您的情况下，A(anchor) 正是您所需要的，假设您的“call”元素是用户代理应与纯文本区分开的元素。即使您不使用href，它仍然是一个锚点 - 只需使用 JavaScript 将其绑定到鼠标事件即可。

另外，在这里使用背景图像是错误的。背景图像用于背景。事实上，用户代理甚至不应该允许单击这些作为活动用户界面的一部分（仅作为非常次要的交互）。如果您需要的是“呼叫”按钮，请改用 CSScontent属性。不过，您是对的img- 这是针对携带页面内容的图像，而不是导航。即按钮、锚点等不应使用该img标签。您还可以使用input或button，具体取决于上下文（无法从您的问题中看出）。

如果您确实想让您的页面易于访问，那么您走在正确的道路上，但我确实认为以下是更好的选择：

 <a class="s1" title="Call the following number">Call</a>

 .s1
 {
     content: url(call.png);
 }

s1您可以使用 CSSwidth和调整标有类的锚点的大小height。不过我会使用 SVG。如果您的图形是矢量，这绝对是一个更好的主意。像素用于照片和像素艺术:-)

如果你想在元素后面添加一些文本，你可以使用 CSS :after：

.s1:after
{
    content: "Call";
}