Вы когда-нибудь задумывались, как вспомогательные технологии, такие как экранный диктор, знают, что объявить пользователям? Ответ в том, что эти технологии полагаются на разработчиков, размечающих свои страницы с помощью семантического 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 браузер определяет, является ли узел семантически «интересным», и добавляет его в дерево доступности . Когда вспомогательная технология, например программа чтения с экрана, предоставляет пользователю альтернативный пользовательский интерфейс, она часто делает это, проходя по этому дереву доступности.
Используя DevTools в Chrome, вы можете проверить семантические свойства элемента и изучить его положение в дереве доступности.
Следующие шаги
Как только вы немного узнаете о семантике и о том, как она помогает навигации экранного ридера, вы не сможете не взглянуть на страницы, которые вы создаете, по-другому. В следующем разделе мы сделаем шаг назад и рассмотрим, как можно передать весь контур страницы с помощью эффективных заголовков и ориентиров .