Расширения позволяют пользователям создавать идеальный интерфейс для просмотра веб-страниц, адаптированный к индивидуальным возможностям и предпочтениям. Расширения должны включать компоненты доступности, способствующие созданию инклюзивной пользовательской базы, предоставляя доступ к расширению людям с нарушениями зрения, слуха, ограниченной моторикой и другими видами инвалидности.
Функции доступности полезны не только для людей с особыми потребностями, но и для всех. Пользователи с нарушениями зрения, низкой ловкостью рук и люди с ограниченными возможностями получают пользу от сочетаний клавиш. Субтитры и транскрипции необходимы глухим пользователям, а также помогают изучающим языки.
Пользователи могут взаимодействовать с расширением различными способами. У некоторых есть стандартный монитор, клавиатура и мышь, а у других — экранная лупа и, возможно, программа чтения с экрана . Хотя невозможно предсказать, какие инструменты люди будут использовать для доступа к расширению, любой разработчик может предпринять шаги, чтобы сделать расширение максимально доступным.
Интегрируйте доступные элементы управления пользовательского интерфейса.
Если пользователи не имеют доступа к элементам управления пользовательского интерфейса, они не могут использовать расширение. Самый простой способ создать доступный пользовательский интерфейс — использовать стандартный HTML-элемент управления.
Стандартные элементы управления
По возможности используйте стандартные элементы управления HTML-интерфейса . Стандартные элементы управления HTML доступны с клавиатуры, легко масштабируются и, как правило, понятны программам чтения с экрана.
WAI-ARIA в пользовательских настройках
Спецификация Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) предназначена для обеспечения доступности элементов управления пользовательского интерфейса для программ чтения с экрана с помощью стандартного набора атрибутов DOM. Эти атрибуты предоставляют программе чтения с экрана информацию о функции и текущем состоянии элементов управления на веб-странице.
Для добавления поддержки WAI-ARIA к пользовательским элементам управления необходимо изменить элементы DOM расширения, чтобы включить атрибуты, которые Chrome использует для генерации событий во время взаимодействия с пользователем. Программы чтения с экрана реагируют на эти события и описывают функцию элемента управления. Атрибуты DOM, заданные WAI-ARIA, классифицируются на роли , состояния и свойства .
<div role="toolbar">
Свойство aria-activedescendant определяет, какой дочерний элемент панели инструментов получит фокус, когда панель инструментов получит фокус. Код tabindex="0" указывает, что панель инструментов получает фокус в порядке следования элементов в документе.
Ознакомьтесь с полными техническими характеристиками примерной панели инструментов, представленной ниже:
<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>
После добавления ролей, состояний и свойств WAI-ARIA в DOM элемента управления, Google Chrome генерирует соответствующие события для программы чтения с экрана. Поскольку поддержка WAI-ARIA все еще находится в стадии разработки, Google Chrome может не генерировать событие для каждого свойства WAI-ARIA, и программы чтения с экрана могут не распознавать все генерируемые события.
Краткое руководство по добавлению элементов управления WAI-ARIA к пользовательским элементам управления можно найти в презентации Дейва Раггетта с конференции WWW2010 .
Фокусировка на пользовательских элементах управления
Для пользователей, которые перемещаются по веб-страницам без мыши, крайне важно иметь доступ к фокусу клавиатуры. Убедитесь, что элементы управления и навигации, такие как кнопки, списки и строки меню, могут получать фокус клавиатуры.
По умолчанию, единственными элементами в HTML DOM, которые могут получать фокус клавиатуры, являются ссылки, кнопки и элементы управления формами. Однако установка HTML-атрибута tabIndex в значение 0 помещает элементы DOM в последовательность табуляции по умолчанию, позволяя им получать фокус клавиатуры.
element.tabIndex = 0
element.focus();
Установка tabIndex = -1 удаляет элемент из последовательности перехода по вкладкам, но при этом позволяет элементу программно получать фокус клавиатуры.
Поддержка доступа с клавиатуры
Расширения должны быть доступны для использования только с клавиатурой, что позволит пользователям, не умеющим пользоваться мышью, а также опытным пользователям, которые просто не умеют ею пользоваться, получить к ним доступ.
Навигация
Убедитесь, что пользователь может перемещаться между различными частями расширения без использования мыши. Убедитесь, что любое использование всплывающего окна доступно для навигации с помощью клавиатуры. Используйте сочетания клавиш Chrome , чтобы определить, можно ли перемещаться по расширению.
Убедитесь, что легко определить, какие части интерфейса находятся в фокусе клавиатуры. Обычно контур фокуса перемещается по интерфейсу, однако, если слишком активно используется CSS, контур может быть подавлен или контрастность снижена.
Ярлыки
Хотя наиболее распространенная стратегия навигации с помощью клавиатуры предполагает использование клавиши Tab для переключения фокуса в интерфейсе расширения, это не всегда самый простой или эффективный вариант.
Простой обработчик событий клавиатуры на JavaScript может выглядеть следующим образом. Обратите внимание, как свойство WAI-ARIA aria-activedescendant обновляется в ответ на ввод пользователя, отражая текущую активную кнопку на панели инструментов.
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
Расширения могут создавать явные сочетания клавиш для важных элементов пользовательского интерфейса. Для реализации этих сочетаний клавиш подключите обработчики событий клавиатуры к элементам управления. Информируйте пользователей о доступных сочетаниях клавиш, указав их на странице параметров .
Обеспечьте доступность контента.
Обеспечение доступности контента важно для всех пользователей. Многие из приведенных ниже рекомендаций могут показаться вам знакомыми, поскольку они отражают передовые методы работы со всем веб-контентом.
Текст
Выбор шрифта и размер текста влияют на читаемость содержимого расширения. Пользователям с проблемами зрения может потребоваться увеличить размер текста в расширении. При использовании сочетаний клавиш убедитесь, что они не мешают сочетаниям клавиш масштабирования, встроенным в Chrome.
В качестве показателя гибкости пользовательского интерфейса расширения проведите тест на 200% ; если размер текста или масштаб страницы увеличены на 200%, остается ли расширение пригодным для использования?
Избегайте встраивания текста в изображения. Пользователи не смогут изменить размер текста, а программы чтения с экрана не смогут интерпретировать изображения. Вместо этого выбирайте стилизованные веб-шрифты, например, один из шрифтов, доступных в Google Font API . Веб-шрифты масштабируются до разных размеров и доступны для пользователей программ чтения с экрана.
Цвета
В расширении должен быть достаточный контраст между цветом фона и цветом текста. Используйте инструмент проверки контраста , чтобы убедиться, что цвета фона и текста обеспечивают достаточный контраст.
При оценке контраста убедитесь, что все части изображения, использующие графику для передачи информации, четко видны. Для конкретных изображений можно использовать такие инструменты, как Coblis — симулятор дальтонизма , чтобы увидеть, как изображение выглядит при различных формах цветовой недостаточности.
Рассмотрите возможность предложения различных цветовых тем или предоставления пользователю возможности настраивать цветовую схему для создания лучшего контраста.
Звук
Если расширение использует звук или видео для передачи информации, убедитесь, что доступны субтитры или текстовая расшифровка. Дополнительную информацию о субтитрах см. в руководстве по программе описания и субтитрования медиаконтента .
Изображения
Добавьте информативный альтернативный текст для изображений.
<img src="img.jpg" alt="The logo for the extension">
Используйте атрибут alt для указания назначения изображения, а не для буквального описания его содержимого. Изображения-разделители или чисто декоративные изображения должны иметь пустой атрибут "" или быть полностью удалены из HTML и размещены в CSS.
Если расширению необходимо использовать текст в изображении, включите текст изображения в альтернативный текст (alt text). Полезным источником информации может служить статья WebAIM о подходящем альтернативном тексте .
Узнать больше
Узнайте больше о доступности в Chrome, посетив канал A11ycasts и ознакомившись с технической документацией Chromium по вопросам доступности .