Jak Zaprojektować I Uruchomić Prostą Stronę Internetową

Przemysaw Marcinkowski
Jak zaprojektowa i uruchomi

prost stron internetow?
Na przykadzie platformy WordPress
Fundacja Wspomagania Wsi 2014
Jak zaprojektowa i uruchomi prost

stron internetow?
Na przykadzie platformy WordPress
Przemysaw Marcinkowski
Wydawca: Fundacja Wspomagania Wsi

Wsppraca: Krajowe Stowarzyszenie Sotysw
Autor: Przemysaw Marcinkowski, Fundacja Widzialni
Autor ilustracji: Przemysaw Marcinkowski, Fundacja Widzialni
Skad: Marcin Lubo, Fundacja Widzialni
Projekt okadki: Marcin Lubo, Fundacja Widzialni
Prawa autorskie: Prawa autorskie nale do Fundacji Wspomagania Wsi.
Poradnik jest dostpny na licencji Creative Commons Uznanie Autorstwa Na Tych
Samych Warunkach 3.0. Polska License
Spis treci
Wstp 7
Dostpno treci publikowanych w Internecie 9
Wykluczenie cyfrowe 9
Osoby niewidome 9
Osoby niedowidzce 11
Osoby guche 14
Osoby z zaburzeniami funkcji kognitywnych 15
Osoby z dysfunkcj ruchow 16
Pozostae grupy 16
Co to jest WCAG 2.0? 18
Semantyczny kod HTML 20
Odpowiedniki tekstowe dla elementw graficznych 22
Publikowanie materiaw audio i wideo 24
Budowa formularzy 25
Stosowanie nagwkw 26
Uycie list 27
Stosowanie tabel 30
Kontrast strony internetowej 30
Jednoznaczne tytuy stron 31
Tworzenie linkw 33
Obsuga serwisu za pomoc klawiatury 34
Zaznaczenie aktywnych elementw 35
Kolejno informacji 35
Bezporedni dostp do informacji 36
Rne sposoby dostpu do informacji 37
Dodatkowe uatwienia 38
Rzetelny kod HTML i CSS 39
Ukrywanie treci 40
WordPress 43
Co to jest WordPress? 43
Instalacja 44
Wstpna analiza domylnego szablonu 46
Nagwki 47
Skip linki 48
Mapa strony i wyszukiwarka 49
Pola formularzy 49
Ukrywanie treci 50
Kontrast 50
Dodatkowe uatwienia 50
Zmiany w domylnym szablonie 51
Edycja treci w panelu administracyjnym 53
Tekst pogrubiony lub pochyy 54
Przekrelenie 54
Lista wypunktowana i lista uporzdkowana 55
Blok cytatu 55
Wyrwnaj tekst do lewej, wyrodkuj, wyrwnaj do prawej 55
Wstaw lub usu odnonik 56
Styl tekstu: lista rozwijana 56
Styl tekstu: podkrel, wyjustuj, zmie kolor 57
Wklej jako tekst, wklej z Worda 58
Usu formatowanie 58
Wstaw znak specjalny 58
Zrozumiay tekst 59
Przykady niedostpnych szablonw 60
Twenty Eleven 60
Alexandria 61
Przydatne narzdzia 63
Lista kontrolna WCAG 2.0 64

ZASADA 1. POSTRZEGALNO 64
Wytyczna 1.1. Alternatywa w postaci tekstu: 64
Wytyczna 1.2. Media zmienne w czasie: 64
Wytyczna 1.3. Moliwo adaptacji: 66
Wytyczna 1.4. Moliwo rozrnienia: 67
ZASADA 2. FUNKCJONALNO 71
Wytyczna 2.1. Dostpno z klawiatury: 71
Wytyczna 2.2. Wystarczajca ilo czasu: 72
Wytyczna 2.3. Ataki padaczki: 73
Wytyczna 2.4. Moliwo nawigacji: 74
ZASADA 3. ZROZUMIAO 76
Wytyczna 3.1. Moliwo odczytania: 76
Wytyczna 3.2. Przewidywalno: 78
Wytyczna 3.3. Pomoc przy wprowadzaniu informacji: 80
ZASADA 4. SOLIDNO 82
Wytyczna 4.1. Kompatybilno: 82
Wstp
Wstp
Prawd jest, e warunki ycia wspczesnego oraz szybki rozwj technologii informacyjno-komunikacyjnych jeszcze bardziej rnicuj spoeczestwo, pogbiajc
ju istniejce nierwnoci. I to wanie dzi, w XXI wieku, kiedy nowe technologie
na naszych oczach zmieniaj niemal wszystkie sfery ycia spoecznego. Coraz trudniejszy staje si dla ludzi niepenosprawnych i starszych dostp do komputera, Internetu i innych nowoczesnych narzdzi technologii informacyjnej.
A przecie nowe technologie mogyby si sta doskonaym narzdziem wyrwnywania szans, gdyby tylko osoby zagroone wykluczeniem spoecznym mogy je
wpeni wykorzystywa.
Podrcznik niniejszy zrodzi si z chci niesienia pomocy ludziom o specjalnych potrzebach. Syszy si wielokrotnie o kopotach osb starszych, pragncych poczy
si z sieci www na komputerze starszego typu czy za pomoc starszego oprogramowania, albo korzystajc ze sabego cza. Nie mog te czsto znale informacji
na stronie internetowej soectwa czy maej organizacji pozarzdowej. le zaprojektowana strona, np. brak opisw przy elementach graficznych, nieodpowiedni kontrast kolorystyczny, brak skip linkw czy transkrypcji tekstowej plikw dwikowych, uniemoliwiaj rwnie osobom niewidomym lub niesyszcym korzystanie
z Internetu. Sprbowalimy wic, kierujc si wasnym dowiadczeniem, udzieli
wskazwek wszystkim zainteresowanym, ktre pozwol im przygotowa prost
stron internetow z wykorzystaniem WordPressa.
Podrcznik ten nie jest ksik o jzyku HTML ani instrukcj obsugi WordPressa.
Zawiera podstawowe wiadomoci, ktre uatwi mog projektowanie strony internetowej zmyl o wszystkich grupach uytkownikw.
Nasz poradnik wychodzi te naprzeciw kopotom pocztkujcych twrcw stron internetowych, pragncych pozna najwaniejsze zasady tworzenia dostpnych serwisw. Udziela zwizych odpowiedzi na wszystkie ich pytania, rwnie te, ktre
dotycz jzyka HTML. Ambicj jego jest nawet wprowadzenie bardziej zaawansowanych czytelnikw w takie tematy, jak: tworzenie stron z wykorzystaniem jzyka
Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress
Wstp
HTML lub CSS1 czy stosowanie standardw WCAG2. Dlatego warto take uywa
poradnika w sytuacjach, kiedy mamy jakiekolwiek wtpliwoci dotyczce dostpnoci naszej strony.
Cz poradnika bez wyrnienia kolorem adresowana jest do wszystkich uytkownikw.
Fragmenty zaznaczone kolorem zielonym polecamy pocztkujcym.
Czci zaznaczone na to zawieraj informacje dla zaawansowanych.
1 CSS (ang. Cascading Style Sheets) kaskadowe arkusze stylw; jzyk opisujcy sposb wywietlania
(wygld) stron www.
2 WCAG (ang. Web Content Accessibility Guidelines) zalecenia dotyczce dostpnoci treci publikowanych w Internecie.
Dostpno treci publikowanych w Internecie

Wykluczenie cyfrowe
Jak wynika z bada, wykluczenie cyfrowe3 dotyczy coraz wikszej grupy ludzi. Gwnymi przyczynami tego zjawiska s, z jednej strony ograniczony dostp do infrastruktury, sprztu czy oprogramowania, a z drugiej brak odpowiednich kompetencji, motywacji czy te bariery psychologiczne. Szacuje si, i w 2011 r. wykluczenie
cyfrowe dotyczyo znacznej liczby mieszkacw naszego kraju, bo a 13 mln ludzi4,
spord ktrych 4,7 mln to osoby niepenosprawne (12,2 proc.)5.
Osoby niewidome
Osoby niepenosprawne komunikuj si z komputerem lub Internetem w odmienny
sposb. Najbardziej jaskrawym przykadem wykluczenia cyfrowego s osoby niewidome, ktre wbrew obiegowej opinii doskonale radz sobie z komputerem, tabletem czy smartfonem (nawet dotykowym). Jedyne, czego im potrzeba, to specjalnego programu czytajcego ekran (ang. screen reader). Program ten ledzi operacje
wykonywane przez uytkownika oraz zapisy na ekranie, a nastpnie przekazuje te
informacje do syntezatora mowy (rodzaj urzdzenia bd oprogramowania). Dziki temu osoba niewidoma moe sprawnie obsugiwa komputer i nim zarzdza,
korzysta z systemu operacyjnego, zainstalowanych aplikacji, dokumentw tekstowych czy arkuszy kalkulacyjnych, a take ze stron internetowych. Do najbardziej
popularnych programw czytajcych ekran zalicza si JAWS i Window-Eyes oba
programy s komercyjne i do drogie, darmowy program NVDA6 stworzony na licencji wolnego oprogramowania oraz VoiceOver opracowany dla komputerw Mac.
3 Wykluczenie cyfrowe zjawisko, ktre jest synonimem trwaej marginalizacji, pozostawania grupy
osb (niepenosprawnych, starszych) na uboczu informatyzacji, ktr yje og spoeczestwa.
Przyp. red.
4 Gwny Urzd Statystyczny, Wykorzystanie technologii informacyjno-(tele)komunikacyjnych w przedsibiorstwach i gospodarstwach domowych w 2011 r., data publikacji 30-03-2012, http://www.stat.
gov.pl/gus/5840_wykorzystanie_ict_PLK_HTML.htm.
5 Dane demograficzne cytowane za: Biuro Penomocnika Rzdu ds. Osb Niepenosprawnych wg Narodowego Spisu Powszechnego 2011, http://www.niepelnosprawni.gov.pl/niepelnosprawnosc-w-liczbach-/dane-demograficzne/.
6 Lista przydatnych narzdzi wraz z odniesieniami na strony internetowych znajduje si na s. 63.
Programy czytajce ekran przetwarzaj zawarto stron internetowych w sposb

liniowy, mniej wicej w takiej kolejnoci, w jakiej widzimy stron zaraz po wyczeniu w przegldarce internetowej arkuszy stylw CSS. Odsuchiwanie informacji
zcaego serwisu, linia po linii, trwaoby zbyt dugo, wic w oprogramowaniu wprowadzono skrty klawiaturowe uatwiajce nawigacj. I tak np. w programie NVDA
po naciniciu klawisza H, mona przej do pierwszego wystpujcego na stronie
nagwka, po wciniciu klawisza Q - do pierwszego napotkanego bloku cytatu,
aklawisza K do pierwszego odnonika.
Lista skrtw klawiaturowych dla programu NVDA:
nagwek
lista
element listy
tabela
cze
pole formularza
cze nieodwiedzone
cze odwiedzone
pole edycyjne
przycisk
pole wyboru
pole kombi
przecznik (pole radio)
blok cytatu
ramka
10
grafika
od 1 do 6
wek).
nagwki 1 - 6 (kady klawisz odpowiada za odpowiedni nag-
Screen readery to tylko jeden z przykadw oprogramowania, ktre pozwala na

wiksz niezaleno osobom niewidomym w Internecie. Wszystkie programy komputerowe i urzdzenia, opracowane z myl o osobach niewidomych, dziaaj jak
programy uytkownika bd programy z nim wsppracujce. Ich podstawowa rola
polega na dostarczeniu osobie niepenosprawnej niezbdnych funkcjonalnoci, wykraczajcych czsto poza moliwoci standardowych programw7. Mwimy wwczas o technologii wspomagajcej lub asystujcej.
Ze wzgldu na specyfik rnych rozwiza asystujcych naley zawsze mie na
uwadze ich moliwoci i ograniczenia. Niestety, w wikszoci przypadkw serwisy
internetowe zawieraj podstawowe bdy, ktre utrudniaj lub wrcz uniemoliwiaj dostp do informacji osobom niewidomym. Przykadowo, nie posiadaj nagwkw, dziki ktrym mona szybciej nawigowa po stronie, pola formularzy iobrazki nie s odpowiednio opisane.
Wracajc na chwil do programu NVDA, warto zauway, e maa liczba skrtw
klawiaturowych wskazuje na wag, jak osoby niewidome przywizuj do jakoci
kodu HTML, tj. uycia znacznikw semantycznych zgodnie z ich przeznaczeniem8.
Jeli ten warunek zostanie speniony rwnie w serwisie internetowym, wwczas
nawigacja po stronach bdzie szybka i komfortowa.
Osoby niedowidzce
Nastpn grup osb niepenosprawnych stanowi osoby niedowidzce. Grupa ta
jest trudna do zdefiniowania, a co za tym idzie nie mona okreli nawet w przyblieniu, ile osb niedowidzcych korzysta z Internetu. Najczciej osoby te posiadaj
bardzo du wad wzroku i jej korekcja za pomoc okularw jest niemoliwa. Z tego
wzgldu chtnie korzystaj z programw powikszajcych, lup czy nawet progra7 WCAG 2.0, autoryzowane tumaczenie na jzyk polski z dnia 09.07.2013:
http://www.fdc.org.pl/wcag2/.
8 Zob. szczegowe informacje w dziale Co to jest WCAG 2.0?, s. 18.
11
mw czytajcych. Tworzc serwis internetowy, trzeba wic zadba o odpowiedni

kontrast tekstu w stosunku do ta. Jeli kontrast bdzie za may, to osoba niedowidzca nie bdzie w stanie, nawet przy duym powikszeniu, odczyta tekstu na
ekranie komputera albo znale wanego elementu na stronie www, np. wyszukiwarki.
Testujc strony www, warto te pamita o narzdziu, jakim jest funkcja duy kontrast, dostpna w systemie operacyjnym. Aby j wczy w systemie MS Windows
w wersji 7 i 8, trzeba nacisn kombinacj klawiszy: lewy Alt + lewy Shift + Print
Screen. Tylko waciwe uycie kaskadowych arkuszy stylw CSS pozwoli wywietli
prawidowo stron internetow w tym trybie, poniewa zdefiniowane kolory oraz
ta s modyfikowane.
Innym zaburzeniem, na ktre cierpi osoby niedowidzce, jest zaburzenie w rozpoznawaniu barw. Normalne widzenie barw jest rezultatem kompozycji z trzech podstawowych barw: czerwieni, zieleni i bkitu. Brak widzenia jednej z barw powoduje
widzenie dwuchromatyczne9, widzenie monochromatyczne jest spowodowane lepot na dwie barwy. Czasem wystpuje te cakowita lepota na barwy10. Wane
jest, aby w serwisie internetowym skierowanym take do osb niedowidzcych nie
przekazywa informacji tylko i wycznie za pomoc kolorw, np. Pola oznaczone
na czerwono s wymagane.
Zdarza si rwnie, e osoba niedowidzca nie ma adnej wady, ale nie jest w stanie w pewnych okolicznociach odczyta informacji na stronie internetowej, np.
przebywajc w bardzo jasnym pomieszczeniu lub w soneczny dzie. Taka osoba
nie moe korzysta z laptopa, tabletu lub smartfona, gdy wiato odbija si w ekranie, aodczytanie tekstu na ciemnym ekranie jest niemoliwe. Analogicznie, podczas
przegldania zawartoci Internetu w ciemnym pomieszczeniu, monitor zaczyna razi, a wzrok szybko si mczy.
Dobrym rozwizaniem w takich sytuacjach jest zastosowanie w serwisie internetowym mechanizmu zmiany kontrastu na stronie, ktry pozwala w szybki sposb
9 Brak widzenia koloru zielonego zwane jest deuteranopi (potoczna nazwa to daltonizm, od nazwiska
angielskiego fizyka i chemika, J. Daltona), czerwonego protanopi, a brak widzenia dwch kolorw,
tego i niebieskiego, tritanopi.
10 Cakowita lepota jest wynikiem niedorozwoju siatkwki i czy si ze znacznym obnieniem ostroci
wzroku i trudnoci przystosowania do wiata. Przyp. red.
12
dostosowa jego widok do istniejcych warunkw. Warto rwnie zadba o to, aby
wybrana wersja kontrastowa czy kolorystyczna nie rnia si pod wzgldem zawartoci i funkcjonalnoci od oryginalnej wersji kolorystycznej. Niestety, wikszo
autorw stron internetowych i ich wacicieli jest zdania, e jest to gwny element
wiadczcy o dostpnoci strony, co jest absolutnym nieporozumieniem.
Rys. 1. Widok strony gwnej Fundacji Widzialni.org

Oryginalna wersja kolorystyczna [www.widzialni.org (2014-02-05)]
Rys. 2. Widok strony gwnej Fundacji Widzialni.org

Wersja kontrastowa z t sam zawartoci i funkcjonalnoci [www.widzialni.org (2014-02-05)]
13
Osoby guche
Osoby z cakowit lub czciow utrat suchu nie musz posugiwa si adnym
dodatkowym oprogramowaniem, aby mc korzysta z Internetu. Powanym problemem dla nich jest natomiast odczytanie treci przekazywanych na stronie za pomoc materiaw audio i audio-wideo. Uzupenienie plikw dwikowych i wideo
otumaczenie na jzyk migowy jednak nie wystarczy, najlepiej zadba rwnie onapisy do dialogw11.
Innym problemem, nie mniej wanym, jest zrozumienie treci. Dla czci osb niesyszcych, a zwaszcza tych, ktre nie sysz od urodzenia, jzyk polski jest jzykiem obcym. Jzykiem naturalnym jest jzyk migowy. W Polsce istniej dwa jzyki
migowe naturalny, ktrym gusi posuguj si midzy sob od urodzenia (Polski
Jzyk Migowy, w skrcie PJM), oraz jzyk cakowicie sztuczny zwany Systemem Jzykowo-Migowym (SJM). Kady z tych jzykw migowych ma swoich zwolennikw
i przeciwnikw.
Jzyk migowy ma inn budow ni jzyk polski, inn skadni i gramatyk. Dlatego wiele osb guchych ma trudnoci ze zrozumieniem sowa pisanego. Niektre
treci, ze wzgldu na skomplikowan budow zda czy sowa lub sformuowania,
ktre nie daj si przetumaczy na jzyk migowy (np. szalone dni, wilczy gd),
mog sprawi im pewne trudnoci. W ich zrozumieniu pomocne bd kompetencje
jzykowe osoby guchej.
Biorc pod uwag moliwoci osb guchych, zaleca si stosowanie w serwisie
internetowym uproszczonego jzyka. Nie da si natomiast ze wzgldw merytorycznych i formalnych uproci treci internetowych. Jedynie dziki uproszczeniu
jzyka, odbir przekazywanych treci bdzie atwiejszy nie tylko dla osb guchych,
ale take dla osb z problemami poznawczymi (kognitywnymi) i intelektualnymi.
Zkolei osoby niesyszce, ktre straciy such w wieku dojrzaym i znaj jzyk polski,
niekoniecznie musz zna jzyk migowy.
11 Ostatnio kilkuosobowy zesp modych ludzi z Polski wymyli translator sucy do tumaczenia tekstw mwionych i pisanych w jzyku polskim na jzyk migowy, jedyny tego typu program komputerowy na wiecie (zob. www.migam.pl). Przyp. red.
14
Rys. 3. Jeden z filmw udostpnionych w Internecie. Napisy oraz tumaczenie w jzyku migowym
[www.widzialni.org (2014-02-05), wykonanie dostepni.eu]
Osoby z zaburzeniami funkcji kognitywnych

Liczebno uytkownikw z zaburzeniami funkcji kognitywnych12 jest trudna do
oszacowania ze wzgldu na du rnorodno grupy; nie oznacza to wcale, e jest
ona maa. Do grupy tej zaliczamy, z jednej strony, osoby autystyczne, nadpobudliwe
z zespoem ADHD, chorych na Alzheimera, schizofrenikw, a z drugiej strony dys-
12 Funkcje kognitywne (ac. cognitio poznanie) funkcje poznawcze czowieka, do ktrych zaliczamy
m.in. umiejtnoci: uczenia si, rozumienia i przekazywania informacji werbalnej, tworzenia i posugiwania si informacjami niewerbalnymi, mylenia abstrakcyjnego, rozwizywania zada i oceniania.
Przyp. red.
15
lektykw oraz osoby z niskim ilorazem inteligencji13. Im prostsza nawigacja i prostszy jzyk w serwisie internetowym, tym osoby z zaburzeniami kognitywnymi bd
mogy pewniej si po nim porusza.
Osoby z dysfunkcj ruchow

Osoby z dysfunkcjami ruchowymi14 w wikszoci przypadkw mog posugiwa si
zarwno myszk, jak i standardow klawiatur, ale niekoniecznie obydwoma urzdzeniami na raz. Niepenosprawni ruchowo w zakresie koczyn grnych (z powodu
urazu krgosupa, poraenia mzgowego, postpujcego zaniku mini, braku koczyn lub niedowadu koczyn i in.) nie mog komunikowa si z komputerem za
pomoc myszki, tylko klawiatury. Dlatego tworzc stron lub serwis internetowy
dostpny dla najszerszego grona odbiorcw, naley przewidzie nawigacj tylko za
pomoc klawiatury. Aby przetestowa takie rozwizanie, wystarczy odoy myszk na bok. W ten prosty sposb mona sprawdzi, czy przy uyciu standardowych
klawiszy nawigacyjnych (tabulator, strzaki, spacja) oraz klawisza Enter, uytkownik
bdzie w stanie obsuy kad funkcjonalno i dotrze do kadej informacji.
Pozostae grupy
Problem nierwnego dostpu do nowych technologii dotyczy nie tylko osb niepenosprawnych. W wielu przypadkach korzystanie z komputera i Internetu zaley
od wyksztacenia i wieku. Osoby z wyksztaceniem podstawowym i starsze rzadko
korzystaj z Internetu. Z wiekiem pogarsza si wzrok i such, mog pojawi si problemy motoryczne, jak np. drenie rk. Dolegliwoci te nie tylko spowolniaj, ale te
utrudniaj odbir treci internetowych. Oprcz samego dostpu wana jest rwnie jako wykorzystywanego sprztu i oprogramowania oraz szybko poczenia
wprzypadku Internetu (np. w bibliotece czy w szpitalu), a take same umiejtnoci
uytkownikw.
13 Iloraz inteligencji (ang. intelligence quotient - IQ) - ilociowy wskanik poziomu rozwoju umysowego,
najczciej mierzony za pomoc Tekstu Inteligencji Wechslera lub jego podtestw. Przyp. red.
14 Dysfunkcja narzdu ruchu to niepenosprawno ruchowa spowodowana patologiczn zmian w narzdzie ruchu lub w orodkach ruchu w mzgu i rdzeniu krgowym. Przyp. red.
16
Dla wielu uytkownikw powyej 50. roku ycia podstawowym zastosowaniem

komputerw jest korzystanie z Internetu i szukanie informacji, czasem te komunikacja przez sie. Czsto jednak niewystarczajca wiedza i brak umiejtnoci nie
pozwalaj na eksploracj zasobw internetowych.
Na koniec rada dla wszystkich twrcw i autorw serwisw internetowych. Naley
zadba o to, aby serwisy posiaday proste i intuicyjne interfejsy, czytelne komunikaty oraz pomoc; zob. Podrcznik dobrych praktyk WCAG 2.015.
15 Podrcznik dobrych praktyk WCAG 2.0 dostpny jest w formie elektronicznej (format PDF) na stronie http://www.widzialni.org lub do kupienia w wersji papierowej w ksigarni internetowej wydawnictwa PWN.
17
Co to jest WCAG 2.0?

World Wide Web Consortium, w skrcie W3C, jest organizacj, ktra zajmuje si
standardami pisania i przesyu stron www. Zostaa powoana w 1994 roku z inicjatywy Tima Bernersa-Lee, twrcy WWW. Skupia ponad 400 instytucji, firm i orodkw
naukowych z caego wiata.
Gwnym zadaniem W3C jest tworzenie standardw i wytycznych dotyczcych
stron internetowych. Cho opracowane przez ni standardy nie maj mocy prawnej, to wiele krajw korzysta z jej rekomendacji. W Europejskiej Agendzie Cyfrowej wprowadzono nawet zapis, ktry mwi, e opnie W3C s obowizujce w pastwach europejskich. Co prawda, dotycz one obszaru administracji pastwowej,
lecz zaleca rwnie, aby dobre praktyki tworzenia stron zgodnych ze standardami
wdraane byy rwnie w sektorze prywatnym.
W organizacji W3C dziaaj grupy tematyczne, ktre zajmuj si nastpujcymi zagadnieniami:
HTML/XHTML jzyki znacznikw, suce do tworzenia stron internetowych,

CSS kaskadowe arkusze stylw,
HTTP protok przesyania stron www,
SVG format grafiki wektorowej,
WAI dostpno stron internetowych
oraz wiele innych.

Nasz uwag powinna zwrci grupa WAI (ang. Web Accessibility Initiative), czyli Inicjatywa Dostpnoci do Sieci. W obszarze jej zainteresowa znalazy si zagadnienia
dostpnoci stron internetowych, poczwszy od narzdzi sucych do tworzenia
stron www, poprzez aplikacje klienckie, jak np. przegldarki stron, a po edukacj.
Opracowaa ona szereg wanych dokumentw, w tym WCAG 2.0 (ang. Web Content Accessibility Guidelines), czyli Wytyczne dla dostpnoci treci internetowych.
Dokument ten zawiera najwaniejsze zasady tworzenia stron internetowych pod
ktem ich dostpnoci.
Dokument WCAG 2.0 zosta zatwierdzony w 2008 roku. Wymienia wytyczne dla dostpnoci treci internetowych, pogrupowane wedug 4 najwaniejszych zasad:
18
Zasada nr 1: Postrzegalno Informacje oraz komponenty interfejsu uytkownika musz by przedstawione uytkownikom w sposb dostpny dla ich zmysw.
Zasada nr 2: Funkcjonalno Komponenty interfejsu uytkownika oraz nawigacja musz by moliwe do uycia.
Zasada nr 3: Zrozumiao Informacje oraz obsuga interfejsu uytkownika
musz by zrozumiae.
Zasada nr 4: Solidno Tre musi by solidnie opublikowana, tak aby moga
by skutecznie interpretowana przez rnego rodzaju oprogramowania uytkownika, w tym technologie asystujce.
Kada z tych zasad dzieli si na wytyczne w sprawie podstawowych celw, jakimi naley si kierowa budujc dostpny serwis internetowy. Jak czytamy w dokumencie
WCAG 2.0: Wytyczne nie s mierzalne, ale stanowi oglne ramy i cele do osignicia. Maj pomc autorom serwisw i treci, zrozumie kryteria sukcesu i pozwoli
na ich skuteczniejsze wdraanie.
Z kolei kada ze wskazwek zawiera moliwe do zmierzenia kryteria sukcesu. Jest
ich w sumie 61. Stworzono trzy poziomy zgodnoci z wytycznymi: poziom najniszy
(A), poziom poredni (AA) oraz poziom najwyszy (AAA). O ile spenienie kryteriw
z poziomu zgodnoci A jest wymaganym minimum, to kryteria z poziomu AA s tylko zalecane, a z poziomu AAA mona speni.
WCAG 2.0 zachca jednoczenie wykonawcw stron i autorw treci do stosowania,
jeli jest to moliwe, wszystkich poziomw, aby dotrze do jak najwikszej grupy
odbiorcw.
W dokumencie tym znalazo si rwnie bardzo ciekawe stwierdzenie, e najwyszy
poziom dostpnoci AAA nie daje gwarancji w peni dostpnego serwisu:
Naley pamita, i nawet zawarto, ktra jest na najwyszym poziomie zgodnoci
(AAA), nie bdzie dostpna dla osb ze wszystkimi rodzajami i stopniami niepenosprawnoci, czy te z niepenosprawnoci zoon, szczeglnie w zakresie problemw z uczeniem si oraz zrozumieniem jzyka. Zachca si wykonawcw i autorw
treci do zastosowania szerokiego zakresu technik, w tym technik dodatkowych, ale
take do poszukiwania najlepszych praktyk stosowanych w danym momencie rozJak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress
19
woju Internetu, aby treci byy w moliwie najwikszym stopniu dostpne dla osb
z rnymi dysfunkcjami.16
Sam dokument nie jest obszerny, zajmuje po wydrukowaniu jedynie kilkanacie
stron, a przy tym jest bardzo zwizy. Aby pomc w zrozumieniu poszczeglnych
kryteriw sukcesu oraz w ich interpretacji, stworzono dodatkowe poradniki, zawierajce wyjanienia i przykady w kontekcie okrelonej technologii (HTML, CSS, PDF,
Flash i in.).
1. How to Meet WCAG 2.0 lista odniesie do WCAG 2.0, aktualizowana na bieco17.
2. Understanding WCAG 2.0 przewodnik, ktry ma uatwi zrozumienie i wdroenie WCAG 2.0. Zawiera poradniki do kadej wytycznej i kryterium sukcesu18.
3. Techniques for WCAG 2.0 zbir technik oraz czsto wystpujcych bdw
skategoryzowanych wg konkretnej technologii. Dokument zawiera przykady,
kody rdowe oraz testy19.
Przeczytanie wszystkich dokumentw jest czasochonne i wymaga duego zaangaowania czytelnika.
Semantyczny kod HTML

W dokumencie WCAG 2.0 wyrniono pojcie semantycznego kodu HTML lub
znacznika semantycznego.
HTML (ang. Hyper Text Markup Language), czyli hipertekstowy jzyk znacznikw
wykorzystywany do tworzenia stron internetowych. Nie jest to jzyk programowania, co oznacza, e nie moemy przy jego uyciu wykonywa adnych oblicze,
operacji cyklicznych czy warunkowych. Najwaniejszym elementem jzyka HTML
s znaczniki, zwane te tagami, specjalne sowa zapisane pomidzy nawiasami
ktowymi (<) oraz (>). Prawie wszystkie znaczniki wystpuj w parach, np. <h1>
i</h1>. Pierwszy znacznik jest znacznikiem otwierajcym (tworzy si go przez na16 Oficjalne tumaczenie dokumentu WCAG 2.0 na jzyk polski dostpne jest na stronie Forum Dostpnej Cyberprzestrzeni, pod adresem: http://fdc.org.pl/wcag2/.
17 Zob. dokument dostpny pod adresem: http://www.w3.org/WAI/WCAG20/quickref/.
18 Zob. dokument dostpny pod adresem: http://www.w3.org/TR/UNDERSTANDING-WCAG20/.
19 Zob. dokument dostpny pod adresem: http://www.w3.org/TR/WCAG20-TECHS/.
20
zw elementu) i oznacza, e od tego miejsca przegldarka bdzie interpretowa

jego zawarto wodpowiedni sposb. Drugi natomiast jest znacznikiem zamykajcym (tworzy si go przez znak ukonika i nazw elementu) i informuje, gdzie dany
element si koczy; zob. przykad poniej, opisujcy najwaniejszy nagwek na
stronie www.
<h1>Jak tworzy strony internetowe?</h1>
W znacznikach, czsto po nazwie elementu, pojawiaj si atrybuty, ktre szczegowo opisuj zawarto elementu. Wystpuj w postaci pary: nazwa warto; zob.
przykad poniej, przedstawiajcy sposb osadzenie linku (znacznik <a> wraz z uyciem atrybutu href, w ktrym podaje si adres URL do zasobu).
<a href=http://widzialni.org/download.php?id=4>Pobierz
Raport Otwarcia z 2013 roku</a>
Do wyjtkw nale znaczniki bez pary. Przykadem moe by wstawienie obrazka,

gdzie wykorzystuje si samodzielny znacznik <img> wraz z niezbdnymi atrybutami. Pierwszy to src, zawierajcy adres URL20 wstawionego obrazka, oraz atrybut
alt posiadajcy alternatywny tekst, opisujcy jego zawarto. O wadze tego atrybutu mona przeczyta w dalszej czci poradnika.
<img src=logo.png alt=Logo Fundacji Widzialni />
W jzyku HTML wystpuje podzia na znaczniki formatujce i semantyczne. Znaczniki formatujce odpowiadaj za wygld tekstu, np. pogrubienie, pochylenie lub
wycentrowanie. Uywa si ich rzadko, gdy ich zadania przejy w wikszoci kaskadowe arkusze stylw CSS. Dziki CSS mona definiowa obecnie wygld poszczeglnych elementw nawigacyjnych i treci, np. kolor, krj, styl i rozmiar czcionki,
wymiary.
Znaczniki semantyczne okrelaj natomiast nie wygld, ale znaczenia danego fragmentu tekstu (link, nagwek, lista wypunktowana, tabela, tytu tabeli, etykieta
iin.). Zwykle su do odpowiedniego formatowania treci (np. nagwek zostanie
20 URL (ang. Uniform Resource Locator) jednolity lokalizator zasobu, czyli adres pliku dostpnego wInternecie.
21
pogrubiony i powikszony w stosunku do reszty tekstu), lecz nie to jest ich gwnym
zadaniem. W Wikipedii czytamy, e kod semantyczny:
Sprawia, e dokument staje si niezaleny i moe by formatowany na wiele sposobw. Semantyczny dokument moe by parowany z nielimitowan liczb arkuszy
stylw, dostosowujcych wygld do ekranu komputera, wysokorozdzielczych drukarek, urzdze mobilnych, przegldarek wykorzystujcych syntezatory mowy lub
urzdze dostosowanych dla osb posugujcych si alfabetem Braillea itd. Aby
tego dokona, nie s potrzebne adne zmiany w semantycznym kodzie HTML.
Cytowany fragment doskonale oddaje rwnie sposb dziaania CMS-w opartych
na szablonach, do ktrych zaliczamy m.in. WordPress. Duym uproszczeniem byoby jednak stwierdzenie, e mona dowolnie zmienia wygld stron bez koniecznoci
wprowadzania zmian w kodzie HTML.
Szukajc odpowiedniego szablonu graficznego do serwisu internetowego, naley
zwrci uwag obok prezentacji wizualnej i wartoci estetycznej na kilka elementw, na ktre nie zawsze mona mie wpyw z poziomu panelu administracyjnego systemu CMS.
W poradniku opisujemy te elementy, ktre maj kluczowe znaczenie dla dostpnoci strony internetowej. O cz z nich mona samemu zadba, redagujc publikowane treci. Powanym utrudnieniem moe si jednak okaza brak podstawowej
wiedzy z zakresu HTML i CSS. Trudno np. mie wpyw na menu i jego obsug, wbudowane formularze lub sposb nawigacji, gdy te wszystkie elementy zale cakowicie od twrcy danego szablonu.
Mamy jednak nadziej, e bez wzgldu na to, czy twrca strony posiada odpowiedni wiedz, czy te nie, nasze wskazwki pomog mu zrozumie zasady tworzenia
ipublikacji treci serwisu oraz pozwol wybra dostpny szablon.
Odpowiedniki tekstowe dla elementw graficznych

Kady element graficzny osadzony na stronie internetowej, np. wykres, zdjcie czy
ozdobnik, powinien posiada tekst alternatywny (alt). Pozwoli to opisa osobom
niewidomym, ktre korzystaj z programw czytajcych, co znajduje si na grafice.
22
Kiedy program, odczytujc zawarto strony, natrafi na obrazek, otrzymuje informacj, w jaki sposb ma go przetworzy. Jeli atrybut alt bdzie uzupeniony, wwczas go przeczyta. Jeli go nie bdzie, odczyta tylko nazw pliku graficznego, a ta nic
mu nie powie, np. DSC0098723.jpg. Natomiast w sytuacji, kiedy obrazek bdzie
linkiem i nie bdzie mia atrybutu, program odczyta tylko niezrozumiay adres URL,
np. index.php?id=198&c=135.
Warto zapamita, e tekst alternatywny zawsze pojawi si na stronie, nawet gdy
obrazek z rnych przyczyn nie zostanie zaadowany. Jest to najwaniejsza i podstawowa zasada tworzenia dostpnych treci internetowych. Tekst alternatywny musi
by dostosowany do funkcji, jak peni dana grafika na stronie. Jeli jest to zdjcie,
to za jego pomoc mona przekaza uytkownikowi krtk informacj, ktra pozwoli je opisa21. Do znacznika <img> naley doda atrybut alt.
Rys. 4. Jan Matejko, Staczyk w czasie balu na dworze krlowej Bony wobec straconego Smoleska,
obraz z 1862 r., Muzeum Narodowe w Warszawie
[Wikipedia, http://pl.wikipedia.org/wiki/Plik:Matejko_Sta%C5%84czyk.jpg]
<img src=jm_stanczyk.jpg alt=Jan Matejko, Staczyk,

1862 />
Moe si jednak zdarzy, e grafika umieszczona na stronie nie przekazuje adnej

informacji, peni tylko funkcj ozdobn. Naley wwczas pozostawi atrybut alt
bez adnego tekstu, nawet w postaci spacji czy mylnikw. Taki atrybut zostanie
pominity przez technologie asystujce i nie bdzie przetwarzany (odczytany).
21 Zob. ikonki na rysunku na s. 23. Na zielonym tle znajduje si napis alt, a po prawej stronie dodatkowy opis na niebieskim tle. Ikonki pochodz one z walidatora WAVE, ktry jest dostpny jako darmowe
narzdzie online pod adresem http://wave.webaim.org/ lub jako toolbar do przegldarki internetowej.
23
Rys. 5. Jak dziaa koszyk [grafika wasna]
<img src=koszyk.png alt= />
Jeli grafika peni rol odnonika, wwczas naley jasno w treci alternatywnej przekaza informacj, dokd uytkownik zostanie skierowany lub jak akcj musi wykona.
Rys. 6. YouTube [grafika wasna]
<a href=youtube.pl>
<img src=yt.png alt=Przejd na nasz kana Youtube
/>
</a>
Publikowanie materiaw audio i wideo

Wszystkie udostpnione na stronie materiay wideo (np. z YouTube) powinny posiada napisy. Dziki napisom mona nie tylko tumaczy dialogi, ale take przekazywa inne wane informacje dwikowe. Jest to due uatwienie nie tylko dla osb
guchych, ale rwnie dla osb, ktre korzystaj z materiaw wideo w miejscach
publicznych, w bibliotece, muzeum czy rodkach komunikacji miejskiej.
Innym rozwizaniem jest stworzenie dokumentu, np. w postaci osobnej strony
HTML. Stanowi on bdzie zapis wszystkich informacji zawartych w materiale wideo
dialogi i wypowiedzi osb, dziaania, a take opisy wygldu otoczenia, ktre te
s czci historii. W ten sposb osoby niesyszce mog zapozna si take z ca
treci materiaw audio typu pliki mp3 czy podcasty dwikowe.
24
Budowa formularzy
Formularze s jednym z najwaniejszych elementw stron internetowych. Umoliwiaj interakcj pomidzy uytkownikiem a stron www, a take komunikacj zinnymi uytkownikami. Dziki nim moemy przeszukiwa Internet, skada zamwienia w sklepie, wykonywa przelewy, publikowa komentarze czy aktualizowa tre
stron internetowych z poziomu panelu administracyjnego systemu CMS22.
Dla osb widzcych wikszo formularzy jest zrozumiaa i rozpoznawalna. Inaczej
jest w przypadku osb niewidomych. Zamieszczajc formularz na stronie naley pamita, e program czytajcy przekazuje, podobnie jak w przypadku obrazkw, informacj o nietekstowych elementach, a takimi s pola formularzy (pola edycyjne,
pola wyboru, listy rozwijane, itp.). W tym celu kade z pl formularza naley powiza z tekstow etykiet. Nie wystarczy jednak wprowadzi zwyky tekst przy polu
formularza, trzeba wstawi odpowiedni znacznik HTML. Tak rol peni <label>.
Kiedy uytkownik niewidomy natrafi na pole formularza, wwczas program czytajcy odczyta zawarto etykiety.
Rys.7. Etykiety p formularzy
<label for=form_name>Imi i nazwisko:</label>

<input type=text id=form_name name=form_name
value= />
22 CMS (ang. Content Management System) system zarzdzania treci. Dokadny opis w dziale Czym
jest Wordpress?.
25
Etykieta tekstowa bdzie rwnie duym udogodnieniem dla pozostaych uytkownikw. Nie bd oni musieli celowa np. w pole jednego lub wielokrotnego wyboru
(checkbox, radio), poniewa bdzie mona klikn etykiet tekstow.
Rys. 8. Etykiety p wyboru

Moliwo kliknicia w obszar pola oraz przylegajcy tekst
[http://www.projekt.nowaperspektywa.org/index.php?p=kwestionariusz (2014-02-01)]
Stosowanie nagwkw
Nagwki peni bardzo wan rol informacyjn i nawigacyjn dla osb niewidomych. Uytkownicy widzcy skanuj stron internetow wzrokiem i bez trudu mog
zidentyfikowa jej gwne sekcje. Osoby niewidome natomiast musz powici
duo wicej czasu, aby odczyta informacje zawarte w serwisie. Dziki programowi
czytajcemu mog oni za pomoc skrtw klawiaturowych byskawicznie porusza
si po nagwkach i przechodzi do gwnych sekcji i informacji na stronie, bez koniecznoci mudnego odsuchiwania treci linia za lini. Poznaj w ten sposb, ktre elementy serwisu s waniejsze, a ktre mniej. Std te stosowanie nagwkw
w serwisie internetowym powinno si by konsekwentne i systematyczne. Trzeba
wprowadzi jeden nagwek <h1>, ktry powinien zawiera tytu, nazw serwisu,
a na podstronach nazw serwisu wraz z nazw aktualnego dziau. Pozostae nagwki powinny by uyte w spjny sposb, z zachowaniem odpowiedniej hierarchii.
Aby opisa gwne sekcje menu gwnego, wyszukiwark, newsletter i aktualnoci,
mona np. wprowadzi nagwki <h2>, przy czym tytuy aktualnoci bd nagwkami <h3>. Istotn rzecz jest, aby nie uywa nagwkw do formatowania tekstu
(wiksza czcionka, pogrubienie itp.), poniewa nie do tego zostay stworzone.
26
Warto nadmieni, e dziaanie wyszukiwarek (np. Google, Bing) polega na skanowaniu kadej strony internetowej i sprawdzeniu, czy napotkana tre jest nagwkiem
<h1>, <h2>, <h3> i tak dalej, czy te zwykym akapitem tekstu <p>. Jeeli znaczniki
nagwkw zostan zastosowane w tekcie do tytuw aktualnoci lub rdtytuw,
wtedy mechanizm lepiej zaindeksuje stron w wyszukiwarce. Program czytajcy
szybciej rozpozna struktury serwisu, co pozwoli uytkownikom niewidomym przemieszcza si po jego istotnych elementach.
Rys. 9. Widok strony widzialni.org

Struktura nagwkw wygenerowana w programie WAVE [www.widzialni.org (2014-02-05)]
Uycie list
W HTML mamy do dyspozycji 3 rodzaje list: listy uporzdkowane, wypunktowane
ilisty definicji.
Lista uporzdkowana (<ol>) suy do tworzenia wykazw numerowanych, w ktrych kolejno i stopie wanoci informacji kolejnych elementw jest istotna. Listy
tego typu stosuje si np. do opracowania instrukcji czy poradnikw.
27
Lista wypunktowana (<ul>) suy do tworzenia wykazw nie wymagajcych uporzdkowania, w ktrych kolejno elementw nie jest istotna. Listy te nadaj si np.
do wywietlenia grupy akapitw czy linkw.
Lista definicji (<dl>) doskonale sprawdza si do tworzenia sownikw oraz dowolnych list, kojarzcych krtkie sowo z duszym opisem.
Cenn zalet wszystkich list jest moliwo wstawiania jednej listy wewntrz drugiej
(tzw. listy zagniedone) i tworzenie w ten sposb drzewiastych struktur. Jest to
przydatne podczas opracowywania wielopoziomowych list, zawierajcych punkty
wraz z podpunktami.
Oprcz nagwkw dla osb niewidomych najwaniejszymi elementami na stronie
s listy. Listy te uatwiaj nawigacj oraz pomagaj w odczytaniu informacji. Sprawne poruszanie si pomidzy listami jest moliwe dziki skrtom klawiaturowym,
dostpnym w programie czytajcym. Program ten przekazuje te dodatkowe informacje, jaka jest liczba elementw w licie oraz czy nastpio w niej zagniedenie.
Naley wspomnie o jeszcze jednym moliwym zastosowaniu list uporzdkowanych i wypunktowanych. Lista wypunktowana doskonale nadaje si do tworzenia
konstrukcji menu, ktre moe zawiera dziesitki, a czasem nawet setki linkw. Informuje ona uytkownika, ile linkw jest w menu oraz czy dana pozycja zawiera list
zagniedon, co okazuje si pomocne w poznaniu hierarchii menu.
Rys. 10. Widok strony wordpress.org

Nagwek oraz menu, na grze wersja graficzna, a poniej z wyczonymi stylami CSS
[www.wordpress.org (2014-02-15)]
28
Rys. 11. Widok strony WCAG 2.0

Zagniedone menu, na grze wersja graficzna, a poniej z wyczonymi stylami CSS
[www.wcag20.widzialni.org (2014-02-15)]
W systemach CMS dostpna jest moliwo definiowania list. Warto z niej korzysta, tworzc wasne listy w edytorze tekstu. Nie zaleca si jednak stosowania list
jednoelementowych, podobnie jak uywania nagwka do formatowania tekstu,
poniewa mog one wprowadzi w bd nie tylko osoby niewidome, ale i uytkownikw widzcych.
Rys. 12. Widok popularnego edytora TinyMCE w rnych wersjach
29
Stosowanie tabel
Chocia tabele daj wiele moliwoci, nie naley ich stosowa do budowy ukadu
(layoutu) strony lub jej elementw. Dla osoby niewidomej jest to bardzo istotne ze
wzgldu na to, e tabele o skomplikowanej strukturze zaburzaj odbir informacji.
Tabela jest elementem semantycznym, co oznacza, e o kadej jej czci program
czytajcy informuje uytkownika ze szczegln dokadnoci. Zapowiada zarwno
biecy numer wiersza, jak i numer kolumny, mnoc niepotrzebne informacje. Wyobramy sobie, e strona i treci zostay zbudowane tylko przy uyciu tabel. Uytkownik, zamiast odsuchiwa wane dla niego informacje, bdzie otrzymywa co
chwil komunikat o kolejnych komrkach i wierszach. Lepszemu uyciu tabel suy
wywietlanie danych tabelarycznych, jak np. kalendarzy, zestawie, statystyk itp.
Niewidomi uytkownicy Internetu mog mie problem ze swobodnym nawigowaniem po tabeli, poniewa program udwikawiajcy odczytuje dane liniowo. Naley
o tym pamita budujc tabel. Zdefiniowanie nagwka <th> umoliwi powizanie wszystkich komrek z tabel, co program udwikawiajcy odczyta w sposb
waciwy.
Kontrast strony internetowej

Bardzo wan rol w serwisie internetowym odgrywa kontrast kolorystyczny (mwilimy o tym w poprzednich rozdziaach). Zapewnia komfort pracy przy komputerze zarwno osobom niedowidzcym, jak i osobom ze schorzeniami wzroku i seniorom, nie wspominajc o uytkownikach widzcych.
Minimalny kontrast pomidzy tekstem lub grafikami tekstowymi a tem powinien
wynosi 4,5:1 (wyjtek stanowi logotypy oraz znaki firmowe). Im mniejsza warto
przed dwukropkiem, tym kontrast jest sabszy. Jeli zatem stosunek jasnoci tekstu do ta wynosi 1:1, to jest to kontrast najsabszy (biay tekst na biaym tle), jeli
natomiast 21:1, to mamy do czynienia z kontrastem najwikszym (czarny tekst na
biaym tle).
Do sprawdzenia kontrastu mona uy prostego programu Colour Contrast Analyser (CCA), ktry jest dostpny na stronie http://www.paciellogroup.com/resources/
30
contrast-analyser.html. Program ten jest zalecany na stronach W3C i, co stanowi

jego zalet, nie wymaga instalacji.
Rys. 13. Widok programu Colour Contrast Analyser
Jednoznaczne tytuy stron

Podstawow funkcj tytuu <title> jest pomoc w nawigacji, dlatego kada podstrona serwisu internetowego powinna mie unikalny tytu. Dziki temu uytkownik
wie, w ktrej czci serwisu aktualnie si znajduje. Przy tworzeniu tytuu obowizuje zasada: od szczegu do ogu. Najpierw powinno si tworzy tytu aktualnego
dziau, nastpnie artykuu, potem np. tytu dziau nadrzdnego, a na kocu np. nazw instytucji czy firmy. Wane jest, aby tytuy nie byy zbyt dugie.
<title>Kadra - O fundacji - Fundacja Widzialni</title>
Do najwaniejszych funkcji tytuu strony zaliczamy:
Tytu jest pierwsz informacj, jak program czytajcy przekazuje osobom niewidomym.
Otwarte okna przegldarki s nazwane tytuem serwisu, dziki czemu uytkownik jest w stanie jednoznacznie je zidentyfikowa.
31
Rys. 14. Widok tytuw w otwartych oknach przegldarki w systemie Microsoft Windows
Wyszukiwarki, jak np. Google, wyej punktuj sowo kluczowe, jeli wystpuje
ono w tytule strony, co wane, wywietlaj tytu w wynikach wyszukiwania.
Rys. 15. Tytuy w wynikach wyszukiwania na Google.pl [www.google.pl (2014-03-01)]
Podczas zapisu strony na dysku komputera (w trybie offline), proponowana nazwa pliku jest zawsze tytuem serwisu.
Rys. 16. Widok opcji Zapisz jako w przegldarce internetowe
32
Strona dodana do ulubionych w przegldarce internetowej jest zapisana pod

aktualnym tytuem.
Rys. 17. Widok opcji Dodaj zakadk w przegldarce internetowej
Tworzenie linkw
Linki s podstawowym elementem nawigacyjnym. Bez nich niemoliwe byoby
opracowanie strony internetowej. Dlatego te tak wan rol odgrywa sposb,
wjaki je opiszemy. Kady link musi informowa uytkownika, dokd go zaprowadzi
lub jak akcj wykona.
Osoby niewidome, ktre korzystaj z programw czytajcych, nawiguj po stronie
wedug ustalonego porzdku, wykorzystujc osadzone na stronie nagwki czy linki.
Pamitajc, e osoby niedowidzce nawet przy duym powikszeniu widz najwyej
3, 4 wyrazy na stronie, tekst linku musi by zrozumiay, bez wzgldu na kontekst.
Naley wystrzega si linkw w postaci kliknij tutaj, tu, wicej.
Poniej przykad zego uycia linku.
W przypadku penej oferty konieczna jest wczeniejsza
rejestracja w Klubie.
Szczegy zamieszczone tutaj.
Link tutaj poza kontekstem nic nie znaczy. Co powinna zrobi osoba niewidoma,
kiedy nawigujc po stronie, przemieszcza si midzy odnonikami i nagle syszy
link tutaj? Musi wykona dodatkowe czynnoci, sprawdzi otoczenie tego linku,
aby si dowiedzie, co tak naprawd tutaj si znajduje.
33
Zamiast takiej formy mona przeredagowa cay tekst, tworzc dostpny i jednoznaczny link.
Zarejestruj si w Klubie, aby skorzysta z penej oferty.
Nie naley przesadzi w drug stron i nie budowa odnonikw, ktre bd skaday si ze zdania wielokrotnie zoonego albo kilku zda. Zbyt dugi tekst w odnoniku
bdzie tak samo niezrozumiay, co kliknij tutaj.
Rwnie nieczytelne s linki, ktre powstay przez wklejenie bezporednio do tekstu caego adresu internetowego. Czsto zawieraj one niezrozumiae parametry
iznaki.
Raport Otwarcia 2013 - http://widzialni.org/raportotwarcia,new,mg,6,39
Dobrym rozwizaniem jest podlinkowanie tekstu Raport Otwarcia 2013.

Warto te informowa uytkownikw o otwarciu linkw w nowym oknie czy zakadce przegldarki. W przeciwnym razie moe si zgubi, poniewa w nowym oknie
nawigacja rozpoczyna si niejako od nowa. Nie mona te wrci do poprzedniej
strony, wykorzystujc mechanizm wstecz.
Obsuga serwisu za pomoc klawiatury

Wybierajc szablon graficzny strony internetowej, naley si upewni, czy wszystkie
elementy serwisu i jego funkcjonalnoci mona obsuy przy uyciu klawiatury, bez
myszki. Korzystanie z klawiatury zapewni sprawn nawigacj osobom niewidomym,
a take wszystkim pozostaym uytkownikom, z zaburzeniami koordynacji ruchowej,
niewydolnoci miniow grnych partii ciaa i in.
W doborze waciwego szablonu naley rwnie zwrci uwag, czy kady element
aktywny serwisu zosta przedstawiony w jzyku HTML za pomoc swojego
semantycznego odpowiednika dla linkw bdzie to znacznik <a> (powinien
zawiera atrybut href), a dla pl formularzy bd to znaczniki <input>, <select>,
<button> itp. Warto te ustali, w jaki sposb wykonywane s zdarzenia typu
34
onclick, onmouseover itp. Gdy zachodz one na elementach nieaktywnych,
wwczas nie bdzie mona wykona zadania bez uycia myszki.
Innym problemem s rnego rodzaju rozwijane menu, ktre bez uycia myszki nie
dziaaj. Nie ma adnych technologicznych przeszkd, aby taka funkcjonalno moga by zrealizowana rwnie przy uyciu klawiatury. Mao tego, pocztkujcy programista jest w stanie tego dokona w cigu kilkudziesiciu minut.
Zaznaczenie aktywnych elementw

Kada przegldarka posiada swj wasny domylny styl, w jaki oznaczane s w danej chwili wybrane elementy aktywne, np. linki czy pola formularzy. Niekiedy, poruszajc si po stronie za pomoc tabulatora, mona zobaczy wok wybranego
elementu obramowanie w postaci kropek. Nie zawsze si to udaje, gdy autorzy
szablonw graficznych najczciej wyczaj takie oznakowanie w kaskadowych arkuszach stylw CSS.
a { outline: none; }
Dla osoby widzcej korzystajcej z klawiatury taki zabieg cakowicie pozbawia j jedynego punktu orientacyjnego. O ile z gwnego punktu nawigacyjnego, czyli menu,
mona usun zaznaczanie aktywnych elementw (pod warunkiem, e zastosowany bdzie inny sposb wyrnienia, np. zmiana ta linku), to w publikowanych treciach nie naley tego robi.
Przeprowadzajc test obsugi strony internetowej za pomoc klawiatury, wystarczy
jedynie odoy myszk na bok. Przy uyciu standardowych klawiszy nawigacyjnych
tabulatora, strzaek, spacji i Enter mona w prosty sposb sprawdzi, czy jestemy w stanie dotrze w kade miejsce oraz czy widzimy, na jakim elemencie wdanym momencie si znajdujemy.
Kolejno informacji
Wiadomo, e pliki CSS odpowiadaj za wygld kadej strony internetowej. Jednake
cz aplikacji, do ktrych moemy zaliczy programy czytajce i roboty wyszukiwarek, ignoruj niektre waciwoci arkuszy stylw. Nie ma dla nich wikszego znaJak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress
35
czenia, w jakim miejscu na stronie zosta osadzony dany element oraz czy wyszukiwarka jest po lewej czy po prawej stronie.
Koniecznoci jest wyczenie stylw. Dziki takiemu rozwizaniu osoby niewidome
mog korzysta z serwisu. Technologie asystujce okrelaj jednak warunki korzystania. Po pierwsze: kolejno czytania stron musi mie sens. Po drugie: kolejno
przemieszczania si po treci przy uyciu klawiatury musi by logiczna.
Reasumujc, sekwencja nawigacji oraz czytania, okrelona za pomoc kolejnoci
wkodzie HTML musi by logiczna i intuicyjna.
Bezporedni dostp do informacji

Uytkownicy widzcy potrafi w krtkim czasie odnale w serwisie interesujce
treci, zlokalizowa ich miejsce oraz zidentyfikowa poszczeglne elementy nawigacyjne. Aby dotrze do podanej informacji, mog szybko przewin stron w gr
lub d. Odszukanie interesujcej informacji przez osoby niewidome trwa o wiele
duej, poniewa programy czytajce odczytuj treci liniowo. Co prawda, duym
uatwieniem w poruszaniu si po dowolnych semantycznych elementach strony
moe by stosowanie skrtw klawiaturowych, ale nadal pozostanie problem szybkiego dotarcia do podanej informacji.
Stosowanym najczciej mechanizmem s tzw. skip linki. Te wewntrzne linki s
w stanie pomija w dokumencie HTML stae, powtarzajce si elementy (nagwek strony, menu, wyszukiwarka i in.), co pozwala na szybkie przemieszczanie si
na stronie. Zasada ich dziaania jest prosta: ustawiaj swj fokus na umieszczonej
wodpowiednim miejscu kotwicy i nie przeadowujc strony, dostaj si na sam pocztek dokumentu HTML jako pierwsza informacja. Cho skip linki s niewidoczne,
ukryte gbiej, to mog by wykorzystywane przez technologie asystujce, np. programy czytajce.
Przewanie maj one posta: przejd do treci, przejd do menu, przejd do
wyszukiwarki.
36
Rys. 18. Widok skip linkw przy wyczonych stylach CSS na stronie widzialni.org
[www.widzialni.org (2014-02-05)]
Rne sposoby dostpu do informacji

Mechanizm nawigacji powinien by zrozumiay i atwy w uyciu. Uytkownik powinien szybko odszuka informacj i do niej dotrze. Czasem dodatkowym utrudnieniem moe by liczba stron i podstron w serwisie. Nie ma na to reguy. Moe
si zdarzy, e w bardzo rozbudowanych serwisach komercyjnych duo atwiej jest
odnale podan informacj ni na stronach mniejszych instytucji publicznych
iodwrotnie.
Zesp tworzcy serwis koniecznie powinien si dowiedzie, czy uytkownik zna
jego struktur i model przekazywania informacji. Jeli okae si, e nawigacja serwisu jest nieprzejrzysta i niezrozumiaa, a odnalezienie informacji niemoliwe, to
bdzie znaczyo, e serwis nie spenia swoich zaoe i tylko jedno kliknicie spowoduje, e uytkownik opuci stron.
Dostpny serwis powinien, poza standardow nawigacj (menu gwne, aktualnoci, linki w treci), umoliwi odwiedzajcemu dotarcie do informacji przynajmniej
na dwa rne sposoby. Do najpopularniejszych rozwiza zalicza si wyszukiwark
i map strony. Innym rozwizaniem jest stosowanie tagw. Tagowanie elementw
serwisu (przypisywanie im sw kluczowych) umoliwia uytkownikowi szybki wybr interesujcych informacji, jak rwnie podpowiada mu inne treci.
37
Rys. 19. Widok tagw (dostpno, wcag, www) w domylnym szablonie Wordpress
Dodatkowe uatwienia
Zastosowanie pewnych uatwie w serwisie pozwoli wielu osobom niepenosprawnym lub starszym na komfort pracy. Na przykad warto wykorzysta kontrolki do
powikszania tekstu czy zmiany kontrastu. Coraz wicej tego typu mechanizmw
mona spotka na stronach internetowych. Niestety, waciciele serwisu lub programici czsto uwaaj, e s one wyznacznikami dostpnoci strony.
Celem tych mechanizmw jest zwikszenie dostpnoci serwisu, a jednoczenie
zapewnienie duej grupie odbiorcw wikszego komfortu pracy. Mog z nich skorzysta nie tylko osoby niedowidzce, ale take te, ktre pracuj na komputerze
np. wciemnym pomieszczeniu, w ktrym jasne to ekranu monitora szybko mczy
wzrok. Powinny odnie z nich korzy rwnie osoby starsze, ktre dopiero zaczynaj poznawa nowe technologie. Mog nie zna dobrze skrtw klawiaturowych
w danej przegldarce, dziki ktrym mona powiksza tekst. Nie moemy te zakada, e kady uytkownik Internetu doskonale zna swj system i wszystkie opcje
przegldarki.
Warto pomyle o dodatkowych uatwieniach, a wczeniej zadba o to, eby wszystkie elementy strony zostay waciwie opisane.
Na nastpnej stronie prezentujemy przykadowe implementacje dodatkowych uatwie.
38
Rys. 20. Dodatkowe uatwienia w postaci zmiany wielkoci tekstu i kontrastu

[www.aleksandrowkujawski.pup.info.pl, www.widzialni.org, www.bbc.co.uk/accessibility/
(2014-01-20)]
Rzetelny kod HTML i CSS

Przypomnijmy, e wszystkie strony internetowe s oparte o standardy, np. HTML,
CSS, Java Script. Skoro istniej standardy tworzenia stron www, to jest oczywiste, e
naley si do nich stosowa. Niestety, wielu twrcw stron internetowych bagatelizuje ten problem. Uwaaj, e jeli strona wywietla si poprawnie w przegldarce internetowej, to znaczy, e wszystko jest w porzdku. Nie zadaj sobie pytania:
Dlaczego strona wywietla si poprawnie, mimo e w kodzie HTML s bdy? Odpowied jest prosta strona zostaa tak zaprogramowana, eby pomimo bdw
wywietlaa si w odpowiedni sposb. Problem moe si pojawi, kiedy tak stron
zaczn przetwarza technologie asystujce, bardziej wraliwe na bdy. Moe si
wtedy okaza, e strona bdzie le przetworzona, a informacja nie trafi do odbiorcy.
Sumujc podkrelmy, e kod HTML musi by wolny od bdw, co oznacza, e musi
by zgodny z zadeklarowanym typem dokumentu. Jeli twrca zadeklarowa, e serwis zosta napisany w XHTML 1.0, HTML 4.01 czy HTML 5, to taki standard musi spe-
39
nia. atwo mona to sprawdzi, korzystajc z walidatorw23 dostpnych online na

stronach W3C. Walidator kodu HTML znajdziemy na stronie http://validator.w3.org/,
a walidator CSS na http://jigsaw.w3.org/css-validator/.
Poprawny kod HTML i CSS wiadczy o rzetelnoci autora, ktremu nie s obojtne
obowizujce standardy.
Ukrywanie treci
Wiele uwagi powicilimy dotychczas kwestii osadzania na stronie semantycznych
elementw, takich jak nagwki, etykiety do pl formularzy, skip linki itp. Informacje
te w wikszoci przypadkw nie s podane w ostatecznym graficznym wygldzie
strony mog wrcz przeszkadza. Przykadem moe by umieszczenie w dziale
Stosowanie nagwkw nagwka <h2> Menu gwne lub Narzdzia (zob.
zrzut ekranu poniej).
Rys. 21. Graficzny wygld strony www [www.widzialni.org (2014-02-05)]
Na zrzucie ekranu nie wida ani nagwka, ani te etykiety dla pola wyszukiwarki. Oba elementy istniej w kodzie HTML, o czym mona si przekona wyczajc
wprzegldarce style CSS.
23 Walidator (ang. validator) program sprawdzajcy poprawno dokumentu o okrelonej skadni [Wikipedia].
40
Rys. 22. Widok strony z wyczonymi stylami CSS [www.widzialni.org (2014-02-05)]
Dla zaawansowanych czytelnikw zamieszczamy poniej kilka bardzo wanych wskazwek, w jaki sposb mona ukrywa treci, ktre s niezwykle wane dla technologii asystujcych.
W CSS mona uy nastpujcych waciwoci:
visibility: hidden;
display: none;
co pozwoli ukry tekst przed wszystkimi uytkownikami. Tekst zostanie nie tylko usunity z wizualnego przekazu, ale take bdzie ignorowany przez programy czytajce.
Naley unika waciwoci:
width: 0;
height: 0;
poniewa niektre programy czytajce ignoruj elementy opisane w ten sposb.

Aby ukry treci, ktre maj znaczenie dla uytkownikw, mona zastosowa jeden
z poniszych sposobw:
41
.hide {

position:absolute;

top:0;

left:-10000px;

width:1px;

height:1px;
}
.hide {

clip: rect(1px, 1px, 1px, 1px);

display: block;

position: absolute;
}
42
WordPress
WordPress
Co to jest WordPress?
Jedn z najpopularniejszych darmowych platform, sucych do publikowania treci
w Internecie, jest WordPress. Chocia jest to platforma blogowa, to coraz czciej
doskonale sprawdza si w roli programu do tworzenia mniej lub bardziej rozbudowanych stron internetowych. Korzystaj z niego zarwno osoby prywatne, jak
iprzedstawiciele administracji publicznej. To kompletny system CMS, dziki ktremu kady uytkownik moe prowadzi wasn stron internetow.
CMS (ang. Content Management System), czyli system zarzdzania treci, skada
si przewanie z dwch elementw:
panelu administracyjnego do zarzdzania zawartoci, dziki ktremu redaktor

moe na stronie internetowej tworzy rne treci, umieszcza zdjcia i pliki do
pobrania itp., modyfikowa je i usuwa; nie musi przy tym zna jzyka HTML;
aplikacji, ktra wykorzystuje i kompiluje wszystkie informacje, wywietlajc zawarto w przegldarce internetowej.
Wan zalet WordPressa jest jego dua elastyczno. Dziki wygodnemu systemowi tworzenia rozszerze, mona wzbogaci stron www o dodatkowe funkcjonalnoci.
Inn poyteczn zalet jest bardzo dua ilo darmowych bd patnych szablonw graficznych, zwanych skrkami, ktre mona szybko i atwo zainstalowa
zpoziomu panelu administracyjnego. Wykorzystanie systemu szablonowego (ang.
template system) pozwala wszystkim uytkownikom, nawet tym pocztkujcym, zaoszczdzi czas. Na efektywno pracy z wykorzystaniem WordPressa ma rwnie
wpyw szybka, intuicyjna i prosta obsuga.
Architektura WordPressa oparta jest o najpopularniejszy pakiet wolnego oprogramowania24 PHP (obiektowy jzyk programowania) i MySQL (system zarzdzania relacyjnymi bazami danych). Informacja ta jest o tyle istotna, e wybierajc dostawc
24 Wolne Oprogramowanie (ang. free software) oprogramowanie, ktre moe by uruchamiane, kopiowane, rozpowszechniane, analizowane oraz zmieniane i poprawiane przez uytkownikw. rodo:
http://pl.wikipedia.org/wiki/Wolne_Oprogramowanie
43
WordPress
usug internetowych, powinnimy posiada wszystkie potrzebne informacje, aby

mc zainstalowa WordPressa na ich serwerze.
Instalacja
Przypomnijmy jeszcze raz, zanim zaczniemy instalacj WordPressa, powinnimy si
upewni, czy posiadamy odpowiednie oprogramowanie, serwer WWW z obsug
PHP oraz serwer MySQL. Jeli korzystamy z usug firmy hostujcej, nie musimy si
o to martwi, gdy firma powinna dysponowa tego typu oprogramowaniem. Jeli
chcemy natomiast zainstalowa program na lokalnym komputerze, sami musimy
oto zadba. Jest wiele oglnodostpnych serwerw, ktre zawieraj pene pakiety
oprogramowania WordPressa, np. AppServ, WampSerwer, XAMPP i wiele innych,
wybr bdzie zalea od naszych preferencji.
Nastpnym krokiem jest pobranie pakietu instalacyjnego. Pakiet ten dostpny jest
na stronie: http://pl.wordpress.org/.
Rys. 23. Widok przycisku do pobrania Wordpressa do instalacji na wasnym serwerze

[www.pl.wordpress.org (2014-03-08)]
Po rozpakowaniu pakietu zip, trzeba skopiowa jego zawarto na swj serwer

WWW; mona wykorzysta do tego dowolny program FTP25.
Korzystajc z przegldarki internetowej, wystarczy przej do katalogu zawierajcego skopiowane pliki, a nastpnie krok po kroku wykona zalecane dziaania.
Instalacja WordPressa jest bardzo prosta i szybka. Na pocztek naley poda dane
dostpu do bazy danych.
25 FTP (ang. File Transfer Protocol) protok komunikacyjny typu klient-serwer.
44
WordPress
Rys. 24. Widok okna instalacyjnego programu WordPress
Potem naley wpisa tytu strony internetowej, login i haso oraz adres e-mail do
gwnego konta administracyjnego.
Rys. 25. Widok okna instalacyjnego programu WordPress
45
WordPress
Jeli nie mamy swojego serwera, proponujemy inne rozwizanie, ktre ma jednak
i zalety i wady. Mona skorzysta z usugi dostpnej w serwisie WordPress.com.
Tego rodzaju usuga raz na zawsze rozwie problem instalacji i aktualizacji naszej
strony. Ta druga kwestia jest o tyle istotna, e w przypadku rozwiza typu open
source, do ktrych zaliczamy WordPressa, oprogramowanie takie jest szczeglnie
naraone na wszelakiego rodzaju ataki i zoliwe wirusy. Inna zalet jest, e nie musimy si martwi o wykonywanie kopii zapasowych. Dodajmy, e bezpieczestwo
naszej stronie zapewnia m.in. logowanie do serwisu przy uyciu szyfrowania SSL.
Najwiksz wad jest natomiast brak kontroli nad oprogramowaniem i baz danych. Nie bdziemy mogli w przyszoci instalowa wasnych motyww graficznych
(szablonw) ani te ich modyfikowa. Niepokj budzi rwnie fakt, e nie bdziemy
mogli wprowadza adnych usprawnie na stronie, ktre pomogyby zwikszy jej
dostpno.
Wstpna analiza domylnego szablonu

Do wstpnej analizy potrzebna jest przegldarka oraz walidator dostpnoci stron WAVE (lista darmowych walidatorw znajduje si na stronie
http://wave.webaim.org/). Mona te dokonywa analizy, instalujc walidator jako
toolbar dla przegldarki Firefox.
Warto przy tej okazji podkreli, e aden walidator nie jest w stanie sprawdzi
wszystkich elementw strony odpowiadajcych za dostpno. Bdem jest wic
zaoenie, e jeli walidator nie sygnalizuje nam adnych niezgodnoci, to strona jest
dostpna. Na przykad walidator moe zbada, czy obrazek posiada atrybut alt.
Jeli obrazek ma ten atrybut, to bdu nie bdzie, a jeli go nie ma, walidator zgodnie z prawd stwierdzi bd i trzeba bdzie go poprawi. A co si stanie, gdy atrybut
alt istnieje, ale jego zawarto wyglda tak: dsc000983_99x212? Walidator nie
bdzie mg zweryfikowa otrzymanej informacji, moe to zrobi tylko czowiek.
Walidator jest wic tylko narzdziem pomocniczym zarwno dla autorw stron, jak
i dla audytorw, gdy pomaga zidentyfikowa podstawowe, mierzalne problemy.
Dziki walidatorowi zainstalowanemu jako toolbar mona rwnie przeprowadzi
analiz domylnego szablonu. Speniony musi by jednak warunek, e nasz serwis
46
WordPress
nie zosta udostpniony online. Brak adresu internetowego wyklucza bowiem moliwo uycia narzdzia online.
Aby uruchomi walidator, po wpisaniu adresu internetowego wciskamy Errors,
features and alerts. Po chili otrzymamy wyniki badania w postaci kolorowych ikon.
Gdy najedziemy kursorem myszy na jedn z nich, bdziemy mogli przeczyta peny
opis, dostpny w przycisku Icons Key.
Rys. 26. Wynik dziaania walidatora WAVE
Nie wszystkie ikony w domylnym widoku graficznym mog by widoczne, dlatego

warto skorzysta z innej opcji wyczy style Disable styles. Aby dowiedzie si,
jaka jest struktura nagwkw w serwisie, mona wykorzysta przycisk Outline.
Uwzgldnienie tej opcji przez walidator warte jest odnotowania, gdy jest to jeden
z najwaniejszych elementw semantycznych. Aby wrci do oryginalnego widoku,
naley uy przycisku Reset page.
Nagwki
Gdy przyjrzymy si dokadnie naszej stronie, zauwaymy, e w nagwkach panuje
nieporzdek; sygnalizuje to rwnie WAVE.
47
WordPress
Mona wyodrbni kilka nagwkw:
dwa nagwki to nagwki h1,

a nagwki w stopce s w nieodpowiedniej hierarchii.
Rys. 27. Widok struktury nagwkw w domylnym szablonie WordPressa
Jak zatem powinna wyglda struktura nagwkw? Na stronie powinien by jeden

nagwek h1, za pozostae nagwki powinny w uporzdkowany sposb oddawa
struktur serwisu, od najwyszych do najniszych, czyli system zbudowany hierarchicznie.
Rys. 28. Struktura nagwkw po korekcie
Skip linki
Kolejn rzecz, jak moemy zauway w serwisie, s skip linki, a waciwie jeden
skip link Przeskocz do treci. Jak ju wiadomo, elementy tego typu powinno si
umieszcza jako pierwsze, przed wszystkimi treciami. Moemy to zobaczy, gdy
48
WordPress
wyczymy style. Jeden skip link to za mao, naleaoby doda nastpne: Przejd do
menu, Przejd do wyszukiwarki.
Mapa strony i wyszukiwarka

W domylnym szablonie nie ma rwnie mapy strony, a szkoda. Mona zrezygnowa
z jednej wyszukiwarki, poniewa na stronie s a dwie.
Pola formularzy
Sdzc z wygldu, strona prezentuje si przyzwoicie. Przyjrzyjmy si zatem jej dokadniej, zacznijmy od wyszukiwarki, znajdujcej si obok grnego menu. Wykorzystamy do tego doskona wtyczk do Firefoxa Firebug. Pozwala ona na edytowanie
i analizowanie kodu CSS, HTML i JavaScript bezporednio na dowolnej stronie internetowej, lecz, co wane, zmiany nie zostaj nigdzie zapisane.
Rys. 29. Widok fragmentu kodu HTML we wtyczce Firebug
Pierwsze, co si daje atwo zauway, to przycisk wyszukiwarki, ukryty w CSS za

pomoc display: none. Nie bdzie zatem widoczny dla programw czytajcych.
Nastpna rzecz to wielokrotne powtrzenie tych samych informacji. Pole wyszukiwania posiada etykiet <label> Szukaj, do tego dodany jest atrybut title
Szukaj oraz domylne wypenienie pola placeholder Szukaj. Wszystko odczytywane jest razem przez program czytajcy jako: Szukaj, szukaj, pole edycyjne szukaj. Etykiet naley oczywicie pozostawi, natomiast atrybut title nie jest wtym
momencie potrzebny, za atrybut placeholder suy do przekazywania krtkich
podpowiedzi dotyczcych danego pola mona go zamieni na np. Wpisz szukan
fraz.
49
WordPress
Wielokrotne stosowanie na stronie atrybutu title jest do powszechne. Wynika

albo z niewiedzy autora, albo z jego przewiadczenia, e atrybut ten w zupenoci wystarczy, aby zamieci na stronie informacj tekstow. Wystarczy zastosowa
wtyczk WP Accessibility (opisana w dalszej czci poradnika), aby podnie poziom
dostpnoci szablonw. Wtyczka ta moe usuwa atrybut title z szablonw, aby
nie dostarcza uytkownikowi niepotrzebnej, nadmiarowej informacji.
Ukrywanie treci
Ukrywanie innych elementw z szablonu graficznych, moe spowodowa podobny problem jak z niewidocznym przyciskiem wyszukiwarki. Na przykad ukrycie nagwka Menu w CSS za pomoc display: none, sprawi, e nie bdzie on widoczny dla technologii asystujcych.
Kontrast
Przyjrzyjmy si teraz kontrastowi kolorystycznemu. W wikszoci przypadkw jest
dobry, ale gwny tytu strony to biay tekst na wzorzystym tle. Po analizie stwierdzimy, e biay kolor tekstu na tle w rnych odcieniach pomaraczowego jest niewystarczajcy.
Rys. 30. Widok programu CCA z wynikiem sprawdzenia kontrastu
Dodatkowe uatwienia
W podstawowej wersji WordPressa nie ma adnych dodatkowych kontrolek do powikszania tekstu czy zmiany kontrastu.
50
WordPress
Udao nam si do tej pory znale usterki na stronie gwnej i to w podstawowym

szkielecie szablonu. Notabene, w zawsze na pozr dobrze wygldajcym serwisie
mona znale par elementw, ktre mog budzi czyje wtpliwoci. Dlatego po
wykonaniu wszystkich prac redakcyjnych, a przed wyborem szablonu, ktry chcemy
zainstalowa, powinnimy przeprowadzi dodatkow analiz.
Zmiany w domylnym szablonie

Na podstawie wstpnej analizy uruchomionej dystrybucji WordPressa z wykorzystaniem domylnego szablonu graficznego wynika, e na naszej stronie jest kilka bdw, ktre naley wyeliminowa. Poniewa strona ta nie ma jeszcze adnej treci,
bdy musz dotyczy przede wszystkim elementw, na ktre nie moglimy mie
wpywu z poziomu panelu administracyjnego. Musiay one powsta w plikach podczas projektowania szablonu graficznego.
Aby rozwiza wszystkie powstae problemy i wprowadzi poprawki, potrzebna bdzie znajomo znacznikw HTML, arkuszy stylw CSS oraz podstawy jzyka programowania PHP. Naley te odnale odpowiednie pliki, w ktrych trzeba wprowadzi
zmiany. Aby to zrobi, trzeba bliej pozna budow katalogw WordPressa.
Cz drzewa katalogu wyglda nastpujco:
wp-admin/
wp-content/

languages/

plugins/

themes/

twentythirteen/

twentytwelve/

upgrade/

uploads/
wp-includes/
Przejdmy teraz do katalogu /wp-content/themes/twentythirteen. S w nim

wszystkie pliki aktualnego szablonu.
Jeli chcemy podnie poziom dostpnoci naszego szablonu, powinnimy zainstalowa wtyczk WP Accessibility. Mwilimy o tym szerzej na stronie 50. Wtyczk
51
WordPress
mona pobra ze strony https://wordpress.org/plugins/wp-accessibility/. Niestety,

nie jest ona w stanie naprawi automatycznie wszystkich bdw, jedynie usun
kilka. Dodajmy do tego uwag, e wtyczka ta nie wsppracuje z kadym szablonem.
Wtyczk mona konfigurowa z poziomu panelu administracyjnego, a nastpnie aktywowa tylko te udogodnienia, ktre nas interesuj. Moliwoci jest kilka:
usuwanie atrybutw title z wybranych elementw, np. z menu nawigacyjnych,

listy stron, listy kategorii, listy archiwum, chmur tagw, linkw: kategorii, edycji
wpisw lub edycji komentarzy;
dodawanie skip linkw naley poda identyfikator elementu, do ktrego maj
one prowadzi, np.: przeskocz do treci, przeskocz do nawigacji, przeskocz
do mapy strony; mona rwnie zdefiniowa ich wygld w zalenoci od fokusa, ale wymagana jest wwczas znajomo arkuszy styli CSS;
usuwanie innych atrybutw, np.:
52
target, ktry odpowiada najczciej za otwierania linkw w nowym oknie;

tabindex, ktry odpowiada za ustalanie kolejnoci poruszania si po ser-
wisie przy uyciu klawiatury; przy odpowiedniej kolejnoci informacji jest

on zbdny i zamiast pomc, moe zaszkodzi;
wczanie uzupeniania linkw, np. czytaj wicej; linki zostan uzupenione
otytu wpisu;
dodanie kontrolki zmiany kontrastu i wielkoci czcionki. Ten element w uruchomionym domylnym szablonie nie dziaa zbyt poprawnie, gdy kontrolka
powikszania czcionki j pomniejsza. W wysokim kontracie nie wida wszystkich elementw, a zmiana odcieni szaroci nie dziaa w przegldarce Firefox czy
Opera;
dodanie obrysu do elementw z fokusem klawiatury; kolor wpisywany jest hexadecymalnie;
przetestowanie zestawienia kolorystycznego. Wtyczka bada kontrast pomidzy
kolorem tekstu a kolorem ta. Wynik pokazuje wskanik kontrastu oraz jakiemu
poziomowi WCAG odpowiada.
WordPress
Rys. 31. Widok badania kontrastu wtyczk WP Accessibility
Edycja treci w panelu administracyjnym

Edytowanie treci wpisw lub stron w WordPressie jest moliwe dziki edytorowi
tekstu TinyMCE. Edytor ten posiada podstawowe moliwoci edycji tekstu, w wikszoci znane z innych edytorw tekstu. Niestety, zabrako w nim kilku przydatnych
funkcji, np. wstawiania i modyfikowania tabel. Na cae szczcie mona pracowa
wdwch trybach: wizualnym i tekstowym (HTML).
Tryb wizualny to inaczej tryb WYSIWYG (skrt od ang. What You See Is What You
Get), czyli otrzymujesz to, co widzisz. Tre, aktualnie formatowana w polu edytora (krj czcionki, rozmiar, kolor, ukad itp.), wywietli si mniej wicej tak samo
na stronie.
Rys. 32. Widok standardowego edytora tekstu
Na grnym pasku menu edytora znajduj si ikony, ktre w wikszoci przypadkw

odpowiadaj za wstawianie semantycznych znacznikw HTML (por. rys. 35). Dziaanie niektrych z nich wie si z odpowiednim formatowaniem, ale, jak pisalimy
53
WordPress
wczeniej, chodzi bardziej o nadanie im znaczenia. Dlatego z punktu widzenia redaktora strony internetowej za konieczne uznajemy poznanie wszystkich ikon oraz
zasad ich dziaania.
Tekst pogrubiony lub pochyy
Dwie pierwsze ikony w menu umoliwiaj pogrubienie i pochylenie tekstu. Ikony te
posiadaj dodatkow waciwo przekazuj informacj o wanoci tekstu. Pierwsza ikona wstawia znacznik <strong> (mocne wyrnienie), informujcy e tekst
jest bardzo wany. Druga z nich wstawia znacznik <em> (wyrnienie), wskazujcy
e tekst jest wany. Dla uytkownikw niewidomych ma to istotne znaczenie, gdy
dziki tym znacznikom programy czytajce mog zmieni odpowiednio intonacj
gosu lektora i w ten sposb wyrni fragmenty tekstu.
Jeli nie zaley nam tylko na sformatowaniu tekstu, lecz chcemy zwrci uwag
uytkownika na jakie informacje, powinnimy uy tych wanie znacznikw. Naley jednak uwaa, aby obu wyrnie nie stosowa zbyt czsto. Jeli bdzie ich za
duo, to tre stanie si mao czytelna.
Do wyrnienia cytowanego tekstu czsto stosuje si kursyw, czyli pismo pochye,
co jest z praktyk. Do cytatw suy zupenie inny znacznik. Wyrnienia pismem
pochyym powinny by stosowane z umiarem, aby nie utrudnia odbioru treci osobom niedowidzcym i dyslektykom. Decydujc si na takie rozwizanie, trzeba pamita, e tekst nie moe by przeadowany wyrnieniami, gdy osoby z dysleksj
mog go nie przeczyta.
Przekrelenie
Wyrnienie tekstu w postaci przekrelenia, podobnie jak w przykadzie powyej,
dostarcza uytkownikom dodatkow informacj o wprowadzonych w tekcie zmianach. Wstawienie znacznika <del> mwi, e dany fragment tekstu zosta usunity
i jest ju nieaktualny. W trybie tekstowym znacznikowi temu towarzyszy atrybut
datetime, ktry zawiera aktualn dat i godzin.
54
WordPress
Lista wypunktowana i lista uporzdkowana

O listach wypunktowanej i uporzdkowanej bya mowa na s. 27, 28 i 29. Stosuje
si je do pogrupowania wszelkich informacji, dziki czemu tekst jest bardziej zrozumiay i uporzdkowany oraz jednolity ze wzgldw estetycznych. W listach mona
rwnie wprowadza dodatkowe zagniedenia przez uycie przyciskw Wcicie
iZmniejsz wcicie.
Blok cytatu
Ikony blok cytatu uywa si najczciej, gdy chcemy powoa si na jakie rdo lub zacytowa dusz wypowied. Ikona ta wstawia znacznik <blockquote>.
Domylne formatowanie to pochylenie i wcicie tekstu. Wyrnianie cytatw jest
bardzo istotne, gdy umoliwia programowi czytajcemu przekaza w sposb prawidowy informacj osobom niewidomym, co w konsekwencji pozwoli im zrozumie tekst.
Wyrwnaj tekst do lewej, wyrodkuj, wyrwnaj do prawej
Sprawa wyglda inaczej wwczas, gdy chcemy wyrwna tekst wzgldem marginesw. Nie s wstawiane znaczniki semantyczne. Wyrwnanie tekstu ma znaczenie czysto wizualne, dlatego te do istniejcych znacznikw HTML dodawany jest
atrybut style z definicjami CSS. Dla technologii asystujcych nie bdzie to miao
adnego znaczenia.
Po to, aby osoba niedowidzca moga przeczyta tekst, nie zaleca si stosowania
wyrodkowywania lub wyrwnania do prawego marginesu. Jeli korzysta ona z bardzo duego powikszenia, widzi na ekranie zaledwie par wyrazw. Kady wiersz
odczytuje zaczynajc od lewej strony i idc do prawej. A kiedy chce przej do nastpnego wiersza, musi przesun lup w lewo. Gdy tekst bdzie wycentrowany
lub wyrwnany do prawego marginesu, kady nastpny wiersz bdzie zaczyna si
winnym miejscu, a to w znacznym stopniu utrudni czytania.
55
WordPress
Wstaw lub usu odnonik

Do najwaniejszych elementw nawigacyjnych stron internetowych nale odnoniki. Ich tre musi by zrozumiaa, powinny informowa uytkownika, dokd maj go
zaprowadzi lub jak akcj maj wykona. Jeeli na stronie chcemy wstawi odnonik, podajemy adres URL lub wybieramy go spord zdefiniowanych wWordPressie stron. Mona rwnie poda tytu (tre zostanie dodana do atrybutu title).
Wypenienie tego pola nie jest obowizkowe, naley si wic zastanowi, czy tytu
jest konieczny. Poza tym, nie ma potrzeby powielania treci linku w tytule.
Naley te zdecydowa, czy link ma si otwiera w nowym oknie. Najlepszym rozwizaniem jest niewczanie tej opcji, ale jeli ju musi by wczona, to w treci
linku powinnimy poinformowa o tym uytkownika.
Rys. 33. Widok okienka wstawiania odnonika
Styl tekstu: lista rozwijana

W drugim wierszu menu umieszczone zostay ikony do edycji treci. Na pierwszej
pozycji mamy list rozwijan, dziki ktrej moemy definiowa nagwki lub akapity.
Pomimo e szkielet szablonu naszego systemu posiada ju odpowiedni struktur
nagwkw, musimy sami mamy na myli redaktora zadba o jednolite nagwki
w caym tekcie. Oczywicie, nie do kadego tekstu da si wprowadzi nagwki, ale
jeli jest zbyt dugi lub zrnicowany tematycznie i mona go podzieli na sekcje, to
naley to zrobi.
Naley jednak pamita, e tre, ktr umieszczamy, zostaa ju wstawiona do
oglnej struktury nagwkw naszego szablonu. Jak zatem naley wstawia nagwki? Przede wszystkim naley si zorientowa, ktry z nagwkw generuje WordPress w naszym szablonie, z ktrego jest poziomu, jak nazywa si strona lub wpis.
Z pomoc przyjdzie nam walidator WAVE, ktry przedstawi nam aktualn struktur
nagwkw.
56
WordPress
Rys. 34. Widok struktury nagwkw
Gdy wczymy widok struktury nagwkw, zobaczymy, e tytu edytowanej podstrony, Przykadowa strona, oznaczony jest nagwkiem <h2>. Oznacza to, e nastpnym nagwkiem dzielcym tre na sekcje bdzie nagwek <h3>. Na zrzucie
ekranu wida, e w ten sposb zostay osadzone sekcje Przykad wpisu o mnie
oraz Przykad wpisu o firmie. Poziom nagwka bdzie zalea od sposobu, w jaki
zosta zaprojektowany uywany przez nas szablon. Powysz zasad musi zna redaktor strony.
Styl tekstu: podkrel, wyjustuj, zmie kolor
Stosowanie kontrolek do zmian wygldu tekstu jest rozwizaniem wygodnym. Naley jednak uywa ich z umiarem i tylko w razie koniecznoci. Podkrelanie zbyt duej
iloci tekstu, podobnie jak wyrnianie za pomoc pisma pgrubego albo kursywy,
utrudni jego odczytanie i zrozumienie. Poza tym moe wprowadzi w bd uytkownikw, poniewa podkrelenie tekstu jak wiemy jest zarezerwowane na stronach
internetowych do oznaczania odnonikw.
Justowanie tekstu, podobnie jak wyrwnanie do prawej i centrowanie, take nie
jest zalecane. Midzy wyrazami mog wwczas powsta due odstpy, co zaburzy
lini tekstu, a przez to utrudni korzystanie z serwisu uytkownikom niedowidzcym.
Nie bez znaczenia bdzie rwnie zmiana kolorw na stronie. Musimy uwaa, aby
zastosowany kolor mia odpowiedni kontrast w stosunku do ta, na ktrym si znajduje.
57
WordPress
Wklej jako tekst, wklej z Worda

Funkcjonalnoci wklej jako tekst oraz wklej z Worda s bardzo przydatne, gdy
kopiujemy tre z innych rde. Wyobramy sobie tak sytuacj: chcemy zaznaczy
fragment tekstu na jakiej innej stronie internetowej. Wiemy, e tre w Internecie
przedstawiana jest przy uyciu kodu HTML, wic gdy chcemy skopiowa tre, razem z ni kopiuje si te kod. Zaznaczajc tekst nie wiemy natomiast, ktre znaczniki
HTML nam si udao zahaczy. Mog te znale si tam rne warstwy <div>,
<span>, nagwki niepasujce do naszej struktury oraz wiele innych. Najlepiej
wtakiej sytuacji uy ikony Wklej jako tekst. Dziaa ona podobnie jak systemowy
notatnik, wkleja czysty tekst. Dopiero potem moemy dostosowa tekst do naszej
strony. Niestety wielu redaktorw, najczciej z braku czasu, a czasem te z niewiedzy, wkleja bezporednio skopiowan tre w okno edytora, co powoduje potem
nieoczekiwane kopoty.
Czsto na stronach internetowych publikuje si informacje opracowane wczeniej
w edytorze tekstu, np. Microsoft Word. Przy wklejaniu treci z Worda do edytora
systemu CMS obowizuje ta sama zasada jak wyej, z t rnic, e uywa si ikony
Wklej z Worda, ktra pozbywa si niepotrzebnego formatowania. MS Word stosuje take wiele wasnych znacznikw, ktre dostaj si na stron i j zamiecaj.
Skutkiem tego nasz kod HTML otrzymuje niepotrzebne informacje, ktre mog spowodowa bdy podczas walidacji jego poprawnoci. Dodatkowo takie niepotrzebne znaczniki Worda mog zajmowa duo miejsca w naszej bazie danych, moe by
ich naprawd wiele.
Usu formatowanie
Bardzo przydatn funkcjonalnoci jest usuwanie wszelkiego formatowania tekstu.
Wykonujc t operacj, nie pozbywamy si wcale znacznikw semantycznych, ale
tylko ich waciwoci, ktre zostay nadane przy uyciu arkuszy stylw CSS.
Wstaw znak specjalny
Do wstawienia na stronie znaku, ktry nie wystpuje na standardowej klawiaturze,
suy kontrolka wstaw znak specjalny. Jeli edytor tekstowy jest w trybie wizual-
58
WordPress
nym, a chcemy wstawi inne znaczniki HTML, moemy to zrobi przeczajc si na

tryb tekstowy. W tym trybie powtrzone zostay niektre z funkcjonalnoci.
Zrozumiay tekst
Przed prezentacj treci na stronie internetowej warto zapozna si z kilkoma wskazwkami:
Unikaj obszernych tekstw oraz dziel tekst na krtkie akapity.

Uywaj zrozumiaych sw, ktre s powszechnie uywane.
Unikaj argonu jzykowego.
Unikaj skrtowcw. Jeli ju musisz je wprowadzi, przy pierwszym zastosowaniu wyjanij, co oznaczaj.
Unikaj zda wielokrotnie zoonych. Tekst skadajcy si z krtkich zda bdzie
bardziej przyjazny dla uytkownika.
Nie popeniaj bdw ortograficznych, gramatycznych oraz interpunkcyjnych.
Stosuj rdtytuy w postaci nagwkw oraz dziel tekst na sekcje.
Unikaj w wikszych fragmentach tekstu pisma pgrubego, kursywy i podkrelenia.
59
WordPress
Przykady niedostpnych szablonw

WordPress posiada niezliczon ilo szablonw graficznych. Czasem trudno jest zdecydowa si na jedno konkretne miejsce, aby dokona analizy ich dostpnoci. eby
daleko nie szuka, wybierzmy dwa z najbardziej popularnych szablonw na stronie
http://wordpress.org/themes/ i przyjrzyjmy si im bliej. Oto one:
Twenty Eleven
Rys. 35. Szablon Twenty Eleven [www.wordpress.org/themes/ (2014-03-01)]
Oto najczciej pojawiajce si bdy:
60
nieprawidowa hierarchia nagwkw;

obrazek na banerze na grze strony ma peni rol odnonika, ale posiada pusty
atrybut alt;
nawigowanie przy uyciu klawiatury nie pozwala przej do rozwijanego grnego menu;
pola formularza nie posiadaj etykiet <label>;
przyciski wyszukiwarki s ukryte s w CSS za pomoc display: none;
kontrast niebieskich linkw w stosunku do ta nie jest wystarczajcy;
szablon nie posiada adnych dodatkowych uatwie w postaci zmiany kontrastu
czy powikszenia czcionki;
skip linki top, ktre pojawiaj si pod poszczeglnymi treciami, nie dziaaj;
brak mapy strony.
WordPress
Alexandria
Rys. 36. Szablon Alexandria [www.wordpress.org/themes/ (2014-03-01)]
Oto najczciej pojawiajce si bdy:
nieprawidowa hierarchia nagwkw, za duo nagwkw h1;

za mao skip linkw;
obrazki w grnym banerze oraz przy artykuach nie posiadaj atrybutu alt;
odnoniki nie wyrniaj si w tekcie, co stanowi olbrzymie utrudnienie dla
wszystkich uytkownikw przykadem moe by odnonik test link (zob. rys. 36).
Dodatkowo, po najechaniu kursorem myszy na jeden z linkw znajdujcych si
w prawej kolumnie, nic si nie dzieje. Dopiero gdy kursor strzaki zmieni si
w apk, uytkownik bdzie mg pozna, e ma do czynienia z linkiem;
pola formularza nie posiadaj etykiet <label>;
kontrast treci w stopce w stosunku do ta nie jest wystarczajcy;
szablon nie posiada adnych dodatkowych uatwie w postaci zmiany kontrastu
czy powikszenia czcionki;
skip linki top, ktre pojawiaj si pod poszczeglnymi treciami, nie dziaaj;
brak mapy strony.
atwo zauway, e bdy wystpujce w naszym domylnym szablonie, jak rwnie

w dwch innych szablonach do pobrania, powtarzaj si. Z bada i audytw przeprowadzonych przez Fundacj Widzialni, a take wedug ich rankingw, wynika, e
takie problemy wystpuj na stronach internetowych bardzo czsto; WordPress nie
jest wic wyjtkiem. Cho wygld i funkcjonalno stron internetowych cay czas
61
WordPress
si poprawia, jednak jako semantyki kodu HTML nadal odbiega od standardw.

Naley wic zwrci uwag na dwie sprawy.
Pierwsz wan sprawa jest dostpno serwisu. Analizujc szablony WordPressa,
musimy odpowiedzie sobie na wiele elementarnych pyta. Wszystkie nasze uwagi
i zastrzeenia, oparte na logicznych przesankach, pomog nam stworzy solidny
fundament, na ktrym bdziemy mogli zbudowa dostpn stron. Zastanwmy
si przez chwil, jakie korzyci moe przynie wprowadzenie na stronie rozwiza
w postaci np. filmw z napisami, tumaczenia migowego czy dodatkowych uatwie
rodzaju zmiana kontrastu czy wielkoci czcionek, skoro linki prowadzce do nich
bd przedstawione jako obrazki bez atrybutu alt? Caa bardzo czasochonna praca nad najbardziej zaawansowanymi elementami serwisu, a wyposaenie filmw
wnapisy do takich naley, bdzie bezowocna, poniewa strona nadal bdzie niedostpna.
Drug wan spraw s kompetencje uytkownikw. Bardzo czsto w serwisach internetowych pojawiaj si bdy, ktre utrudniaj odbir informacji. Mimo to wielu
uytkownikw jest w stanie dotrze do podanej informacji. Nie kady internauta
musi by ekspertem w zakresie obsugi sprztu, oprogramowania czy te specjalist
od Internetu. Jak ju wielokrotnie wspominalimy, dostpno to rwnie funkcjonalno i zrozumienie dziaania stron www.
Jeli dobrze przyjrzymy si zidentyfikowanym przez nas problemom, okae si, e
wprowadzenie poprawek nie bdzie czasochonne i trudne do wdroenia.
Twrcy serwisw nie zawsze wiedz, ktre elementy strony www s najwaniejsze. Aby ich przedsiwzicie miao szanse powodzenia, powinni podj dziaania,
ktre przyczyni si do poprawnego odczytania przekazywanych treci przez osoby
z dysfunkcjami lub starsze oraz te, ktre korzystaj z urzdze mobilnych, a take
zapewni im waciw nawigacj w serwisie.
62
Przydatne narzdzia
1. W
alidator (X)HTML, http://validator.w3.org/ Walidator poprawnoci kodu
(X)HTML.
2. Walidator CSS, http://jigsaw.w3.org/css-validator/ Walidator poprawnoci
kaskadowych arkuszy stylw CSS.
3. WAVE, http://wave.webaim.org/ Walidator dostpnoci stron; dostpny
rwnie jako wtyczka do Przegldarki FireFox (http://wave.webaim.org/toolbar/).
4. Colour Contrast Analyzer,
http://www.paciellogroup.com/resources/contrastAnalyser Darmowy i prosty program do sprawdzania kontrastu.
5. PDF Accessibility Checker (PAC),
http://www.access-for-all.ch/en/pdf-lab/pdf-accessibility-checker-pac.htmlDarmowy program sprawdzajcy dostpno dokumentw PDF.
6. NVDA, http://www.nvda.pl/ Darmowy program czytajcy dla uytkownikw
niewidomych i niedowidzcych.
7. Notepad++, http://notepad-plus-plus.org Darmowy edytor kodw rdowych z implementacj wielu jzykw programowania.
63
Lista kontrolna WCAG 2.0

ZASADA 1. POSTRZEGALNO
Informacje oraz komponenty interfejsu uytkownika musz by przedstawione
uytkownikom w sposb dostpny dla ich zmysw.
Wytyczna 1.1. Alternatywa w postaci tekstu:
Dla kadej treci nietekstowej naley dostarczy alternatywn tre w formie tekstu,
ktra moe by zamieniona przez uytkownika w inne formy (np. powikszony druk,
brajl, mowa syntetyczna, symbole lub jzyk uproszczony).
Kryterium sukcesu
1.1.1. Tre nietekstowa (A)
Zalecenia
Sprawdzenie wszystkich elementw nietekstowych umieszczonych na stronie internetowej,
takich jak: zdjcia, obrazki ozdobne, ikony,
wykresy, animacje, CAPTCHA, pola formularzy,
aktywne mapy graficzne, ASCII Art, Leet speak
itp. pod ktem, czy s wyposaone w tekst alternatywny, aby mogy by przetworzone przez
oprogramowanie uytkownika i dostarczy
wszystkich informacji, jakie ze sob nios.
Wytyczna 1.2. Media zmienne w czasie:

Naley dostarczy alternatyw dla mediw zmiennych w czasie.
64
Kryterium sukcesu
Zalecenia
1.2.1. Tylko audio lub tylko wi- Sprawdzenie transkrypcji opisowej nagranego
deo (nagranie) (A)
dwiku dla wszystkich nagranych materiaw

dwikowych (nietransmitowanych na ywo)
iwideo publikowanych na stronie, np. podcasty
dwikowe, pliki mp3 itp.
Sprawdzenie opisu tekstowego lub dwikowego dla materiaw wideo (nietransmitowanych
na ywo), ktre nie zawieraj cieki dwikowej.
1.2.2. Napisy rozszerzone (na- Sprawdzenie napisw (dialogw, informacji

granie) (A)
dwikowych) dla wszystkich opublikowanych
na stronie materiaw wideo (nietransmitowanych na ywo).
1.2.3. Audiodeskrypcja lub al- Sprawdzenie, czy dla mediw zmiennych w czaternatywa dla mediw (nagra- sie zostaa przygotowana tre alternatywna,
nie) (A)
opisujca t sam histori i przedstawiajca te
same informacje, co opublikowany materia,
oraz czy obejmuje ona wszystkie wane dialogi
i dziaania, jak rwnie wygld otoczenia, ktre
s czci historii.
1.2.4. Napisy rozszerzone (na Sprawdzenie, czy dla kadej treci multimedialywo) (AA)
nej, udostpnianej na ywo (materiay tylko
dwikowe, webcasty, wideokonferencje itd.),
istniej napisy zsynchronizowane z dwikiem.
1.2.5. Audiodeskrypcja (nagra- Sprawdzenie, czy prezentowany materia wideo
nie) (AA)
zawiera ciek audio (w mowie), aby osoby
niewidome mogy go zrozumie lub czy istnieje
opcja jej wczenia.
65
Kryterium sukcesu
Zalecenia
1.2.6. Jzyk migowy (nagranie) Sprawdzenie, czy treci multimedialne posiada(AAA)
jce dwik zawieraj tumacza, przedstawiajcego informacje w jzyku migowym.
1.2.7. Rozszerzona audiode- Sprawdzenie, czy dla materiaw wideo, w ktskrypcja (nagranie) (AAA)
rych nie mona doda cieki z audiodeskrypcj z powodu synchronizacji cieki dwikowej
(np. nie ma pauz w ciece audio), zapewnione
s alternatywne wersje wideo z pauzami.
1.2.8. Alternatywa dla mediw Sprawdzenie, czy wszystkie udostpnione na
(nagranie) (AAA)
stronie treci multimedialne, posiadajce ciek wideo, maj transkrypcj opisow.
1.2.9. Tylko audio (na ywo)
Sprawdzenie, czy treci dwikowe prezentowane na ywo zawieraj transkrypcj opisow

w formie tekstowej.
Wytyczna 1.3. Moliwo adaptacji:

Twrz treci, ktre mog by prezentowane na rne sposoby (np. uproszczony
ukad), bez utraty informacji czy struktury.
66
Kryterium sukcesu
1.3.1. Informacje i relacje (A)
Zalecenia
Sprawdzenie sposobu zastosowania semantycznych znacznikw HTML, dziki ktrym
technologie asystujce, takie jak np. programy
czytajce (screen readers), uywane przez osoby niewidome i niedowidzce, mog w prawidowy sposb zinterpretowa i odczyta tre
strony. Gwny nacisk pooony jest na sprawdzenie zastosowania nagwkw w odpowiedniej hierarchii, etykiet dla pl formularzy, list
do grupowania linkw, np. menu, tytuw i nagwkw dla tabeli.
1.3.2. Zrozumiaa kolejno (A)
Sprawdzenie, czy sekwencja nawigacji oraz czytania, okrelona za pomoc kolejnoci w kodzie
HTML, jest logiczna i intuicyjna.
1.3.3. Waciwoci zmysowe Sprawdzenie, czy elementy nawigacyjne oraz

(A)
komunikaty na stronie www, nie polegaj tylko
na charakterystykach zmysowych komponentw. Nie zale od ksztatu, lokalizacji wizualnej
lub miejsca czy dwiku.
Wytyczna 1.4. Moliwo rozrnienia:

Uytkownik powinien mc dobrze widzie bd sysze treci mie moliwo
oddzielenia informacji od ta.
Kryterium sukcesu
1.4.1. Uycie koloru (A)
Zalecenia
Sprawdzenie, czy rozrnianie elementw wizualnych oraz przekazywanie treci jest zalene
tylko od koloru, np. wymagane pola formularzy.
67
Kryterium sukcesu
1.4.2.
Kontrola
dwiku (A)
Zalecenia
odtwarzania Sprawdzenie, czy zaraz po wczytaniu strony

www odtwarzany jest dwik, np. zaczyna gra
muzyka lub inny podkad dwikowy, automatycznie odtwarza si film reklamowy itp. Dla
uytkownikw niewidomych dwiki odtwarzane na stronie bd nakada si z gosem
lektora programu czytajcego, utrudniajc jego
zrozumienie.
Jeli dwiki trwaj duej ni 3 sekundy, sprawdzenie, czy istnieje mechanizm, dziki ktremu
uytkownik bdzie mg je zatrzyma, spauzowa, wyciszy lub zmieni gono.
1.4.3.
(AA)
Kontrast
(minimalny) Sprawdzenie, czy kontrast pomidzy tekstem

lub grafikami tekstowymi a tem jest w stosunku 4,5:1. Do sprawdzenia kontrastu mona uy
prostego programu np. Contrast Analyser, dostpnego na stronie http://www.paciellogroup.
com/resources/contrast-analyser.html.
W przypadku niewystarczajcego kontrastu,
sprawdzenie, czy istniej kontrolki, ktre przecz serwis w wysoki kontrast. Jeli takie istniej, sprawdzana jest wersja w wysokim kontracie, czy posiada tak sam funkcjonalno,
tak sam zawarto, spenia wymagania kontrastu.
Sprawdzenie, czy po przeczeniu systemy MS
Windows w tryb wysokiego kontrastu wszystkie elementy strony s widoczne i moliwe do
obsuenia.
68
Kryterium sukcesu
Zalecenia
1.4.4. Zmiana rozmiaru tekstu Sprawdzenie, czy po powikszeniu w przegl(AA)
darce rozmiaru czcionki do 200% nie nastpuje

utrata zawartoci lub funkcjonalnoci serwisu, np. obcinane s fragmenty tekstw, funkcjonalne elementy uciekaj poza krawdzie
przegldarki itp. Sprawdzenie, czy na stronie
internetowej s udostpnione mechanizmy,
polegajce na stopniowym powikszaniu rozmiaru tekstu.
1.4.5. Obrazy tekstu (AA)
Sprawdzenie, czy treci przedstawione s za

pomoc grafiki, jeli ta sama prezentacja wizualna moe by zaprezentowana jedynie przy
uyciu tekstu. Wyjtkiem jest tekst, ktry jest
czci logo lub nazwy wasnej produktu.
1.4.6, Wzmocniony kontrast Sprawdzenie, czy kontrast pomidzy tekstem

(AAA)
lub grafikami tekstowymi a tem jest w stosunku 7:1.
69
Kryterium sukcesu
Zalecenia
1.4.7. Niska gono lub brak Sprawdzenie, czy dla udostpnionych na strota dwikowego (AAA)
nie internetowej nastpujcych rodzajw nagra audio, ktre zawieraj gwnie mow, nie
s CAPTCHA w postaci audio, nie s utworami
muzycznymi, nagranie audio nie zawiera w tle
utrudniajcych w odbiorze dwikw.
Sprawdzenie, czy dwiki w tle mog zosta wyczone przez uytkownika.
Sprawdzenie, czy gono dwikw w tle jest
przynajmniej o 20 decybeli mniejsza (4 razy cichsze) ni gono mowy, ktra stanowi gwn tre nagrania. Wyjtkiem mog by sporadyczne, jedno- lub dwusekundowe wstawki
dwikowe.
1.4.8.
(AAA)
Prezentacja
wizualna Sprawdzenie, czy tekst na stronie internetowej

przedstawiony jest w taki sposb, aby uytkownicy z problemami kognitywnymi (poznawczymi), trudnociami w uczeniu si, wadami wzroku itp. nie mieli problemw z jego odczytaniem,
np. kolory na pierwszym planie oraz kolory ta
mog by wybierane przez uytkownika, szeroko tekstu nie przekracza 80 znakw, tekst
nie jest wyjustowany, interlinia wynosi przynajmniej 150%.
1.4.9. Obrazy tekstu (bez wyjt- Sprawdzenie, czy grafiki tekstowe zostay uykw) (AAA)
te jedynie jako dekoracje, niemajce znaczenia
lub czy informacja nie moe zosta przekazana
w inny sposb, np. gdy tekst jest czci logo
lub nazwy wasnej produktu (marki).
70
ZASADA 2. FUNKCJONALNO
Komponenty interfejsu uytkownika oraz nawigacja musz by funkcjonalne (powinny pozwala na interakcj).
Wytyczna 2.1. Dostpno z klawiatury:
Zapewnij dostpno wszystkich funkcjonalnoci za pomoc klawiatury.
Kryterium sukcesu
2.1.1. Klawiatura (A)
Zalecenia
Sprawdzenie, czy kady element serwisu i jego
funkcjonalno dostpne s przy uyciu klawiatury, z wyjtkiem tych, ktre konwencjonalnie
nie mog by wykonane klawiatur (np. rysunek odrczny).
Sprawdzenie, czy zostay uyte niezalecane
skrty klawiaturowe (access keys), ktre mog
wchodzi w konflikt z istniejcymi w przegldarce czy programie czytajcym.
2.1.2. Brak puapki na klawiatu- Sprawdzenie, czy uytkownik moe porusza

r (A)
si po wszystkich elementach nawigacyjnych
strony, uywajc jedynie klawiatury oraz czy
istnieje blokada, ktra wymusi na uytkowniku
wykonanie jakiej akcji myszk, aby przej do
nastpnego aktywnego elementu.
2.1.3. Klawiatura (bez wyjt- Sprawdzenie, czy caa funkcjonalno strony
kw) (AAA)
dostpna jest przy uyciu klawiatury, bez adnych wyjtkw.
71
Wytyczna 2.2. Wystarczajca ilo czasu:

Zapewnij uytkownikom wystarczajco duo czasu na przeczytanie i skorzystanie z
treci.
Kryterium sukcesu
Zalecenia
2.2.1. Moliwo dostosowania Sprawdzenie, czy uytkownik dysponuje wyczasu (A)

starczajco du iloci czasu, aby wykona
czynnoci, bez niespodziewanych zmian treci,
ktre mog by wynikiem naoonego limitu
czasowego. Jeli strona lub aplikacja ma limit
czasowy na wykonanie danego zadania, nastpuje sprawdzenie czy istnieje opcja jego wyczenia, ustawienia lub zwikszenia. Wyjtkiem
s zdarzenia zachodzce w czasie rzeczywistym
(np. aukcje), gdzie limit czasowy jest absolutnie
konieczny lub gdy okres czasu wynosi ponad 20
godzin.
2.2.2. Wstrzymywanie (pauza), Sprawdzenie, czy wszystkie informacje, ktre
zatrzymywanie, ukrywanie (A) s automatycznie przesuwane i widoczne duej ni 5 sekund lub automatycznie si aktualizuj oraz przedstawione s rwnolegle z inn
treci, posiadaj mechanizm, ktry pozwoli
na ich zatrzymanie, wstrzymanie lub ukrycie.
Wyjtkiem moe by sytuacja, w ktrej przesuwanie lub mruganie jest integraln czci wykonywanej operacji, np. animacja, ktra pojawia si w trakcie adowania treci, poniewa jej
zatrzymanie bdzie sugerowao, e adowanie
treci zostao przerwane.
Ruch lub miganie moe by uyte w celu zwrcenia uwagi uytkownika lub wyrnienia treci, pod warunkiem, e trwa krcej ni 3 sekundy.
72
Kryterium sukcesu
Zalecenia
2.2.3. Brak ogranicze czaso- Sprawdzenie, czy uytkownicy posiadaj tyle

wych (AAA)
czasu, ile potrzebuj na wykonanie okrelonego zadania na stronie internetowej oraz czy
adna funkcjonalno nie posiada limitu czasu.
2.2.4. Zakcenie pracy uyt- Sprawdzenie, czy mechanizmy, ktre mog rozkownika (AAA)
prasza uytkownika i przeszkadza podczas
wykonywania czynnoci w serwisie (komunikaty, informacje , itp.), maj moliwo odoenia
w czasie lub wyczenia. Pomin mona pilne
alarmy lub potwierdzenia w czasie dokonywania zmian.
2.2.5. Ponowne potwierdzenie Sprawdzenie, czy uytkownik moe kontynuautentycznoci (AAA)
owa czynnoci bez utraty danych z aktualnej
strony w momencie, kiedy skoczy si czas autoryzowanej przez niego sesji oraz system poprosi o ponown autoryzacj.
Wytyczna 2.3. Ataki padaczki:

Nie naley projektowa treci w taki sposb, aby prowokowa ataki padaczki.
Kryterium sukcesu
Zalecenia
2.3.1. Trzy byski lub wartoci Sprawdzenie, czy istniej treci zwikszajce
poniej progu (A)
ryzyko napadu padaczki poprzez oddziaywanie na ukad nerwowy czowieka, ktre migaj
wicej ni 3 razy na sekund i zawieraj duo
czerwieni.
2.3.2. Trzy byski (AAA)
Sprawdzenie, czy w serwisie nie ma adnych

elementw, ktre migaj z wiksz czstotliwoci ni trzy razy na sekund.
73
Wytyczna 2.4. Moliwo nawigacji:

Dostarczenie narzdzi uatwiajcych uytkownikowi nawigowanie, znajdowanie treci i ustalanie, gdzie si w danym momencie znajduje.
Kryterium sukcesu
Zalecenia
2.4.1. Moliwo pominicia Sprawdzenie, czy pierwsz informacj wywieblokw (A)

tlon przez przegldark (informacja ta niekoniecznie musi by widoczna w serwisie) jest
menu, suce do przechodzenia do istotnych
treci serwisu za pomoc kotwic (skiplinks), bez
przeadownia strony.
2.4.2. Tytuy stron (A)
Sprawdzenie, czy kada podstrona serwisu internetowego posiada unikalny i sensowny tytu.
2.4.3. Kolejno fokusa (A)
Sprawdzenie, czy kolejno nawigacji po linkach, elementach formularzy itp. jest logiczna
i intuicyjna.
2.4.4. Cel linku (w kontekcie) Sprawdzenie, czy wszystkie elementy aktywne,

(A)
takie jak linki, przyciski formularza, czy obszary
aktywne map odnonikw, nie s dla uytkownikw dwuznaczne. Czy zostay wystarczajco
opisane z okreleniem swojego celu, bezporednio z linkowanego tekstu lub, w pewnych
przypadkach, z linku w swoim kontekcie np.:
w paragrafach, ktre go otaczaj,
elementach list,
komrkach lub nagwkach tabeli.
74
Kryterium sukcesu
2.4.5. Wiele drg (AA)
Zalecenia
Sprawdzenie, czy jest moliwo znalezienia
innych stron w serwisie na wiele sposobw,
a przynajmniej na dwa sposoby z nastpujcych:
spis treci,
mapa serwisu,
wyszukiwarka,
lista powizanych podstron,
lista wszystkich podstron (przydatna tylko w
przypadku maych stron). Jeli lista linkw jest
dusza od treci, strona moe by dla uytkownikw niejasna i trudna do obsuenia.
2.4.6. Nagwki i etykiety (AA)
Sprawdzenie, czy nagwki i etykiety opisane s z sensem i jednoznacznie, dziki czemu

uytkownikom bdzie atwiej odnale konkretn tre i zorientowa si w strukturze treci.
Sprawdzenie, czy istniej m.in. zdublowane nagwki lub etykiety dla pl formularzy.
2.4.7. Widoczny fokus (AA)
Sprawdzenie, czy obsugujc serwis za pomoc

klawiatury, uytkownik widzi, na ktrym aktywnym elemencie si znajduje, np. za pomoc klawisza Tab.
Absolutne minimum to pozostawienie domylnych ustawie wygldu fokusa przegldarki
(np. Internet Explorer w systemie MS Windows
bdzie to kropkowana obwdka wok aktywnego linku), czyli nie mona wyczy domylnego zaznaczenia fokusa poprzez zastosowanie
outline: none.
75
Kryterium sukcesu
2.4.8. Lokalizacja (AAA)
Zalecenia
Sprawdzenie, czy istnieje mechanizm, ktry informuje uytkownika, w ktrym miejscu aktualnie si znajduje, np. cieka okruszkw (breadcrumbs).
W przypadku, gdy w serwisie naley wykona
jak czynno w kliku krokach, np. zarejestrowa si, zoy zamwienie w sklepie, wypeni
ankiet lub test, sprawdzenie, czy uytkownik
jest informowany, w ktrym kroku si znajduje
i ile krokw pozostao mu do przejcia.
2.4.9. Cel linku (z samego linku) Sprawdzenie, czy wszystkie elementy aktywne,
(AAA)
takie jak linki, przyciski formularza lub obszary
aktywne map odnonikw, zostay wystarczajco opisane z okreleniem swojego celu bezporednio z linkowanego tekstu, bez wzgldu na
to, w jakim kontekcie zostay uyte.
Nie powinny istnie linki (lub przyciski graficzne
formularzy) z tym samym tekstem, ktre kieruj w rne miejsca np. Czytaj wicej.
2.4.10. Nagwki sekcji (AAA)
Sprawdzenie, czy tre zawiera sekcje, jeli tak,

czy s zapewnione nagwki.
ZASADA 3. ZROZUMIAO
Informacje oraz obsuga interfejsu uytkownika musz by zrozumiae.
Wytyczna 3.1. Moliwo odczytania:
Tre powinna by zrozumiaa i moliwa do odczytania.
76
Kryterium sukcesu
3.1.1. Jzyk strony (A)
Zalecenia
Sprawdzenie, czy zosta okrelony gwny jzyk strony za pomoc atrybutu lang i/lub
xml:lang w znaczniku HTML.
3.1.2. Jzyk czci (AA)
Sprawdzenie, czy zosta okrelony jzyk za pomoc atrybutu lang i/lub xml:lang, jeli zasza zmiana jzyka w elementach strony.
3.1.3. Nietypowe sowa (AAA)
Sprawdzenie, czy sowa, ktre mog by dwuznaczne, nieznane lub uywane w bardzo specyficzny sposb, np. w danym zawodzie lub
dziedzinie technicznej, zostay wytumaczone,
np. przez opis, list definicji, sownik lub w jakikolwiek inny sposb.
3.1.4. Skrty (AAA)
Sprawdzenie, czy dla skrtw zostay zapewnione opisy ich znaczenia w rozszerzonej formie (zwaszcza dla tych, ktre pojawiaj si
w treci po raz pierwszy) za pomoc znacznikw <abbr>, <acronym> wraz z atrybutem
title lub poprzez link do sownika terminw.
3.1.5. Poziom umiejtnoci czy- Sprawdzenie, czy skomplikowane treci opitania (AAA)
sujce pewne procesy, instrukcje, informacje,
zawierajce nazwy wasne, ktre wymagaj
szerszej wiedzy i wyksztacenia wyszego ni
poziom gimnazjalny, s uzupenione o streszczenie lub wzbogacone o ilustracje, wykresy,
filmy, animacje itp. Pomagaj one zrozumie
trudny tekst nie tylko osobom o niszym wyksztaceniu, ale rwnie osobom, ktre maj
trudnoci z koncentracj, czy osobom guchym,
dla ktrych nie wszystkie zwroty i terminy s
zrozumiae.
77
Kryterium sukcesu
3.1.6. Wymowa (AAA)
Zalecenia
Sprawdzenie, czy zostaa zapewniona wymowa
potrzebna do zrozumienia sw uytych w tekcie, zaraz po tych sowach lub poprzez link do
sownika.
Wytyczna 3.2. Przewidywalno:

Strony internetowe powinny otwiera si i dziaa w przewidywalny sposb.
Kryterium sukcesu
Zalecenia
3.2.1. Po oznaczeniu fokusem Sprawdzenie, czy jeli jakikolwiek element

(A)
otrzyma zaznaczenie (focus), nie zasza adna
zmiana kontekstu na stronie, ktra mogaby
wprowadzi w bd lub dezorientowa uytkownika; dotyczy to zwaszcza uytkownikw
korzystajcych z klawiatury.
Sprawdzenie, czy formularze nie s wysyane
automatycznie, czy strona nie przeadowuje si
automatycznie itp. Sprawdzenie, czy wszystkie
zmiany s wyzwalane tylko przez wiadome
dziaanie ze strony uytkownika.
3.2.2. Podczas wprowadzania Sprawdzenie, czy nie s stosowane mechanidanych (A)
zmy, ktre powoduj, przy zmianie ustawie jakiegokolwiek komponentu interfejsu uytkownika, automatyczn zmian kontekstu. A jeli
istniej, to sprawdzenie, czy uytkownik jest
o tym informowany/ostrzegany zanim zacznie
korzysta z komponentu.
78
Kryterium sukcesu
Zalecenia
3.2.3. Konsekwentna nawigacja Sprawdzenie, czy wszystkie mechanizmy nawi(AA)
gacji, ktre powtarzaj si na podstronach, pojawiaj si w tym samym wzgldnym porzdku

za kadym razem, gdy s ponownie prezentowane, co umoliwia atwiejszy odbir serwisu.
Z wyjtkiem sytuacji, gdy w serwisie istnieje
mechanizm, ktry daje uytkownikowi moliwo decydowania, co ma si na stronie pojawia i w jakiej kolejnoci.
Sprawdzenie, czy dodatkowe informacje
umieszczone pomidzy powtarzajcymi si elementami, jak np. zagniedone menu, czy pomijanie elementw w wyjtkowych sytuacjach,
nie burzy porzdku pozostaych.
3.2.4. Konsekwentna identyfi- Sprawdzenie, czy elementy posiadajce t

kacja (AA)
sam funkcjonalno na wielu podstronach
wserwisie internetowym, s w spjny sposb
identyfikowane. Jeli komponenty posiadajce t sam funkcjonalno, s identyfikowane
w rny sposb, uytkownicy z problemami
kognitywnymi (poznawczymi), trudnociami
wuczeniu si, niewidomi itp. nie bd wiedzieli, e maj do czynienia z tym samym elementem oraz czego si maj spodziewa, a to moe
prowadzi do wielu niepotrzebnych bdw.
79
Kryterium sukcesu
Zalecenia
3.2.5. Zmiana na danie (AAA) Sprawdzenie, czy wszystkie zmiany kontekstu,

jak np. pojawienie si wyskakujcych okienek
(pop-up), przekierowania, niekontrolowane
zmiany, opisane w pkt. 3.2.2., inicjowane s tylko na danie uytkownika, a jeli nie, czy zosta
zapewniony uytkownikowi mechanizm wyczenia takich zmian.
Wytyczna 3.3. Pomoc przy wprowadzaniu informacji:

Pomoc uytkownikom w unikaniu bdw i ich korygowaniu.
Kryterium sukcesu
Zalecenia
3.3.1. Identyfikacja bdu (A)
Sprawdzenie, czy formularze w serwisie (wyszukiwarka, newsletter, rejestracja, kontakt

itp.) s wyposaone w mechanizmy sprawdzajce poprawno wprowadzanych danych, oraz
czy w sytuacji, gdy uytkownik niepoprawnie
wypeni pole lub pominie pole wymagane, zostanie o tym fakcie poinformowany.
3.3.2. Etykiety lub instrukcje
Sprawdzenie, czy w kadym miejscu, w ktrym

wymagane jest wprowadzenie przez uytkownika informacji, zostay zapewnione czytelne
etykiety lub instrukcje oraz przykady.
80
Kryterium sukcesu
Zalecenia
3.3.3. Sugestie korekty bdw Sprawdzenie, czy w przypadku, gdy zostanie

(AA)
wykryty bd przy wprowadzaniu danych do

formularza, uytkownikowi zostay przedstawione sugestie mogce rozwiza problem pod
warunkiem, e nie zmienia to celu treci oraz
nie bdzie stanowio zagroenia (podczas procesu logowania nie moemy sugerowa, jaki
poprawny login lub haso uytkownik powinien
wprowadzi).
3.3.4 Zapobieganie bdom

(kontekst prawny, finansowy,
zwizany z podawaniem danych) (AA)
Sprawdzenie, czy w przypadku, gdy na stronie

internetowej uytkownik moe wypenia zobowizania prawne lub przeprowadza transakcje finansowe, modyfikowa i usuwa przechowywane dane, wypenia testy, zostay
zapewnione mechanizmy pozwalajce na przywrcenie poprzednich danych, ich weryfikacj
lub potwierdzenie.
3.3.5. Pomoc (AAA)
Sprawdzenie, czy wszdzie tam, gdzie uytkownik moe wprowadza, zmienia lub kasowa
informacje, otrzymuje pen informacj o tym,
jak to zrobi.
3.3.6. Zapobieganie bdom Sprawdzenie, czy s zapewnione mechanizmy

(wszystkim) (AAA)
pozwalajce na przywrcenie poprzednich
danych, ich weryfikacj lub potwierdzenie dla
wszystkich formularzy wysyajcych dane.
81
ZASADA 4. SOLIDNO
Tre musi by solidnie opublikowana, tak, by moga by skutecznie interpretowana przez rnego rodzaju oprogramowania uytkownika, w tym technologie
wspomagajce.
Wytyczna 4.1. Kompatybilno:
Zmaksymalizowanie kompatybilnoci z obecnymi oraz przyszymi programami uytkownikw, w tym z technologiami wspomagajcymi.
Kryterium sukcesu
Zalecenia
4.1.1. Parsowanie (A)
Sprawdzenie, czy kod HTML i CSS jest wolny od

bdw i poprawny semantycznie.
4.1.2. Nazwa, rola, warto (A)
Sprawdzenie, czy wszystkie komponenty interfejsu uytkownika, stworzone w takich technologiach, jak np. flash, java, silverlight, pdf, ktre maj wbudowane mechanizmy wspierania
dostpnoci, s jednoznacznie identyfikowane
poprzez nadanie im nazw, etykiet, przeznaczenia. Szczeglnie wane jest to dla technologii
asystujcych, ktre dziki temu bd mogy
zrozumie nazw czy przeznaczenie napotkanego elementu i przekaza odpowiedni informacj do uytkownika lub wykona okrelone
dziaanie.
82
Fundacja Wspomagania Wsi 2014

Jak Zaprojektować I Uruchomić Prostą Stronę Internetową

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jak Zaprojektować I Uruchomić Prostą Stronę Internetową

Uploaded by

Copyright:

Available Formats

Przemysaw Marcinkowski

Jak zaprojektowa i uruchomi

Fundacja Wspomagania Wsi 2014

Jak zaprojektowa i uruchomi prost

Wydawca: Fundacja Wspomagania Wsi

Lista kontrolna WCAG 2.0  64

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Dostpno treci publikowanych w Internecie

Dostpno treci publikowanych w Internecie

Dostpno treci publikowanych w Internecie

Programy czytajce ekran przetwarzaj zawarto stron internetowych w sposb

przecznik (pole radio)

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Dostpno treci publikowanych w Internecie

nagwki 1 - 6 (kady klawisz odpowiada za odpowiedni nag-

Screen readery to tylko jeden z przykadw oprogramowania, ktre pozwala na

Dostpno treci publikowanych w Internecie

mw czytajcych. Tworzc serwis internetowy, trzeba wic zadba o odpowiedni

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Dostpno treci publikowanych w Internecie

Rys. 1. Widok strony gwnej Fundacji Widzialni.org

Rys. 2. Widok strony gwnej Fundacji Widzialni.org

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Dostpno treci publikowanych w Internecie

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Dostpno treci publikowanych w Internecie

Osoby z zaburzeniami funkcji kognitywnych

Dostpno treci publikowanych w Internecie

Osoby z dysfunkcj ruchow

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Dostpno treci publikowanych w Internecie

Dla wielu uytkownikw powyej 50. roku ycia podstawowym zastosowaniem

Co to jest WCAG 2.0?

Co to jest WCAG 2.0?

HTML/XHTML jzyki znacznikw, suce do tworzenia stron internetowych,

oraz wiele innych.

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Co to jest WCAG 2.0?

Co to jest WCAG 2.0?

Semantyczny kod HTML

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Co to jest WCAG 2.0?

zw elementu) i oznacza, e od tego miejsca przegldarka bdzie interpretowa

Do wyjtkw nale znaczniki bez pary. Przykadem moe by wstawienie obrazka,

Co to jest WCAG 2.0?

Odpowiedniki tekstowe dla elementw graficznych

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Co to jest WCAG 2.0?

<img src=jm_stanczyk.jpg alt=Jan Matejko, Staczyk,

Moe si jednak zdarzy, e grafika umieszczona na stronie nie przekazuje adnej

Co to jest WCAG 2.0?

Rys. 5. Jak dziaa koszyk [grafika wasna]

<img src=koszyk.png alt= />

Rys. 6. YouTube [grafika wasna]

Publikowanie materiaw audio i wideo

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Co to jest WCAG 2.0?

Rys.7. Etykiety p formularzy

<label for=form_name>Imi i nazwisko:</label>

Co to jest WCAG 2.0?

Rys. 8. Etykiety p wyboru

Jak zaprojektowa i uruchomi prost stron internetow? Na przykadzie platformy WordPress

Lista kontrolna WCAG 2.0 64