Wiele osób korzystających ze sklepów internetowych to osoby upośledzone. Projektując i później wdrażając sklep należy wziąć pod uwagę czy będzie on dla nich dostępny. Dostępny sklep internetowy to taki, który nie nastręcza problemów podczas korzystania z jego funkcji. Zapewnienie dostępności na podstawowym poziomie, który znacznie ułatwia korzystanie ze sklepu, to nic trudnego. Wystarczy wyrobić w sobie kilka dobrych nawyków i stosować je podczas przygotowywania kodu HTML i CSS dla kolejnych sklepów. Oto kilka praktycznych porad.

1. Zawsze dostarczaj treść alternatywną dla materiałów multimedialnych, takich jak obrazy i nagrania wideo.

W przypadku obrazów sprawa jest prosta. Wystarczy do znacznika „img” odpowiedzialnego za umieszczenie obrazu na stronie dodać atrybut „alt”, którego wartość opisywać będzie to co znajduje się na zdjęciu. Atrybut ten możemy pominąć w przypadku grafik typowo dekoracyjnych (tło nagłówka, stopki, itp.), dzięki czemu ich opisy nie będą odczytywane przez czytniki ekranowe.

Nagrania wideo powinny posiadać napisy. Napisy powinny zawierać transkrypcję dialogów oraz informacje o zdarzeniach dźwiękowych występujących w filmie, dzięki czemu film zostanie w pełni zrozumiany przez osoby niesłyszące.

Dodając tekstową treść alternatywną zwiększamy również widoczność obrazów i wideo w wyszukiwarkach internetowych (Google, Bing). Wyszukiwarki zachowują podobnie do czytników ekranowych, czyli mogą odczytać tylko te informacje, które występują na stronie w postaci tekstu. Jeśli dodamy poprawne opisy do obrazów, to zostaną one poprawnie zaindeksowane np. przez wyszukiwarkę Google Grafika.

2. Stosuj znaczniki HTML zgodnie z ich przeznaczeniem.

Znaczniki HTML dzielimy na semantyczne i strukturalne. Znaczniki semantyczne powinny być stosowane zgodnie z ich znaczeniem, tzn. znacznik „p” powinien być stosowany do podziału tekstu na akapity, znacznik „figure”do oznaczania zdjęć w tekście, „h1”-„h6” do oznaczania nagłówków.

Nagłówki powinny tworzyć hierarchię. Najbardziej znaczącą treść, czyli nazwę produktu na karcie produktu oznaczamy jako „h1”, nazwę kategorii do której należy produkt – „h2”, itp. Przy kodowaniu szablonu sklepu nie powinnyśmy kierować się tym, że nagłówek „h1” prezentowany jest największym, a „h6” najmniejszym rozmiarem czcionki spośród wszystkich nagłówków, gdyż rozmiar zawsze możemy zmienić za pomocą stylów CSS.

3. Dostępne odnośniki

Odnośniki (znacznik „a”) powinny posiadać odpowiedni Anchor Text, czyli tekst wyświetlany na stronie i zawarty pomiędzy znacznikiem otwierającym i zamykającym oraz atrybut „title” opisujący dokąd kieruje dany odnośnik. Powinniśmy wystrzegać się odnośników w stylu „Kliknij tutaj”. Anchor Text oraz atrybut „title” jest również ważny z punktu widzenia SEO, więc poprawne odnośniki z pewnością podniosą naszą pozycję w wynikach wyszukiwania.

4. Stosowanie atrybutów WAI-ARIA

Atrybuty WAI-ARIA rozszerzają język HTML m.in. o role, które można przypisać do fragmentów kodu. Do najważniejszych ról należą:

  • navigation – służy do oznaczenia nawigacji w sklepie
  • main – główna treść serwisu
  • search – wyszukiwarka
  • alert – fragment prezentujący wiadomość z ważna informacją
  • article – artykuł na stronie
  • complementary – poboczna treść strony, artykułu

W specyfikacji standardu HTML5 pojawiły się nowe znaczniki semantyczne takie jak „article”, „nav”, „aside”, które odpowiadają takim rolom jak „article”, „navigation” i „complementary”, jednakże oprócz tych znaczników warto również stosować atrybuty ARIA, gdyż czytniki ekranowe z nich korzystają. Przykładowo dla oznaczenia głównej nawigacji w sklepie, możemy skorzystać z poniższego kodu HTML:

[html]
<nav id=”nawigacja” role=”navigation”>
<ul>
<li><a href=”#” title=”Skontaktuj się z nami”>Kontakt</a></li>

</ul>
</nav>
[/html]

5. Etykiety formularzy powinny być połączone z polami input za pomocą atrybutu for.

Wartość atrybutu „for” znacznika „label” równa jest identyfikatorowi elementu „input” określonemu za pomocą atrybutu „id”, z którym etykieta jest powiązana. Takie powiązanie etykiety z polem „input” jest szczególnie ważne w przypadku pól wyboru typu „radio” i „checkbox”, gdzie same pola są bardzo małe i wybranie ich może być problematyczne. Powiązanie etykiety z takim polem powoduje, że kliknięcie w etykietę zaznacza określone pole, co znacząco zwiększa dostępność takiego formularza.

W przypadku pól tekstowych można również stosować atrybut „placeholder” wprowadzony do specyfikacji HTML5, który jest odpowiedzialny za prezentowanie podpowiedzi wewnątrz tego pola. Przykładowo jeśli mamy pole, w które należy wprowadzić np. kod pocztowy, to oprócz etykiety „Kod pocztowy” umieszczonej obok pola tekstowego możemy również ustawić treść podpowiedzi na „Wpisz tutaj kod pocztowy w formacie 00-000”. Podpowiedź taka pojawi się wewnątrz pola i zostanie usunięta gdy użytkownik zacznie wprowadzać tekst.

[html]
<label for=”kodPocztowy”>Kod pocztowy</label>
<input id=”kodPocztowy” type=”text” name=”txtKodPocztowy”
placeholder=”Wpisz tutaj kod pocztowy w formacie 00-000”/>
[/html]

6. Dziel duże formularze na logiczne części za pomocą znacznika fieldset

Skomplikowane formularze warto podzielić na logiczne części. Przykładowo formularz rejestracji nowego użytkownika sklepu, można podzielić na część, w której wprowadzamy nasze dane osobowe, część określającą dane do wystawienia faktury VAT, część z danymi do wysyłki, itp. Kolejne części formularza zamykamy pomiędzy znacznikami „fieldset”. Warto tutaj również stosować znacznik „legend”, który opisywać będzie te poszczególne części formularza.

7. Określaj język dokumentu.

Język dokumentu określamy za pomocą atrybutu „lang”. Załóżmy, że interfejs naszego sklepu przygotowany jest w języku polskim, ale same parametry techniczne produktu opisane są w języku angielskim. W tym przypadku warto atrybut „lang” w znaczniku „html” ustawić na „pl”, a dla znacznika obejmującego fragment strony prezentujący parametry techniczne (np. znacznik „div”), ustawić na „en”. Dzięki temu czytniki ekranowe będą w stanie poprawnie rozpoznać język strony.

8. Oprócz :hover stosuj style dla :focus.

:hover i :focus to pseudoklasy języka CSS, za pomocą którym możemy dodać style dla elementu, nad którym znajduje się kursor myszy (:hover) i który posiada tzw. ognisko wprowadzania (:focus). Pseudoklasa :focus, a właściwie styl elementu, który aktualnie posiada ognisko wprowadzania, ważny jest dla osób nawigujących za pomocą klawiatury. Używając klawisza TAB, użytkownik może przeskakiwać pomiędzy kolejnymi elementami serwisu. W definicji stylu elementu z pseudoklasą :hover dodajmy po przecinku pseodoklasę :focus. Dzięki temu wybrany element będzie zawsze widoczny, a użytkownik będzie wiedział jakiej akcji może się spodziewać.

Dodając styl np. taki sam jak styl dla pseudoklasy :hover, graficznie prezentujemy użytkownikowi, który element w danej chwili przechwycił focus.

9. Nie polegaj na kolorze.

Niektóre osoby mogą mieć problemy z odróżnianiem kolorów, dlatego podczas wyświetlania komunikatów w sklepie nie powinniśmy w całości polegać na kolorach. Przyjęło się, że kolorem zielonym oznaczamy informacje pozytywne, np. poprawne założenie konta, a kolorem czerwonym błędy, np. błędne wpisanie hasła. Obok tych komunikatów warto dodać ikony, które pozwolą szybciej zrozumieć treść komunikatu oraz pozwolą skupić na nich uwagę użytkownika.

10. CAPTCHA

Główne problemy mechanizmu CAPTCHA to trudność w poprawnym rozpoznaniu treści ukrytej w obrazie, brak przycisku „Odśwież” umożliwiającego wygenerowanie nowego obrazu, brak przycisku audio umożliwiającego odczytanie zawartości obrazu. Jeżeli decydujemy się na CATPCHA w naszym sklepie, to powinniśmy rozwiązać te problemy, dzięki czemu mechanizm ten stanie się dostępny dla osób niepełnosprawnych.

Korzyści?

  • Większa dostępność to również bardziej intuicyjny sklep, dzięki czemu możemy spodziewać się mniejszej liczby telefonów na infolinię związanych z problemami z poruszaniem się po sklepie.
  • Zwiększając dostępność docieramy do grupy użytkowników niepełnosprawnych co z pewnością wpłynie na wzrost naszej sprzedaży.
  • Strony dostępne to również strony, które lepiej się pozycjonują, więc zwiększając dostępność, możemy spodziewać się wyższych pozycji w Google.