Zadanie #2679
Zadanie #2664: Zbiorcze podsumowanie zadań po audycie WCAG
Focus na polach wyboru
| Status: | Zamknięty | Start date: | 2021-09-29 | |
|---|---|---|---|---|
| Priority: | Normalny | Due 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.
History
#1 Updated by Marcin Suda over 3 years ago
- Status changed from Nowy to W toku
#2 Updated by Marcin Suda over 3 years ago
- Status changed from W toku to Testowanie
- Assignee changed from Marcin Suda to Tomasz Lewandowski
#3 Updated by Tomasz Lewandowski over 3 years ago
- File focus_top_about-help.bmp added
- File focus_top_PL-ENG.bmp added
- File focus_tab-articles.bmp added
- Status changed from Testowanie to W toku
- Assignee changed from Tomasz Lewandowski to Marcin Suda
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 3 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 3 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 3 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 3 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 3 years ago
- Status changed from Rozwiązany to Zamknięty