6

我想用图像替换一段文本（例如，带有电话图标的“呼叫”一词）以及网页中的其他一些文本。我希望这适用于普通用户，而不会惩罚禁用 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>别无选择，拜托。

4

2 回答 2

5

在给出的两个备选方案中，2 显然是正确的答案，即它显然对可访问性的不利影响较小。当 CSS 关闭时，元素缩减为单词“call”，而替代 1 缩减为空字符串。不能保证某些软件能够宣布title属性的值。例如，考虑在纯可视模式下使用普通图形浏览器，没有屏幕阅读器（例如，设置覆盖页面 CSS 并强制使用适合用户的足够大的字体）。

即使备选方案 2 也不利于可访问性。启用CSS后，“呼叫”一词将替换为图标。但不能保证用户完全可以看到它。并且无法alt像为内容图像那样为背景图像指定文本。此外，你会用什么作为电话图标？大多数此类图标都是老式的，例如☎或✆，并且越来越多的人从未使用过此类设备。

于 2012-09-19T04:48:21.533 回答
0

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

此外，在这里使用背景图像是错误的。背景图像用于背景。事实上，用户代理甚至不应该将这些作为活动用户界面的一部分单击（仅作为非常次要的交互）如果它是您所追求的“呼叫”按钮，请改用 CSScontent属性。不过，您是对img的-那是针对带有页面内容的图像，而不是导航。即按钮、锚点等不应使用img标签。您也可以使用inputor 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";
}
于 2012-09-19T12:45:42.953 回答