css - 在图片后面添加文字

Question

我有图像链接按钮。在高对比度模式下图像 (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";
    }

Answer 1

我选择将您的问题解读为询问如何使用 high contrast mode accessibility. 执行图像 Sprite

HCM 移除所有背景图像并将所有元素颜色设置为黑色背景上的白色。这对视力不佳的人来说是一项有用的自适应技术，它是一个完善的操作系统级别设置，尽管 Chrome 和其他辅助功能套件会略有不同。对于所有无障碍设计，测试都很重要。

那么我该如何在 HCM 中使用图像 Sprite 呢？

如果您使用传统图像 Sprite ，其中单个图像用作 background-image与不同background-position值，这些图像将从您的 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 和更早版本会搞砸“颜色:透明”或“颜色: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;
}

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