Про що говорять інпути?

Якось так вийшло, що перший пост в нашому телеграм каналі був присвячений тестуванню доступності. І це не було зовсім вже випадково, тому що дійсно маємо певну експертизу в цій галузі.
І ось на днях знайшов цікавий інструмент, який допомагає (напів)автоматично перевіряти один з маленьких але важливих нюансів доступності веб сторінок.
Спочатку про пролему яку він вирішує: можливо ви зустрічались, або чули щось про інструменти, які допомагають озвучувати навігацію веб сторінками для людей із слабким (або відсутнім) зором. Для того щоб озвучити призначення поля для введення (інпуту) – такі інструменти орієнтуються на html тег , в якому є атрибут for. Атрибут for в свою чергу має значення id того інпуту, для якого призначений цей label.

Наприклад:

<label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male">

Але нажаль дуже часто при розробці веб сторінок про атрибут for забувають, тому озвучка навігації інпутами такої сторінки унеможливлюється.
Перевірити чи пов’язані input та label на ваших веб сторінках можно в напів-автоматичному режимі завдяки невеличкому JS скрипту, який можна запустити в DEV-консолі браузеру, або ж як bookmarklet. Ось власне сам скрипт:

inputs = document.querySelectorAll('input');
var labels = document.querySelectorAll('label');

for (var currentInput = 0; currentInput < inputs.length; currentInput++) {
    var inputHasLabel = false;
    for (var currentLabel = 0; currentLabel < labels.length; currentLabel++) {
        if (labels[currentLabel].htmlFor == inputs[currentInput].id) {
            inputHasLabel = true;
        }
    }
    if (inputHasLabel == false) {
        inputs[currentInput].style = inputs[currentInput].style+"; border:10px dashed red;";
    }
}

Якщо його скопіювати в DEV консоль браузеру та запустити то на сторінці – ті інпути, що не мають відповідного label з for будуть обведені грубими червоними рисками.

Enjoy!
(credits to Viv Richards testing blog)