Анализ поддержки клавиатуры в формах

В этой статье используется средство "Проверка " и вкладка "Прослушиватели событий " для анализа отсутствия поддержки клавиатуры на демонстрационной странице с кнопками, использующими <div> элемент .

На демонстрационной веб-странице тестирования специальных возможностей в форме "Пожертвовать " кнопки "Сумма" и " Пожертвовать " недоступны с помощью клавиатуры. Чтобы проверить это, выполните приведенные ниже действия.

1. Откройте демонстрационную веб-страницу тестирования специальных возможностей в новом окне или вкладке.

2. В разделе Помощь с пожертвованием щелкните текстовое поле Другие , чтобы сосредоточиться на нем.

3. Попробуйте нажать клавишу TAB или SHIFT-TAB , чтобы переместить фокус на кнопки "Пожертвовать", "50", "100" или "200 ". Кнопки недоступны с клавиатуры.

Отладка формы пожертвования требует понимания того, почему отсутствие стиля фокусировки не помечается как проблема с автоматическими средствами тестирования, такими как средство "Проблемы ". В этом примере кнопки реализуются с помощью <div> элементов HTML, которые не распознаются этими инструментами как элементы управления формой.

Анализ отсутствия поддержки клавиатуры с помощью средства "Проверка"

Чтобы использовать средство "Проверка " для анализа отсутствия поддержки клавиатуры на демонстрационной странице:

1. Откройте демонстрационную веб-страницу тестирования специальных возможностей в новом окне или вкладке.

2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить.

3. Нажмите кнопку Проверить () в левом верхнем углу средства разработки, чтобы кнопка была выделена (синяя).

4. Наведите указатель мыши на кнопку пожертвования 50, 100 и 200 . Средство "Проверка" отображается на веб-странице в виде наложения. Строка с фокусом на клавиатуре наложения Проверки показывает, что ни одна из кнопок суммы пожертвования не доступна с клавиатуры, о чем свидетельствует серый перечеркнутый круг:

   

   Кнопки не имеют имени и имеют роль , так как они являются <div> элементамиgeneric, что означает, что кнопки недоступны для специальных возможностей.

5. Когда средство проверки будет активным, на веб-странице выберите текстовое поле Другие входные данные над кнопкой Пожертвовать . Откроется инструмент Элементы , в котором отображается дерево DOM для веб-страницы. <input id="freedonation" class="smallinput"> Элемент выбран.

   <div class="donationrow">
       <div class="donationbutton">50</div>
       <div class="donationbutton">100</div>
       <div class="donationbutton">200</div>
   </div>
   <div class="donationrow">
       <label for="freedonation">Other</label>
       <input id="freedonation" class="smallinput">
   </div>
   <div class="donationrow">
       <div class="submitbutton">Donate</div>
   </div>
   

   <label> Использование элементов и <input> в текстовом поле Other является допустимым, что означает, что метка Other правильно связана с текстовым полем ввода. Текстовое <input> поле также доступно с клавиатуры. В остальной части разметки формы используются <div> элементы, которые легко стильировать с помощью CSS, но не имеют смысла для специальных возможностей и недоступны с помощью клавиатуры.

Анализ отсутствия поддержки клавиатуры с помощью вкладки "Прослушиватели событий"

Функциональность формы создается с помощью JavaScript, и вы можете проверить это, проверив вкладку Прослушиватели событий следующим образом:

1. Откройте демонстрационную веб-страницу тестирования специальных возможностей в новом окне или вкладке.

2. Щелкните правой кнопкой мыши текстовое поле Другое на веб-странице и выберите пункт Проверить. Откроется инструмент Элементы , и <input id="freedonation" class="smallinput"> элемент будет выбран.

3. Когда элемент <input id="freedonation" class="smallinput"> по-прежнему выбран в дереве DOM, выберите вкладку Прослушиватели событий справа от вкладки Стили , а затем разверните click прослушиватель событий.

   

4. Щелкните ссылку buttons.js:18 . Откроется средство "Источники ", в котором отображается примененный Код JavaScript:

   

   Ниже приведен список кода примененного Кода JavaScript:

   donations.addEventListener('click', e => {
     let t = e.target;
     if (t.classList.contains('donationbutton')) {
       if (currentbutton) { currentbutton.classList.remove('current'); }
       t.classList.add('current');
       currentbutton = t;
       e.preventDefault();
     }
     if (t.classList.contains('submitbutton')) {
       alert('Thanks for your donation!')
     }
   })
   

click Рекомендуется использовать прослушиватель событий для выполнения кода при использовании кнопки, так как click событие запускается как при указателе мыши, так и при взаимодействии с клавиатурой. Однако кнопка "Пожертвовать " реализуется с помощью <div> элемента HTML, который не может быть сфокусирован с помощью клавиатуры. Событие click выполняется только при использовании мыши или другого click источника события, например специальной кнопки, доступной на некоторых клавиатурах.

Это классический пример, в котором javaScript был добавлен для повторного создания функциональных возможностей, предоставляемых <button> элементами в собственном коде. Имитация функциональности кнопок с помощью <div> элементов в итоге создает недоступный интерфейс.