Заглавия на секции

Какво се изисква

Когато страницата е разделена на секции, всяка секция трябва да има програмно заглавие. Критерият не изисква всяка страница да бъде разбита на секции — кратките страници с единична цел (например екран за вход) могат да работят без подзаглавия. Там обаче, където секциите съществуват, те се нуждаят от реална маркировка с <h1>–<h6>, за да може помощната технология да изгради йерархия на заглавията.

Критерият е на ниво AAA, но заложената практика — използване на реални заглавия — е подразбираща се и от 1.3.1 (Информация и взаимовръзки) на ниво A, затова повечето достъпни сайтове го изпълняват по подразбиране.

Как да се изпълни изискването

• Използвайте <h1> за заглавието на страницата (веднъж на страница) и преминавайте последователно към <h2>, <h3> за вложени секции, без да прескачате нива.
• Заменете <div class="heading"> и стилизирани <p> „заглавия” с реални заглавни тагове.
• Всяка обособена секция в дълго съдържание (статия, страница с документация, панел с настройки с табове) да започва с заглавие.
• За карточни компоненти, представляващи колекции от подобни секции, давайте на всяка карта заглавие на подходящото ниво.
• Валидирайте йерархията на заглавията с HTML5 outline алгоритъма (axe DevTools, разширението headingsMap за браузъра или валидатора на W3C).

Чести грешки

• Удебелени абзаци, прикриващи се за заглавия — визуално убедителни, но невидими за списъка с заглавия на екранния четец.
• Прескочени нива на заглавия (<h1> прескача директно на <h4>), тъй като екипът по CMS е избирал нивата по размер на шрифта, а не по йерархия.
• Множество елементи <h1> на една страница (допустимо в HTML5 outline, но нарушава навигацията при повечето помощни технологии).
• Всяка секция е означена с <h2> независимо от дълбочината на влагане, което изравнява йерархията.
• Заглавен текст в hero секцията, маркиран като <h1>, докато действителното заглавие на страницата е под него като <h2>.

Защо е важно

За потребителите на екранни четци йерархията на заглавията е таблицата с изброени теми. JAWS и NVDA я показват в диалогов прозорец (Insert+F6 в JAWS); VoiceOver я предлага в ротора. Страница без заглавия или с заглавия само за визуален акцент принуждава тези потребители да преминават ред по ред. Дори при ангажимент само за ниво AA, третирането на заглавията на секциите като основно правило при писане носи ползи за SEO, повторното използване на съдържанието и удобството на редакторите.