在图片后面添加文字答案

【问题标题】：Add text behind picture在图片后面添加文字
【发布时间】：2014-12-22 15:53:06
【问题描述】：

我有图片链接按钮。在高对比度模式下，图像 (ok.gif) 不可见，所以我想要备用图片。我的备用“图片”是 unicode 字符 unicode \270E。这在高对比度模式下工作，但在正常模式下，unicode 超过图像。我想让我的备用“图片”在真实图片后面，这样在正常（非高对比度）模式下不可见。感谢您的帮助。

a.img-button-edit,
a.img-button-edit:visited,
a.img-button-edit:link {
    width: 28px;
    height: 20px;
    display: block;
    background: transparent url("../Images/buttons/ok.gif") no-repeat top left;
    background-position: -56px 0px;
}

    a.img-button-edit:before {
        text-align: center;
        font-size: 1.3em;
        margin: 0 0 0 0;
        padding: 0 .2em;
        content: "\270E";
    }

【问题讨论】：

错误... z-indext？请务必声明 position 以使 z-index 正常工作。
那么，你的实际问题是......？
一个伪元素的内容被插入到父元素内部的栈中。 z-index 将不起作用。 stackoverflow.com/questions/7822078/…
您可能需要重新考虑解决此问题的方法，因为插入的内容仍会被屏幕阅读器大声朗读。 VoiceOver 将读取 unicode 字符的名称，并且您不能在伪元素上指定 aria-hidden。 filamentgroup.com/lab/bulletproof_icon_fonts.html

标签： css accessibility section508

【解决方案1】：

我选择阅读您的问题，询问如何使用high contrast mode accessibility. 执行图像精灵

HCM 删除所有背景图像并将所有元素颜色设置为黑色背景上的白色。这对于视力低下的人来说是一种有用的自适应技术，它是一种成熟的操作系统级别设置，尽管 Chrome 和其他辅助功能套件会略有不同。对于所有可访问性设计，测试很重要。

那么如何在 HCM 中使用图像精灵？

如果您使用传统图像精灵，其中单个图像用作具有不同 background-position 值的 background-image，这些图像将从 HCM 中的页面中删除。这是为了提高页面的易读性（回想一下过去平铺的 gif 背景），但这显然会在工具栏或图标栏产生一个大问题，其中图像是唯一给出的界面。

选择仅图标路线有其自身的一系列可访问性问题（手机对年长用户是否意味着“给我们打电话”？软盘对 2000 年出生的人是否意味着“保存”？其他文化呢？等）但抛开这一点不谈，您如何在技术上为 HCM 执行此操作？

用 unicode 字符替换图像可能有效，但很难以您选择的方式执行。对于z-index，伪元素被视为子元素。 Plus, the unicode character is still read aloud to screen readers. 想到的一个想法是设置 color: transparent;，并允许 HCM 将其转换为黑色，同时允许 background-image 被剥离。您仍然需要两个元素，一个包含屏幕阅读器的文本，一个包含带有aria-role="hidden" 的图像。否则，以下内容将被解读为“编辑。右下铅笔”。

<a aria-label="edit" class="img-button-edit"><span aria-hidden="true">&#9998;</span></a>

a.img-button-edit{
    color:transparent;
    width: 28px;
    height: 20px;
    display: block;
    background: transparent url("../Images/buttons/ok.gif") no-repeat top left;
    background-position: -56px 0px;
    z-index: 0;
}
span[aria-hidden="true"]{
    z-index: -1;
 }

当然，现在 IE8 和更早版本会破坏 'color: transparent' 或 'color: rgba(0,0,0,0);' 所以我使用 z-index 作为额外的保险。

但是，您也可以考虑走the <img> sprite as described by Artz Studio. 或Yahoo Accessibility Blog 的路线，因为<img> 被HCM 保持不变

<a aria-label="edit" class="img-button-edit"><img src="../Images/buttons/ok.gif" aria-hidden="true"></img></a>

a.img-button-edit{
    width: 28px;
    height: 20px;
    display: block;
    overflow:hidden;
    position:relative;
    top: -56px;
}

这使用带有overflow: hidden; 的<img> 元素来代替背景图像精灵中的传统空<div> 或<span>。这在启动时在语义上更准确。无论哪种方式，我都看不到避免在标记中添加额外元素的方法。

【讨论】：