Сделать элементы невидимыми для чтения экрана / фокусировки на клавиатуре, но видимым для щелчков мыши

Question

Мне известно, как сделать невидимые элементы клавиатуры, а также чтение с помощью ScreenReaders, однако с целью опроса, возглавляемого студентом - я бы хотел, чтобы определенные элементы были невидимыми для чтения экрана / фокусировки клавиатуры, чтобы быть менее отвлекающим, но их видимым Для преподавателей используется с использованием мыши.

Я пытался использовать iframes, однако клавиатура все еще может «вкладка» в них. Я рассматривал всплывающее окно, которое может управлять родительским окном? - Но могут быть некоторые проблемы с блокаторами и т. Д.

Большое спасибо! Майк

Answer 1

Один из самых простых способов проигнорировать контент с помощью считывателя экрана - поместить его в изображение, а затем установить текст ALT на изображение, чтобы быть «» в вашем HTML. Это заставит читателя экрана пропустить этот контент, так как он не может его интерпретировать. Это также устранит любую фокусировку вкладок или клавиатуры, поскольку веб -браузер будет относиться к нему как к любому другому изображению на вашей странице.

Еще один способ сделать это, и немного сложнее, - это определить, втягивается ли ваша страница в браузер с чтением экрана, и установить свойства CSS контента, который вы не хотите прочитать читателем, чтобы иметь следующее:

 visibility: hidden; display:none;

Читатели экрана будут игнорировать все, что невидимо и/или не отображается, поэтому он не будет прочитан пользователю. Это также немного чище, так как вы не разрушаете рейтинг SEO страницы, но просто изменяете контент, отображаемый пользователям, которым не нужно видеть/слышать его.

Answer 2

Хороший способ предотвратить просмотр читателей экрана-применить атрибут Aria-hidden = "true"; Это довольно хорошо поддерживается браузерами, и будет предложить челюсти и другим читателям экрана пропустить контент. Вы также можете использовать ROLE = «презентация» - здесь есть хорошая статья: http://john.foliot.ca/aria-hidden/

Применение tabindex = -1 позволит только сфокусироваться на элементе, а не вводах клавиатуры, так что это будет работать тоже. Кроме того, хотя я не рекомендую это, я обнаружил, что разрывает волосы на чужой сценарий, что, если у вас нет атрибута «href», определенного для элемента ссылки, (делая его недействительным), это также предотвращает фокус.