Zadanie #2679

Zadanie #2664: Zbiorcze podsumowanie zadań po audycie WCAG

Focus na polach wyboru

Added by Tomasz Blazejczyk over 2 years ago. Updated over 2 years ago.

Status:ZamkniętyStart date:2021-09-29
Priority:NormalnyDue date:
Assignee:-% Done:

100%

Category:-Spent time:-
Target version:-
Developer:Marcin Suda, Tomasz Blazejczyk Rewizja rozwiązania:
Tester:Tomasz Lewandowski Rewizja testów:

Description

Całkowicie niewidoczny lub słaby (domyślny) fokus na pola wyboru.
Z tej przyczyny nawigacja bez użycia myszy dla osoby widzącej może być utrudniona lub całkowicie
niemożliwa.
Rozwiązanie
Należy zdefiniować dla pól wyboru w CSS pseudoklasy :hover , :active , :focus wykorzystując np.
deklaracje CSS outline , która umożliwi dodanie własnego widocznego obramowania wokół oznaczonego
elementu, ponieważ każda przeglądarka ma swoje własne style wyświetlania domyślnego fokusa.
http://www.w3.org/TR/WCAG20-TECHS/G195.html
http://www.w3.org/TR/WCAG20-TECHS/C15.html
Przydatne może być również narzędzie https://github.com/ten1seven/what-input aby osobno zdefiniować
wygląd elementów fokusowanych za pomocą myszki, a inaczej za pomocą klawiatury lub ekranu dotykowego.

focus_top_about-help.bmp (30.2 KB) Tomasz Lewandowski, 2021-10-06 12:50

focus_top_PL-ENG.bmp (47.8 KB) Tomasz Lewandowski, 2021-10-06 12:50

focus_tab-articles.bmp (142 KB) Tomasz Lewandowski, 2021-10-06 13:07

History

#1 Updated by Marcin Suda over 2 years ago

  • Status changed from Nowy to W toku

#2 Updated by Marcin Suda over 2 years ago

  • Status changed from W toku to Testowanie
  • Assignee changed from Marcin Suda to Tomasz Lewandowski

#3 Updated by Tomasz Lewandowski over 2 years ago

Oceniałem na podstawie https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html
tj. podpadamy pod wytyczne:
- kontrast kolorów przynajmniej 3:1 (co #jakrozumiem znaczy tyle, co 3.0)
- obwódka o szerokości przynajmniej 1 css-piksela

Sporne są #jakrozumiem fokusy zielone-na-zielonym w górnym pasku ("na banerze", czy jak to nazwać) - uwidocznione w załączonych plikach. Foacus ma kolor rgb(0,255,0)

1) focus_top_PL-ENG - contrast ratio dla rgb(0,255,0) i rgb(78,215,5) [próbkowany z dolnego kresu focusa, bo tam ciemniej i kontrast nieco większy)
wynosi 1.38 = za mało
(https://contrast-ratio.com/#rgb%280%2C255%2C0%29-on-rgb%2878%2C215%2C5%29)

2) focus_top_about-help - contrast rato dla rgb(0,255,0) i rgb(59,150,11) [próbkowany znowu z dołu, bo ciut ciemniej w gradiencie)
wynosi 2.75 = ciut za mało
(https://contrast-ratio.com/#rgb%280%2C255%2C0%29-on-rgb%2859%2C150%2C11%29)

Może najbezpieczniejszym rozwiązaniem byłoby przyjęcie czarnego fokusa?
w 1) wynosiłby on 11.04
(https://contrast-ratio.com/#rgb%280%2C0%2C0%29-on-rgb%2878%2C215%2C5%29)
w 2) natomiast 5.55
(https://contrast-ratio.com/#rgb%280%2C0%2C0%29-on-rgb%2859%2C150%2C11%29)
- przy czym tym razem byłoby to nawet dolne (nie górne) ograniczenie, gdyż tym razem im jaśniejsze tło, tym większy kontrast.

Niestety fokus pomarańczowy jak w logo agro też nie przechodzi (https://contrast-ratio.com/#rgb%28240%2C121%2C2%29-on-rgb%2878%2C215%2C5%29)

Zakładam, że fokus na białym tle był ok, ale to tym bardziej nic tu nie psujemy.
Jest jeszcze lekko wyszarzona zakładka "Artykuły" (p. focus_tab-articles), ale tutaj znowu gradient działa na naszą korzyść, na górze szary ma kolor rgb(234,234,234), co z czarnym fokusem da contrast ratio 17.45
(https://contrast-ratio.com/#rgb%280%2C0%2C0%29-on-rgb%28234%2C234%2C234%29)
Tak więc nic nie popsujemy.

Chociaż przyznam się, że czarny fokus był dla mnie kontrintuicyjny przed tym ćwiczeniem.

#4 Updated by Tomasz Lewandowski over 2 years ago

btw, okazuje się, że zielony fokus na białym tle też ma za niski contrast ratio
https://contrast-ratio.com/#rgb%280%2C255%2C0%29-on-rgb%28255%2C255%2C255%29

zupełnie nie rozumiem w takim razie contrast ratio dla kolorów.

#5 Updated by Marcin Suda over 2 years ago

  • Status changed from W toku to Testowanie
  • Assignee changed from Marcin Suda to Tomasz Lewandowski

Zmieniłem kolor obramowania na czarny. Zmieniłem jego styl na "kreskowany", żeby bardziej się rzucało w oczy że to wskaźnik focusu, a nie jakiś element dekoracyjny.

#6 Updated by Tomasz Lewandowski over 2 years ago

Troszkę poniewczasie pomyślałem, że jakiś ciemny zielony też spełnia wymagania - dla rgb(0,80,0) bez masła, ale nawet do (0,115,0) mieścimy się w wymaganiach na zielonym tle
https://contrast-ratio.com/#rgb%280%2C115%2C0%29-on-rgb%2878%2C215%2C5%29

Ale czarny chyba też źle nie wygląda, poczekam na nową wersję.
Dla kreskowanego możemy z kolei nie łapać się w wymaganiu minimalnej powierzchni. Im grubsze obramowanie tym bardziej możemy "kreskować".

#7 Updated by Tomasz Lewandowski over 2 years ago

  • Status changed from Testowanie to Rozwiązany
  • Assignee deleted (Tomasz Lewandowski)
  • % Done changed from 0 to 100

fokus czarny ok.
Szerokość 2 piksele, co wg wytycznych pozwala spokojnie na aktualne proporcje kreskowania.
Czarny na szarym to minimum 7.64 (https://contrast-ratio.com/#rgb%280%2C0%2C0%29-on-rgb%28156%2C%20156%2C%20156%29), pozostałe miejsca występowania mają jeszcze większy color ratio.

#8 Updated by Tomasz Lewandowski over 2 years ago

  • Status changed from Rozwiązany to Zamknięty

Also available in: Atom PDF