Объявляйте об изменении текста арии, несмотря на то, что div скрыт

Question

У меня есть div с иконкой и сообщением, которое скрыто, если кто-то не наведет на него курсор мыши, который выполняет действие при нажатии.

Для зрячих пользователей значок переключается на галочку при нажатии, а сообщение меняется, когда значок находится над ним.Тем не менее, для пользователей, использующих кнопку вкладки, сообщение не отображается.

Div с сообщением является регионом арии, но так как он скрыт, программа чтения с экрана не объявит о новом сообщении.Есть ли способ объявить сообщение, несмотря на то, что регион скрыт?

Answer 1

Я нашел лучший способ справиться с этой проблемой.Во-первых, вы всегда должны устанавливать видимость вашего живого элемента в DOM, а не в пользовательском интерфейсе, а после этого вам необходимо обновить textContent или innerHTML;следующий шаг, просто setTimeout на пару миллисекунд (100 мс в моем случае) или более, и после этого просто очистите содержимое внутри.Таким образом, программа чтения с экрана все равно полностью прочитает предыдущее сообщение.Вы также можете clearTimeout, если новые сообщения должны быть добавлены в то же время.

пример:

function updateLiveRegion(message) {
    const elem = document.getElementById("my-id");
    elem.textContent = message;
    clearTimeout(myTimeout);
    myTimeout = setTimeout(() => {
        elem.textContent = "";
    } , 1000);
}

updateLiveRegion("my message");

Answer 2

Короткий ответ - нет.область aria-live должна быть видимой, если вы хотите, чтобы ее содержание было объявлено.

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

ЕСЛИ показывать сообщение в течение этого времени недопустимо,Вы все еще можете поместить его за пределы экрана, используя немного CSS, как показано ниже.Обратите внимание, что многие фреймворки уже имеют классы, такие как .visually-hidden, .sr-only и т. Д. С похожим кодом.Если вы используете один из них, используйте то, что они определяют.

.visually-hidden {
top:0;
left:-2px;
width:1px;
height:1px;
position:absolute;
overflow:hidden;
}

`` `