Программа чтения с экрана, т.е. JAWS не читает текст кнопки, когда текст изменяется при нажатии этой кнопки?

Question

Я столкнулся с одной незначительной трудностью при включении доступа к программному обеспечению ARIA. Любая помощь будет оценена!

У меня есть div, который работает как кнопка "Редактировать" с событием click, используя jQuery. Я изменяю текст этой кнопки "Сохранить" при клике. Программа чтения с экрана, такая как JAWS, читает "Редактировать кнопку", когда фокус попадает на эту кнопку в первый раз.

Но я хочу, чтобы JAWS распознал изменение, произошедшее после события щелчка, т. Е. После нажатия JAWS должен прочитать "Кнопка сохранения". Любая помощь? (Обратите внимание, что даже после щелчка фокус остается на той же кнопке)

HTML-код для этого элемента / кнопки:

<div role="button" class="js-btn" aria-label="Edit">Edit</div>

Код jQuery для обработки события клика:

$(document).on("click",".js-btn",function(e){
    $(this).innerHTML("Save");
    $(this).attr("aria-label","Save");
});

Answer 1

(Обратите внимание, что даже после щелчка фокус остается на той же кнопке)

Если это ваше ожидаемое поведение, это ответ на ваш вопрос: пока фокус остается на элементе, программа чтения с экрана не будет перечитывать свои данные.

Используйте две кнопки, покажите кнопку "Сохранить" после нажатия "Изменить" и скройте кнопку "Редактировать".

<button id="edit">Edit</div>
<button id="save" class="hidden">Save</div>

$("#edit").on("click", function() {
    $(this).hide();
    $("#save").removeClass("hidden").focus();
});

Answer 2

Первый: реквизит для размышлений о доступности и тестирования для него! Но aria и его функции действительно предназначены для расширения HTML для интерактивных вещей, которые он не может обрабатывать изначально. И HTML может полностью обработать кнопку. Так что используйте button здесь, пожалуйста, и вы можете пропустить role а также aria-label,

Наличие родной семантики может быть достаточным, чтобы JAWS заметила изменения в тексте - не уверен, но стоит попробовать. Если это не так, вы можете добавить aria-live="polite" или же aria-live="assertive" на ваш button и это должно заставить SR объявить, когда его содержимое изменится. (Какой из них использовать, зависит от того, насколько вы настойчивы в информировании вашего пользователя - polite не будет прерывать то, что они делают, assertive будут.)

<button aria-live="polite" class="js-btn">Edit</button>