Question

我有图片链接按钮。在高对比度模式下，图像（ok.gif）不可见，所以我想要备用图片。我的替代＆＃34;图片＆＃34;是unicode character unicode \270E。这是在高对比度模式下工作，但在正常模式下，unicode是在图像上。我想要我的替代＆＃34;图片＆＃34;在真实图像后面，这在正常（非高对比度）模式下是不可见的。谢谢你的帮助。

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.执行图像精灵

HCM删除所有背景图像，并将所有元素颜色设置为黑色背景上的白色。对于视力不佳的人来说，这是一种非常有用的自适应技术，虽然Chrome和其他辅助功能套件略有不同，但它是一种完善的操作系统级别设置。通过所有可访问性设计，测试非常重要。

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

如果您使用传统图像精灵，其中单个图像用作具有不同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和更老版本将使用'color：transparent'或'color：rgba（0,0,0,0）;`所以我使用z-index作为额外的保险。

但是，您也可以考虑使用the <img> sprite as described by Artz Studio.或Yahoo Accessibility Blog的路线，因为HCM保留了<img>

<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>的{{1}}元素代替背景图片精灵中的传统空overflow: hidden;或<div>。这在启动时在语义上更准确。无论哪种方式，我都没有办法避免在标记中添加额外的元素。

在图片后面添加文字

1 个答案: