Решение проблемы обеспечения доступности модального окна для людей с ограниченными возможностями / forpes.ru

Главная
Решение проблемы обеспечения доступности модального окна для людей с ограниченными возможностями

Решение проблемы обеспечения доступности модального окна для людей с ограниченными возможностями +12

01.11.2020 14:34

dharbachou 3 1100 Источник

Всем привет!

В этой статье я бы хотел рассказать как реализовать доступное модальное окно, без использование аттрибута «aria-modal».

Немного теории!

«aria-modal» — это аттрибут использующийся для того, что бы сообщить вспомогательным технологиям (таким, как программы чтения с экрана), что веб-контент под текущим диалоговым окном недоступны для взаимодействия (инертен). Другими словами, ни один елемент под модальным окном не должен получить фокус при клике, навигации с использованием «TAB/SHIFT+TAB» или при свайпе на сенсерных устройствах.

Но почему мы не можем использовать «aria-modal» для модального окна?

Существуют несколько причин:

просто не поддерживаются программами чтения с экрана
игнорируется псевдо классами ":before/:after"

Перейдем к реализации.

Реализация

Для того что бы начать разработку, нам необходимо выделить свойста, которыми должно обладать доступное модальное окно:

все интрерактивные элементы, вне модального окна, должны быть заблокированы для манипуляции пользователем: клика, установки фокуса и так далее...
навигация должны быть доступна только по системным компонентам браузера и по контенту самого модального окана (весь контент вне модального окна должен быть проигнорирован)

Заготовка

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

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button type="button" id="infoBtn" class="btn"> Standart button </button>
        <button type="button" id="openBtn"> Open modal window</button>
        <div role="button" tabindex="0" id="infoBtn" class="btn"> Custom button </button>
    </div>
    <div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt maxime tenetur sint porro tempore aperiam! Eaque tempore repudiandae culpa omnis placeat, fugit nostrum quisquam in ipsa odit accusamus illum velit?
    </div>


    <div id="modalWindow" class="modal">
        <div>
            <button type="button" id="closeBtn" class="btn-close">Close</button>
            <h2>Modal window</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, doloribus.</p>
        </div>
    </div>
</body>
</html>

Стили:

    .modal {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        transition: opacity 400ms ease-in;
        display: none;
        pointer-events: none;
    }
    
    .active{
        display: block;
        pointer-events: auto;
    }

    .modal > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
    }

    .btn-close {
        padding: 5px;
        position: absolute;
        right: 10px;
        border: none;
        background: red;
        color: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    .btn {
        display: inline-block;
        border: 1px solid #222;
        padding: 3px 10px;
        background: #ddd;
        box-sizing: border-box;
    }

JS:

    let modaWindow = document.getElementById('modalWindow');

    document.getElementById('openBtn').addEventListener('click', function() {
        modaWindow.classList.add('active');
    });

    document.getElementById('closeBtn').addEventListener('click', function() {
        modaWindow.classList.remove('active');
    });

Если открыть страницу и попробывать перейти на элементы, находящиеся за модальным окном, используя клавиши «TAB/SHIFT+TAB», то эти элементы получают фокус, как показано на прикрепленной картинке.

Чтобы решить эту проблему, нам необходимо присвоить всем интерактивным элементам атрибут 'tabindex' со значением минус единица.

1. Для дальнейшей работы создаем класс «modalWindow» cо следующими свойствами и методами:

doc — документ страницы. в котором строим модальное окно
modal — контейнер модального окна
interactiveElementsList — массив интерактивных элементов
blockElementsList- массив блочных элементов страницы
constructor — конструктор класса
create — метод используемый для создания модального окна
remove — метод используемы для удаления модального окна

2. Реализуем конструктор:

constructor(doc, modal) {
    this.doc = doc;
    this.modal = modal;
    this.interactiveElementsList = [];
    this.blockElementsList = [];
}

«interactiveElementsList» и «blockElementsList » нужны чтобы содержать элементы страницы, которые были изменены в момент создания модального окна.

3. Создаем константу, в которой будем хранить список все элементов, которые могут иметь фокус:

const INTERECTIVE_SELECTORS = ['a', 'button', 'input', 'textarea', '[tabindex]'];

4. В методе 'create' выбираем все элементы подходящие по нашим селекторам и выставляем всем 'tabindex=-1' (игнорируем элементы, которые уже имеют данное значение)

 let elements = this.doc.querySelectorAll(INTERECTIVE_SELECTORS.toString());
 let element;
 for (let i = 0; i < elements.length; i++) {
     element = elements[i];
     if (!this.modal.contains(element)) {
         if (element.getAttribute('tabindex') !== '-1') {
               element.setAttribute('tabindex', '-1');
               this.interactiveElementsList.push(element);
         }
     }
 }

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

5. Здесь нам не нужно создавать массив для хранения селекторов, мы просто возьмем все дочерние элементы узла 'body'

let children = this.doc.body.children;

6. Четвертый шаг аналогичен шагу 2, только с использованием 'aria-hidden'

for (let i = 0; i < children.length; i++) {
   element = children[i];
   if (!this.modal.contains(element)) {
      if (element.getAttribute('aria-hidden') !== 'true') {
          element.setAttribute('aria-hidden', 'true');
          this.blockElementsList.push(element);
       }
    }
}

Завершенный метод «create»:

create() {
    let elements = this.doc.querySelectorAll(INTERECTIVE_SELECTORS.toString());
    let element;
    for (let i = 0; i < elements.length; i++) {
        element = elements[i];
        if (!this.modal.contains(element)) {
            if (element.getAttribute('tabindex') !== '-1') {
                element.setAttribute('tabindex', '-1');
                this.interactiveElementsList.push(element);
            }
        }
    }

    let children = this.doc.body.children;
    for (let i = 0; i < children.length; i++) {
        element = children[i];
        if (!this.modal.contains(element)) {
            if (element.getAttribute('aria-hidden') !== 'true') {
                element.setAttribute('aria-hidden', 'true');
                this.blockElementsList.push(element);
            }
        }
    }
}

7. На шестом шаге реализуем метод обратный 'create':

 remove() {
            let element;
            while(this.interactiveElementsList.length !== 0) {
                element = this.interactiveElementsList.pop();
                element.setAttribute('tabindex', '0');
            }

            while(this.interactiveElementsList.length !== 0) {
                element = this.interactiveElementsList.pop();
                element.setAttribute('aria-gidden', 'false');
            }
}

8. Что бы это все заработало нам нужно создать экземпляр класса «modalWindow» и вызвать методы «create» и «remove»:

    let modaWindow = document.getElementById('modalWindow');
    const modal = new modalWindow(document, modaWindow);

    document.getElementById('openBtn').addEventListener('click', function() {
        modaWindow.classList.add('active');
       // modal.create();
    });

    document.getElementById('closeBtn').addEventListener('click', function() {
        modaWindow.classList.remove('active');
       // modal.remove();
    });

Полный код класса:

class modalWindow{
    constructor(doc, modal) {
        this.doc = doc;
        this.modal = modal;
        this.interactiveElementsList = [];
        this.blockElementsList = [];
    }

    create() {
        let elements = this.doc.querySelectorAll(INTERECTIVE_SELECTORS.toString());
        let element;
        for (let i = 0; i < elements.length; i++) {
            element = elements[i];
            if (!this.modal.contains(element)) {
                if (element.getAttribute('tabindex') !== '-1') {
                    element.setAttribute('tabindex', '-1');
                    this.interactiveElementsList.push(element);
                }
            }
        }

        let children = this.doc.body.children;
        for (let i = 0; i < children.length; i++) {
            element = children[i];
            if (!this.modal.contains(element)) {
                if (element.getAttribute('aria-hidden') !== 'true') {
                    element.setAttribute('aria-hidden', 'true');
                    this.blockElementsList.push(element);
                }
            }
        }
    }

    remove() {
        let element;
        while(this.interactiveElementsList.length !== 0) {
            element = this.interactiveElementsList.pop();
            element.setAttribute('tabindex', '0');
        }

        while(this.interactiveElementsList.length !== 0) {
            element = this.interactiveElementsList.pop();
            element.setAttribute('aria-gidden', 'false');
        }
    }

P.S.

Если на мобильных устройствах не решена проблемы с навигацией по текстовым элементам, то можно использовать следующую выборку:

  const BLOCKS_SELECTORS = ['div', 'header', 'main', 'section', 'footer'];
  let children = this.doc.querySelectorAll(BLOCKS_SELECTORS .toString());

Ссылки на полезные ресурсы

Комментарии (3)

dopusteam
01.11.2020 17:37
#22251748
При закрытии всем выставляете tabIndex 0? Но ведь там могли быть другие значения

abyssSoft
02.11.2020 07:17
#22252914
Интересная реализация… «в лоб». Но я бы поостерегся так делать. Смотрите, если это большой проект, то у него есть спецификация от СЕО, как именно должны быть расставлены tabIndex (чтобы элементарно «вести» клиента). А мы тут рраааззз и сбросили все. Я думаю что тут найдется немало людей, которые получали за подобные инновации в юности.

Если уж сбрасывать таким методом, то перед сбросом нужно обязательно сохранять текущие значения tabIndex, а потом уж их восстанавливать.

ALeutsky
02.11.2020 14:50
#22254304
некоторые проблемы такого решения:
- потеря оригинального значения tabIndex — это может сломать UX (обход при смене фокуса станет последовательным, а не таким, как задуман)
- tabIndex не всегда равен -1, а может быть задан любым отрицательным числом — таким образом, могут появиться элементы, которые начнут получать фокус (например, при tab) после закрытия модального окна
- препятствование сборщику мусора, да и потенциальное место для утечки памяти. У современной страницы DOM-дерево весьма динамично может меняться — это может привести к тому, что в this.interactiveElementsList и в this.blockElementsList могут остаться ссылки на уже удалённые из дерева элементы, но сборщик мусора их не удалит, пока не закроется модалка (а она может просто "упасть" из-за какой-то ошибки)
- на реальной странице может быть очень много элементов, которые могут получать фокус — обработка всех этих элементов перед открытием модалки — пустая трата ресурсов.
- внутри contains может проверяться много элементов (зависит от сложности DOM-дерева) — это приведет ещё к доп.нагрузке.
Стоит смотреть в сторону перехвата и перенаправления фокуса. Тут будут свои подводные камни, но это менее ресурсоёмкий подход.

Попробуйте такой простой код:
```
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button>Button 3</button>

<script>
  const b1 = document.getElementById('b1');
  const b2 = document.getElementById('b2');
  b2.addEventListener('blur', () => b1.focus());
</script>
```
Кнопка №3 не получит фокус при Tab, а само переключение фокуса будет ограничено между первых двух кнопок. Тоже самое можно сделать и с модальным окном — залочить фокус внутри него.

пару ссылок
https://github.com/theKashey/focus-lock
https://github.com/theKashey/react-focus-lock