Ландмарк-роли

Ландмарк-роли (landmark roles) в ARIA используются для структурирования страницы и обеспечения удобной навигации для пользователей ассистивных технологий, таких как экранные читалки. Эти роли позволяют быстро перемещаться между крупными областями интерфейса, обозначая основные секции документа: шапку, основной контент, навигацию, сайдбар и футер.

Библиотека aria-query в JavaScript предоставляет удобный инструмент для работы с ARIA-ролями и атрибутами, позволяя проверять их правильность и получать метаданные о поддерживаемых элементах.

Основные ландмарк-роли

В ARIA выделяются следующие ключевые ландмарк-роли:

  • banner — шапка сайта, обычно содержит логотип и глобальное меню. На странице может быть только один элемент с этой ролью.
  • main — основной контент страницы. Может быть только один на странице, обеспечивает фокусировку на основном содержании.
  • navigation — область навигации. Может повторяться, например, для глобального и локального меню.
  • complementary — дополнительный контент, например, сайдбар с вспомогательной информацией.
  • contentinfo — футер страницы, часто содержит контактную информацию и авторские права.
  • region — общая роль для выделенных областей с заголовком, которые не попадают под предыдущие роли.

Каждая из этих ролей может быть назначена элементу с помощью атрибута role:

<header role="banner">...</header>
<main role="main">...</main>
<nav role="navigation">...</nav>
<aside role="complementary">...</aside>
<footer role="contentinfo">...</footer>

Использование aria-query для проверки ролей

Библиотека aria-query позволяет работать с набором стандартных ARIA-ролей и их свойств через JavaScript. Основные функции и объекты:

  • roles — объект, содержащий все стандартные ARIA-роли. Каждая роль хранит информацию о том, допустима ли она для конкретного элемента, её поддерживаемые свойства и ограничения.
  • roleValues — вспомогательный объект, который позволяет проверять допустимые значения для конкретных ролей.

Пример получения информации о роли main:

import { roles } from 'aria-query';

const mainRole = roles.get('main');

console.log(mainRole);

Вывод будет содержать следующие ключевые поля:

  • abstract — булево значение, указывающее, является ли роль абстрактной (используется только как базовая для наследования).
  • requiredProps — список обязательных атрибутов для роли.
  • superClass — массив родительских ролей, от которых наследуется текущая роль.
  • relatedConcepts — связи с HTML-элементами или другими ролями, показывающие, где роль чаще всего применяется.

Проверка корректности ландмарк-ролей

С помощью aria-query можно реализовать проверку правильного применения ролей:

import { roles } from 'aria-query';

function validateLandmarkRoles(element) {
  const role = element.getAttribute('role');
  if (!roles.has(role)) {
    return { valid: false, message: `Роль ${role} не существует в ARIA` };
  }

  const roleData = roles.get(role);

  if (roleData.requiredProps) {
    for (const prop of roleData.requiredProps) {
      if (!element.hasAttribute(prop)) {
        return { valid: false, message: `Роль ${role} требует атрибут ${prop}` };
      }
    }
  }

  return { valid: true };
}

Такой подход позволяет автоматически проверять, соответствует ли структура страницы стандартам ARIA, и гарантирует доступность интерфейса для пользователей с ограниченными возможностями.

Наследование и ограничения

Некоторые ландмарк-роли имеют ограничения по количеству на странице:

  • banner и main — по одному экземпляру.
  • navigation, complementary, region — могут повторяться.
  • contentinfo — только один элемент футера на странице.

Также роли могут наследовать свойства от других ролей. Например, main наследует свойства от landmark, а banner — от landmark и region. Это важно учитывать при автоматической генерации или проверке ролей через aria-query.

Практика с aria-query

Для анализа всех элементов с ландмарк-ролями можно использовать коллекцию roles:

import { roles } from 'aria-query';

const landmarkRoles = ['banner', 'main', 'navigation', 'complementary', 'contentinfo', 'region'];

for (const roleName of landmarkRoles) {
  const roleInfo = roles.get(roleName);
  console.log(`${roleName}:`, roleInfo.superClass, roleInfo.requiredProps);
}

Такой подход позволяет создавать утилиты для проверки и генерации ARIA-кода, автоматизировать тесты доступности и улучшать семантику веб-страниц.

Важные рекомендации

  • Каждая страница должна содержать один main и один banner для корректной навигации.
  • Ландмарк-ролям стоит задавать описательные заголовки через aria-label или aria-labelledby.
  • Проверка ролей через aria-query помогает выявлять несоответствия между HTML и спецификацией ARIA.
  • Использование region позволяет обозначать области с важным контентом, если стандартные роли не подходят.

Эти подходы формируют основу корректного и доступного семантического HTML, упрощая работу ассистивных технологий с веб-контентом.

Оглавление