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

Question

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

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

Большое спасибо!Mike

Answer 1

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

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

Answer 2

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

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

 visibility: hidden; display:none;

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