Скрыть элемент, но сохранить для программ чтения с экрана (нельзя использовать display: none, visibility: hidden или opacity: 0)

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

Чтобы что-то объявить, нужно создать элемент с role=alert (другого способа сделать это нет, например, нет JS-функции, которая могла бы напрямую «разговаривать» с читателем):

<!-- This element can be dynamically added OR shown (via JS) to make a Screen Reader announcement -->
<div role="alert">This will be announced to Screen Readers.</div>

Однако я не могу сделать так, чтобы этот элемент «аудио-помощник» был виден обычным пользователям.

1) Не могу использовать display: none; -> Программа чтения с экрана не подберет его

2) Невозможно использовать visibility: hidden; -> Программа чтения с экрана не подберет его

3) Невозможно использовать opacity: 0; ->, поскольку занято место, макет должен быть точно таким же

Я нашел это решение: https://stackoverflow.com/a/25339638/1005607

div { position: absolute; left: -999em; }

Это отлично работает, это решает мою проблему. Но это что-то вроде взлома. Я хотел спросить: есть ли более стандартный способ решения этой проблемы?


html css screen-readers section508 nvda
person gene b.    schedule 21.01.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я не уверен, что это «лучший» способ, но это скроет его на месте.

div {
  overflow:hidden;
  height:0;
  width:0;
}
person Wayne Allen    schedule 21.01.2019
comment
это не полный ответ. установка только этих свойств не будет полностью скрывать элемент во всех браузерах и всех программах чтения с экрана. - person slugolicious; 22.01.2019

arrow_upward
3
arrow_downward

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

Требуется больше свойств CSS, чем вы пробовали. Подробнее см. Что такое sr-only в Bootstrap 3?.

Кроме того, вы можете выполнить поиск по классу «визуально скрытый».

И sr-only, и visually-hidden - общие имена, используемые для наименования класса, который визуально скрывает элементы.

Кроме того, ваше понимание role="alert" не совсем точно.

Чтобы что-то объявить, можно создать элемент с параметром role = alert (другого способа сделать это нет, например, нет функции JS, которая могла бы напрямую «разговаривать» с читателем):

role="alert" имеет неявный aria-live="assertive". Элементы с aria-live сообщают о изменениях этого элемента программам чтения с экрана. Он не будет автоматически объявлять об этом элементе. Например,

<div id="foo" aria-live="polite"></div>
<button onclick="document.getElementById("foo").innerHTML = 'hello'">update</button>

Когда я нажимаю на кнопку, текст будет вставлен в ‹div>, и будет объявлен новый текст.

В общем, вы хотите использовать aria-live="polite", а не aria-live="assertive". Когда вы используете role="alert", вы получаете aria-live="assertive".

Поэтому, если ваша страница обновляет свое содержимое, то использование aria-live - правильный выбор. Но это не приводит к тому, что что-то объявляется только потому, что ваша страница загружена.

У пользователя программы чтения с экрана есть много способов навигации по веб-сайту с помощью клавиш быстрой навигации, определенных в программе чтения с экрана (например, H для перехода к следующему заголовку [h1, h2, h3 и т. Д.], Или T для перехода к следующей таблице или L для перехода к следующему списку и т. Д.), При условии, что ваш HTML использует семантические элементы (такие как ‹h1>, ‹table> , ‹Ul> и т. Д.). Если у вас есть текст, который скрыт от зрячих пользователей, то этот текст смогут найти пользователи программ чтения с экрана, не заставляя вас читать его автоматически.

person slugolicious    schedule 21.01.2019