馃帹 uxowy.dev #69: 10聽podstawowych b艂臋d贸w dost臋pno艣ci (pope艂nianych w聽du偶ej cz臋艣ci przez developer贸w)
4 min czytania

馃帹 uxowy.dev #69: 10聽podstawowych b艂臋d贸w dost臋pno艣ci (pope艂nianych w聽du偶ej cz臋艣ci przez developer贸w)

...szykuje si臋 gruby refaktor 馃憖

Co raz cz臋艣ciej widzi si臋 wzmianki o EEA (European Accessibility Act). Wiele stron, kt贸re wcze艣niej w og贸le nie dba艂y o dost臋pno艣膰, czeka niema艂a rewolucja.

I to nie jest tak, 偶e tylko EEA powinno nas zmusi膰 do tworzenia bardziej dost臋pnych stron. W USA s膮 tego typu wymogi ju偶 od dawna. Ale i tak, pomijaj膮c wszelkie nakazy prawne, powinni艣my po prostu robi膰 nasze strony i aplikacje dost臋pne. Bo...

Os贸b 偶yj膮cych z jakimi艣 niepe艂nosprawno艣ciami:

  • w Polsce mamy 7 milion贸w (to s膮 oficjalne dane, w rzeczywisto艣ci mo偶e by膰 ich jeszcze wi臋cej),
  • a na 艣wiecie szacuje si臋, 偶e jest to oko艂o 15-16% populacji.

No a kto b臋dzie musia艂 t臋 ca艂膮 dost臋pno艣膰 cyfrow膮 ogarn膮膰?
No g艂贸wnie my. Developerzy. Tak偶e warto wej艣膰 w temat dost臋pno艣ci (a skillsy te na pewno b臋d膮 bardzo po偶膮dane na rynku pracy 馃か).

Dlatego dzi艣 podsy艂am Ci garstk臋 podstawowych b艂臋d贸w dost臋pno艣ci. I jak si臋 zaraz przekonasz, w du偶ej cz臋艣ci s膮 one pope艂niane przez nas, developer贸w 馃し鈥嶁檪锔. Ale nie tylko, 偶eby by艂o jasne. O dost臋pno艣膰 powinni dba膰 wszyscy, na ka偶dym etapie tworzenia produktu.

To jedziemy:

1. Focus

  • brak widocznego focusa klawiaturowego - np. dodanie "outline: 0" na interaktywnych elementach bez dodania innych styli, kt贸re wskaza艂yby, 偶e dany element ma aktualnie focus; zwr贸膰 uwag臋, czy zestaw klas typu "reset" nie ma takiej definicji,
  • focusowanie element贸w aktualnie niewidocznych na ekranie - klasyczny przyk艂ad to modal, kt贸rego nie mo偶emy zamkn膮膰 z poziomu klawiatury, bo focusujemy elementy pod nim; albo menu, kt贸re jest zwini臋te ale my focusujemy wszystkie jego ukryte elementy, zanim przejdziemy z focusem dalej.

2. Kontrast

  • klasyka, wi臋c nie b臋d臋 si臋 rozpisywa膰 - kontrast mi臋dzy t艂em a tekstem powinien spe艂nia膰 wymogi WCAG,
  • kontrast mo偶emy sprawdzi膰 z pomoc膮 wielu narz臋dzi, m.in. na tej stronie: https://webaim.org/resources/contrastchecker.

3. Formularze

  • ka偶dy input powinien mie膰 label, powi膮zany z inputem za pomoc膮 for="id_inputa",
  • dopracowana walidacja - unikaj og贸lnych komunikat贸w typu "To pole jest wymagane", zamiast tego u偶yj "Podaj swoje imi臋"; komunikat powinien by膰 bezpo艣rednio przy polu, najlepiej oznaczony nie tylko kolorem, ale te偶 ikonk膮,
  • poka偶 podpowiedzi - je艣li pole ma jakie艣 ukryte wymagania lub ograniczenia, powiedz o tym od razu, nie dopiero po walidacji; typowy przyk艂ad to pole has艂a,
  • przej艣cie formularza z poziomu klawiatury - wszystkie pola powinny by膰 osi膮galne z poziomu klawiatury; niby podstawa, ale wiele stron ma z tym problem, najcz臋艣ciej to si臋 pojawia przy pisaniu w艂asnych kontrolek (o tym dalej),
  • wygodny spos贸b wpisywania danych, np. datepicker powinien by膰 wygodny do obs艂u偶enia z poziomu klawiatury, czyli m.in. umo偶liwi膰 nawigowanie po dniach za pomoc膮 strza艂ek, umo偶liwi膰 zmian臋 roku, miesi膮ca itd.,
  • przewidywalny wygl膮d i dzia艂anie input贸w - niech select wygl膮da jak select itd.; nie b膮d藕 kreatywny i trzymaj si臋 utartych szlak贸w.

4. Nag艂贸wki

  • u偶ywaj ich, ale:
  • u偶yj dok艂adnie jednego nag艂贸wka h1 na stron臋,
  • u偶ywaj nag艂贸wk贸w w odpowiedniej kolejno艣ci - nie r贸b przeskok贸w: h1 > h3 > h5; struktura nag艂贸wk贸w na stronie powinna wygl膮da膰 jak drzewo z kolejnymi poziomami,
  • nie u偶ywaj nag艂贸wk贸w do okre艣lania wygl膮du tekstu, typowy przyk艂ad, to "dam tutaj h3 bo potrzebuj臋 troszk臋 wi臋kszy tekst", do tego u偶ywaj klas CSS.

5. ARIA

6. Customowe zachowania element贸w

  • divy i spany z onClick to klasyka - staraj si臋 u偶ywa膰 natywnych klikalnych element贸w: np. link贸w do nawigacji, button贸w do wywo艂ywania JS, radio, checkbox贸w itd.; ich wygl膮d mo偶esz modyfikowa膰 w CSS,
  • je艣li ju偶 robisz takie rzeczy, to oznacz elementy odpowiednimi rolami i tagami ARIA, np. role="radiogroup", aria-lebelledby="id", role="radio", aria-checked="boolean" itd. Przyk艂ady w艂a艣ciwego u偶ycia tych oznacze艅 w r贸偶nych komponentach s膮 w punkcie wy偶ej dot. ARIA;

7. Linki bez href

  • nie u偶ywaj link贸w bez href - np. do wywo艂ania funkcji JS,
  • je艣li co艣 ma si臋 zachowa膰 jak przycisk, niech to b臋dzie przycisk (button).

8. Szybko zmieniaj膮cy si臋 obraz i autoplay

  • lepiej nic nie odtwarza膰 automatycznie (wideo, d藕wi臋ku, slidera),
  • je艣li ju偶 musisz, to daj mo偶liwo艣膰 zastopowania,
  • we藕 pod uwag臋 prefers-reduced-motion.

9.  Opis tekstowy element贸w nietekstowych

  • dla obrazk贸w - dodaj alt; je艣li obrazek jest typowo dekoracyjny, to dodaj pusty alt, dzi臋ki temu voice over nie przeczyta URL'a obrazka; je艣li alt jest przydatny, staraj si臋 dobrze opisa膰 go w jednym zdaniu (co si臋 znajduje na obrazku?),
  • dla wideo - dodaj napisy lub transkrypt,
  • dla infografik - umie艣膰 tekst pod inforgrafik膮, mo偶e by膰 ukryty za pomoc膮 CSS,
  • dla przycisk贸w z sam膮 ikon膮 - dodaj np. aria-label lub wizualnie ukryty element z tekstem wewn膮trz - nie b臋dzie widoczny na ekranie, ale czytnik ekranowy go przeczyta.

10. CAPTCHA

  • dodanie CATPCHA mo偶e bardzo utrudni膰 偶ycie osobom, kt贸re u偶ywaj膮 technologii wsparcia dost臋pno艣ci, np. czytnika ekranowego; wi臋cej tutaj: https://www.w3.org/TR/turingtest/
  • rozwa偶 u偶ycie technik alternatywnych - np. honeypot, timestamp lub popro艣 o rozwi膮zanie prostego r贸wnania.

PS. Powy偶sza lista inspirowana jest lekcj膮 z kursu Dost臋pno艣膰 cyfrowa dla programist贸w. Kursu nie uko艅czy艂em jeszcze w 100%, ale ju偶 teraz mog臋 Ci go poleci膰. Wojtek (wspominany ju偶 wcze艣niej w uxowy.dev) naprawd臋 wie, o czym m贸wi i robi 艣wietn膮 robot臋.


To wszystko na dzi艣!

Pozdrawiam i dobrego tygodnia! 馃殌

Miko艂aj Wa艣kowski
uxowy.dev


馃毃
Je艣li podoba Ci si臋 ten mail, wrzu膰 info o nim na swoje socjale lub firmowego Slacka! Mo偶e jest tam kto艣, komu przyda si臋 troch臋 wiedzy o UI/UX dla developera? Poni偶ej gotowiec do skopiowania 馃憞
Na moj膮 skrzynk臋 wpad艂 w艂a艣nie newsletter uxowy.dev, a w nim 10 podstawowych b艂臋d贸w dost臋pno艣ci (pope艂nianych g艂贸wnie przez developer贸w...). Polecam: https://uxowy.dev/email/69

Daj zna膰, gdzie wrzuci艂e艣(a艣).
Mo偶e b臋d臋 w stanie si臋 jako艣 odwdzi臋czy膰 馃


Przegapi艂e艣 kt贸re艣 wydanie?

Lista ostatnich wysy艂ek 馃帹 uxowy.dev:

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.