<span>的两种不同用途：哪种方法最适合无障碍？

我想用网页中的一些其他文本替换带有图像的文本片段（例如，带有电话图标的单词“call”）。我希望这为普通用户工作，不会惩罚禁用css （或者没有css活动）的人以及无法看到图像的盲人[附录]。以下两个方案之间哪个更好？<span>的两种不同用途：哪种方法最适合无障碍？

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; 
}

P.S：没有<img>选择，请。

来源

2012-09-18 tic

谁禁用CSS的人？人们甚至做到了吗？我听说过禁用JavaScript的人 - 这在企业环境中很常见 - 但不是CSS。 –

我的首选方法在这里有奇妙的解释：http：//nicolasgallagher.com/css-image-replacement-with-pseudo-elements/ – mddw

@RoddyoftheFrozenPeas：这是关于可访问性（即为残疾人简化了对技术的访问），以防万一其中禁用CSS并不罕见...阅读更多关于[可访问的富互联网应用程序（ARIA）]（http://www.w3.org/TR/wai-aria/） –

SPAN是一个非常通用的元素，应该在没有更好的标记元素适用于此目的时使用。在你的情况下，A（锚点）就是你所需要的，假设你的“call”元素是用户代理应该从纯文本中区分出来的。即使你不使用href，它仍然是一个锚点 - 只需用JavaScript将它绑定到一个鼠标事件即可。

此外，在这里使用背景图片是错位的。背景图像是为背景。事实上，用户代理甚至不应该将这些作为活动用户界面的一部分来点击（仅作为非常次要的交互）。如果它是一个“呼叫”按钮，则使用CSS content属性代替。不过，你对img是正确的 - 对于携带页面内容而不是导航的图像。即按钮，锚点等不应该使用img标签。您也可以使用input或button，具体取决于上下文（无法从您的问题中得知）。

如果你真的想使您的网页访问，你是在正确的轨道上，但我真的觉得下面是一个更好的选择：

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

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

你可以调整你的锚被标记大小与s1类使用CSS width和height。但我会使用SVG。如果你的图形是矢量图，这绝对是一个更好的主意。像素的照片和像素艺术:-)

如果你希望你的元素后添加一些文字，你可以使用CSS :after：

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

来源

2012-09-19 12:45:42 amn

小心通过生成的内容添加必要内容，比如'after'。它没有可靠地宣布。 – steveax

定位标记上的'alt'不是有效的HTML。没有辅助技术应该看到或注意它。 'title'也不总是被宣布。 –

@RyanB你绝对是对的。至于不承认'头衔' - 好吧，只能这么做。 – amn

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

即使替代方案2对可访问性也不利。当CSS为启用时，单词“call”被替换为图标。但是不能保证用户可以看到它。与内容图像相同，无法为背景图像指定alt文字。此外，你会用什么作为电话图标？大多数这样的图标是旧式的，比如☎或✆，并且越来越多的人从未使用过这样的设备。

来源

2012-09-19 04:48:21

<span>的两种不同用途：哪种方法最适合无障碍？

回答

相关问题