Навігація з клавіатури в javascript - більш доступного режиму, mdn

Приклад 1: Простий віджет, що емулює роботу чекбосов шляхом зміни зображень. Віджет використовує tabindex, щоб забезпечити доступ з клавіатури.

згруповані контроли

Безумовно є необхідність створення більш складних віджетів. Як приклади можна привести меню, панелі табів, різні динамічні таблиці, уявлення для інформації, що має деревоподібну структуру. Для таких контролів батьківський елемент повинен мати атрибут tabindex = "0". В такому випадку він зможе потрапити в фокус з клавіатури. Всі дочірні елменти (пункти меню, окремі таби, осередки, рядки) повинні мати tabindex = "- 1". щоб не потрапляти у фокус при натисканні tab. Користувачі повинні мати можливість подорожувати по дочірнім елементам за допомогою стрілок на клавіатурі. (Більш повне опису того, як повинен бути реалізований доступ з клавіатури для часто зустрічаються віджетів, дивіться на DHTML Style Guide.)

Нижче наведено приклад, який демонструє використання цієї техніки для реалізації вкладеного меню. Після того, як в фокус потрапляє основний елемент меню (

), Розробник повинен програмно керувати фокусом, реагуючи на нажите клавіш зі стрілками. Для опису техніки управління фокусом всередині віджета дивіться розділ «Управління фокусом всередині віджета» нижче в даній статті.

Приклад 2: Меню, що використовує атрибут tabindex для здійснення доступу з клавіатури

Неактивні (disabled) контроли

Коли елемент управління стає неактивним, він повинен не потрапляти у фокус при натисканні на tab, що забезпечується виставлянням у елемента атрибута tabindex = "- 1". Зверніть увагу, що неактивні елементи в межах сгруппированного віджета (такі як, під пункти меню) повинні мати можливість бути обраними за допомогою стрілок на клавіатурі.

Управління фокусом всередині віджета

Коли користувач йде з віджета, а потім повертається назад, фокус повинен повернуться на певний елемент, у якого був фокус раніше. Наприклад, на конкретний елемент дерева або елемент. Є два варіанти, якими цього можна досягти:

1. Перехідний tabindex. програмне переміщення фокуса
2. aria-activedescendent. управління «віртуальним» фокусом

Техніка перша: Перехідний tabindex

Ідея даної техніки полягає у виставленні атрибута tabindex в нульове значення для елемента, який останнім перебував у фокусі. При цьому якщо користувач піде табом з віджета, а потім повернеться назад, елемент відновить фокус правильно. Зауважте, що виставляючи tabindex в "0", необхідно виставляти tabindex = "- 1" для попереднього виділеного елемента. Ця техніка вимагає виставляти фокус елементів програмно, реагуючи на натискання клавіш.

Для цього необхідно слухати подія keydown для кожного дочірнього елемента віджета. Коли користувач натискає на стрілочки на клавіатурі, щоб переміститися на інший елемент слід:

1. програмно прміеніть фокус до іншого елементу
2. змінити tabindex елемента в фокусі на 0
3. змінити tabindex попереднього елемента на -1

За посиланням Ви можете побачити приклад WAI-ARIA tree view. використовує цю техніку.

Використовуйте element.focus () щоб задати фокус елементу

Не використовуйте createEvent (). initEvent () and dispatchEvent () щоб задати фокус. Подія DOM focus має використовувати тільки для отримання інформації про те, що стався фокус на елемент, воно генерується системою, коли який-небудь елемент потрапив у фокус. Воно не повинно використовувати для того, щоб задати фокус. Замість цього використовуйте element.focus ().

Використовуйте подія onfocus щоб відстежувати фокус

При розробці не варто розраховувати, що фокус буде змінюватися тільки в наслідок маніпуляцій користувача з клавіатурою і мишкою. Допоміжні програми, такі як screen readers можуть задавати фокус елементів. Відстежуйте події onfocus і onblur. замість подій миші і клавіатури.

onfocus і onblur можуть бути використані з будь-якими елементами. Зараз в стандартах не описано методу для отримання елемента, що знаходиться у фокусі. Тому якщо вам потрібно відстежувати елемент з фокусом, його треба буде запам'ятовувати в змінну.

Техніка друга: aria-activedescendant

Ця техніка дозволяє об'єднати кожен окремо взятий обробник подій в контейнер графічного елементу і використовувати aria-activedescendent для стеження за "віртуальним" фокусом. (Для отримання більш детальної інформації щодо ARIA зверніть увагу на огляд доступних веб-додатків і віджетів.)

The aria-activedescendant property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.

scrollIntoView

Note that the use of this pattern requires the author to ensure that the current focused widget is scrolled into view. You should be able to use the element.scrollIntoView () function, but we recommend confirming this works for you in your target browsers using the quirksmode test.

рекомендації

Використовуйте onkeydown для вилову подій замість onkeypress

В IE подія keypress спрацьовує тільки для буквено-цифрових клавіш. Використовуйте onkeydown замість цього.

Ensure that keyboard and mouse produce the same experience

To ensure that the user experience is consistent regardless of input device, keyboard and mouse event handlers should share code where appropriate. For example, the code that updates the tabindex or the styling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes.

Ensure that the keyboard can be used to activate element

To ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. For example, to ensure that the Enter key will activate an element, if you have an. you should bind doSomething () to the key down event as well: onkeydown = "return event.keyCode! = 13 || doSomething ();" .

Do not use: focus to style the focus (if you care about IE 7 and earlier)

IE 7 and earlier versions do not support the: focus pseudo-selector; do not use it to style focus. Instead, set the style in an onfocus event handler, for example by adding a CSS style name to the class attribute.

Always draw the focus for tabindex = "- 1" items and elements that receive focus programatically

IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like this.style.backgroundColor = "gray"; or add a dotted border via this.style.border = "1px dotted invert". In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element does not grow when the border style is applied (borders take up space, and IE does not implement CSS outlines ).

Prevent used key events from performing browser functions

If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns false. the event will not be propagated beyond your handler.

If handleKeyDown () returns false. the event will be consumed, preventing the browser from performing any action based on the keystroke.

Do not rely on consistent behavior for key repeat, at this point

Схожі статті

• Спеціальні можливості - електронна енциклопедія windows