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

Question

У меня есть аудио-элемент в моем 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; }

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

Answer 1

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

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

Также вы можете искать "визуально скрытый" класс.

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

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

Способ объявить что-либо - создать элемент с ролью = 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>

Когда я нажимаю на кнопку, текст будет вставлен в

и будет объявлен новый текст.

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

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

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

, и т. Д.) Если у вас есть текст, который скрыт зрячими пользователями, то пользователи программы чтения с экрана могут найти этот текст, не заставляя его автоматически читать.

Answer 2

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

div {
  overflow:hidden;
  height:0;
  width:0;
}