Проблема доступности, когда кнопка отключена / включена - PullRequest
Новая
       8

Проблема доступности, когда кнопка отключена / включена

0 голосов
/ 08 ноября 2018

Я сталкиваюсь с проблемой доступности, когда моя кнопка включена / отключена: Ниже моя угловая форма: 

<form>
<input type="text" id="UserName">
<input type="text" id="Password">
<button type="submit" [disabled]="conditions">
</form>

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

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Это большой вопрос за пределами доступности.То, как вы сейчас его кодируете, соответствует требованиям WCAG, но, возможно, не будет наилучшим пользовательским интерфейсом для пользователя программы чтения с экрана, по крайней мере, для пользователя программы чтения с экрана, который использует клавишу TAB для навигации.Они никогда не услышат кнопку, потому что фокус не сместится к ней.

Однако многие (более половины, вероятно, намного больше) пользователи программ чтения с экрана перемещаются по дереву доступности (аналогично DOM) с помощью клавиш со стрелками вверх / вниз (с JAWS иNVDA) или проведите пальцем влево / вправо (с VoiceOver на iOS).Этот тип навигации позволяет им получить доступ ко всем элементам на странице, которые находятся в дереве доступности (которое является большинством элементов DOM).Таким образом, пользователь программы чтения с экрана , скорее всего, перейдет к отключенной кнопке и услышит, что она отключена.

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

0 голосов
/ 08 ноября 2018

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

Это во многом зависит от вас. Информация уже передана агентом пользователя (визуальные показывают кнопку в «сером» или подобном виде; невизуальные сообщают об этом другими способами).

Как передать пользователю, что моя кнопка отключена ...

Это также зависит от вас. Если вы хотите включить сообщение после того, как оно что-то говорит, и показывать только то, что когда кнопка отключена, это достаточно просто с HTML и CSS, используя следующий братский комбинатор (+ ): 

<button type="submit" [disabled]="conditions">button text</button>
<span class="show-on-disable">your text here</span>

CSS: 

.show-on-disable {
    display: none;
}
button[disabled] + .show-on-disable {
    display: inline;
}

Live Пример: 

document.querySelector("input[type=checkbox]").addEventListener("change", function() {
  var btn = document.querySelector("button");
  btn.disabled = !btn.disabled;
});
.show-on-disable {
    display: none;
}
button[disabled] + .show-on-disable {
    display: inline;
}
<div>
  <label>
    <input type="checkbox">
    Disable the button
  </label>
</div>
<button type="submit">button</button>
<span class="show-on-disable">your text here</span>
...