Artykuł ten jest tłumaczeniem artykułu Don’t Lose Your :focus autorstwa Patricka H. Lauke, zamieszczonego na 24ways.org. Patrick H. Lauke wyraził zgodę na przetłumaczenie i opublikowanie jego artykułu na moim blogu, za co serdecznie mu dziękuję. Zaznaczam, że nie jestem autorem poniższego tekstu, a jedynie autorem tłumaczenia.

Skup się!

Wielu webdesignerom, dostępność (accessibility) kojarzy się głównie z niewidomymi użytkownikami i ekranowymi czytnikami oraz trudnościami z dostosowaniem stron do ich potrzeb. Tymczasem dostępność to także wachlarz sytuacji, które dotyczą również mniej „ekstremalnych” przypadków. O ile prawdą jest, że tworzenie w pełni dostępnych witryn jest dość skomplikowane, o tyle istnieje sporo rozwiązań, które nie wymagają niczego więcej poza odrobiną racjonalnego podejścia, można je w prosty sposób przetestować (bez konieczności kupowania drogiego oprogramowania), a przy ułatwią życie co poniektórym użytkownikom.

W tym krótkim artykule skupimy się na dostępności do stron z poziomu klawiatury oraz na tym, jak nieostrożne użycie CSS może istotnie wpłynąć na ich dostępność.

Dostępność z klawiatury

Uzytkownicy, którzy z jakiś względów nie używają myszy, do nawigacji po internetowych stronach używają klawiatury (lub niestandardowego interfejsu przypominającego klawiaturę). Domyślnie używają do tego klawisza TAB i kombinacji TAB+SHIFT, co pozwala im na poruszanie się pomiędzy poszczególnymi elementami na stronie (linki, pola formularza, obszary map graficznych).

Uwaga: w OS X te funkcjonalność trzeba najpierw włączyć wybierając System Preferences > Keyboard and Mouse > Keyboard Shortcuts. Dla Safari pod Windowsem należy najpierw włączyć opcję Press Tab w Preferences > Advanced. Najdziwniejsza pod tym względem jest Opera, która posiada dość rozbudowaną nawigację za pomocą klawiatury (Shift+↓, Shift+↑, Shift+←, and Shift+→).

————————————————————
Wybaczcie brak tłumaczenia, jeśli chodzi o ustawienia w OS X i Safari, ale nie korzystam, więc pomyślałem, że lepiej pozostawić oryginalna pisownię w tym miejscu.
————————————————————

Hej! Jak usunąć te kropki z linku?

Aby pokazać użytkownikom, w który element na stronie jest aktualnie używany (wybrany), przeglądarki renderują wokół niego kontur. „Problem” w tym, że niektóre przeglądarki (Internet Explorer oraz Firefox) renderują go również przy kliknięciu myszą. Szczególnie nieelegancko wygląda to przy użyciu kombinacji technik „image replacement” i „off left” na linkach – efekt to kontur rozciągnięty od prawej krawędzi elementu aż po lewą krawędź okna przeglądarki.


Kontur rozciąga się w lewo (przykład pochodzi ze strony carsonified.com) – zdaje się, że jest już nieaktualny (przyp. aut.)

Istnieje banalne rozwiązanie zapobiegające rozciąganiu się kontury – wystarczy dodać proste overflow:hidden, które zabiegnie wylewaniu się konturu poza klikalny obszar obrazka.


Rozciąganie zatrzymane przez overflow:hidden

Niestety, dla wielu twórców to rozwiązanie nie załatwia sprawy. Chcąc pozbyć się kropkowanego konturu raz na zawsze, ukrywają go na dobre w arkuszu stylów. Również popularny reset Erica Meyera – świetny zbiór stylów niwelujący różnice w wyświetlaniu elementów na różnych przeglądarkach – likwiduje kontur.

   html, body, div, span, applet, object, iframe ... {
   ...
      outline: 0;
   ...
   }
   /* remember to define focus styles! */
   :focus {
      outline: 0;
   }

Co prawda w powyższym przykładzie (ale również w samym arkuszu stylów) Eric napomina twórców stron o konieczności zdefiniowania pseudoklasy :focus, to sądząc po ilości stron, na których to napomknięcie jest ignorowane (a napominający komentarz usunięty), zalecenie to nie cieszy się zbytnim uznaniem.

Zresztą… nieważne! Koniec z brzydkim, wykropkowanym konturem w naszym pięknym projekcie. Tylko co z użytkownikami, którzy przeglądają strony z pomocą klawiatury? Technicznie wciąć mogą poruszać się po stronie używając klawisza TAB, tylko że już nic nie wskaże im aktualnie wybranego elementu na stronie (chyba, że używają Opery, która wyświetla kontur niezależnie od ustawień ustawień w arkuszach stylów), a jeśli do oglądania stron używają Safari, nie zobaczą nawet docelowego adresu na pasku stanu, który zobaczyliby po najechaniu na link kursorem myszy.

Wyłącz :focus tylko dla myszy

Czy istnieje zatem sposób na ukrycie konturu przed użytkownikami myszy przy jednoczesnym pozostawieniu go dla użytkowników nawigujących po stronie klawiaturą?


Testowanie zawiłych kombinacji w arkuszu stylów.

Przegląd kilku różnych podejść do tematu pokazuje (zobacz CSS outline suppression), że najprostsze rozwiązanie bywa najlepsze. Zamiast ukrywać kontur dla pseudoklasy :focus ukryjmy ją dla :active – pseudoklasy definiującej te właściwości, które zostaną przypisane wybranemu elementowi w po kliknięciu lub aktywowaniu go w inny sposób.

a:active { outline: none; }

Jedynym minusem tego rozwiązania jest to, że kontur stanie się widoczny jeśli użytkownik aktywuje link a następnie skorzysta z przycisku wstecz w przeglądarce. Aha, i starsze wersje Inetrnet Explorera bez przerwy mylą przeznaczenie :focus, :hover i :active, więc ta metoda nie zdaje egzaminu od IE 6 w dół. Osobiście jestem w stanie to przeżyć (ja również – przyp. aut.).

Ważne: W ostatniej chwili, tuż przed dodaniem tego artykułu, zdałem sobie sprawę z błędu w moim teście. Okazuje się, że kontur jest widoczny przez chwilę między aktywowaniem linku a załadowaniem docelowego adresu (co w zasadzie jest całkiem logiczne – w końcu po aktywacji link zostaje wybrany). Ponieważ do testów używałem tylko linków wewnętrznych, przeoczyłem ten problem (chwila trwała zbyt krótko, więc kontur nie był widoczny – przyp. aut.). Można więc zastosować mniej eleganckie rozwiązanie, ukrywając kontur również dla pseudoklasy :hover.

Podsumowanie

Naturalnie wielu projektantów stron uzna, że wie lepiej co jest dobre dla użytkowników ich witryn, również tych, którzy korzystają tylko z klawiatury i usunie domyślny kontur zastępując go starannie zaprojektowanym stylem dla pseudoklasy :focus. Jeśli rzeczywiście są przekonani, że te style ich nie zawiodą i okażą się lepszym rozwiązaniem dla ich użytkowników… z drugiej strony,
brzmiąc być może trochę jak Jakob „niebieski, podkreślony link” Nielsen (dla niezaznajomionych – przyp. aut.), twierdzę, że czasem lepiej pozostawić domyślne style w spokoju. Można je rozbudować – czemu nie (jeśli już definiujemy jakieś zmyślne style dla :hover , czemu nie zrobić tego samego z :focus), ale nie eliminować na dobre.

Podobne wpisy: