Как скрыть какой-либо элемент со страницы только из Screenreader, но не со страницы для обычных пользователей?

Question

Как скрыть какой-либо элемент со страницы только из Screenreader, но не со страницы для обычных пользователей?

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

/* Hide for both screenreaders and browsers
      css-discuss.incutio.com/wiki/Screenreader_Visibility */
    .hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders
    www.webaim.org/techniques/css/invisiblecontent/ ; &  j.mp/visuallyhidden ; */
   .visuallyhidden { position: absolute !important;   
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
   .invisible { visibility: hidden; }

Answer 1

Используйте это для элемента:

aria-hidden="true"

Это отображает элемент как обычный для зрячих пользователей, но не читается вслух программой чтения с экрана.

Answer 2

Я думаю, что ответ Майкла, приведенный выше, был бы наиболее семантически обоснованным и правильным способом выполнения того, что вы хотите.Единственная проблема заключается в поддержке screenreader \ browser, как он указывает.

Быстрый и грязный способ - показать любой контент, который вы хотите визуально, в виде изображения, а затем присвоить ему пустое альтернативное текстовое значение, например

<img src="visualcontentonly.png" alt="" />

Какой контент вы хотите скрытьот пользователей скринридера?Там может быть более подходящий способ решения этой проблемы.Хотя отображение его в качестве изображения будет работать, на него можно не смотреть с точки зрения доступности, в зависимости от содержания.

Answer 3

Я не уверен, будут ли программы чтения с экрана подчиняться чему-либо в новом речевом модуле CSS3, но это может быть чем-то, что вы можете проверить, так как это кажется самым простым вариантом, если он работает.

http://www.w3.org/TR/css3-speech/