我的公司正在探索一些我们在设计中通常使用的场景,我们意识到这些场景可能并非100%符合WCAG 2.0标准。

一种这样的情况是,我们有锚标签(例如社交媒体链接),该锚标签没有内容,并且在伪元素上声明了背景图像。

我知道的最好的替代方法是:

  1. 在链接上使用title属性
  2. 使用“仅限屏幕阅读器”类将文本添加到包裹在span的链接中,例如eBay Mind Patterns中的示例:

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

明确地说,这是我们正在使用的伪类背景图像样式的示例

.pseudo::after {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    background-image: url('images/pizza.png');
}

有什么想法哪个更合规?

选项1:标题,无文字

<a title="pizza title" href="http://pizza.com" class="pseudo pizza"></a>

选项2:仅屏幕阅读器中链接中的文本

<a href="http://pizza.com" class="pseudo pizza">
    <span class="clipped">pizza text</span>
</a>

#1楼 票数:1 已采纳

简短的答案:如果可能,请选择第二个。

title属性有点棘手,因为默认情况下并非所有屏幕阅读器都读取它。 为了安全起见,确保屏幕阅读器可以100%覆盖屏幕,请使用<a>标记内的文本,并在需要时将其设置为仅屏幕阅读器。

#2楼 票数:1

我也将投票支持第二个选项,但是另一种方法是在链接中实际包含文本内容,但是添加text-indent: -5000px; (或另一个类似的高负值)与其CSS一起将文本移出屏幕。

#3楼 票数:0

当很难在两个世界中最好的一个之间进行选择时,请不要尝试。

最简单的解决方案:

<a href="http://pizza.com" class="pseudo pizza" title="pizza text" aria-label="pizza test">
    <span class="clipped">pizza text</span>
</a>

为什么? 因为title属性可以作为非屏幕阅读器用户的工具提示来访问,并且屏幕阅读器可以在未配置为使用裁剪后的文本时使用它。

使用aria-label也非常重要,因为使用CSS在视觉上隐藏元素可能会导致随机行为,具体取决于所使用的辅助技术。 例如,某些辅助技术可能选择删除不可见的文本,而另一些则保留它们。

支持所有屏幕阅读器的最佳选择是使用以下三个选项:新屏幕阅读器的aria-label ,旧屏幕阅读器的剪切文本和标准用户的title属性。

  ask by Eric Dauenhauer translate from so

未解决问题?本站智能推荐:

2回复

HTML/CSSDiv和背景图像

我有一个非常大的图像。 我想用这个图像作为我网站的背景。 我也希望这个图像能够拉伸并适合不同的浏览器窗口大小。 这是我提出的解决方案。 (我把它放在jFiddle上让你们更容易阅读)。 http://jsfiddle.net/sGyax/ 在我的HTML中没有使用IMG标签,我
4回复

带有边框背景图像的图像

我想要做的是围绕图像的边框。 当我将类“ PayPalItem”放在其上时,在左下角的边框的右下角具有非重复背景。 所以,说这是 我希望它看起来像这样 这是我想要HTML外观和已设置的基本CSS的示例。
3回复

如何在大量其他图像(.css文件中的html元素)之前加载一个小的css背景图像?

我想知道你是否可以帮忙。 我有一个小图像(46kb),它目前在 CSS 中是这样调用的: 我目前遇到的问题是背景是最后加载的东西。 在我的大多数页面上,我有大约 50 到 150 个 4kb 的小图像(它们是内容图像)。 因此,所有这些图像在背景图像之前首先加载。 虽然这没什么大不了的,因为内容仍然
1回复

如何通过满足Web可访问性指南以正确的方式在html中添加图像

我目前正在研究有关 HTML5 的 Web 可访问性指南。 关于图像,我目前正在 HTML 中添加图像,如下所示: 我的问题: 它是一个很好的做法,既能补充aria-lablleby和alt标签为正常图像融合在一起? 或者我应该采用更好的做法。 我是否需要为每个装饰图像添加role="prese
2回复

无限背景图像html/Css

我正在创建一个网站,我希望在那里有一个背景图像。 图像为黑色,上面有一些字符。 然而,页面可以是“M”像素高(y轴)或“N”像素高(y轴)。 我想只显示一个图像实例(不重复)如何制作它,使页面顶部只有一个图像,页面的其余部分(无论多长)都是黑色的?
2回复

装饰图像或重复信息图像的可访问性

当你写一个alt时,你应该记住一些事情。 其中一个建议当图像内容是装饰性的或包含重复信息时使用空的alt="" 。 但是使用之间的区别是什么: 还是一起?
1回复

html/css-将内容图像显示为背景图像

我目前正在开发CMS,并想知道哪种方法更适合图像的渲染功能(在内容上): 当我想要裁剪图像时,通常的方法是:计算并在PHP中进行裁剪并缓存裁剪后的图像。 然后只需使用图像元素对其进行渲染。 现在,我认为有更好的方法:简单地渲染一个具有精确高度(例如宽度可能为100%或固定)的div,然
2回复

如何在锚标记中创建图像?

假设我的图像如下图所示。 据WCAG称,这个图像很实用,因为它将用户链接到另一个页面。 好像我应该把链接的目的地放在alt属性中,如alt="comic homepage" 。 有视力障碍的人也不想知道图像显示的是什么吗? 该用户是否会喜欢alt="comic that links