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