Понятия

Семантичен HTML

Използване на HTML елементи според тяхното значение, а не само заради визуалния им вид по подразбиране. `<button>` се обявява като бутон; `<div onclick>` не се обявява като нищо. По-голямата част от проблемите с достъпността произтичат от изоставена семантика.

Семантичният HTML е HTML, при който всеки елемент се избира заради своето значение, а не заради визуалния му вид. <button> служи за действия. <nav> обгражда навигацията. <table> съдържа таблични данни. Използването на <div>, стилизиран да изглежда като бутон, представлява семантична грешка — дори ако визуалният резултат е идентичен.

По-голямата част от грешките в достъпността произтичат от изоставена семантика. Почти всеки проблем с помощните технологии има една и съща първопричина: генеричен елемент, изпълняващ функцията, за която е проектиран семантичен.

Защо екранните четци имат значение

Екранните четци представят HTML на потребителя чрез т.нар. дърво на достъпността — вътрешно представяне, изградено от DOM, което съпоставя всеки елемент с роля, наименование, статус и свойства. Дървото на достъпността е това, което потребителят реално чува.

Нативният <button> постъпва в дървото на достъпността като button "Изпрати". <div>, стилизиран да изглежда като бутон, постъпва като generic — което означава, че екранният четец не обявява нищо полезно и потребителят няма начин да разбере, че div-ът е интерактивен.

Същата логика важи за:

  • Заглавия (<h1>–<h6>) — екранните четци позволяват на потребителите да прескачат между заглавия при бегъл преглед на страницата. <div class="heading"> не се появява в списъка на заглавията.
  • Списъци (<ul>, <ol>, <li>) — екранните четци обявяват „списък, 5 елемента” преди четенето. <div>-ове, имитиращи елементи на списък, не го правят.
  • Форми — <input> с обвързан <label> се чете като „Имейл, поле за текст”. Потребителски вход, изграден от div-ове и contenteditable, не чете нищо.
  • Таблици — <table> с <th> заглавия на редове/колони позволява на потребителите да навигират клетка по клетка с обявяване на контекста от заглавията. CSS мрежи от div-ове не го правят.

Шаблонът за замяна

Поправката почти винаги има едно и също естество:

  • <div onclick="..."> → <button> (или <a href> за навигация).
  • <span class="link"> → <a href>.
  • <div role="heading"> → <h1> до <h6>.
  • Потребителски падащи менюта → <select> там, където дизайнът го позволява, или тестван по шаблон ARIA combobox там, където не позволява.
  • Табове, изградени от стилизирани <div>-ове → шаблон за табове от ARIA Authoring Practices Guide.

Кога се прибягва до ARIA

Първото правило на ARIA е: не се използва ARIA, ако нативен елемент свършва работата. Ролите, статусите и свойствата на ARIA са кръпка за случаи, когато нативният HTML не може да опише изграждания уиджет (дървовидни изгледи, многоизборни combobox-ове, определени modal шаблони). Те не заместват използването на <button>.

Практически одит

Най-бързият начин за откриване на семантично разпадане в кодова база: търсене на onclick върху div и span. Всяко съвпадение е потенциална грешка. Следващото по бързина: търсене на атрибути role=. ARIA е приемливо в ограничени контексти, но интензивното му използване често сигнализира, че нативни елементи са пропуснати по стилистични причини, които всъщност не са налагали тази замяна.