Вы когда-нибудь задумывались, как вспомогательные технологии, такие как программа чтения с экрана, знают, что сообщить пользователям? Ответ в том, что эти технологии основаны на том, что разработчики размечают свои страницы семантическим HTML. Но что такое семантика и как ее используют программы чтения с экрана?
Возможности и семантика
Прежде чем углубиться в семантику, полезно понять еще один термин: возможности . Доступность — это любой объект, который предлагает или предоставляет пользователю возможность выполнить действие. Классический пример – чайник:
Для этого чайника не требуется инструкция по эксплуатации; вместо этого его физический дизайн сообщает пользователю, как им следует пользоваться. У него есть ручка, и поскольку вы видели в мире другие объекты с похожими ручками, вы можете сделать вывод, как вам следует его брать и управлять им.
Когда мы создаем графические пользовательские интерфейсы, мы используем такие вещи, как CSS, чтобы добавить визуальные возможности в наш пользовательский интерфейс. Например, вы можете придать кнопке тень и рамку, чтобы она напоминала реальную кнопку в реальном мире.
Но если пользователь не может видеть экран, то эти визуальные возможности не будут ему переданы. Поэтому вам необходимо убедиться, что ваш пользовательский интерфейс построен таким образом, чтобы передать те же возможности вспомогательным технологиям. Это невизуальное представление возможностей элемента пользовательского интерфейса называется его семантикой .
Используйте семантический HTML
Самый простой способ передать правильную семантику — использовать семантически богатые элементы HTML.
Используя CSS, можно стилизовать элементы <div> и <button> так, чтобы они передавали одинаковые визуальные возможности, но при использовании программы чтения с экрана эти два опыта сильно различаются. <div> — это всего лишь общий элемент группировки, поэтому программа чтения с экрана только объявляет текстовое содержимое <div> . <button> объявляется как «кнопка», что является гораздо более сильным сигналом для пользователя о том, что с ним можно взаимодействовать.
Самое простое и часто лучшее решение этой проблемы — вообще отказаться от пользовательских интерактивных элементов управления. Например, замените <div> , который действует как кнопка, на настоящую <button> .
Семантические свойства и дерево доступности
Вообще говоря, каждый элемент HTML будет иметь некоторые из следующих семантических свойств:
- Роль или тип
- Имя
- Значение (необязательно)
- Штат (необязательно)
Роль элемента описывает его тип, например, «кнопка», «ввод» или даже просто «группа» для таких вещей, как элементы div и span .
Имя элемента — это его вычисленная метка. Программы чтения с экрана обычно объявляют имя элемента, за которым следует его роль, например «Зарегистрироваться, кнопка». Алгоритм, определяющий имя элемента, учитывает такие факторы, как наличие какого-либо текстового содержимого внутри элемента, наличие у него таких атрибутов, как title или placeholder , связан ли элемент с фактическим элементом <label> и если элемент имеет любые атрибуты ARIA, такие как aria-label и aria-labelledby .
Некоторые элементы могут иметь значение . Например, <input type="text"> может иметь значение, отражающее все, что пользователь ввел в текстовое поле.
Некоторые элементы также могут иметь состояние , которое передает их текущий статус. Например, элемент <select> может находиться как в развернутом , так и в свернутом состоянии, в зависимости от того, открыт он или закрыт.
Дерево доступности
Для каждого узла в DOM браузер определяет, является ли узел семантически «интересным», и добавляет его в дерево доступности . Когда вспомогательные технологии, такие как программа чтения с экрана, предоставляют пользователю альтернативный пользовательский интерфейс, они часто делают это, просматривая дерево доступности.
Используя Chrome DevTools, вы можете проверить семантические свойства элемента и изучить его положение в дереве доступности.
Следующие шаги
Как только вы немного разберетесь в семантике и в том, как она помогает в навигации по программе чтения с экрана, вы не сможете не взглянуть на страницы, которые вы создаете, по-другому. В следующем разделе мы сделаем шаг назад и рассмотрим, как можно передать весь контур страницы с помощью эффективных заголовков и ориентиров .