Landmark — речник на Disability World

Landmarks са региони на ниво страница, между които потребителите на екранен четец могат да прескачат директно чрез специални клавишни комбинации. Те са страничният еквивалент на разделите в книга: зрящият потребител получава структурата чрез визуални сигнали (видимото заглавие в горната част, страничната лента вдясно, подножието в долната); потребителят на екранен четец получава структурата чрез landmarks.

Стандартните landmarks

Всеки от тях представлява едновременно HTML5 елемент и ARIA роля. Използва се HTML5 елементът, където е възможно; ARIA ролята съществува за случаи, в които не може да се използва нативният елемент.

Регион	HTML5 елемент	ARIA роля
Банер на страницата (лого, основна навигация)	`<header>` (горна част на страницата)	`role="banner"`
Основна навигация	`<nav>`	`role="navigation"`
Основно съдържание	`<main>`	`role="main"`
Допълнително съдържание (странична лента)	`<aside>`	`role="complementary"`
Подножие на страницата (авторски права, вторични връзки)	`<footer>` (долна част на страницата)	`role="contentinfo"`
Търсене	`<search>` (HTML5) или `<form role="search">`	`role="search"`
Общ регион, нуждаещ се от идентификация	—	`role="region"` (с етикет)
Формуляр (ако не е за търсене)	`<form>`	`role="form"`

Важно е да се отбележи, че <header> и <footer> се свързват с banner и contentinfo само когато са преки наследници на <body>. <header> вътре в <article> е просто заглавие на статия — той не се превръща в banner landmark.

Как потребителите на екранен четец ги използват

Всеки основен екранен четец разполага с режим за навигация само с landmarks:

JAWS: R превключва между landmarks; Shift+R превключва назад; Insert+F7 отваря списък с всички landmarks.
NVDA: D превключва между landmarks; Shift+D — назад; Insert+F7 отваря списъка с елементи.
VoiceOver (macOS): VO+U отваря ротора; завърта се до „Landmarks”; навигация с клавишите за стрелки.
VoiceOver (iOS): завъртане с два пръста до „Landmarks” на ротора; плъзгане нагоре/надолу между тях.
TalkBack (Android): плъзгане нагоре, после надясно за отваряне на менюто с настройки за четене; избира се режим „Landmarks”; плъзгане надясно между тях.

Страница с добри landmarks дава на потребителя на екранен четец съдържание с едно натискане на клавиш.

Чести грешки с landmarks

Липсващ <main>. Без основен landmark потребителите на екранен четец трябва да преминат с Tab покрай заглавието при всяко зареждане на страницата. Всяка страница трябва да има точно един <main>.
Множество неетикетирани <nav> елементи. Страница с горна навигация и странична навигация, всяка като <nav>, кара потребителя на екранен четец да избира между два неразличими записа „navigation”. Всеки трябва да се етикетира с aria-label: <nav aria-label="Primary">, <nav aria-label="Page contents">.
role="banner" на вътрешен елемент. <header> вътре в <main> или <article> не е банер; той е заглавие на статия. Не трябва да се добавя role="banner" към него.
Дублирани landmarks. Два <main> елемента на една страница нарушават правилото „landmark-no-duplicate-main”. axe и Lighthouse улавят това.
Регион без етикет. role="region" изисква aria-label или aria-labelledby. В противен случай екранните четци го игнорират.

Как да се одитират landmarks

Страницата се отваря в произволен съвременен екранен четец, натиска се клавишната комбинация за списък с landmarks и се проверява:

Налице е точно един banner, един main, един contentinfo.
Всеки <nav> има отличимо достъпно наименование.
Структурата от landmarks съответства на видимата структура на страницата.

Списък с landmarks, който се чете „banner, navigation, navigation, main, complementary, contentinfo” без допълнителни етикети, означава, че потребителят не може да различи двете навигации. Необходимо е да се коригира.