Ответ 1
Вы можете ввести свой текст пользовательского интерфейса, используя свойство content CSS. Сгенерированный текст, подобный этому, не доступен для поиска, поскольку он является частью стиля документа, а не содержимого.
Например:
Если у вас есть кнопка в пользовательском интерфейсе, например <button id="dosomething"></button> вы можете добавить в нее текст, не подлежащий поиску, используя следующий CSS:
#dosomething:before {
content: "Click Me";
}
Я создал скрипку, чтобы продемонстрировать, как это работает: http://jsfiddle.net/3xENz/ Обратите внимание, что она работает даже с тегами <a>.
Я рекомендую вам придерживаться :before селектором, потому что он работает в IE8, а :after селектора нет.
Если у вас более сложный элемент пользовательского интерфейса, вы также можете добавить в него еще один элемент для хранения текстового содержимого. Например:
<div id="complexcontrol"><div class="text"></div></div>
со следующим CSS:
#complexcontrol .text:before {
content: "Click Me";
}
Поскольку скрин-ридеры, вероятно, не будут обрабатывать эти стили правильно, у вас все еще будут те же проблемы с доступом, что и у вас, с изображениями, но было бы намного проще поддерживать, а также позволять более отзывчивый дизайн.