Кнопка самоотключения, доступность

Question

Есть ли способ не читать "недоступен" или "затемненный" на кнопку самоотключения?

Смотрите пример Пример

var saveBtn = document.getElementById("saveBtn");
var helper = document.getElementById("helper");
var content = document.getElementById("content");
saveBtn.onclick = function(e) {
  saveBtn.setAttribute("disabled", "disabled");
  saveBtn.setAttribute("aria-disabled", true);
  content.innerHTML = 'Lorem input a lot of stuffs';
  helper.innerHTML = "Content added, please read it";
  setTimeout(function(){
    helper.innerHTML = "";
    saveBtn.removeAttribute("disabled");
    saveBtn.setAttribute("aria-disabled", false);
  }, 5000);
};

• Голос только говорит: "Контент добавлен, пожалуйста, прочитайте его"
• NVDA говорит: "Контент добавлен, пожалуйста, прочтите его. Недоступно

Я знаю, что это происходит, потому что кнопка все еще имеет фокус. Но мне нужно найти решение для этого, потому что я не могу изменить текущее поведение моей страницы.

Я использую HTML-помощник для информирования переходов, как вы можете видеть /questions/37523443/est-li-sposob-soobschit-programme-chteniya-s-ekrana-o-perehode-v-novyij-razdel-na-toj-zhe-stranitse/37523462#37523462.

Извините за уродливый код, это только для того, чтобы имитировать мое реальное поведение.

Спасибо вам, ребята!

Answer 1

Вам нужно будет переместить фокус на новый элемент. Дай это tabindex=0 а затем использовать focus(),

aria-live когда вы хотите, чтобы программа чтения с экрана говорила об изменениях в области содержимого с помощью aria-live приписывать. Так как вы используете его на одном уровне, вы упускаете возможность просто делать то, что он делает. Альтернатива, вы можете пропустить tabindex/focus() подойти и просто положить aria-live на контейнере для вашего нового контента.

Также вы можете отказаться от aria-disabled и просто опираться на disabled для кнопки. aria-disabled для элементов, которые в противном случае не поддерживают disabled,

Answer 2

Вы ответили на свой вопрос, когда сказали "я знаю, что это происходит, потому что кнопка все еще имеет фокус", а затем аардриан указал на это явно, когда сказал: "Вам нужно будет перенести фокус на новый элемент".

Имейте в виду, однако, что остается ли фокус на отключенном объекте полностью пользовательским агентом (браузером). Некоторые браузеры оставляют фокус на отключенном объекте, а другие переносят его на родительский.

Комментарий Аардриана об использовании tabindex было, если вы хотите переместить фокус на объект, который обычно не фокусируется (то есть, если это элемент, на который вы обычно не можете нажать TAB). Так что, если вы хотите переместить фокус на какой-нибудь простой текст (просто, чтобы снять его с кнопки), то я бы подправил предложение и использование Аардриана tabindex='-1' вместо tabindex='0', Это позволит вам вызывать focus() для этого элемента, но не позволит пользователю нажать на него.

Если вы хотите переместить фокус на другую кнопку на странице или какой-либо другой элемент, который может естественным образом получить фокус (флажок, поле ввода и т. Д.), То вам не нужно tabindex,

Если вы в конечном итоге переместите фокус на только что добавленный текст, то вам не нужно aria-live потому что программа чтения с экрана будет читать текст, на котором вы только что сосредоточились. Но это относится только к тому примеру, который вы опубликовали, и, насколько я понимаю, это всего лишь пример, демонстрирующий проблему. Ваше настоящее приложение может не добавлять текст.

И я хочу, чтобы рекомендация второго аардриана не устанавливать aria-disabled когда вы уже используете disabled имущество. Это лишнее. aria-disabled Свойство для того, когда вы моделируете отключенный объект.

Answer 3

То, как текст читается, варьируется от читателя к читателю. Ни один не прав или нет. Если вы хотите, чтобы читаемый текст был одинаковым и одинаковым для всех читателей... Сделайте небольшой обходной путь. Добавьте aria-label="требуемый текст" к вашей кнопке. Это переопределит все, что присутствует внутри тега кнопки.

например

<button aria-label="desired text button">This text will be ignored</button>

Nvda будет читать кнопку как "нужную текстовую кнопку". Текст внутри кнопки игнорируется. Теперь вы можете обрабатывать (добавлять / удалять) атрибуты disabled и aria-label с помощью JS.

В контексте вашего вопроса вы можете попробовать:

Вместо:

helper.innerHTML = "Content added, please read it";

Попробуйте использовать:

saveBtn.setAttribute("aria-label", "Content added, please read it.");
setTimeout(function(){
saveBtn.removeAttribute("aria-label");}, 5000);

Тогда текст будет одинаковым для всех читателей.