Strona zrobiona semantycznie, kod się waliduje, a części nawigacji i objaśnień nie słychać, czemu?
Najczęściej dlatego, że webdeveloper skutecznie to schował. Zdarza się, że do ukrywania elementów, które maja być widoczne po wykonaniu określonej akcji (przy okazji uwaga: nie ma myszki, nie ma mouseover / :hover !) albo co gorsza do ukrycia przed widzącymi dodatkowych elementów przeznaczonych dla użytkowników screenreaderów wykorzystywane są niewłaściwe style:
display:none/visibility:hidden;ich użycie spowoduje, że element będzie skutecznie ukryty przed screenreaderami.- Podobnie w przypadku rzadziej spotykanego
width:0; height:0;. Zerowymiarowe elementy wypadają z biegu (flow) dokumentu i w takiej postaci zostaną pominięte przez wiele z czytników. - Nieco lepiej wypada połączenie overflow:hidden z mocno ujemnym wcięciem text-indent (np.
text-indent:-10000px;). Jednak w przypadku wystąpienia w takim elemencie linku w warstwie wizualnej może on się uwidocznić jako obszar aktywny od oryginalnego miejsca położenia do obecnego wymuszonego przez ujemne wcięcie. Jak to może wyglądać? Ano pojawiająca się ni stąd ni zowąd “łapka” lub obramówka linku w przypadku uzyskania fokusu.
Zatem jak?
Off-left
Najlepszą (obecnie używaną) metodą ukrywania dodatkowej treści jest przeniesienie jej poza lewą krawędź ekranu, zwane z angielska metodą “off-left”. Do uzyskania oczekiwanego efektu potrzebne będzie ustawienie kilku właściwości CSS:
/* wyciągamy element z biegu dokumentu, by nie zajmował miejsca i zaczynamy pozycjonowanie*/
position:absolute;
/* wysyłamy go poza krawędź ekranu*/
left:-10000px;
/* niektóre dziwaczne przeglądarki muszą mieć podaną parę koordynatów by przesunąć element stąd: */
top:auto;
/* dodatkowe zabezpieczenie przed posiadaczami olbrzymich rozdzielczości i przypadków, kiedy pozycjonowanie na skutek zbiegu warunków nie wyjdzie*/
width:1px;
height:1px;
overflow:hidden;
Off-top nie polecam
Pytanie: dlaczego wysyłamy element poza lewą krawędź i przejmujemy się użytkownikami ze sporą rozdzielczością zamiast wysłać poza górna krawędź?
Z dwóch powodów:
- jeśli ukrywany element zawiera element aktywny np. link po uzyskaniu fokusu (np. przejściu do niego klawiszem tabulacji) strona w niektórych wypadkach użytkownikowi nieoczekiwanie może przewinąć się do początku – próbując pokazać aktywny element. Przesunięcie poziome nie powoduje przewijania strony.
- ważniejszy z naszego punktu widzenia: Niektóre czytniki ignorują elementy znajdujące się powyżej górnej krawędzi obszaru strony.
Schowane linki
Czasem w ukrywanej treści znajdują się linki np. tzw. skiplinki, czyli odnośniki pozwalające przenieść się od razu do konkretnej sekcji dokumentu (nie zawsze są potrzebne, ale o tym innym razem ;- ) ). Ukryty link otrzymujący przypadkiem fokus (np. po użyciu klawisza tabulacji) może sprawić, że osoba posługująca się standardowym interfejsem poczuje się zagubiona – bo “fokus się gdzieś zapodział”. Użytkownik w pasku statusu widzi adres linku a nie widzi gdzie on się znajduje. Dlatego warto przewidzieć na stronie miejsce dla aktywowanego linku. Przy okazji: aktywowany to nie tylko :hover (co w przypadku nieobecnych na obszarze graniczy z niemożliwością) ale przede wszystkim :active i :focus.
Przykład pojawiającego się “zza światów” linku możemy zaobserwować na stronie programu SOAP Uniwersytetu Stanforda. Wystarczy po załadowaniu strony wcisnąć tab (w zależności od przeglądarki i pluginów może być konieczne kilkukrotne wciśnięcie):
Fragment strony programu SOAP Uniwersytetu Stanforda
Fragment strony programu SOAP Uniwersytetu Stanforda z widocznym skiplinkiem
Dzięki temu rzeczone linki nie zajmują niepotrzebnie miejsca, a jednocześnie w razie przypadkowej aktywacji są widoczne i użytkownik wie co się dzieje.
Warto przeczytać
- CSS in Action: Invisible Content Just for Screen Reader Users – artykuł z którego zaczerpnąłem kilka kwestii teoretycznych, zawiera dodatkowo omówienie ukrywania dodatkowych etykiet formularzy
- ScreenreaderVisibility – prezentacja metody off-left. Na uwagę zasługuje szczególnie tabela wyników testów poszczególnych technik w różnych czytnikach
- Screen Reader Visibility Test Results – jeszcze jedna strona z wynikami testów różnych technik ukrywania
