Wracam na bloga po długiej przerwie ze słodko-gorzkim tematem. Powiem Ci o rzeczach oczywistych, a jednocześnie bolesnych. Uśmiechniesz się pod nosem nie raz, myśląc „banał”. Jednak niepokorne myśli odlecą ku wspomnieniom ukrytych, niechlubnych praktyk. W końcu wiedziałeś o zagrożeniu, ale nic z tym nie zrobiłeś. Bo to, bo siamto, zawsze znajdzie się wymówka. Prawda?
Jeśli nie masz bladego pojęcia, czym jest dostępność z tytułu posta – gorąco zapraszam Ciebie TUTAJ.
Pierwszą część serii o praktykach mordujących dostępny internet znajdziesz z kolei TUTAJ.
1. Skip linki
Klient nie wie, co to jest, więc czemu miałby je od Ciebie wymagać. A teraz przyznaj się bez bicia – zrobisz ten skip link, sam z siebie, z dobrej woli serca, czy nie?
Co to jest? Tzw. skip link (czy też skip navigation link) to zwykły odnośnik przenoszący użytkownika do głównej treści strony. Dzięki niemu pomijamy zazwyczaj menu, choć nie tylko. Możemy tworzyć skip linki służące do przeskakiwania jakichkolwiek powtarzalnych elementów naszej aplikacji.
Jak to działa? Skip link powinien być pierwszym aktywnym elementem, czyli tym, na którym ustawia się focus z klawiatury. Może, choć nie musi być widoczny na ekranie. Pamiętaj jednak – jeśli chcesz go ukryć, powinieneś go pokazać zaraz po tym, jak tylko wejdzie w stan focus. Skip linków na stronie możemy mieć ile chcemy (choć magiczna akceptowalna internetowo granica to 3). Ostatecznie wszystko zależy od budowy strony, sposobu, w jaki przekazujemy treści. Zazwyczaj wystarczy nam jeden skip link do przeskoczenia menu.
Po co to? Skip linki są dedykowane głównie dla osób, które korzystają z czytników ekranu (niewidomi, niedowidzący, z dysfunkcjami wzroku) lub też nawigują po stronie za pomocą klawiatury (z problemami motorycznymi). Zastanówmy się nad takim menu. Użytkownik może w ogóle nie jest nim zainteresowany. Albo już się z nim zapoznał na poprzedniej zakładce. Dzięki skip linkowi owy użytkownik może je pominąć i od razu przejść do treści strony. Mniej walki z czytnikiem, mniej stukania w klawiaturę – większy komfort korzystania z naszej aplikacji
2. Podkreślenie odnośników
Czego to designer nie wymyśli, co nie? Wpadnie mu do głowy radosna wizja linka bez podkreślenia, a ty, programisto, implementuj! Stop! To jest ten moment, w którym Twoje sumienie powinno obudzić się z długiego, zimowego snu.
a { text-decoration: none; }Niech Cię palce zaswędzą 3 razy, zanim to napiszesz.
Zmiana koloru nie powinna być jedynym wyróżnikiem linków. To wyklucza większość użytkowników z dysfunkcjami wzroku.
Ok, dyspensę od podkreśleń daję wtedy, kiedy otoczenie odnośnika niesie ze sobą jasną informację o jego przeznaczeniu. Na przykład menu. Zazwyczaj jest ono wizualnie wyróżnione, dzięki czemu użytkownik z łatwością rozpozna je jako nawigację, a nie blok suchego tekstu.
Żeby nie było tak radykalnie – oczywiście możesz wyróżnić swój odnośnik w inny sposób niż podkreślenie. Mimo wszystko to właśnie owa kreseczka jest standardową konwencją w internetach i to ona będzie najlepszym wyborem podczas projektowania / programowania w nurcie dostępności.
3. Relatywne jednostki czcionki
Zakładam, że korzystasz z relatywnych jednostek i rozmiar czcionek definiujesz za pomocą em, rem, %. I dobrze. To jedyna akceptowalna forma.
A powiedz mi jeszcze, jakie masz style przypisane do body, html, :root…? Czy może, przez przypadek oczywiście, zawieruszyło się tam niewinne font-size:16px? Jeśli nie – gratuluję. Jeśli tak – po prostu to skasuj. Zostaw body w spokoju, nie nadając mu żadnej domyślnej czcionki. Strona nie wybuchnie, obiecuję
Pozwólmy przeglądarkom korzystać z ich domyślnych rozmiarów czcionek! Zazwyczaj jest to 16px. Jednak przewaga 16 pikseli przeglądarki nad Twoimi 16 pikselami jest taka, że przeglądarka może je dostosować do ustawień użytkownika, a Ty nie.
Osoba niedowidząca może powiększyć całą stronę za pomocą globalnego zooma lub może też zmienić sam rozmiar czcionek. Oba sposoby powiększą tylko ten tekst, który ma nadaną relatywną jednostkę wielkości.
I na koniec – jednostka pt (punkty) jest jednostką absolutną (bezwzględną), podobnie jak piksele. Omijamy ją szerokim łukiem.
Koniec mądrzenia się na dziś. Napisz w komentarzu, czy znasz / korzystasz ze wszystkich powyższych wskazówek
Źródła: głównie blog https://pineco.de/.
