Скрыть элемент, но сохранить для программ чтения с экрана (нельзя использовать отображение: нет, видимость: скрыто или непрозрачность: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; -> потому что место занято, расположение должно быть точно таким же

Я нашел это решение: /questions/7318591/kak-skryit-elementyi-ne-zanimaya-ih-mesto-na-stranitse/7318598#7318598

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

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

Источник

2 ответа

Решение

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

div {
  overflow:hidden;
  height:0;
  width:0;
}
Источник

Обычной практикой является использование 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 использует семантические элементы (такие как

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

    Источник
    Другие вопросы по тегам