Как сделать веб-компоненты доступными — краткое руководство

Все фрагменты кода можно найти в файле multiselect.html .

Расширение семантики разметки

Основное правило доступности — использовать собственные элементы HTML поверх пользовательских. Это означает, что если вы можете использовать собственный элемент управления HTML со встроенной доступностью, сделайте это. Добавляйте атрибуты ARIA, только если вам действительно нужно создать пользовательский компонент. Если вы хотите узнать больше об этом, прочитайте « Избегание избыточности с помощью WAI-ARIA на страницах HTML» .

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

Из руководящих принципов мы видим, что нам нужно добавить следующие роли:

1. role="combobox" для корневого элемента компонента
2. role="listbox" к списку элементов во всплывающем окне
3. role="option" для каждого элемента раскрывающегося списка

Атрибуты состояния арии, которые будут добавлены:

1. aria-expanded="true/false" для корневого элемента, чтобы указать, открыт компонент или закрыт
2. aria-selected="true/false" для каждого элемента раскрывающегося списка, чтобы указать выбранное состояние

combobox и listbox могут быть добавлены непосредственно в разметку компонента:

 <div class="multiselect" role="combobox"> <div class="multiselect-field"></div> <div class="multiselect-popup"> <ul class="multiselect-list" role="listbox"> <content select="li"></content> </ul> </div> </div> 

Чтобы добавить параметр роли для каждого элемента списка, мы refreshItems элементы в методе refreshItems . Этот новый метод вызывается при визуализации компонента:

 multiselectPrototype.render = function() { this.attachHandlers(); this.refreshField(); this.refreshItems(); }; multiselectPrototype.refreshItems = function() { var itemElements = this.itemElements(); for(var i = 0; i < itemElements.length; i++) { var itemElement = itemElements[i]; // set role and aria-selected property of an item itemElement.setAttribute("role", "option"); itemElement.setAttribute("aria-selected", itemElement.hasAttribute("selected")); } }; multiselectPrototype.itemElements = function() { return this.querySelectorAll('li'); }; 

Атрибут aria-expanded togglePopup может быть добавлен к togglePopup управления в методе togglePopup который (как следует из названия) отвечает за отображение и скрытие всплывающего окна:

 multiselectPrototype.togglePopup = function(show) { this._isOpened = show; this._popup.style.display = show ? 'block' : 'none'; // set aria-expanded property this._control.setAttribute("aria-expanded", show); }; 

Мы также инициализируем aria-selected свойство элементов в зависимости от их selected атрибута. Свойство aria-selected должно быть сохранено, чтобы отражать текущее состояние выбранного элемента. Мы можем сделать это в selectItem и selectItem :

 multiselectPrototype.selectItem = function(item) { if(!item.hasAttribute('selected')) { // set aria-selected property of selected item item.setAttribute('aria-selected', true); item.setAttribute('selected', 'selected'); this.fireChangeEvent(); this.refreshField(); } this.close(); }; multiselectPrototype.unselectItem = function(item) { // set aria-selected property of unselected item item.setAttribute('aria-selected', false); item.removeAttribute('selected'); this.fireChangeEvent(); this.refreshField(); }; 

И это все, свойства ARIA были добавлены. Следующий шаг — поддержка клавиатуры.

Добавление поддержки клавиатуры

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

Вот базовый набор клавиш, чтобы можно было использовать мультиселект только с клавиатуры:

1. Alt + Up/Down Arrow — открыть / закрыть мультиселектор
2. Esc — закрыть мультиселект
3. Up/Down Arrow — перемещаться по элементам
4. Enter — выбрать элемент при открытии мультиселекции
5. Backspace — отменить выбор последнего выбранного элемента

Делая это фокусируемым

Самый первый шаг к добавлению поддержки клавиатуры — сделать компонент фокусируемым. Для этого нам нужно установить атрибут tabindex , поведение которого отличается в зависимости от значения tabindex :

 <div class="multiselect-field" tabindex="0" aria-readonly="true"></div> 

 multiselectPrototype.attachHandlers = function() { this._control.addEventListener('keydown', this.keyDownHandler.bind(this)); ... }; 

 multiselectPrototype.keyDownHandler = function(event) { switch(event.which) { case 8: // Backspace this.handleBackspaceKey(); break; case 13: // Enter this.handleEnterKey(); break; case 27: // Escape this.handleEscapeKey(); break; case 38: // Up Arrow event.altKey ? this.handleAltArrowUpKey() : this.handleArrowUpKey(); break; case 40: // Down Arrow event.altKey ? this.handleAltArrowDownKey() : this.handleArrowDownKey(); break; default: return; } // prevent native browser key handling event.preventDefault(); }; 

 multiselectPrototype.handleAltArrowDownKey = function() { this.open(); }; multiselectPrototype.handleAltArrowUpKey = function() { this.close(); }; multiselectPrototype.handleEscapeKey = function() { this.close(); }; 

 multiselectPrototype.open = function() { this.togglePopup(true); }; multiselectPrototype.close = function() { this.togglePopup(false); }; 

 multiselectPrototype.refreshItems = function() { var itemElements = this.itemElements(); for(var i = 0; i < itemElements.length; i++) { var itemElement = itemElements[i]; ... // set item tabindex attribute itemElement.setAttribute("tabindex", -1); } // initialize focused item index this._focusedItemIndex = 0; }; 

 multiselectPrototype.handleArrowDownKey = function() { this._focusedItemIndex = (this._focusedItemIndex < this.itemElements().length - 1) ? this._focusedItemIndex + 1 // go to the next item : 0; // go to the first item this.refreshFocusedItem(); }; 

 multiselectPrototype.handleArrowUpKey = function() { this._focusedItemIndex = (this._focusedItemIndex > 0) ? this._focusedItemIndex - 1 // go to the previous item : this.itemElements().length - 1; // go to the last item this.refreshFocusedItem(); }; 

 multiselectPrototype.refreshFocusedItem = function() { this.itemElements()[this._focusedItemIndex].focus(); }; 

 multiselectPrototype.open = function() { this.togglePopup(true); this.refreshFocusedItem(); }; multiselectPrototype.close = function() { this.togglePopup(false); this._field.focus(); }; 

 ::content li:focus { outline: dotted 1px #333; background: #efefef; } 

 multiselectPrototype.handleEnterKey = function() { if(this._isOpened) { var focusedItem = this.itemElements()[this._focusedItemIndex]; this.selectItem(focusedItem); } }; 

 multiselectPrototype.handleBackspaceKey = function() { var selectedItemElements = this.querySelectorAll("li[selected]"); if(selectedItemElements.length) { this.unselectItem(selectedItemElements[selectedItemElements.length - 1]); } };