Сделайте ваше расширение доступным

Для многих пользователей специальные возможности в буквальном смысле слова являются пользовательским интерфейсом, и его функции часто могут быть полезны для тех, кому специальные возможности не нужны в качестве основного средства взаимодействия с вашим расширением. Техники разнообразны. Как минимум, текст должен быть высококонтрастным. Видео должны быть снабжены субтитрами. Изображения должны включать атрибуты alt .

Но, как говорится, это лишь минимум. Дополнительные методы описаны ниже.

Есть несколько способов реализовать специальные возможности, но самый простой — использовать стандартный элемент управления HTML, особенно элементы ввода. На следующем изображении показаны эти элементы управления.

Снимки экрана и код для кнопки, флажка, переключателя, текста, выбора/опции и ссылки
Снимки экрана и код для кнопки, флажка, переключателя, текста, выбора/опции и ссылки.

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

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

По умолчанию единственные элементы в HTML DOM, которые могут получать фокус клавиатуры, — это привязки, кнопки и элементы управления формой. К счастью, установка атрибута tabIndex для элемента HTML позволяет ему получить фокус клавиатуры. Например:

<div tabindex="0">I can receive focus with the tab key.</div>

Инструкции по реализации этих и других методов см. в разделе Доступность поддержки .