Wygoda zakupów w sklepach internetowych.
Upcoming SlideShare
Loading in...5
×
 

Wygoda zakupów w sklepach internetowych.

on

  • 979 views

Projektowanie dostępnych sklepów internetowych.

Projektowanie dostępnych sklepów internetowych.

Statistics

Views

Total Views
979
Views on SlideShare
979
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Wygoda zakupów w sklepach internetowych. Wygoda zakupów w sklepach internetowych. Document Transcript

  • Wygoda zakupóww sklepach internetowych:dostępność stron dla wszystkich. Raport przygotowany przez ekspertów firmy Divante w ramach prac w Grupie Roboczej e-Commerce przy IAB Polska
  • Projektowanie dostępne: dostępność stron dla wszystkich.Spis treściO dostępności  3Osoby niepełnosprawne i Internet  4Standardy – trochę historii, od czego zacząć  4  Jak korzystają z Internetu osoby niepełnosprawne  5Wskazówki projektowe  6Osoby niewidome i niedowidzące  7  Reguły projektowania z uwzględnieniem osób niewidomych  8   Zastosuj odpowiednie opisy formularzy  8   Wprowadź „Szybkie linki”  9   Opisz linki  9   Zatytułuj strony  10   Opisz obrazki, grafik i przyciski  10   Wprowadź nagłówki  10, 11   Udostępnij nawigację za pomocą klawiatury  11   Wykorzystaj CAPTCHA audio  11  Podsumowanie – Co szczególnie przeszkadza osobom niewidomym  12Osoby niedowidzące  13  Reguły projektowania z uwzględnieniem osób niedowidzących  14   Unikaj tekstów w formie graficznej  14   Udostępnij powiększanie tekstu  14   Umieść kluczowe informacje zgodnie ze standardami  14   Zastosuj odpowiednie kolory  14Osoby z problemami z widzeniem barw (daltonizm)  15  Reguły projektowania z uwzględnieniem osób niewidzących barw  16   Zastosuj odpowiednie kolory  16   Oprócz koloru stosuj piktogramy  16Osoby z wadami słuchu  20  Reguły projektowania z uwzględnieniem osób niedosłyszących  21   Zatytułuj i opisz treści wideo  21   Dokonaj transkrypcja plików audio  21Osoby niepełnosprawne fizycznie (problemy z motoryką)  22  Reguły projektowania z uwzględnieniem osób niepełnosprawnych fizycznie  23   Udostępnij nawigację za pomocą klawiatury  23   Unikaj ruchomych elementów i celów  23   Zastosuj style dla elementów w stanie focus  23   Pozostaw przestrzeń między linkami  24   Opisz przyciski i linki  24   Testowanie dostępności  24   Strony dostępne dla wszystkich  25Źródła wiedzy  262
  • Projektowanie dostępne: dostępność stron dla wszystkich.O dostępnościProjektując strony www projektanci w głównej mierze skupiają się na ichużyteczności, pozytywnym user experience. Tworzą interaktywne proto-typy, testują je z użytkownikami poprawiając możliwe błędy jeszcze przedwdrożeniem strony. Dbają o każdy aspekt poprawiający użyteczność.Czy jednak biorą pod uwagę wszystkich użytkowników Internetu? Częstosłyszy się głosy, że użyteczność i dostępność to oddzielna tematy-ka projektowania stron www. Jednak powinny iść one zawsze w pa-rze, przeplatając się nawzajem, sprawiając że strona www staje się przy-jazna wszystkim użytkownikom Internetu. Strona użyteczna powinna byćjak najbardziej dostępna dla osób często wykluczanych w sieci.Internet i rozwój branży eCommerce dał niepełno- Nasz zespół postanowił przetestować 3 sklepy in-sprawnym użytkownikom otwarte okno na świat ternetowe www.superkoszyk.pl, www.oponeo.plzakupów. W każdym momencie, bez konieczności i www.answear.com z osobami niepełnosprawny-uciążliwego wychodzenia z domu, z dostawą na mi, aby dowiedzieć się, w jaki sposób poruszają sięwskazany adres, z opłaceniem zamówienia online. po stronach, co dla nich jest ważne, na co zwraca-Są to zalety dla każdego użytkownika, jednak dla ją uwagę, czego im brakuje. Wyniki pokazały nam,osób niepełnosprawnych szczególnie. jak odmienne elementy są ważne dla osób niewido- mych, niedowidzących. W tym dokumencie postanowiliśmy zebrać infor- macje, które pokażą projektantom jak niewielkie zmiany mogą mieć ogromny wpływ na to, czy na- sza strona zostanie odczytana przez np. osobę nie- widomą. Zawarte w raporcie problemy z dostęp- nością stron stanowią szerszą listę, od tej którą napotkaliśmy podczas samego badań. Wytyczne zawarte pozwolą usprawnić strony i sklepy inter- netowe, i dostosować je do niemałej grupy osób niepełnosprawnych, które na co dzień korzystają z Internetu. 3
  • Projektowanie dostępne: dostępność stron dla wszystkich.Osoby niepełnosprawnei InternetMówiąc o osobach niepełnosprawnych musimy wziąć pod uwagę, jakduża jest to grupa. Często projektując z góry myślimy wykluczająco, sądzącże osób niepełnosprawnych korzystających z Internetu nie ma zbyt wiele.I tu jesteśmy w błędzie. W 2011 roku liczba osób niepełnosprawnychprawnie w wieku produkcyjnym wynosiła około 2 milionów, co stanowiło8,4% ludności w tym wieku (źródło: http://www.niepelnosprawni.gov.pl/dane-statystyczne/dane-demograficzne/).Standardy – trochę historii,od czego zacząćW kwestiach dostępności stron internetowych duże znaczenie miało powo-łanie przez W3C (World Wide Web Consortium)  inicjatywy o nazwie WAI(ang. Web Accessibility Initiative). Głównymi zadaniami WAI jest tematy-ka dostępność treści w sieci – udostępnianie zawartości Internetu bez wy-kluczania żadnej z grup, w tym osób niepełnosprawnych – z wadami wzro-ku czy słuchu, ale także użytkowników korzystających ze specjalnychurządzeń mobilnych, z wolniejszym łączem czy starszymi komputerami.WAI stworzyło zasady w zakresie dostępności treści w sieci, spisane w WCAG(Web Content Accessibility Guidelines). W dokumencie podsumowane są klu-czowe wytyczne dotyczące interfejsów internetowych i ich projektowania z my-ślą o grupach wykluczanych, głównie osoby niepełnosprawne.4
  • Projektowanie dostępne: dostępność stron dla wszystkich.Jak korzystają z Internetu osoby niepełnosprawneSpośród grupy osób często wykluczanych w sieci lub o których zapominają projektanci tworząc nowe roz-wiązania w kolejnych interfejsach stron i sklepów internetowych, możemy wyróżnić:•  Osoby niewidome i niedowidzące,•  Osoby z zaburzeniami rozpoznawania barw (daltonizm)•  Osoby niepełnosprawne ruchowo,•  Osoby niepełnosprawne intelektualnie,•  Osoby głuche, słabosłyszące i głuchonieme,•  Osoby głucho-niewidome.Różne formy niepełnosprawności wymagają odmiennego sposobu radzenia sobie w wirtualnej przestrzeni.Każda z form niepełnosprawności wymaga odmiennych technik dostępu do informacji zawartych na stro-nach internetowych. Spośród wielu form, tutaj opiszemy kilka, które ogólnie można podzielić na problemyz widzeniem, słyszeniem, motoryką. Przybliżymy pokrótce, w jaki sposób wirtualny świat odbierają poszcze-gólne grupy osób.Osoby niewidome i niedowidzące Osoby z problemami z widzeniem i z drżeniem rąkOsoby niewidome do obsługi stron internetowych Mogą oni używać screen readera, który asystujestosują specjalne „Screen readery”, czyli czytniki w czytaniu treści z ekranu lub dużego monitoraekranowe. Jest to oprogramowanie, które rozpozna- lub opcji powiększania tekstu na monitorach stan-je i interpretuje informacje prezentowane na ekranie, dardowych. Czasami użytkownicy mogą także uży-a następnie przedstawia je użytkownikowi w postaci wać specjalnych joysticków, które eliminują możli-głosowej. Informacje ze Screen reader’a mogą być wość niecelowego klikania przy drżeniu rąk.także przesyłane do brajlowskiego urządzenia wyj-ściowego, na którym osoba niewidoma odczytuje Takim użytkownikom szczególnie przeszkadzają ru-treść strony. Osoby niedowidzące również mogą ko- chome grafiki, zbyt mały tekst na stronie, brak opcjirzystać z czytników ekranu lub stosować specjalne powiększania tekstu, zły kontrast pomiędzy tłemoprogramowanie powiększające, działające jak lupa a tekstem.prezentująca wybraną część strony w znacznym po-większeniu. Niesłyszący lub niedosłyszący Osoby niesłyszące nie mają dostępu do informacjiOsoby z problemami z motoryką (szczególnie w formie audio wymagają pełnej transkrypcji tekstubezwład rąk) plików audio. W komunikacji w sieci stosują głów-Korzystając z komputera i nawigowania po stronach nie emaile, komunikatory oraz czaty wbudowaneinternetowych używają kombinacji oprogramowa- w stronę.nia do rozpoznawania mowy i alternatywnych wer-sji klawiatury z wyjściem audio, nie używają jednakmyszki lub innych sprzętów wymagających obsługidłońmi. 5
  • Projektowanie dostępne: dostępność stron dla wszystkich.WSKAZÓWKI PROJEKTOWECO ZROBIĆ, ABY WSZYSTKIMPOWYŻSZYM GRUPOM OSÓBWYKLUCZANYCH W SIECIUŁATWIĆ DOSTĘP DO NASZYCHSTRON INTERNETOWYCH?W poniższym opisie poszczególne grupypotraktujemy oddzielnie, sugerującpozytywne a często też bardzo prostedo wdrożenia rozwiązania, które usprawniąosobom niepełnosprawnym pracę z nasząstroną internetową.6
  • Projektowanie dostępne: dostępność stron dla wszystkich.Osoby niewidome i niedowidząceSą to osoby szczególnie narażone na wykluczenie cyfrowe. Większość osóbniewidomych przy obsłudze stron internetowych posługuje się oprogramo-waniem typu „screen reader”, czyli czytniki ekranu, m.in. takie jak JAWS lubWindows Eyes. Dodatkowo, niektórzy użytkownicy mają dostęp do stron in-ternetowych poprzez urządzenie przenoszące zawartość strony na język Bra-ille’a. Jednak z tej opcji korzysta znacznie mniejsza liczba osób niewidomych.Szczególnie osoby, które straciły wzrok w trakcie życia, często nie korzystająz tego typu urządzeń. Czytniki ekranowe można porównać do prostych przeglą-darek internetowych. Odczytują one jednak zawartość strony w inny sposób,niż osoba widząca przyglądająca zawartości ekranu. Z pomocą screen reade-r’a strona czytana jest w sposób linearny, a także tekstowo. Do jego obsługiużywana jest klawiatura oraz różne skróty na niej, które ułatwiają nawigacjęi pozwalają przeskoczyć do konkretnej części strony. Niewidomi użytkownicy nieużywają myszki. Jeżeli strona internetowa zostaje zaprezentowana wyłączniew formie graficznej, nie będzie w pełni możliwa do odczytania dla niewidomychodbiorców. Przykładowo strony wykonane w technologii flash przez screen re-ader’y mogą być odczytywane jako strony puste.W Polskim Związku Niewidomych w 2009 roku zarejestrowanych było65 tysięcy osób, a szacuje się, że osób niewidomych i niedowidzących jestok. 1% – oznacza to liczbę 385 tysięcy osób. Uwzględniając, wśród osób z pro-blemami ze wzrokiem czy niewidomych jest procentowo podobny do rozkładuw całym społeczeństwie, oznaczałoby to 176 tysięcy internautów korzystającychz programów czytających ekran (ang. screen reader) lub powiększających ob-raz na ekranie. Jest to niemała grupa, warto więc dowiedzieć się co zrobić,aby ułatwić tym osobom dostęp do treści na naszych stronach. 7
  • Projektowanie dostępne: dostępność stron dla wszystkich.Reguły projektowania z uwzględnieniem osób niewidomychZastosuj odpowiednie opisy formularzyOprogramowanie czytające zawartość stron (ang. Screen reader) czyta kontent w sposób liniowy. Ważnejest więc, by pomocne informacje, dodatkowe teksty, gwiazdki mówiące, że dane pole jest wymagane wsta-wiać zawsze przed polem formularza. W momencie, gdy znajdują się one za polem typu input, istnieje wyso-kie prawdopodobieństwo, że osoba niepełnosprawna wypełni pole błędnie, nie stosując się do wytycznych,co utrudni cały proces wypełniania formularza, dodając konieczność wprowadzania poprawek. Podobniez oznaczeniem wymaganych pól – niewidomy użytkownik dopiero po przejściu do kolejnego pola dowiadujesię, że poprzednie było wymagane. Email: * Hasło: *Rysunek. Informacja o konieczności wypełnienia pól znajduje się za polem typu input. Email: * Hasło: * powinno zawierać co najmniej 8 znaków, w tym litery, cyfry i znaki specjalneRysunek. Opis odnoszący się do hasła znajduje się zaraz po polu typu input.Przykład obok prezentuje, w jaki sposób poprawić Email: *dostępność naszego formularza dla osób korzysta-jących z czytników ekranu. Każde kolejne pole jest Hasło powinno zawierać co najmniej 8 znaków,odczytywane we właściwej kolejności, przekazu- w tym litery, cyfry i znaki specjalnejąc informację niewidomemu użytkownikowi w od-powiednim momencie np. dowiaduje się, że pole Hasło: *jest wymagane przed przejściem do danego pola,nie po wyjściu z niego. Jest to ważne w szczegól-ności w procesie zakupowym, którego pozytyw- Rysunek. Tak zaprezentowane dane w formularzu przez screen readery będą odczytywane w poprawnej kolejności, nie przy-ne zakończenie, czyli dokonanie zakupu wiąże się sparzając dodatkowych problemów osobie niewidomej.z wypełnieniem często wielu pól formularza. W mo-mencie, gdy każde pole będzie źle opisane, użytkow-nik ucieknie w poszukiwaniu bardziej przyjaznegomu i czytnikowi ekranu interfejsu.8
  • Projektowanie dostępne: dostępność stron dla wszystkich.Wprowadź „Szybkie linki”Użytkownicy korzystający z czytników ekranu chętniekorzystają z tzw. Szybkich linków, umożliwiającychszybkie przeskoczenie między stronami. Nie zmuszaich to do powolnego wracania do strony głównej czymenu nawigacyjnego. Mogą tego dokonać korzysta-jąc z możliwości szybszego przeskoczenia do innejstrony lub jej części bez konieczności uciążliwegoprzesłuchiwania całej zawartości strony.Przykładowo:Przejdź do strony głównejPrzejdź do ulubionychPrzejdź do wyszukiwarkiOpisz linkiUżytkownicy czytników ekranu stosujący oprogra-mowanie odczytujące zawartość ekranu, jak np.JAWS mogą odsłuchiwać odnośniki na stronie wwwpoprzez funkcjonalność znaną jako „lista linków”.Dlatego wszystkie linki powinny być pokazywanena stronach w wersji opisowej. W momencie, gdyzamiast opisu nasz link będzie nosił nazwę „kliknijtutaj” lub „więcej informacji” użytkownik korzysta-jący ze screen readera nie dowie się, gdzie danylink tak naprawdę prowadzi. Poniżej pokazana jestfunkcja listy linków w programie JAWS . Użytkownikwidząc tak nazwane linki nie ma szansy poprawnieich zinterpretować – czy „kliknij tutaj” przeniesie godo strony głównej czy może do koszyka, czy jeszczedo regulaminu? Rysunek. Lista linków w oprogramowaniu JAWS (Źródło: www.digital-web.com) 9
  • Projektowanie dostępne: dostępność stron dla wszystkich. jasno określić po odsłuchaniu tytułu strony, czy do- tarł we ​​ właściwe miejsce i czy chce odsłuchać jej dalszą zawartość. Opisz obrazki, grafik i przyciski Jak czytnik ekranu przetwarza obrazy czy grafiki zamieszczane na stronach? Jak są one odbiera- ne przez osoby niewidome? Czytnik ekranu obrazu odczytuje je według ich opisów. Czyli jeżeli grafika czy zdjęcie zamieszczone na stronie nosi nazwę pic3456.jpg, tak też zostanie ono odczytane osobie niewidomej, nic jej nie mówiąc o obrazie. Użytkow-Rysunek. Lista linków w programie JAWS nicy czytników ekranu polegają w głównej mierze(Źródło: http://www.royalmail.com/customer-service/website- na alternatywnych tekstach, aby zrozumieć jakie ob--accessibility/screen-readers) razy kryją się pod zamieszczanymi grafikami. Przy- kładowo - logo na stronie sklepu internetowego po- winno zostać szczegółowo opisane jako alt = „FirmaWskazane jest więc stosowanie opisowych linków, SklepInternetowy.pl”. Jednak z drugiej strony nie maprzykładowo zastępowanie krótkich i mało kla- sensu opisywać go zbyt szczegółowo (jakiego kolorurownych zwrotów na bardziej precyzyjne, dające i kształtu jest logo itp.), by nie tworzy audio-bałaganuniewidomym użytkownikom szczegółowy wgląd dla użytkowników czytników ekranu. W momencie,w to, gdzie trafią po przejściu pod dany link. Przykła- gdy obraz ma charakter wyłącznie dekoracyjny, niedowo „więcej informacji” można zastąpić zwrotem wnosi żadnych ważnych informacji – warto pozosta-„więcej informacji o ofercie sklepuInternetowego.pl”. wiać pusty tekst alternatywny: alt = „”. Spowoduje to,Lub Zamiast stosować zdanie „Aby poznać szczegó- że obraz nie zostanie odczytany przez czytnik. Rów-ły dotyczące kosztów dostawy i sposobów płatności nież przyciski wymagają odpowiedniego opisania,kliknij tutaj” użyjmy zwrotu „Poznaj koszty dostawy by nie zdarzały się przypadki, gdy na koniec np. pro-i sposoby płatności w naszym sklepie.” cesu zakupowego czytnik ekranu odczytywał przy- cisk „realizuj zamówienie” jako „button3”, który nic nie powie osobie niewidomej, jedynie wprowadziZatytułuj strony jeszcze większą dezorientację.Pierwsze, co usłyszy użytkownik korzystającyze screen reader’a wchodząc na stronę, to jej ty- Wprowadź nagłówkituł <title>, który każda strona posiada przypisa-ny tylko do niej. Ważne jest zatem, by użyć tytułu, Ważne jest, aby zapewnić opisowe nagłówki, którektóry odzwierciedla zawartość strony internetowej. będą semantycznie oznaczone od <h1> aż do <h6>.Na przykład strona z wyszczególnieniem danych Umożliwia to szybki dostęp do obszarów zawarto-kontaktowych może mieć tytuł: „Kontakt”. Użytkow- ści strony, którymi użytkownik jest zainteresowanynik korzystający z czytnika ekranu będzie w stanie i eliminuje konieczność przesłuchiwania całej stro-10
  • Projektowanie dostępne: dostępność stron dla wszystkich.ny internetowej. <h1> powinno być zarezerwowane dla głównym pozycji, dzięki czemu użytkownicy czytni-ków ekranu są w stanie szybko zidentyfikować zawartość strony.Udostępnij nawigację za pomocą klawiaturyNależy pamiętać, że niewidomi użytkownicy nie korzystają z urządzeń takich jak np. myszka. Używają wy-łącznie klawiatury, za pomocą której nawigują stronami. Trzeba, więc wziąć pod uwagę, by każdym ele-mentem strony można było nawigować z poziomu klawiatury, włącznie z playarami filmów wstawianymina stronach czy menu typu dropdow (przykład poniżej mega drop down menu w sklepie answear).Rysunek. Menu rozwijane answear.comWykorzystaj CAPTCHA audioProblematyczny element formularzy, utrudniającyzakończenie rejestracji czy innych procesów na stro-nach czy w sklepach internetowych. Pamiętajmy,że gdy musimy już zastosować rozwiązanie typuCAPTCHA, udostępniajmy jego wersję audio. Rysunek. Przykład CAPTCHA audio (Źródło: http://jimthatcher.com/captchas.htm ) 11
  • Projektowanie dostępne: dostępność stron dla wszystkich.Podsumowanie – Co szczególnie przeszkadzaosobom niewidomymW naszych testach również udział wzięła osoba niewidoma. Jest to aktywny użytkownik internetu, spędza-jący sporo czasu w sieci zarówno w pracy jak i w czasie wolnym. Korzysta z czytnika ekranu. Wymieniającelementy, które sprawiają mu najwięcej problemów przy obsłudze stron internetowych wymienił:•  CAPTCHA, które często znajdują się w formularzach potwierdzających rejestrację,•  Same formularze często też są kłopotliwe, ze względu na zły opis,• Dodatkowo sklepy internetowe coraz częściej są w nadmiarze kolorowe, przeładowane nieopisanymi zdjęciami, przyciskami czy ramkami, które nic nie mówią osobie niewidomej,•  Często brakuje także nagłówków, które ułatwiają szybkie przeskakiwanie między stronami.12
  • Projektowanie dostępne: dostępność stron dla wszystkich.Osoby niedowidząceOsoby z łagodniejszymi wadami wzroku mogą korzystać z opcji przeglądarekinternetowych, zwiększając w ustawieniach domyślny rozmiar tekstu lub wyko-rzystać mechanizm „full page zoom” do powiększenia całej strony. Mechanizmten dostępny jest we wszystkich nowoczesnych przeglądarkach i umożliwiapowiększanie nie tylko tekstu, ale również grafik i nagrań wideo. Kombinacjaklawiszy „Ctrl i +” oraz „Ctrl i -” umożliwia odpowiednio powiększenie i pomniej-szenie widoku strony. Strona skalowana jest z zachowaniem swoich oryginal-nych proporcji, dzięki temu zawartość strony jest łatwiejsza do odczytania.Jest to także metoda skuteczna dla osób starszych, ze słabszym wzrokiem. 13
  • Projektowanie dostępne: dostępność stron dla wszystkich.Reguły projektowania z uwzględnieniem osób niedowidzącychUnikaj tekstów w formie graficznejNależy unikać prezentowania tekstów w formie gra- stronie. Na przykład funkcja przeszukiwania witry-ficznej. Teksty prezentowane graficznie stanowią ny standardowo znajduje się u góry strony, częstoproblem dla wszystkich użytkowników z wadami w prawym rogu. Jeżeli nasza strona łamie pewnewzroku. Używając oprogramowania do powiększe- standardy, poszczególne funkcjonalności mogąnia, tekst na grafice jest degradowany w trakcie być pomijane przez osoby korzystające z programówpowiększania, co sprawia, że staje się trudniejszy powiększających.do odczytania. I tak graficznie zaprezentowane tek-sty na ważnych przyciskach mogą być nieodczytaneprzez użytkowników.Rysunek. Tekst pokazany graficznie po powiększeniustaje się nieczytelny. Rysunek. Widok karty produktu w Answear.com oglądanejUdostępnij powiększanie tekstu przy użyciu programu powiększającego.Pamiętajmy, aby udostępnić możliwość powiększa-nia tekstu na stronie. Często w tym celu dodawane Zastosuj odpowiednie kolorysą widoczne na stronie opcje, które łatwo pozwalająpowiększać tekst. Aby poprawić czytelność strony dla użytkowników z wadami wzroku, należy zapewnić dobrze kon- trastujące kolory interfejsu. W sieci są dostępneUmieść kluczowe informacje zgodnie programy analizujące kontrast stron lub grafik –ze standardami warto z nich korzystać na etapie tworzenia grafiki.Użytkownicy oprogramowania powiększającego Testując różne kombinacje kolorów pierwszegomogą zobaczyć tylko niewielką część strony inter- planu i tła, możliwe jest określenie, czy wybranenetowej na jednym ekranie. Będą szukać więc tre- kolory spełniają minimalne wymagania określoneści i funkcjonalności w określonych miejscach na w wytycznych WCAG.14
  • Projektowanie dostępne: dostępność stron dla wszystkich.Osoby z problemami z widzeniembarw (daltonizm)Daltonizm, czyli problem z widzeniem niektórych barw, to choroba która do-tyka 5-8 % mężczyzn oraz mniej jak 1% kobiet. Możemy rozróżnić kilka ty-pów problemów z widzeniem barw – problem z rozróżnianiem zielonegoi czerwonego, oraz trudności z rozróżnianiem kolorów niebieskiego i żółte-go. Osoby cierpiące na daltonizm mogą mieć trudności z czytaniem tekstuna stronach internetowych. Wiąże się to z postrzeganiem kontrastu międzytłem a tekstem. 15
  • Projektowanie dostępne: dostępność stron dla wszystkich.Reguły projektowania z uwzględnieniem osób niedowidzących barwZastosuj odpowiednie koloryDla osób z problemami widzenia barw ogromne czarnego konturu klikalnego elementu na mapieznaczenie mają wszelkie linki lub przyciski na stro- (np. województwo).nie. Podstawowa zasada: wszelkie treści, na któreużytkownik może patrzeć dłużej niż dwie sekundy, W sieci dostępne są narzędzia, które pozwolą przete-powinny być wyraźnie widoczne oraz powinny posia- stować, jak Twoją stronę widzi osoba z problemamidać wysoki współczynnik kontrastu. w widzeniu barw. Są to różnego rodzaju symulatory. Część działa online – podając adres swojej stronyObszary z treścią powinny być monochromatyczne automatycznie generowany jest obraz według wy-– z kolorem czcionki i tła na przeciwległych biegu- branej wady widzenia kolorów. Inne symulatory wy-nach nasycenia kolorów, tworząc wysoki kontrast magają wgrania pliku i dają możliwość podglądu(np. czarny tekst na białym tle). Elementy nawiga- kolorystyki wg wybranych wad wzroku.cyjne takie jak menu, nagłówki i subnagłówki mogąbyć poddawane bardziej artystycznym zabiegom, Oprócz koloru stosuj piktogramyponieważ użytkownicy rzadko skupiają uwagęna tych elementów przez dłuższy okres czasu. Na- Do oznaczania ważnych komunikatów pojawiają-wigacja powinna wyróżniać się ponad treścią tak by cych się na stronie warto oprócz użycia odpowied-nasi użytkownicy byli w stanie szybko i poprawnie niego koloru zastosować również piktogramy. Jed-interpretować dany element. nym z takich komunikatów może być informacja o poprawnej rejestracji, czy zapisaniu się na new-Kolory, które najlepiej dobierać myśląc o osobach sletter. Zazwyczaj komunikat taki wyświetlany jestz problemami z widzeniem barw, to kolory kon- na zielonym tle, który sugeruje poprawne zakończe-trastowe, na przeciwległych krańcach spektrum nie akcji użytkownika. W przypadku komunikatów(wspomniany czarny i biały). Zdjęcia, linki, przyciski o błędzie stosuje się kolor czerwony. Jeśli obok tek-i inne podobne elementy powinny być wzmocnione stu umieścimy piktogram przedstawiający znak wy-za pomocą obrazu, kształtu, położenia lub zamiesz- krzyknienia powszechnie identyfikowany z błędem,czonego tekstu. Na przykład, hiperłącze powinno ostrzeżeniem, to zwróci on również uwagę osobybyć wyróżnione kolorem, ale także podkreśleniem. z problemami widzenia barw.Kolorowy przycisk w barwach niepostrzeganychprzez osoby cierpiące na daltonizm z podkreśleniem Na następnych stronach przykłady widzeniasugerującym hiperłącze, pozwoli go odpowiednio przez daltonistów dla trzech testowanych sklepów.zinterpretować. Po lewej wersja oryginalna, po prawej zaprezen- towany obraz, który widzą osoby z problemamiMapy zamieszczane na stronach mogą również z widzeniem barw.być problemem dla osób z daltonizmem. Na ma-pach obszar klikalny często jest nakreślany ko-lorem. Sposobem na to może być podkreślenietekstu na klikalnych obszarach lub dodawanie16
  • Projektowanie dostępne: dostępność stron dla wszystkich.Rysunek. Answear.com 17
  • Projektowanie dostępne: dostępność stron dla wszystkich.Rysunek. SuperKoszyk.pl18
  • Projektowanie dostępne: dostępność stron dla wszystkich.Rysunek . www.oponeo.pl 19
  • Projektowanie dostępne: dostępność stron dla wszystkich.Osoby z wadami słuchuOsoby z wadą słuchu na ogół nie używają oprogramowania wspomagającego,które miało by służyć poprawie jakości przeglądania Internetu. Najczęściej ko-rzystają ze standardowych przeglądarek. Jedynym problemem są pliki audioi wideo, których nie są w stanie odsłuchać. Dlatego dla tego typu treści war-to dodawać odpowiednie podpisy. Dzięki podpisom także użytkownicy bezwad słuchu otrzymają dostępne treści, do których w niektórych warunkachnie mogliby dotrzeć (biblioteka, komunikacja miejska, czy korzystanie z kom-putera bez głośników itp.).20
  • Projektowanie dostępne: dostępność stron dla wszystkich.Reguły projektowania z uwzględnieniemosób niedosłyszącychZatytułuj i opisz treści wideoSpisane treści zawartych w plikach wideo powinnybyć dostarczone w samym playarze. Dodatkowopodpisy powinny być zsynchronizowane z dźwię-kiem tak, aby zawartość można w pełni zrozumiećbez włączonego dźwięku. Napisy powinny zawieraćnie tylko wypowiedzi zawarte w materiale audialnymlub audiowizualnym, ale również wszelkie zdarzeniadźwiękowe (np. szum morza) pojawiające się w trak-cie trwania nagrania.Dokonaj transkrypcji plików audioNa stronach zawierających pliki audio powinny znaj-dować się ich transkrypcje, jednak w formacie do-stępnym dla wszystkich – najlepiej HTML, zamiastpopularnych plików pdf. Transkrypcja umieszczonaw treści strony ułatwi także indeksowanie tej tre-ści przez wyszukiwarki (Google, Bing, itp.), co możewpłynąć na wzrost pozycji strony w rankingach wy-szukiwania. 21
  • Projektowanie dostępne: dostępność stron dla wszystkich.Osoby niepełnosprawne fizycznie(problemy z motoryką)Można rozróżnić różne stopnie nasilenia niepełnosprawności fizycznej (moto-rycznej). Może to być chwilowe wyłączenie motoryki, jak na przykład złamanaręka, lub wysokie nasilenie – osoby z paraliżem całego ciała. W zależności odnasilenia niesprawności fizycznej, użytkownicy mogą uzyskać dostęp do stroninternetowych za pomocą oprogramowania do rozpoznawania mowy. Jednakto, co wszyscy użytkownicy z niepełnosprawnością fizyczną mają wspólnego,jest chwilowo ograniczony lub stały brak zdolności do korzystania z myszy.22
  • Projektowanie dostępne: dostępność stron dla wszystkich.Reguły projektowania z uwzględnieniemosób niepełnosprawnych fizycznieUdostępnij nawigację za pomocą klawiatury Zastosuj style dla elementów w stanie focusUżytkownicy z niepełnosprawnością fizyczną najczę- Elementy, które zmieniają swój wygląd po najecha-ściej nie korzystając z myszki. Zamiast tego głównie niu kursorem myszy są stosowane bardzo często.posługują się klawiaturą lub programem do rozpo- Równie często zapomina się o podobnym oznacza-znawania mowy, zsynchronizowanym z klawiaturą. niu elementów, które stają się aktywne podczas na-Należy więc upewnić się, że do najważniejszych wigowania za pomocą klawiatury. Mówi się, że takietreści na stronie udostępniamy możliwość dotarcia elementy przechwytują ognisko wprowadzania –z wykorzystaniem klawiatury. stan focus. Rozwiązanie problemu jest proste, wy- starczy dla takiego elementu określić odpowiedni styl w pliku CSS, który może być taki sam jak stylUnikaj ruchomych elementów i celów dla elementu, nad którym znajduje się kursor myszy.Należy unikać stosowania ruchomych celów, ta- Ma to duże znaczenie w przypadku formularzy, gdyżkich jak np. przesuwające się po ekranie logoty- dzięki zmianie stylu obramowania pola formularza,py partnerów czy oferowanych marek. Ogranicza użytkownik jest w stanie określić w którym dokład-to możliwość odpowiedniego sterowania myszką nie miejscu się znajduje.i wcelowania w ruchomy obiekt (osoby korzystającez myszki), a użytkownicy korzystający z klawiaturymogą nie mieć wystarczająco dużo czasu, by sku-pić się na wybranym celu, zanim wyjdzie on z polawidzenia.Przykładowo:Można wyeliminować ten problem dodając możli-wość sterowania przesuwającymi się obiektami (po-niżej: pasek marek ze sklepu Answear.com)Rysunek. Pasek marek ze sklepu Answear.com 23
  • Projektowanie dostępne: dostępność stron dla wszystkich.Pozostaw przestrzeń między linkamiWprowadzając większą przestrzeń między linkami nik korzystający z oprogramowania rozpoznawaniaosoby z problemami w obsłudze myszki będą mieć głosu również wypowie zwrot „do koszyka”, aby zre-miej problemów z nakierowaniem kursora we wła- alizować akcję o której myśli. Natomiast, jeżeli przy-ściwe miejsce i kliknięcie właściwego odnośnika. cisk jest zakodowany np. jako „zakup”, to użytkownikZbyt mała przestrzeń może powodować pomyłki – nie będzie miał możliwości jego aktywacji i dodaniaklikanie w obiekt, w który użytkownik nie chciał klik- produktu do koszyka.nąć (poniżej przykład). Testowanie dostępności Testowanie dostępności Twojej strony to najlepszy sposób na wyeliminowanie błędów wykluczających Link 1 Link 2 Link 3 dostęp do niej osobom niepełnosprawnym. Warto testować strony – sprawdzając wszystkie powyż- sze wytyczne używając oprogramowania – wiele Link 1    Link 2    Link 3 dostępnych w wersjach webowych – symulatory barw, przeglądarki tekstowe imitujące działanie screen readerów, testowanie z wyłączeniem gło-Rysunek. Na górze linki zbyt ciasno umiejscowione,na dole linki z większyn odstępem. śników, czy próba korzystania z oprogramowania rozpoznawania głosu). Pokaże nam to jak strona jest odbierana przez osoby niewidome i niedowi- dzące, z problemami z widzeniem barw czy niesły-Opisz przyciski i linki szące. Dobrym sposobem jest tworzenie checklistyUżytkownicy używający oprogramowania rozpozna- z wytycznymi do projektowania dostępnego oraz te-jącego głos do nawigowania po stronie interneto- stowanie strony wraz z taką checklistą. Można teżwej, wypowiadają słowa, aby uaktywniać poszcze- zastosować checklisty dostępne online (np. http://gólne linki czy odnośniki. Słowa wypowiadane przez www.w3.org/ TR/2006/ WD-WCAG20-20060427/użytkownika są przeważnie takie same, jak wyświe- appendixB.html) Pozwoli to nie ominąć żadnegotlane na stronie. Dlatego ważne jest zapewnienie, z ważnych elementów. Większość problemów naby wszystkie przyciski formularzy i linki graficzne stronach, z którymi spotykają się niepełnosprawnibyły prawidłowo zakodowane – ich nazwa powin- użytkownicy Internetu, wiąże się z nieświadomościąna odzwierciedlać tekst wyświetlanego obrazu. Na projektantów, jak wiele mogą zrobić wprowadzającprzykład, jeżeli na stronie na przycisku dodania do bardzo proste poprawki. Również warto testowaćkoszyka znajduje się tekst „do koszyka”, użytkow- strony z osobami niepełnosprawnymi. Warto zoba- czyć, w jaki sposób osoba niepełnosprawna dociera do treści, jak korzysta ze swojego oprogramowania oraz co otrzymuje, czy widzi na stronie głównej zdję- cie z specjalną ofertą rabatową, czy jest w stanie za- rejestrować się do sklepu korzystając z dostępnego formularza.24
  • Projektowanie dostępne: dostępność stron dla wszystkich.Strony dostępne dla wszystkichZawsze miejmy na uwadze, że już bardzo proste i niekłopotliwe dla nas zmiany sprawią, że nasza stronastanie się bardziej przyjazna osobom niepełnosprawnym. Klika prostych zasad stosowanych przy projekto-waniu stron dadzą szansę dotrzeć do zawartych na nich treści także osobom często wykluczanym w sieci.Także sklepy internetowy powinny uwzględniać zasady użyteczności – osoby niepełnosprawne szczególniedarzą zakupy przez Internet sympatią. Umożliwiają im dotarcie do produktów z najróżniejszych kategoriinie wychodząc z domu, otrzymują wszystkie potrzebne informacje o produkcie oraz możliwość zamówieniaz dostawą do domu i opłaceniem przez Internet, wszystko za pomocą swojego komputera. Nie odcinajmydrogi dotarcia do naszej oferty tej grupie naszych klientów. Zapraszamy także do szczegółowego zapoznaniasię z wytycznymi WCAG (Web Content Accessibility Guidelines). 25
  • Projektowanie dostępne: dostępność stron dla wszystkich.Źródła wiedzyhttp://www.abilitynet.org.ukhttp://www.w3.orghttp://www.disabled-world.com/disability/accessibility/websitedesign/http://www.washington.edu/doit/Brochures/Technology/universal.design.htmlhttp://blackwidows.co.uk/resources/access/web-usage.http://webaim.orghttp://www.high-speed-internet-access-guide.com/articles/web-accessibility.htmlhttp://jarmin.com/accessibility/access/barriers.htmlhttp://www.usability.govhttp://webdesign.about.comhttp://www.digital-web.com/articles/understanding_disabilities_when_designing_a_website/http://terrillthompson.com/blog/20226
  • Zwiàzek Pracodawców Bran˝y Internetowej IAB Polska ul. Targowa 34 lok. 43, 03-733 Warszawa www.iabpolska.pl