Добавить текст за рисунком

Question

У меня есть ссылка на изображение. В режиме контрастного режима изображение (ok.gif) не отображается, поэтому я хочу иметь альтернативное изображение. Мое альтернативное «изображение» - это символ юникода unicode \270E. Работает в режиме высокой контрастности, но в нормальном режиме юникод - над изображением. Я хочу иметь свою альтернативную «картинку» за реальным изображением, чтобы она не была видимой в нормальном (не высококонтрастном) режиме. Спасибо за помощь.

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?

Замена изображения символами юникода может работать, но выполнить его будет так, как вы выбрали. Псевдоэлементы рассматриваются как дочерние элементы в отношении 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-индекс в качестве дополнительного страхования.

Однако, вы могли бы также рассмотреть возможность маршрута 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> в фоновое изображение спрайтов. Это более семантически точная загрузка. В любом случае, я не вижу способа избежать добавления дополнительного элемента в вашу разметку.