Кратка, ставовима вођена контролна листа за приступачну веб дугмад

Проблем са саветима о приступачности дугмади

Већина смерница за приступачност дугмади спада у два табора: или је у питању тумачење WCAG-а на 40 страна које нико не чита, или нејасан савет да се „дугмад учине приступачном“ без конкретних корака. Ни једно ни друго не помаже када у четвртак испоручујете функционалност.

Ова контролна листа покрива пет најчешћих пропуста у приступачности дугмади које виђамо у продукцији. Неће вас учинити WCAG стручњаком, али ће ухватити проблеме који заиста утичу на кориснике.

1. Користите елемент button за дугмад

Ако се понаша као дугме, треба да буде елемент <button>. Не <div> са onclick, не <span> са role="button", не <a> са href="#" и preventDefault.

Елемент <button> вам одмах даје навигацију тастатуром, управљање фокусом и најаве читача екрана. Када користите <div>, све то поново градите од нуле — и погрешићете.

Једини изузетак: ако радња води на нову страницу или мења URL, користите елемент <a>. Линкови и дугмад су семантички различити. Корисници читача екрана навигирају по типу елемента и очекују да дугмад извршавају радње, а линкови да воде на друга места.

2. Нека циљна област буде најмање 44×44 пиксела

WCAG 2.5.5 (Level AAA) захтева да интерактивни елементи имају минималну циљну величину од 44×44 CSS пиксела. Овде није реч о визуелној величини — већ о области на коју се може кликнути.

Можете имати визуелно мало дугме са довољним padding-ом или можете проширити циљну област помоћу псеудо-елемента. Важно је да корисник не мора да циља прецизно.

Корисници мобилних уређаја, особе са моторичким оштећењима и свако ко користи уређај у покрету промашиваће мале циљеве. Дугме са иконом од 24×24 пиксела може изгледати чисто, али је то пропуст у употребљивости.

3. Обезбедите видљива стања фокуса која нису само подразумевана у прегледачу

Подразумевани прстен фокуса у прегледачу бољи је него ништа, али није доследан у различитим прегледачима и често је невидљив на одређеним позадинама. Потребно вам је прилагођено стање фокуса које функционише у вашем дизајн систему.

Добар индикатор фокуса има три особине:

• Висок контраст: најмање 3:1 у односу на суседне боје
• Видљив размак: није сакривен сопственом ивицом или позадином дугмета
• Доследан облик: корисници треба да га препознају као индикатор фокуса у целом интерфејсу

Не уклањајте outline: none без замене нечим бољим. И не правите стања фокуса толико суптилним да их само ви можете видети у савршеним условима осветљења.

4. Пишите ознаке дугмади које имају смисла ван контекста

Корисници читача екрана често навигирају скачући између дугмади. Када то раде, чују листу ознака дугмади без околног контекста.

Дугме означено као „Сазнај више“ у таквој листи је бескорисно. Исто важи и за „Кликните овде“ или „Пошаљи“. Ознака треба да описује радњу: „Преузми контролну листу за приступачност“, „Пријави се за ажурирања“, „Обриши овај коментар“.

Ако ваш дизајн захтева кратку визуелну ознаку, користите aria-label да обезбедите описну алтернативу. Али боље решење је да пишете ознаке које раде за све.

За дугмад која имају само икону, aria-label је обавезан. Дугмету које има само икону лупе потребан је aria-label="Search" или еквивалентан текст. Икона није приступачна читачима екрана.

5. Обезбедите довољан контраст боја

WCAG 2.1 захтева однос контраста од најмање 4.5:1 за нормалан текст и 3:1 за крупан текст (18pt или 14pt bold). Ознаке дугмади су обично нормалан текст.

Светлосиви текст на белом дугмету не пролази. Бледоплава на светлоплавој позадини не пролази. Ове комбинације могу изгледати софистицирано, али искључују кориснике са слабим видом, далтонизмом или било кога ко гледа екран на јаком сунцу.

Користите проверу контраста током дизајна, не после лансирања. Исправљање проблема са контрастом у продукцији је скупо јер често захтева измене дизајн система.

Ако радите са алатима за обраду слика, обрада на страни клијента може помоћи у очувању приватности приликом генерисања приступачних визуелних ресурса — нарочито приликом тестирања комбинација боја или генерисања стања за преглед.

Шта ова контролна листа не покрива

Ова листа је намерно непотпуна. Не покрива семантику онемогућених стања, стања учитавања, обраду грешака или сложене обрасце дугмади као што су split buttons или окидачи падајућих менија. Ти обрасци захтевају сопствене смернице.

Такође не покрива шире питање када користити дугме уместо других интерактивних елемената. За то је потребно разумети семантички HTML и стабло приступачности — теме које заслужују сопствене чланке.

Оно што покрива јесте лако доступан део посла: грешке које се појављују у готово сваком прегледу кода, које утичу на највише корисника и које је најлакше исправити током развоја.

Како да ово интегришете у свој ток рада

Контролне листе за приступачност раде само ако су део развојног процеса, а не нешто што се накнадно додаје. Ево како да то постигнете:

У дизајну: додајте стања фокуса и напомене о циљној области у своје дизајн фајлове. Не остављајте програмерима да то погађају.

У прегледу кода: проверите елементе <button>, aria-label на дугмадима са иконама и CSS за стање фокуса. То се брзо уочава.

У тестирању: прођите кроз интерфејс тастером tab. Ако не можете да дођете до дугмета или не можете да видите где је фокус, не могу ни ваши корисници.

У документацији: укључите захтеве за приступачност дугмади у библиотеку компоненти. Олакшајте исправан поступак више него погрешан.

Ако отклањате проблеме у продукцији, алати за преглед HTTP заглавља и преусмеравања могу вам помоћи да разумете како помоћне технологије тумаче ваш markup — нарочито када решавате проблеме са управљањем фокусом после навигације.

Цена прескакања овог посла

Неприступачна дугмад не нарушавају само WCAG усаглашеност — она прекидају токове рада. Корисник који не може да кликне на дугме за слање не може да попуни формулар. Корисник који не може да види стања фокуса не може да навигира тастатуром. Корисник који не може да разликује текст дугмета од позадине не може да прочита ознаку.

То нису рубни случајеви. Отприлике 15% светске популације има неки облик инвалидитета, а привремена ограничења (покварен миш, јако сунце, држање бебе) на крају утичу на свакога.

Добра вест је да је приступачност дугмади углавном решен скуп проблема. Не морате да измишљате нове обрасце нити да чекате подршку прегледача. Само треба правилно да користите платформу и тестирате свој рад.

Кључни закључци

• Користите елементе <button> за дугмад и елементе <a> за навигацију — семантичка разлика је важна за помоћне технологије
• Обезбедите да циљне области буду најмање 44×44 CSS пиксела како би одговарале особама са моторичким оштећењима и корисницима мобилних уређаја
• Обезбедите видљива стања фокуса високог контраста која функционишу у целом вашем дизајн систему
• Пишите ознаке дугмади које имају смисла када се читају изоловано и користите aria-label за дугмад која имају само икону
• Проверавајте контраст боја током дизајна, не после лансирања, како бисте избегли скупе накнадне исправке

FAQ

Q: Могу ли да користим role="button" на <div> ако додам руковаоце за тастатуру?

A: Можете, али не би требало. Мораћете ручно да обрадите Enter, Space, управљање фокусом и онемогућена стања — и неизбежно ћете нешто пропустити. Елемент <button> све то подразумевано ради исправно. Користите га.

Q: Шта је са дугмадима која мењају стање, као што је дугме play/pause?

A: Користите aria-pressed="true" или aria-pressed="false" да означите тренутно стање. Ознака дугмета такође треба да одражава радњу која ће се десити при клику („Паузирај“ док се репродукује, „Пусти“ док је паузирано), а не тренутно стање. Корисници читача екрана треба да знају шта ће дугме урадити, не у ком је стању систем.

Q: Да ли онемогућена дугмад морају да испуњавају захтеве за контраст?

A: WCAG 2.1 изузима онемогућене контроле од захтева за контраст (1.4.3), али је то спорно. Онемогућена дугмад са лошим контрастом свима је тешко уочити. Ако ћете приказати онемогућено дугме, учините га читљивим. Још боље, сакријте га или објасните зашто је онемогућено.

Q: Како да тестирам приступачност дугмади без читача екрана?

A: Користите тастатуру. Прођите кроз интерфејс тастером Tab и проверите да можете да дођете до сваког дугмета, да видите где је фокус и да активирате дугмад тастерима Enter или Space. Ово открива већину проблема. За дубље тестирање користите accessibility inspector у Chrome или Firefox DevTools да проверите израчунату улогу и ознаку.

Q: Која је разлика између aria-label и aria-labelledby?

A: aria-label директно обезбеђује текстуални низ. aria-labelledby референцира ID другог елемента чији текстуални садржај постаје ознака. Користите aria-labelledby када текст ознаке већ постоји негде другде у DOM-у. Користите aria-label када треба да обезбедите ознаку која није видљива на екрану.

Извори

• Web Content Accessibility Guidelines (WCAG) 2.1 — W3C
• Inclusive Components: Toggle Buttons — Heydon Pickering
• The ARIA Button Pattern — W3C ARIA Authoring Practices Guide
• WebAIM: Keyboard Accessibility — WebAIM