У меня есть веб-приложение с довольно сложным интерфейсом и часть экрана, зарезервированная для контента.
Если возможно, я хотел бы сделать так, чтобы, когда пользователь использует встроенный текстовый поиск браузера (CTRL + F), любой текст в пользовательском интерфейсе игнорируется и выполняется поиск только фактического содержимого.
Это выполнимо? CSS и JavaScript приемлемы
(Я понимаю, что мог бы сделать текст на <canvas> но там не стоит усилий)
Вы можете ввести свой текст пользовательского интерфейса, используя свойство 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";
}
Поскольку скрин-ридеры, вероятно, не будут обрабатывать эти стили правильно, у вас все еще будут те же проблемы с доступом, что и у вас, с изображениями, но было бы намного проще поддерживать, а также позволять более отзывчивый дизайн.
Чтобы расширить ответ на недействительность: вы также можете сохранить текст в атрибуте данных следующим образом:
.css-text [data-content]:before {
content: attr(data-content);
}<div class="css-text">
Hello, <span data-content="World"></span>!
</div>Мое предложение состояло в том, чтобы сделать область, в которой вы не хотите искать изображение, или использовать его как вспышку. Единственное решение, которое я смог найти, это. Но использование этого полностью зависит от вас.