Wczoraj czytałam Julce na dobranoc bajkę o królu Midasie. Dla jasności – nie celowo (nie przepadam za mitologią), ot, taka była kolejna historia w zbiorze bajek wszelakich. Zakończyła się słowami „we wszystkim trzeba mieć umiar”. We wszystkim? Czy aby na pewno? A jeśli chcę zrobić stronę czytelną dla jak największej liczby osób, jeśli chcę wykorzystać maksymalnie każdy ze znanych mi sposobów na poprawę jej dostępności? Czy w tym przypadku również powinnam zachować umiar?
To strona może być zbyt dostępna, czy raczej nie?
Żeby odpowiedzieć na to pytanie, musimy określić definicję dostępności. Otóż możemy spojrzeć na to hasło z perspektywy użytkownika albo programisty. Każda ze ścieżek jest poprawna, jednak wiąże się z innymi wnioskami.
Jeśli myślimy o dostępności jako wrażeniu końcowego użytkownika – strona nie może być zbyt dostępna. W tym przypadku widzimy tylko dwie możliwości – albo użytkownik ma czytelny dostęp do wszystkich informacji, albo tego dostępu nie ma. Czarno-biała rzeczywistość – strona jest dostępna, albo po prostu nie jest.
Możemy jednak rozpatrywać dostępność jako zbiór technik, rozwiązań programistycznych, dzięki którym witryna jest czytelna dla jak największej liczby osób. Rozumiem, że ten kontekst może wydawać się abstrakcyjny w języku polskim, jednak angielskie słowo „accessibility” jest akurat bardzo elastyczne. I ten przypadek naturalnie wiąże się z błędną interpretacją zasad, niewiedzą, które w konsekwencji doprowadzają do przeładowania strony tzw. dobrymi praktykami. W tym artykule podpisuję się właśnie pod tą definicją.
Dobre chęci.
Miałam kiedyś doświadczenie z taką oto praktyką projektową: zróbmy sobie dostępną stronę internetową na hurra. Korzystajmy z całego dobrodziejstwa, jakie dają tutoriale i upychajmy arie w każdy kąt! Niech każdy robi, co umie. Ojtam, że bez planu, że spontanicznie, bez eksperckiego punktu widzenia.
Co? Kiedy? Gdzie?
To podstawowe pytania, których zabrakło w naszym projekcie.
Najpierw należy poznać problemy użytkowników, zrozumieć ich potrzeby, a dopiero w kolejnym kroku można zastanowić się nad rozwiązaniami oraz ich implementacją. Niestety, ten proces wydaje się tak oczywisty, że niestety jest często… zapominany. W konsekwencji, z dobroci naszych serc, przy delikatnej motywacji ludzi od biznesu – lubimy przedobrzyć. A w jakich konkretnie przypadkach?
Nadgorliwy alt.
To chyba najczęściej nadużywany znacznik w całych internetach. Nie każdy obrazek trzeba opisać! Dobrą praktyką jest ustawianie pustego znacznika alt dla punktorów, tzw. odstępników (grafik oddzielających różne sekcje na stronie) oraz obrazków dekoracyjnych, które nie niosą ze sobą informacji.
alt to też znacznik, który często jest używany po prostu bezmyślnie. Ot, podstawowy przypadek użycia – logo. Zróbmy mały quiz – który z poniższych opisów jest najbliższy ideałowi?
a) “Logo firmy transportowej JK przedstawiające ciężarówkę marki Iveco”
b) “Logo firmy transportowej JK”
c) “Firma transportowa JK”
Bez ceregieli powiem, że c).
Podobnie sprawa wygląda z opisem zaczynającym się od słów “Ilustracja…” albo “Zdjęcie…”. Jeśli tylko grafika nie zawiera w sobie treści (grafu, wykresu…) – są one niepotrzebne.
Więcej informacji o znaczniku alt na moim blogu.
Bezużyteczny title.
Wsparcie tego atrybutu wśród różnych technologii jest… mierne. W wielu przypadkach jest on po prostu pomijany podczas czytania strony. Powinniśmy korzystać z atrybutów aria-labelledby, aria-label, alt i zapomnieć o istnieniu title. Niemniej jednak zaleca się używać go w (tylko!) 1 przypadku: opisując elementy <frame> / <iframe>.
Jeśli interesują Ciebie szczegóły smutnej historii title, zajrzyj na w3.org, a11yproject.com oraz tpgi.com.
Zawiłe formularze.
A konkretnie zawiłe meandry grupowanie pól formularza, które są ze sobą związane. Na przykład: zbiór checkboxów, które dotyczą tego samego pytania lub rozróżnienie adresu dostawy i płatności.
Świetnie, jeśli chcesz zadbać o komfort korzystania z formularza i postawisz np. na grupowanie pól za pomocą elementów fieldset oraz legend. Gorzej, jeśli jednocześnie dorzucisz do swojego rozwiązania role="group" oraz aria-labelledby (tak w razie czego). Hej, co za dużo, to niezdrowo! Wybierz jedną taktykę dla jednego przypadku.
Tutaj znajdziesz kilka szczegółowych wskazówek na temat tworzenia dostępnych formularzy.
Podstępny tabindex.
Jeśli musisz skorzystać z dodatniego tabindexu, najprawdopodobniej masz źle zaprojektowaną stronę. Generalnie wszelakie technologie wspomagające bardzo dobrze radzą sobie z kolejnością elementów na stronie na podstawie źródła witryny oraz kodu CSS. Dodatkowy, niepotrzebny tabindex (a już w ogóle ten o wartości dodatniej) może wyprowadzić użytkownika z logicznego toku przeglądania witryny i go zdezorientować. Ponadto tabindex utrudnia utrzymanie strony i jest potencjalnym źródłem błędów.
Polecam ten artykuł, jeśli chcesz poznać najlepsze praktyki wykorzystania atrybutu tabindex.
Zbędny widget.
Na pewno kojarzysz komponent, który umożliwia zmianę wielkości czcionki na stronie. Czy kiedykolwiek zastanawiałeś się nad jego celem? Czy on rozwiązuje jakikolwiek realny problem? Czy nie lepiej… zmienić czcionkę za pomocą przeglądarki i dzięki temu korzystać z tych ustawień na każdej zakladce?
Artykuł kogoś, kto myśli podobnie do mnie na ten temat.
ARIA bez liku.
Gdzieś, kiedyś usłyszałam, że powinniśmy tak budować strony internetowe, aby ARIA w ogóle nie było potrzebne. Ono ma łatać luki, a nie być podstawowym narzędziem pracy. Podoba mi się to podejście do pracy z atrybutami ARIA.
A tutaj kilka szablonowych przykładów jej użycia. Niestety, bezmyślnych.
<li role="listitem">...
<h2 role="heading">...
Rola jest zbędna.
<div role="button">...
<div role="link">...
3 razy zastanowić się przed użyciem! Nigdy nie stosować zamiennie z semantycznymi elementami <button> oraz <link>.
<div aria-checked="true">...
Checkbox ogarnie zwykły HTML/CSS, ARIA jest niepotrzebne.
Dłuższe rozmyślania na temat odpowiedzialnego stosowania atrybutów ARIA.
Ok, moja głowa już paruje. Wystarczy jak na jeden artykuł, co nie? A może chcesz dorzucić do powyższej listy swoje przykłady praktyk wspierających dostępność, które łatwo przedawkować?
