You are on page 1of 33

Tworzenie serwisw WWW.

Standardy sieciowe
Autor: John Allsopp
Tumaczenie: Dagmara Suma
ISBN: 978-83-246-2657-1
Tytu oryginau: Developing with Web Standards
Format: 158235, stron: 480

Krajobraz nowoczesnych technologii WWW


Opanuj podstawy wiedzy o tworzeniu serwisw WWW
Poznaj zaawansowane rozwizania dla profesjonalnych projektantw
Rozpracuj wspczesne metody i technologie, uywane do tworzenia serwisw WWW
Z pewnoci znasz ksik Projektowanie serwisw WWW. Standardy sieciowe
Jeffreya Zeldmana. Jeli jeste zagorzaym fanem tego kultowego podrcznika,
niewtpliwie zainteresuje Ci rwnie ten tom towarzyszcy. Jego autor instruktor
oraz twrca licznych propozycji standardw sieciowych oferuje wiedz na temat
architektury stojcej za profesjonalnymi witrynami WWW, wskazujc przy tym sposoby
stosowania standardw z czysto taktycznego i praktycznego punktu widzenia.
Ksika ta jest przeznaczona dla todziobw chccych nauczy si budowa strony
WWW, a take dla dowiadczonych twrcw, szukajcych gbszej wiedzy, pomagajcej
wyj poza metody i modele, ktre ju dobrze znaj. Zawiera mnstwo sztuczek
i chwytw, cho jej podstawowym celem jest pomoc w budowaniu systematycznej
wiedzy na temat praktyki tworzenia serwisw WWW.
Poznaj:
podstawowe technologie tworzenia front-endu HTML i XHTML, CSS i DOM;
zalecane metody tworzenia atwych w uyciu serwisw WWW;
praktyk tworzenia serwisw WWW: semantyczny ukad znacznikw, techniki
radzenia sobie z niezgodnociami i bdami przegldarek, ukady stron oparte
na CSS oraz tematyk platform CSS;
technologie wchodzce na rynek: przeomowe narzdzia, z ktrych moesz
ju zacz korzysta, w tym HTML5, CSS3, czcionki WWW, SVG i Canvas.
Witryna WWW zwizana z oryginalnym wydaniem ksiki Tworzenie serwisw WWW.
Standardy sieciowe (Developing with Web Standards) jest dostpna pod adresem
devwws.com. Znajdziesz tam wicej informacji i dodatkw, bdziesz te mg osobicie
skontaktowa si z autorem ksiki.
John Allsopp jest wspzaoycielem witryny westciv.com oraz twrc programu Style
Master, cieszcego si wielk saw narzdzia do tworzenia arkuszy stylw na rnych
platformach. Jest rwnie autorem wielu kursw, materiaw szkoleniowych, narzdzi,
instrukcji oraz artykuw przeznaczonych dla projektantw czy twrcw serwisw
WWW, w tym bardzo wanego artykuu The Dao of Web Design, opublikowanego na
witrynie A List Apart. Peni te funkcj wspzarzdcy nowej, dziaajcej w ramach
organizacji W3C, Incubator Group, ktrej prace koncentruj si na ksztaceniu kolejnych
pokole profesjonalnych twrcw WWW (www.w3.org/2005/Incubator/owea).

Spis treci

Cz I > Podstawy


1. Zanim zaczniesz ..............................................................21
Dla kogo jest ta ksika .............................................................................. 23
Wic dla kogo nie jest ta ksika ........................................................... 24
Co da mi ta ksika ..................................................................................... 24
Czego ta ksika mi nie da .......................................................................... 25
Jak uywa tej ksiki ................................................................................. 26
Przyczanie si do spoecznoci ............................................................ 26
Co dalej ....................................................................................................... 26
2. Filozofie i techniki ...........................................................27
Wojny przegldarek .............................................................................. 28
Jutrzenka standardw .......................................................................... 28
Standardy WWW dzisiaj ....................................................................... 29
Dlaczego powinno mnie to obchodzi ? ......................................................... 29
Jak tworzy na potrzeby World Wide Web .................................................. 30
To wcale nie musi wyglda tak samo w kadej przegldarce ................ 31
Stopniowe usprawnianie ........................................................................ 32
Rozdzielanie treci, prezentacji i zachowania ........................................ 33
Jeszcze raz, z sensem ............................................................................ 33
Moja kolejna sztuczka ........................................................................... 34
3. Kodowanie .....................................................................35
Dlaczego to dziaa w przegldarkach nie wystarcza ................................. 36
HTML i XHTML ....................................................................................... 36
Skadnia i semantyka .................................................................................. 37
Bardzo krtka historia jzyka HTML ......................................................... 38
HTML 4.01 .......................................................................................... 38
XHTML 1.0, 1.1, 2.0 ............................................................................ 39
HTML 5 ............................................................................................... 40

Tworzenie serwisw WWW. Standardy sieciowe


Kluczowe koncepcje jzyka HTML .............................................................. 41
Czym jest strona WWW? ....................................................................... 41
Terminologia: elementy, atrybuty, znaczniki i inne ............................... 42
Puste elementy HTML .......................................................................... 43
Typy dokumentw ....................................................................................... 44
Wprowadzenie do DOCTYPE ............................................................... 45
Strukturalne podstawy jzyka HTML ......................................................... 47
Podstawowy element html ..................................................................... 47
Element head ........................................................................................ 48
Element body ........................................................................................ 50
Elementy rdliniowe ............................................................................ 56
Rozszerzanie semantyki HTML .................................................................. 58
class ....................................................................................................... 58
id ........................................................................................................... 59
span ....................................................................................................... 60

cza: hiper w hipertekcie .................................................................. 60


Kotwice ................................................................................................. 61
Wzgldne i bezwzgldne adresy URL .................................................... 62
Tworzenie czy do zasobw znajdujcych si w internecie .................... 66
Tre osadzona ............................................................................................ 66
Obrazy ................................................................................................... 66
Osadzanie obrazw ................................................................................ 68
Tre multimedialna .............................................................................. 69
Formularze .................................................................................................. 71
Element form ........................................................................................ 72
Element input ....................................................................................... 72
Element button ..................................................................................... 75
Listy rozwijane ...................................................................................... 76
Wyczanie kontrolek ............................................................................ 78
Przypisywanie kontrolkom etykiet ......................................................... 79
Grupowanie kontrolek ........................................................................... 80
Tabele .......................................................................................................... 81
Struktura tabeli ..................................................................................... 81

czenie komrek .................................................................................. 82


Ramki i elementy iframe .............................................................................. 83
Znaki i encje ................................................................................................ 84
Zapewnianie jakoci ..................................................................................... 86
Walidacja kodu ...................................................................................... 87
Sprawdzanie czy ................................................................................. 88
HTML Tidy .......................................................................................... 88
HTML kontra XHTML .............................................................................. 89
Rnice w skadni .................................................................................. 89
Udostpnianie dokumentu ..................................................................... 89
Obsuga bdw ..................................................................................... 89
Ktrego powiniene uywa ? .................................................................. 91

Spis treci
4. Prezentacja ................................................................... 93
Krtka historia stylw stosowanych w serwisach WWW .............................. 93
Po co oddziela tre od wygldu? ......................................................... 96
Czym jest CSS? ........................................................................................... 96
Jak CSS jest wykorzystywany? ................................................................... 96
Styl rdliniowy ..................................................................................... 97
Osadzony kod CSS ................................................................................ 97
Doczanie zewntrznych arkuszy stylw ............................................... 97
Podstawowa skadnia jzyka CSS ............................................................... 98
Selektory, bloki deklaracji, deklaracje i wasnoci ................................. 98
Podstawowe informacje na temat selektorw ............................................. 100
Selektory typw ................................................................................... 100
Grupowanie selektorw ....................................................................... 100
Podstawowe wasnoci: style czcionek ........................................................ 100
color .................................................................................................... 101
font-family .......................................................................................... 102
font-size .............................................................................................. 104
font-weight .......................................................................................... 106
font-style ............................................................................................. 106
text-decoration .................................................................................... 107
Dziedziczenie ............................................................................................. 107
Zwikszenie szczegowoci: selektory class i id ......................................... 108
Selektory class ..................................................................................... 109
Selektory id ......................................................................................... 109
Precyzja selektora ............................................................................... 109
Czsto uywane wasnoci ukadu tekstu ................................................... 110
text-align ............................................................................................. 111
line-height ........................................................................................... 111
Odstpy pomidzy literami i sowami ................................................... 113
text-indent ........................................................................................... 113
Kombinacje: selektory potomkw i dzieci ................................................... 114
Selektory potomkw ............................................................................ 114
Selektory dzieci ................................................................................... 115

czenie w acuchy ............................................................................ 116


Precyzja selektorw potomkw i dzieci ................................................ 118
Czsto uywane wasnoci ta .................................................................... 121
background-color ................................................................................. 122
background-image ............................................................................... 123
Wartoci URL ..................................................................................... 123
background-repeat .............................................................................. 124
background-position ............................................................................ 125
background-attach .............................................................................. 128
Wasnoci ta w CSS 3 ........................................................................ 128
Wasnoci zbiorcze ............................................................................... 129
Selektory dynamiczne ................................................................................ 129

Tworzenie serwisw WWW. Standardy sieciowe


Podstawowe wasnoci ukadu strony ........................................................ 131
Elementy blokowe kontra elementy rdliniowe ................................... 132
Model polowy ....................................................................................... 133
width ................................................................................................... 134
height .................................................................................................. 134
Przelewajca si tre .......................................................................... 135
margin ................................................................................................. 135
border .................................................................................................. 137
padding ............................................................................................... 139
Jak szeroki i wysoki jest element? ....................................................... 140
Zaawansowane wasnoci ukadu strony .................................................... 140
float ..................................................................................................... 140
clear .................................................................................................... 142
Pozycjonowanie ......................................................................................... 142
Wasno position i schematy pozycjonowania ..................................... 142
Zaawansowane selektory ........................................................................... 144
Selektory ssiadw .............................................................................. 145
Selektory atrybutw ............................................................................ 145
Typy wywietlania ..................................................................................... 147
visibility ............................................................................................... 147
Pozycje listy ........................................................................................ 148
Wicej wasnoci ........................................................................................ 149
Wasnoci drukowania ......................................................................... 149
Wasnoci interfejsu uytkownika ........................................................ 149
Selektory ............................................................................................. 149
Tre generowana ................................................................................ 150
Typy mediw ............................................................................................. 150
CSS zalene od medium ....................................................................... 151

czenie z typami mediw ................................................................... 151


Osadzanie na podstawie typw mediw ................................................ 151
@media ............................................................................................... 151
Importowanie arkuszy stylw .................................................................... 152
@import .............................................................................................. 153
Zapewnianie jakoci ................................................................................... 154
Walidacja kodu CSS ............................................................................ 154
Sprawdzanie zgodnoci z przegldarkami ............................................ 154
Szczeglne wyzwania i techniki .................................................................. 155
Formatowanie formularzy ................................................................... 156
Zastpowanie obrazem ........................................................................ 156
Ukad strony ....................................................................................... 158
Problemy z przegldarkami ................................................................. 158
Formatowanie CSS ............................................................................. 159
Wydajno mechanizmu CSS i serwisw WWW .................................. 159
5. DOM ........................................................................... 161
DOM poziomu zerowego ...................................................................... 162
Przejciowy DOM ................................................................................ 162
DOM poziomu pierwszego ................................................................... 163

Spis treci
Poziom drugi ....................................................................................... 163
Poziom trzeci ....................................................................................... 163
Drzewo DOM ............................................................................................ 164
Podstawowe obiekty i metody DOM .......................................................... 166
Obiekt window ..................................................................................... 166
Obiekt document ................................................................................. 167
Obiekt element .................................................................................... 168
Zdarzenia .................................................................................................. 170
Odbiorniki zdarze .............................................................................. 171
Propagacja zdarze ............................................................................. 172
Najlepsze praktyki w tworzeniu nowoczesnych,
zgodnych ze standardami skryptw DOM ................................................. 173
Tworzenie dyskretnych skryptw ........................................................ 174
Niezgodnoci przegldarek .................................................................. 176
Waciwo innerHTML kontra metody DOM .................................... 179
Bezpieczestwo ................................................................................... 180
Rozkwit bibliotek ....................................................................................... 181
Wybr biblioteki .................................................................................. 183
JQuery ................................................................................................ 183
Prototype ............................................................................................ 184
Script.aculo.us .................................................................................... 184
Yahoo User Interface Library (YUI) ................................................... 184
Sprawdzanie skryptw DOM ..................................................................... 184
IE Developer Toolbar dla programw IE 6 i 7 .................................... 185
Internet Explorer 8 Developer Toolbar ............................................... 185
Firebug oraz Web Developer Toolbar dla Firefoksa ............................ 185
DragonFly dla programu Opera .......................................................... 185
Web Inspector dla Safari ..................................................................... 186
Ajax? ......................................................................................................... 187
Podsumowanie .......................................................................................... 187
6. Dostpno ...................................................................189
Biznesowe argumenty za zapewnianiem dostpnoci ........................... 190
Prawodawstwo na wiecie .................................................................... 191
Dostpno i W3C ..................................................................................... 191
WCAG 1 .............................................................................................. 192
WCAG 2 .............................................................................................. 195
ARIA ................................................................................................... 196
Typowe problemy zwizane z dostpnoci (i ich rozwizania) .................. 203

cza i tytuy ...................................................................................... 203


Nagwki ............................................................................................. 204
Tekst alternatywny ............................................................................. 204
Kontrast kolorw ................................................................................. 205
Tabele ................................................................................................. 205
Formularze ......................................................................................... 209
Podsumowanie .......................................................................................... 211

10

Tworzenie serwisw WWW. Standardy sieciowe


Cz II > Sztuka tworzenia w wiecie rzeczywistym
7. Blaski i cienie wsppracy z przegldarkami ........................... 215
Trzy rodzaje wad przegldarek .................................................................. 216
Tryby pracy przegldarki .......................................................................... 217
Tryb dziwactw i przeczanie DOCTYPE ............................................ 218
Wybieranie trybu standardw .............................................................. 219
Nowy model przeczania DOCTYPE wprowadzony w IE 8 ................ 220
Typowe bdy przegldarek ....................................................................... 222
Bd modelu polowego ......................................................................... 222
Bd podwjnego marginesu elementu dryfujcego ............................. 224
Bd niescalanych marginesw ............................................................ 225
IE i waciwo hasLayout ........................................................................ 227
W gbiach Twojej przegldarki .......................................................... 227
Jak element otrzymuje ukad? ............................................................. 228
Naprawianie (i wyzwalanie) bdw
zwizanych z waciwoci hasLayout ................................................. 229
Naprawianie bdw: hakowa czy nie hakowa ? ....................................... 231
Poznaj swojego wroga .......................................................................... 232
Dopasowywanie si do przegldarek .......................................................... 234
Ukrywanie arkuszy stylw przed starszymi przegldarkami ................ 235
Gdy brakuje obsugi moliwoci ................................................................. 238
IE 7 (i IE 8) Deana Edwardsa ............................................................ 239
Podsumowanie ........................................................................................... 241
8. Najlepsze metody nowoczesnego kodowania .......................... 243
Czytelno kodu ......................................................................................... 244
Stosowanie nazw ................................................................................. 244
Formatowanie, komentowanie i konsekwencja ..................................... 245
Prosty, stary, semantyczny kod HTML ..................................................... 246
Uywanie elementw HTML oraz atrybutw class i id
do uzyskiwania lepszych konstrukcji semantycznych ........................... 247
Jzyk znacznikw handlu elektronicznego (ECML) ............................ 251
Kodowanie i SEO ...................................................................................... 252
Mikroformaty ............................................................................................ 253
Zalety mikroformatw ......................................................................... 253
Mikroformaty w akcji .......................................................................... 255
Narzdzia zwizane z mikroformatami ................................................ 257
Wiele, wiele wicej ............................................................................... 258
Podsumowanie ........................................................................................... 258
9. Ukady stron wykorzystujce CSS ........................................ 259
Wyrodkowanie poziome ............................................................................ 260
Wyrodkowanie pionowe ............................................................................ 263
Pozycjonowanie CSS ................................................................................. 264
Schematy pozycjonowania ................................................................... 265
Wasnoci pozycjonowania ................................................................... 265
Pozycjonowanie bezwzgldne w akcji ................................................... 266

Spis treci
Ukady wykorzystujce dryfowanie ........................................................... 274
Poziome, dryfujce listy nawigacji ....................................................... 274
Wypenianie pola ................................................................................. 276
Obramowanie dookoa listy nawigacji .................................................. 277
Wielokolumnowe ukady wykorzystujce dryfowanie ........................... 278
Stopka ................................................................................................. 284
Zagadka kolorw ................................................................................. 284
Ukady siatkowe ........................................................................................ 292
Wasnoci ukadu tabelarycznego CSS 2.1 .......................................... 292
Podsumowanie .......................................................................................... 294
10. Resety i platformy CSS .....................................................295
Resety CSS ............................................................................................... 296
Zalety resetw CSS ............................................................................. 296
Argumenty przeciwko resetom ............................................................ 297
Jak wygldaj resety CSS? ................................................................. 299
Popularne resety CSS ......................................................................... 299
Platformy CSS .......................................................................................... 301
Platformy CSS za i przeciw ............................................................ 301
Popularne platformy i ich zastosowania .............................................. 303
Podsumowanie .......................................................................................... 305
Cz III > Tworzenie serwisw WWW w praktyce
11. HTML 5 ........................................................................309
Czym jest HTML 5? .................................................................................. 309
Najwaniejsze moliwoci HTML 5 ........................................................... 311
Obsuga bdw ................................................................................... 311
Element canvas ................................................................................... 312
Lokalne przechowywanie danych ......................................................... 312
Wielowtkowy JavaScript z Web Workers ....................................... 312
Obsuga multimediw .......................................................................... 312
Lokalizowane aplikacje WWW z geolokacj ........................................ 313
Strony umoliwiajce uytkownikom edycj ........................................ 313
Rnice pomidzy HTML 4 a HTML 5 ..................................................... 313
Deklarowanie DOCTYPE ................................................................... 314
Nagwki, stopki, sekcje i inne nowe elementy strukturalne
w jzyku HTML 5 ............................................................................... 315
Przykad dokumentu HTML 5 .................................................................. 323
Materiay wideo, audio i inne osadzone treci w jzyku HTML 5 .............. 329
Wideo .................................................................................................. 330
Audio ................................................................................................... 334
Obsuga elementw video i audio przez przegldarki ........................... 334
Dostpno materiaw wideo i audio .................................................. 335

11

12

Tworzenie serwisw WWW. Standardy sieciowe


Obsuga standardu HTML 5 przez przegldarki ....................................... 336
IE 7 i wczeniejsze wersje programu Internet Explorer ....................... 336
Sprawdzanie poprawnoci i udostpnianie kodu HTML 5 ......................... 337
Czy powinienem ju korzysta z jzyka HTML 5? ..................................... 338
12. CSS 3 i przyszo CSS ...................................................... 341
CSS przeadowany ..................................................................................... 341
Wejcie CSS 3 ........................................................................................... 342
Problem kompatybilnoci wstecz i naprzd rozwizany? .................. 345
Rozszerzenia specyficzne dla dostawcw .............................................. 346
Nowe selektory .......................................................................................... 349
Strukturalne selektory pseudoelementw ............................................ 349
Struktura dokumentu .......................................................................... 350
Selektor first-child ............................................................................... 350
Selektor first-of-type ........................................................................... 352
Selektor last-child ................................................................................ 354
Selektor nth-child ................................................................................ 355
Selektor target .................................................................................... 360
Podsumowanie ........................................................................................... 361
13. Nowe wasnoci w CSS 3 ................................................... 363
Efekty cieni ............................................................................................... 364
Wasno text-shadow .......................................................................... 364
Wasno box-shadow .......................................................................... 368
Wasno border-radius ............................................................................. 370
Kompatybilno ................................................................................... 373
Wasno transparency .............................................................................. 373
Konstrukcja background-color: transparent ........................................ 373
Pprzezroczyste obrazy ta ................................................................. 374
Wasno opacity ................................................................................. 374
Kolory RGBa ............................................................................................. 375
Kompatybilno ................................................................................... 376
Tekst wielokolumnowy ............................................................................... 376
Przejcia .................................................................................................... 378
Definiowanie przejcia ......................................................................... 380
Inne wasnoci ........................................................................................... 382
Obrazy obramowa .............................................................................. 382
Wielokrotne obrazy ta ........................................................................ 382
Przeksztacenia CSS ........................................................................... 383
Gradienty ............................................................................................ 383
Wicej, wicej, wicej! ................................................................................ 384
14. Dostosowywanie serwisw WWW do potrzeb rnych mediw
za pomoc CSS .............................................................. 387
Wszenie agenta uytkownika ............................................................. 388
Haki .................................................................................................... 389

Spis treci
Zapytania mediw ..................................................................................... 389
Korzystanie z zapyta mediw ............................................................ 392
Do czego mog si przyda zapytania mediw? ................................... 395
Kompatybilno ................................................................................... 399
Ale czy jest to w jaki sposb lepsze od wszenia agenta uytkownika? ...... 399
Podsumowanie .......................................................................................... 400
15. Czcionki w serwisach WWW ...............................................401
Krtka historia czenia i osadzania czcionek ............................................ 402
Bieca sytuacja prawna ........................................................................... 404
Bieca sytuacja techniczna ...................................................................... 405
@font-face i osadzanie czcionek ................................................................ 405
Osadzanie czcionek w przypadku programu Internet Explorer ............ 406

czenie czcionek w przypadku innych przegldarek .......................... 407


Wyzwania ............................................................................................ 409

agodzenie problemw ........................................................................ 410


Czcionki jako usugi ............................................................................ 411
Podsumowanie .......................................................................................... 411
16. SVG i canvas: grafika w przegldarce ....................................413
SVG .......................................................................................................... 415
Podstawowe koncepcje i skadnia SVG ................................................ 416
Ukad wsprzdnych SVG .................................................................. 418
Zalety SVG .......................................................................................... 419
Przypadki zastosowania SVG .............................................................. 421
Umieszczanie obrazw SVG w serwisach WWW .................................. 422
Obsuga SVG zapewniana przez przegldarki ..................................... 425
Udostpnianie SVG ............................................................................. 427
Poza SVG ............................................................................................ 427
Element canvas standardu HTML 5 ......................................................... 428
Uywanie elementu canvas .................................................................. 428
Dodawanie elementu canvas ................................................................ 428
Pobieranie kontekstu rysowania .......................................................... 430
Rysowanie za pomoc kontekstu ......................................................... 432
I wicej ............................................................................................ 437
Przypadki zastosowania elementu canvas ............................................ 438
Kanwy kontra SVG ................................................................................... 439
Podsumowanie .......................................................................................... 441
rda .........................................................................443
Skorowidz ....................................................................453

13

ROZDZIA SZSTY

Dostpno

dy Tim Berners-Lee tworzy zrby World Wide Web we wczesnych latach 90. ubiegego wieku, szczeglnie mocno akcentowa znaczenie jej powszechnoci i uniwersalnoci. Dostpno dla
wszystkich ludzi, niezalenie od ich ewentualnej niepenosprawnoci,
bya fundamentaln czci tej wizji.
Przez ponad dziesi lat organizacja W3C opracowywaa protokoy,
ktrych celem byo sprawienie, aby sie WWW bya jak najbardziej
dostpna, i wczaa czynniki odpowiedzialne za zapewnianie dostpnoci do specyfikacji regulujcych standardy takie jak HTML czy
CSS. Rwnolegle z tym ciaa ustawodawcze na caym wiecie wprowadzay przepisy prawne zwizane z dostpnoci oraz regulacje, ktre
miay taki sam wpyw na sie WWW jak na rodowisko fizyczne i ktre
czsto bezporednio odwoyway si do tych specyfikacji W3C.
Mimo to twrcy serwisw WWW wydaj si nieraz bagatelizowa kwestie zwizane z dostpnoci. W najlepszym przypadku s one rozwaane na samym kocu, stanowi list formalnoci, ktre musz
zosta dopenione jak najmniejszym wysikiem i kosztem finansowym
ju po cakowitym zakoczeniu prawdziwej pracy nad projektem.
Jednak zaangaowanie w zapewnianie dostpnoci powinno by jedn
z podstaw etyki naszej rodzcej si profesji: czym, co z pen wiadomoci powinnimy stara si osign , nie za rzecz, ktr robimy
niechtnie i tylko wtedy, gdy wymaga tego od nas prawo. Jeli na co
dzie utrzymujesz kontakty z osob niepenosprawn, z pewnoci
wiesz, jak trudne moe by uzyskanie dostpu do istotnych informacji,
sieci spoecznych i usug. Jeli nie masz tej okazji, sprbuj wyobrazi
sobie ograniczenie swoich wasnych moliwoci dostpu i zastanowi
si, w jakich sytuacjach znajduj si czsto ludzie niepenosprawni.

190

Rozdzia 6. > Dostpno

Przez tydzie rb zakupy przez sie i tylko w ten sposb utrzymuj swoje
kontakty biznesowe. Korzystaj z czytnika ekranowego w celu sprawdzania
swojej poczty elektronicznej i najwieszych informacji ze wiata. Nawiguj,
uywajc wycznie klawiatury lub jedynie myszy. Szybko nabierzesz szacunku dla ogromnych wyzwa, ktre wikszo serwisw WWW i usug
internetowych stawia przed ludmi niepenosprawnymi, wyzwa, ktre masz
okazj zmniejszy z racji wykonywanego zawodu.
Kluczowa rola odgrywana przez sie WWW w poprawianiu standardu ycia
tak wielu osb niepenosprawnych jest jednym z powodw, dla ktrych zostaem twrc serwisw. Nie musi tak by w przypadku kadego, niezalenie
jednak od tego, czy Twoj motywacj jest altruizm, czy te wymogi prawne
i groba wytoczenia procesw sdowych, o ktrych gono bywa ostatnimi
czasy w Stanach Zjednoczonych i Australii, przekonasz si, e zapewnienie
naleytej dostpnoci jest jednym z podstawowych zada zwizanych z profesjonalnym tworzeniem serwisw WWW.
Na szczcie, jest to te znacznie mniej kopotliwe i wcale nie tak trudne do
osignicia, jak nauczono Ci wierzy .
W rozdziale tym nie bdziemy w stanie bardzo szczegowo opisa wszystkich
zagadnie zwizanych z zapewnianiem dostpnoci, ale postaramy si zaj
najwaniejszymi kwestiami, zaleceniami oraz wyzwaniami technicznymi
dotyczcymi tej materii, a take przyjrze kilku prostym krokom, ktre
pomog nam tworzy odpowiednio dostpne serwisy WWW przy niewielkim
tylko dodatkowym wysiku z naszej strony.

Biznesowe argumenty za zapewnianiem dostpnoci


Za koniecznoci zapewniania dostpnoci serwisw WWW przemawiaj
take solidne argumenty natury biznesowej. Tworzenie takich serwisw moe
wpyn na poprawienie komfortu ycia odwiedzajcych je osb, przekada
si te jednak na bezporednie oszczdnoci (zwizane na przykad ze zmniejszeniem liczby uytkownikw dzwonicych na numery telefonicznej obsugi
klienta) i umoliwia biznesowi dotarcie do znacznie wikszej grupy ludzi,
co wpywa z kolei na wzrost sprzeday i zyskw. Liczba osb niepenosprawnych w naszych spoecznociach jest o wiele wiksza, ni gros ludzi sobie
wyobraa. Wydzia Zdrowia i Pomocy Humanitarnej Stanw Zjednoczonych
ogosi na przykad niedawno, e jeden na piciu obywateli USA cierpi
z powodu jakiego rodzaju niepenosprawnoci, a w przypadku jednej osoby
na osiem niepenosprawno ta ma charakter powany.

Dostpno i W 3C

Gdy mwimy o osobach niepenosprawnych, mamy na myli dziesitki milionw ludzi, a take segment rynku, ktry znacznie czciej korzysta z handlu elektronicznego ni jakakolwiek inna grupa spoeczna. Zaspokajanie
potrzeb tej wsplnoty moe bezporednio wpyn na rentowno niejednej
firmy.
Oprcz tych zyskw o charakterze czysto komercyjnym zastosowanie technik tworzenia dostpnych serwisw WWW moe mie rwnie szereg innych
pozytywnych skutkw. Google i inne mechanizmy wyszukiwania s w pewnym sensie lepe. Jedynym tekstem, jaki widz, gdy indeksuj serwis, jest
prawdziwy tekst, nie za wszelkie obrazy czy pliki Flash, ktre mog zosta
waciwie zinterpretowane tylko przez ludzi dysponujcych odpowiednio
dobrym wzrokiem. Serwisy WWW, w przypadku ktrych zastosowano dobr
i przejrzyst struktur semantyczn, uniknito uywania kodu opartego na
tabelach oraz zadbano o wykorzystanie innych technik zapewniania dostpnoci, mog dziki temu cieszy si lepsz wykrywalnoci i pozycjonowaniem przez mechanizmy wyszukiwania.

Prawodawstwo na wiecie
Ostatnimi czasy na caym wiecie uchwala si akty prawne majce zwalcza dyskryminacj osb niepenosprawnych. Przepisy tego rodzaju dotycz zwykle wielu rnych aspektw ycia, coraz wikszy jednak nacisk
kadzie si tu rwnie na kwestie zwizane z dostpnoci sieci i serwisw
WWW. Problem ten jest bardzo zoony, dlatego wszelkie prby prostego
zaprezentowania go tutaj skazane s na niepowodzenie i mog wprowadzi
tylko jeszcze wiksze zamieszanie. rda, z ktrych moesz czerpa bardziej obszern wiedz na temat sytuacji na wiecie w tej materii, zostay
wymienione na kocu niniejszej ksiki.

Dostpno i W3C
Od pierwszych dni swojego istnienia organizacja W3C podejmuje prby
tworzenia zalece, wytycznych i wskazwek dotyczcych kwestii zapewniania dostpnoci, a take wbudowania ich bezporednio w standardy takie
jak CSS i HTML. W roku 1999 W3C opublikowaa pierwsz wersj zbioru
dokumentw znanych jako Wytyczne dotyczce dostpnoci treci internetowych (ang. Web Content Accessibility Guidelines, w skrcie WCAG 1),
za w roku 2008 udostpnia jego zaktualizowan wersj (znan jako
WCAG 2). Dodatkowo, aby zaspokoi rosnc potrzeb wytycznych zwizanych z dostpnoci aplikacji WWW, dziaajca w obrbie W3C inicjatywa

191

192

Rozdzia 6. > Dostpno

dostpnoci do sieci (ang. Web Accessibility Initiative, w skrcie WAI)


opracowaa regulujcy te kwestie standard Accessible Rich Internet Applications Suite (WAI-ARIA), ktrym zajmiemy si ju niebawem.

WCAG 1
Opublikowany w 1999 roku, w czasach panowania przegldarek wersji czwartej, WCAG 1 by pierwsz wan prb skodyfikowania zbioru procedur
majcych zapewni wiksz dostpno serwisw WWW. Jego zadaniem
byo pokazanie sposobu w jaki mona tworzy treci internetowe dostpne
dla osb niepenosprawnych (jak mona przeczyta ju w pierwszym
zdaniu opisu WCAG 1 znajdujcego si pod adresem: www.w3.org/TR/
WCAG10).
WCAG 1 zosta podzielony na czternacie wytycznych, z ktrych kada
dzieli si na punkty kontrolne, a te z kolei maj priorytety od A do AAA
(okrelane czsto jako potrjne A). Zgodno z wytycznymi WCAG 1 moe
by mierzona stopniem zgodnoci z tymi punktami kontrolnymi. Dokument
ma zgodno poziomu A, jeli zapewnia zgodno ze wszystkim punktami
kontrolnymi poziomu A. Analogicznie, dokument uwaany jest za zgodny
z poziomem AA (podwjne A), jeli spenia wymogi wszystkich punktw
kontrolnych AA, za z poziomem AAA, gdy zapewnia zgodno z wszystkimi
punktami kontrolnymi AAA.
Zanim bardziej zagbimy si w tematyk tych wytycznych i punktw kontrolnych, naley tu odnotowa , e zgodno AAA uwaa si oglnie za trudn
do osignicia i nie zawsze jest warta woonego w ni wysiku, poniewa
wiele punktw kontrolnych AAA ma bardzo subiektywny charakter, a pena
zgodno z poziomem AAA ma do niewielkie znaczenie praktyczne.
W zwizku z tym przez wikszo ekspertw (a take niektre oficjalne
wytyczne rzdowe) zgodno poziomu AA jest zalecana jako wystarczajca.
Wytyczne i punkty kontrolne
Jak ju wspomnielimy powyej, kada z czternastu wytycznych WCAG 1
zawiera kilkanacie punktw kontrolnych. W rozdziale tym przyjrzymy si
tylko tym punktom kontrolnym, ktre najczciej sprawiaj trudnoci.
Wytyczne WCAG 1 (oraz towarzyszcy im dokument Techniki) s do
proste, nie bj si wic przeczyta ich samodzielnie.

Dostpno i W 3C

Wytyczna 1: Zapewnij rwnowane


odpowiedniki treci d
wikowych i wizualnych
Wytyczna ta ma na celu zaspokojenie potrzeb osb majcych problemy ze
suchem lub wzrokiem. Jednym z najbardziej powszechnych bdw popenianych przez twrcw serwisw WWW jest pomijanie treci alt zwizanych z obrazami. W kodzie HTML 4 wszystkie elementy img musz mie
atrybut alt, cho warto tego atrybutu moe by pusta (a wic dopuszczalne jest tu wyraenie alt="") w przypadku grafik penicych funkcje
wycznie dekoracyjne. W takich przypadkach zdecydowanie powinnimy
uywa moliwoci oferowanych przez CSS, zamiast dodawa tego typu
obrazy za pomoc kodu HTML.
Zapewnianie dostpnoci treci audio i wideo wymaga znacznie wicej ni
tylko prostych odpowiednikw tekstowych, a opis niezbdnych technik, ktre
si tu wykorzystuje, znacznie wykracza poza zakres materiau prezentowanego w tej ksice.
cza do rde informacji na ten temat oraz wiadomoci dotyczcych sposobw zapewniania dostpnoci treci audio i wideo
znajdziesz na kocu niniejszej publikacji.
Wytyczna 2: Nie polegaj wycznie na kolorze
Zalecenie to ma zastosowanie raczej do kodu CSS ni HTML, poniewa
formatowanie zawsze powinno by definiowane za porednictwem mechanizmu CSS, nie za prezentacyjnego kodu HTML. Ocenia si, e nawet
osiem procent mskiej populacji ma pewnego rodzaju problemy z rozrnianiem barw, za osoby korzystajce z urzdze monochromatycznych
(takich jak czytnik Kindle firmy Amazon) nie s w stanie rozrnia jakichkolwiek kolorw poza odcieniami szaroci. Zamiast wic na przykad uywa barwy zielonej w celu wskazania bezpiecznego wyboru i czerwieni do
oznaczania zagroenia, powiniene stosowa ksztaty, etykiety tekstowe
i inne rodzaje wskazwek przekazujcych t informacj.
Wytyczna 3: Korzystaj ze znacznikw oraz arkuszy stylw
i rb to we waciwy sposb
Wytyczna ta sugeruje, e powinnimy uywa technologii WWW nie tylko
zgodnie z liter prawa (ukady stron wykorzystujce tabele mimo wszystko
przejd walidacj), lecz rwnie zgodnie z jego duchem. Nalece do niej
punkty kontrolne maj midzy innymi zapewni , e dokumenty s prawidowe, w kodzie CSS stosowane s jednostki wzgldne, takie jak em i %,
zamiast px, za w kodzie HTML uywane s odpowiednie elementy semantyczne i strukturalne (na przykad nagwki, listy, cytaty itd.).

193

194

Rozdzia 6. > Dostpno

Wytyczna 5: Twrz pynnie przeksztacajce si tabele


Dane tabelaryczne mog powodowa powane problemy w przypadku osb
korzystajcych z urzdze asystujcych, takich jak czytniki ekranowe.
Wytyczna 5 zawiera kilka punktw kontrolnych, ktre maj Ci pomc
w poprawieniu dostpnoci danych tego rodzaju.
Wspomniane punkty kontrolne dotycz uywania nagwkw row i column
w tabelach danych, za w przypadkach skomplikowanych tabel korzystania
z takich elementw jak thead, tfoot oraz tbody w celu grupowania wierszy,
col i colgroup w celu grupowania kolumn, a take atrybutw axis, scope
i headers w celu wskazania relacji wystpujcych pomidzy komrkami
i nagwkami. Sposobami poprawiania dostpnoci tabel danych zajmiemy
si jeszcze w dalszej czci niniejszego rozdziau.
Wytyczna 9: Projektuj zgodnie z zasad niezalenoci od sprztu
Wytyczna 9 koncentruje si na znaczeniu moliwoci uywania serwisu lub
strony WWW niezalenie od rodzaju wykorzystywanego urzdzenia wejciowego, a wic tego, czy zamiast samej myszy stosowana jest klawiatura,
wejciowe urzdzenie gosowe czy te sprzt jeszcze innego typu.
To tylko niektre z wytycznych, lecz wiele wanych i popularnych serwisw WWW nie spenia wymogw stawianych nawet przez nie. Zapewnienie
zgodnoci poziomu AA standardu WCAG 1 jest w duej mierze spraw
prost, a stopie tej zgodnoci da si zwykle oceni w sposb automatyczny
za pomoc odpowiednich narzdzi, ktrymi zajmiemy si ju za chwil.
Oznacza to w praktyce, e do atwo mona wyznaczy poziom zgodnoci
serwisw WWW z tymi wytycznymi, a ich twrcy nie dysponuj wieloma
wymwkami, eby tego nie robi .
Narzdzia do zapewniania jakoci dla WCAG 1
Nie da si sprawdzi mechanicznie zgodnoci ze wszystkimi wytycznymi
WCAG 1, poniewa do oceny stopnia przestrzegania niektrych z nich wymagany jest udzia czowieka, jednak w przypadku tych, dla ktrych jest to moliwe, istnieje sporo narzdzi uatwiajcych proces testowania. Nale do nich:
x CynthiaSays firmy HiSoftware www.cynthiasays.com,
x HERA www.sidar.org/hera/index.php.en,
x WAVE firmy Webaim wave.webaim.org,
x Total Validator www.totalvalidator.com,
x ATRC Web Accessibility Checker www.achecker.ca/checker/
index.php.

Dostpno i W 3C

WCAG 2
Standard WCAG 1 powsta z myl o technologiach WWW istniejcych
w czasach, gdy zosta on opublikowany. W kolejnych latach niektre z nich
bardziej dojrzay, za inne takie jak skrypty DOM zyskay na znaczeniu. Drugie wydanie WCAG, czyli WCAG 2, ma ju zatem nieco inn
struktur.
Zasady, wytyczne, kryteria sukcesu i techniki
WCAG 2 powsta w celu utworzenia wytycznych, ktre s w mniejszym
stopniu zwizane z konkretnymi technologiami, bardziej obiektowe, a
co za tym idzie znacznie atwiej poddaj si testom (przeprowadzanym
za pomoc oprogramowania lub przez ludzi), jak rwnie daj si dostosowa do zmian zachodzcych w dziedzinie technologii WWW. Zgodnie
z owiadczeniem Web Accessibility Initiative WCAG 2 ma znale zastosowanie w przypadku rnych typw technologii sieciowych i technologii
bardziej zaawansowanych, jak rwnie technologii, ktre powstan w przyszoci. Standard zosta take zaprojektowany w taki sposb, aby zgodno z definiowanymi przeze kryteriami sukcesu daa si bardziej precyzyjnie testowa za pomoc testw automatycznych oraz analiz prowadzonych
przez ludzi (www.w3.org/WAI/WCAG20/wcag2faq.html).
Podczas gdy WCAG 1 by zbiorem wytycznych, z ktrymi zwizane byy
punkty kontrolne, WCAG 2 podzielone zostao na cztery gwne zasady.
Kada z nich zawiera szereg wytycznych, za kada z wytycznych ma
pewn liczb punktw kontrolnych noszcych nazw kryteriw sukcesu.
Kade z tych kryteriw jest zwizane z wystarczajcymi technikami (czyli
rekomendowanymi sposobami speniania tego kryterium sukcesu) oraz technikami doradczymi (metodami, ktre same w sobie nie s wystarczajce
do spenienia kryterium, lecz s mimo to zalecane). adna z tych technik
nie jest wymagana w celu spenienia kryterium. W dokumencie Techniki
WCAG 2 opisano rwnie typowe defekty, ktre s definiowane przez grup
robocz jako praktyki twrcze, ktrych zastosowanie sprawia, e tre
WWW nie jest zgodna z WCAG 2.0.
WCAG 2 ma swoich krytykw na forum osb zajmujcych si kwestiami
dostpnoci, a przyjmowanie go jako podstawowego wyznacznika dostpnoci treci WWW odbywa si znacznie wolniej, ni organizacja W3C moga
si spodziewa . Wydaje si jednak, e zastpi on w kocu WCAG 1 jako najwaniejsze rdo wytycznych w tej dziedzinie. Przegld niektrych argumentw przeciwko WCAG 2 wysuwanych przez uczestnikw w tej dyskusji moesz
znale w definicji dostpnoci treci WWW zamieszczonej w anglojzycznej

195

196

Rozdzia 6. > Dostpno

wersji Wikipedii, ktra w momencie pisania niniejszej ksiki bya zaskakujco dobra (en.wikipedia.org/wiki/Web_accessibility#Criticism_of_WAI_
guidelines).
WCAG 2 to dokument znacznie wikszy ni WCAG 1. Zosta on poddany
krytyce gwnie za swoj oglnikowo i zastosowanie niezrozumiaego argonu przykad tej krytyki moesz znale w artykuach zamieszczonych
pod adresami: http://www.alistapart.com/articles/tohellwithwcag2 oraz
http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/wcagguidelines-20.shtml. Standardowi towarzyszy jednak bardzo dokadna
dokumentacja, ktrej zadaniem jest pomaganie twrcom w zrozumieniu
i spenieniu kadego kryterium sukcesu. Opracowano go rwnie w taki
sposb, aby strony speniajce w tej chwili wymogi stawiane przez kryteria
WCAG 1 A i AA w wikszoci przypadkw speniay te kryteria WCAG 2
bez koniecznoci wprowadzania adnych poprawek lub dziki bardzo niewielkiemu nakadowi pracy.
Szczegowy opis otchani i zawioci standardu WCAG 2 daleko wykracza
poza zakres materiau prezentowany w niniejszej ksice, jednak wiele interesujcych czy i adresw innych dokumentw zwizanych z tymi wytycznymi znajdziesz w dodatku rda zamieszczonym na kocu tej publikacji.
Narzdzia do zapewniania jakoci dla WCAG 2
Z uwagi na to, e WCAG 2 nadal znajduje si na stosunkowo wczesnym etapie rozwoju, dostpnych jest te w jego przypadku znacznie mniej zautomatyzowanych narzdzi do zapewniania jakoci ni w przypadku WCAG 1.
Z zaprezentowanej wczeniej listy rozwiza dla WCAG 1 jedynie narzdzie ATRC Web Accessibility Checker zapewnia dodatkow moliwo testowania stron pod ktem zgodnoci z wymogami WCAG 2.

ARIA
Wraz z tym, jak treci i serwisy WWW staway si bardziej zoone i zaczy
w coraz wikszym stopniu przypomina aplikacje, wzrastaa te trudno
zapewniania, a nawet definiowania ich dostpnoci. W celu rozwizania tych
problemw WAI opracowaa pakiet Accessible Rich Internet Applications,
zwany te WAI-ARIA lub czciej po prostu ARIA. ARIA jest zbiorem rozszerze jzyka HTML, ktrych mona uywa do opisywania elementw, dziki czemu moliwe jest identyfikowanie roli, stanw i waciwoci
kadego z nich w sposb, ktry znacznie zwiksza dostpno wynikowej
strony.

Dostpno i W 3C

W punkcie tym przyjrzymy si najpierw pobienie temu, co umoliwia Ci


ARIA. Cho jest ona w dalszym cigu w pocztkowej fazie rozwoju, cieszy
si naprawd niez obsug w przypadku wszystkich wspczesnych przegldarek internetowych, w tym take programu Internet Explorer 8, jak
rwnie duej liczby czytnikw ekranowych, poza tym wydaje si cakiem
jasne, e twrcy przegldarek rzetelnie popieraj t technologi. ARIA pozostanie z nami na stae.
Dostp za pomoc klawiatury
Strona czy aplikacja WWW, aby bya dostpna, musi by w peni uyteczna
za pomoc urzdze innych ni mysz. ARIA zapewnia, e aplikacje i strony
mog by uywane za pomoc klawiatury, nie wymagajc zastosowania
myszy.
W standardzie HTML 4 ognisko wprowadzania (ang. focus) okrela, ktry
element strony jako pierwszy otrzymuje dane wejciowe wprowadzone przez
uytkownika za pomoc klawiatury lub innego urzdzenia wejciowego.
Ognisko wprowadzania moe przej ograniczona liczba elementw, takich
jak a, area, button, input oraz select, a uytkownik moe korzysta z klawisza tabulacji w celu cyklicznego przechodzenia pomidzy nimi. Porzdek
przechodzenia klawiszem tabulacji (ang. tab order) tych elementw (czyli
kolejno , w ktrej bd one przejmoway ognisko wprowadzania wraz z tym,
jak uytkownik bdzie naciska klawisz tabulacji) jest okrelany przez
kolejno ich wystpowania w rdowym kodzie HTML lub te przez warto atrybutu tabindex, ktry za pomoc liczb cakowitych definiuje odpowiedni porzdek w nastpujcy sposb: im nisza jest warto przypisana
atrybutowi, tym wczeniejsze miejsce element zajmuje w porzdku przechodzenia.
Twrcy serwisw WWW mog za pomoc jzyka HTML 4 tworzy wasne
kontrolki aplikacji lub widgety, jak s one nazywane w technologii ARIA.
Uywa si w tym celu elementw, ktre nie przejmuj ogniska wprowadzania i ktre z racji tego nie mog by wykorzystywane jedynie za pomoc
klawiatury. Stosujc technologi ARIA, mona sprawi , aby wszystkie
widoczne elementy miay przypisany tabindex, dziki czemu mog one
przejmowa ognisko wprowadzania i dziki czemu mona ich uywa za
pomoc klawiatury.
Ta moliwo technologii ARIA jest w tej chwili obsugiwana przez przegldarki IE 8, Opera 9.5, Safari 4 oraz Firefox 3.5.

197

198

Rozdzia 6. > Dostpno

Role
W kodzie HTML do dostarczania semantycznej informacji o dokumentach wykorzystuje si nazwy elementw; mimo e sprytni twrcy serwisw
WWW uywaj rwnie atrybutw class i id do doczania dodatkowych
informacji na temat elementw, rozwizanie to ma raczej charakter zwyczajowy i nie jest oficjaln czci standardu. Wynika std, e jzyk HTML
jest nieco zuboay, jeli chodzi o jego moliwoci semantyczne. ARIA rozszerza moliwoci standardu XHTML 1.1 zwizane z atrybutem role,
pozwalajc twrcom opisywa dodatkow funkcj wypenian przez element,
niezwizan bezporednio z tym, jakiego rodzaju jest to element. Na przykad listy s elementami li, mog te jednak odgrywa rol nawigacyjn,
cho i to nie musi by ich jedyna funkcja. Technologia ARIA dostarcza zbir
moliwych wartoci atrybutu role, czyli zestaw nazw typw rl penionych
przez element. Fachowo mwi si o tym, e zapewnia atrybutowi role
ontologi.
Korzystajc z atrybutu role do opisywania roli odgrywanej przez okrelony
element, twrcy serwisw WWW mog sprawi , aby przegldarki rozumiejce role technologii ARIA lepiej przedstawiay uytkownikom struktur
dokumentu. Atrybut role moe rwnie zapewnia standardowy, przewidywany przez uytkownika sposb dziaania i wygld okrelonych rodzajw kontrolek, na przykad pl wyboru, ktre s implementowane przez
twrc za pomoc innych ni typowe elementw HTML (typowym elementem
byby w tym przypadku <input type="checkbox">).
Role oferowane przez technologi ARIA nale do wielu rnych kategorii,
wrd ktrych wymieni mona nastpujce:
x Role znakw orientacyjnych, ktre opisuj regiony strony
przeznaczone do celw nawigacyjnych. Nale do nich: application,
banner, main, navigation oraz search.
x Role struktury dokumentu, ktre opisuj funkcj odgrywan przez
element w strukturze dokumentu. Nale do nich: navigation,
section, note oraz heading (jak przekonamy si w rozdziale 11.,
s one zwykle cile zwizane z nowymi elementami strukturalnymi
standardu HTML 5).
x Role struktury aplikacji, ktre opisuj funkcj odgrywan przez
element w strukturze aplikacji. Nale do nich: alert, alertdialog,
progressbar oraz status.
x Elementy interfejsu uytkownika, takie jak treegrid, toolbar
oraz menuitem.

Dostpno i W 3C

x Role elementw wejciowych uytkownika, takie jak checkbox,


slider oraz option.
Korzystanie z atrybutu role jest atwe polega po prostu na tym, e dodajemy jedn ze zdefiniowanych wartoci roli jako warto atrybutu role
elementu, dokadnie tak, jak odbywao si to w przypadku wartoci atrybutu class. Zamy na przykad, e chcemy uy elementu input z type
image jako przycisku. W celu zapewnienia odpowiedniego opisu funkcji elementu wejciowego powinnimy po prostu doda rol button, tak jak zostao
to pokazane poniej:
<input type="image" alt="font-weight: bold" src="./images/
bold-unpressed.png" role="button">

Co przegldarka zrobi z informacj, e dany element jest przyciskiem, pozostawia si ju inwencji twrcw programu. Informacja ta jest jednak obecna
i moemy wyobrazi sobie, w jaki sposb przegldarki i urzdzenia asystujce mog wykorzysta t wiedz nie tylko dla potrzeb osb niepenosprawnych, lecz rwnie wszystkich innych uytkownikw korzystajcych
z serwisu.
Stany i waciwoci
Oprcz umoliwiania twrcom serwisw WWW opisywania rl odgrywanych
przez elementy technologia ARIA pozwala te jawnie deklarowa stany
elementw, a wic na przykad to, czy dany element jest w tej chwili nacinity, jak rwnie podawa innego rodzaju informacje zwizane z elementami. Stany dostarczaj dynamicznych danych na temat elementw, czyli
takich informacji jak to, czy pole wyboru jest zaznaczone, podczas gdy waciwoci zapewniaj informacje podstawowe, zwizane z sam natur obiektw. Oznacza to w praktyce, e rozrnienie pomidzy waciwociami
a stanami nie jest szczeglnie wane, poniewa obydwa te typy informacji
dziaaj w bardzo podobny sposb. Naley tu jednak zaznaczy rnic
wystpujc pomidzy stanami i waciwociami a atrybutem role. Gdy
korzystamy z atrybutu role, przypisujemy wartoci do samego tego atrybutu, lecz istnieje wiele atrybutw stanw i waciwoci, za kady z nich
posiada swoj wasn nazw innymi sowy, nie istniej atrybuty ARIA
o nazwie state lub property. Nazwy atrybutw waciwoci i stanw ARIA
zawieraj przedrostek aria-; przykadem moe tu by stan aria-disabled,
ktry moe przyjmowa wartoci true i false, bd te waciwo ariaflawto, ktra wskazuje nastpny element w zalecanej kolejnoci odczytywania.

199

200

Rozdzia 6. > Dostpno

Wr my do naszego przykadu z elementem wejciowym. Gdyby rozpatrywanym elementem by przycisk, ktry moe przyjmowa dwa stany (wcinity
i niewcinity), poinformowa o stanie biecym moglibymy za pomoc
stanu ARIA aria-pressed, tak jak zostao to przedstawione poniej.
<input type="image" alt="font-weight: bold" src="./images/
bold-unpressed.png" role="button" aria-pressed="false">

Moglibymy te nastpnie zmieni stan aria-pressed, korzystajc z kodu


JavaScript, gdy element zostaby kliknity lub odebra zdarzenie zwizane
z naciniciem klawisza Enter.
CSS i ARIA
Wszystkie nowoczesne przegldarki internetowe, w tym rwnie IE 8, umoliwiaj nam formatowanie elementw w oparciu o ich waciwoci i stany
ARIA (a take wartoci ich atrybutw role) za pomoc selektorw atrybutw. Na przykad aby zmieni kolor ta elementu w momencie, gdy jest
on nacinity, uylibymy nastpujcego kodu CSS:
[aria-pressed=true] {
background-color: #cfb725;
}

Dodawanie rl, waciwoci i stanw ARIA do naszych serwisw WWW


lub aplikacji wymaga dodatkowego nakadu pracy, lecz nie jest to nakad
o wiele wikszy ni powicony na zastosowanie wartoci class i id, jeli
zdecydowalibymy si na to rozwizanie do osignicia tego samego efektu.
Zamiast jednak zmaga si z koniecznoci zapewniania wasnego mechanizmu przechwytywania waciwoci i stanw widgetu czy te innej czci
strony lub aplikacji, moemy tu po prostu ponownie wykorzysta ten doskonale przemylany, zestandaryzowany sposb. Nie tylko pomoe nam to
poprawi dostpno i ogln uyteczno naszej czci sieci WWW, lecz rwnie umoliwi pisanie atwiejszego w konserwacji i bardziej spjnego kodu.
Z uwagi na to, e twrcy serwisw WWW coraz chtniej uywaj bibliotek
i platform, takich jak Dojo, JQuery, YUI oraz innych rozwiza tego
rodzaju, o ktrych wspominalimy w rozdziale 5., jak rwnie ze wzgldu
na fakt, e biblioteki te w coraz wikszym stopniu wspieraj technologi
ARIA, znaczna cz pracy majcej na celu zapewnienie jej obsugi jest ju
wykonana za nas przez twrcw tych bibliotek. Z efektw tych wysikw
moesz korzysta midzy innymi w nastpujcych rozwizaniach:

Dostpno i W 3C

x JQuery Podstawowy zesp programistw rozpocz prace


nad zapewnieniem wsparcia technologii ARIA i istnieje ju wtyczka
o nazwie jARIA, ktrej zadaniem jest udostpnienie moliwoci
ustawiania i pobierania rl, waciwoci i stanw za porednictwem
kodu JavaScript i przy uyciu skadni JQuery.
x Dojo Zestaw narzdzi Dojo 1.0 zapewnia pene wsparcie
technologii ARIA w przypadku zbioru widgetw DojoX.
x YUI Wiele widgetw YUI oferuje obsug technologii ARIA.
Obsuga zapewniana przez przegldarki i urzdzenia asystujce
A zatem jaki poziom obsugi zapewniaj wspczesne przegldarki internetowe moliwociom oferowanym przez technologi ARIA? Przekonalimy si ju, e atrybut tabindex oraz moliwo przechwytywania ogniska
wprowadzania przez kady widoczny element obsugiwane s bardzo powszechnie, dotyczy to rwnie programu Internet Explorer w wersji 5 i pniejszych. Oto jak maj si sprawy w przypadku innych moliwoci tej
technologii:
x IE 8 zapewnia obsug rl, waciwoci i stanw ARIA.
x Firefox 3.5 oferuje najpeniejsz obsug technologii ARIA
ze wszystkich wspczesnych przegldarek internetowych,
w tym take obsug rl, waciwoci i stanw.
x Zgodnie z tym, co publikuje przedsibiorstwo Opera Software,
Opera 9.5 obsuguje parsowanie ARIA w kodzie HTML
Wsparcie to ma charakter eksperymentalny, poniewa standard
ARIA si ustala.
x Safari 4 oferuje ograniczon obsug technologii ARIA, umoliwiajc
korzystanie z wielu czsto uywanych rl, nie zapewniajc jednak
wsparcia dla stanw czy waciwoci. Z uwagi na fakt, e Safari
radzi sobie z obsug selektorw atrybutw CSS dla dowolnych
atrybutw, niezalenie od tego, czy s one czci biecego
standardu HTML, czy te nie, moliwe jest formatowanie kodu
HTML wywietlanego za pomoc Safari przy uyciu wartoci
atrybutw waciwoci i stanw ARIA. Dokadnie to samo odnosi
si do Opery, Firefoksa 3.5, a nawet Internet Explorera.
x By moe najwaniejsze jest to, e dwa najbardziej rozpowszechnione
czytniki ekranowe, czyli Window-Eyes oraz JAWS, oferuj solidne
wsparcie dla technologii ARIA w przypadku swoich najnowszych
wersji.

201

202

Rozdzia 6. > Dostpno

Przedstawione tu zaangaowanie twrcw w implementacj technologii ARIA


wskazuje szerokie poparcie, jakie zdobya ona sobie wrd osb zwizanych z WWW. Oprcz tego wiele bardzo popularnych serwisw i aplikacji
WWW, w tym takie jak czytnik Google Reader firmy Google czy Gmail,
intensywnie wykorzystuje t technologi. W zwizku z tym twrcy mog
mie pewno , e ARIA stanowi technologi, w ktr zdecydowanie warto
zainwestowa swj czas i wysiek niezbdny do jej opanowania.
ARIA i walidacja
Jak zatem moemy wykorzystywa technologi ARIA w naszym kodzie ju
dzisiaj? Wiemy, e proste dodawanie do naszego kodu atrybutw nienalecych do specyfikacji jzyka HTML spowoduje, e opracowane w ten sposb
dokumenty bd nieprawidowe. Istnieje kilka metod korzystania z tych
moliwoci, ktre zapewniaj jednoczenie poprawno dokumentw, ich
zastosowanie moe jednak wymaga nieco wicej ni tylko zwykego wyboru
odpowiedniego DOCTYPE.
Moliwe jest uywanie wasnych DTD (definicji typu dokumentu ang. document type definitions), ktre zawieraj atrybuty ARIA. Obecnie nie istniej
odpowiednie typy DOCTYPE dla kodu HTML lub XHTML, cho zwracano si
ju do organizacji W3C, aby je opracowaa. Paciello Group, doskonale znana
i bardzo powaana firma zajmujca si doradztwem zwizanym z zagadnieniami dostpnoci, zaproponowaa eksperymentaln definicj typu dokumentu o nazwie HTML 4.01+ ARIA (wicej na ten temat znajdziesz pod
adresem: www.paciellogroup.com/blog/?p=107), ktrej mona uywa wraz
z walidatorem kodu HTML oferowanym przez W3C.
Eksperymentalny walidator HTML 5 udostpniony pod adresem www.
validator.nu rwnie umoliwia sprawdzanie kodu ARIA i HTML 5. Zgasza
on bdy w przypadku natrafienia na typy DOCTYPE niezgodne ze standardem HTML 5, ale jest bardzo przydatnym narzdziem, dziki ktremu
mona zapewni , e technologia ARIA jest uywana w naleyty sposb.
Walidator ten ma pewne ograniczenia w kwestii aspektw technologii ARIA,
ktre jest w stanie przetestowa , a jednym z nich jest brak moliwoci rozpoznawania rl punktw orientacyjnych.
Rozwj technologii ARIA prowadzi jednak do znacznie waniejszego pytania: czy walidacja zawsze powinna by istotnym celem? W kocu mimo
potencjalnej olbrzymiej wartoci technologii ARIA i mocnego wsparcia ze
strony przegldarek internetowych bez zapewnienia dobrej metody tworzenia prawidowych dokumentw zawierajcych elementy ARIA technologia
ta polegnie na przeszkodzie walidacji. Gdy mamy do czynienia z wykorzysta-

Typowe problemy zwizan e z dos tpnoci (i ich rozwi zania)

niem nowych technologii WWW, walidacja przypomina nieco prowadzenie


samochodu przy patrzeniu wycznie we wsteczne lusterko. Henri Sivonen,
jedna z bardziej wpywowych osb w procesie tworzenia jzyka HTML 5
(a take twrca walidatora kodu HTML 5), stwierdzi:
Wykorzystanie nowych moliwoci jest znacznie waniejsze ni
osiganie zgodnoci ze starszymi celami walidacji. ARIA dodaje
pewne znaczniki, dlatego nie spenia wymogw walidacji starszych
standardw, takich jak XHTML 1.0 (bez wstecznej modyfikacji tego,
czym jest XHTML 1.0). (cytat za stron: wiki.codetalks.org/wiki/
index.php/Web_2.0_Accessibility_with_WAI-ARIA_FAQ).
Dostpne s odpowiednie rozwizania, jeli walidacja jest bezwzgldnie
konieczna z uwagi na wymagania wewntrzne lub regulacyjne. Jeli jednak walidacja ma zasadniczo charakter mechanizmu zapewniania jakoci,
moliwe jest inteligentne wykorzystanie walidatorw kodu HTML 4 lub
HTML 5 w celu przeprowadzenia kontroli jakoci Twojego kodu zawierajcego elementy ARIA nawet wwczas, gdy dokument nie jest cile zgodny
z ich wymogami.

Typowe problemy zwizane z dostpnoci


(i ich rozwizania)
Rozdzia ten zakoczymy opisem niektrych z najczciej spotykanych problemw dotyczcych dostpnoci oraz sposobw ich rozwizywania wycznie za pomoc kodu HTML i CSS.

cza i tytuy

cza s intensywnie wykorzystywane przez czytniki ekranowe i urzdzenia


asystujce w celu umoliwienia uytkownikom szybkiego dostpu do zawartoci strony. Mimo e stanowi bardzo niewielki procent tekstu znajdujcego si na stronie, wielu uytkownikom oferuj kluczow metod dostpu
do jej zawartoci. Tekst cza jest istotn wskazwk dotyczc tego, dokd
to cze prowadzi. W celu zapewnienia optymalnej dostpnoci tekst ten
powinien jasno identyfikowa cel kadego cza (WCAG 1) i nie powinien
zawiera w sobie jakichkolwiek zaoe zwizanych z wykorzystywanym
przez uytkownika urzdzeniem wejciowym, co przejawia si moe w stosowaniu takich opisw czy jak kliknij tutaj. Gdy w wikszej liczbie czy
znajdujcych si na stronie wykorzystuje si ten sam tekst, wszystkie one
powinny wskazywa t sam lokalizacj.

203

204

Rozdzia 6. > Dostpno

Cho wiele osb uwaa, e atrybut title zwizany z elementami czy dostarcza dodatkowych informacji istotnych dla dostpnoci, w rzeczywistoci
wcale nie musi on by a tak pomocny. Atrybut ten moe w gruncie rzeczy
wyrzdzi pewne szkody, moe bowiem przesania inn tre w przypadku
przegldarek, ktre wywietlaj informacj dostarczan przez title w postaci
podpowiedzi, nie jest dostpny, zanim uytkownik nie poruszy mysz, nie
mog te z niego korzysta uytkownicy czytnikw ekranowych, w ktrych
nie okrelono ustawie odpowiedzialnych za odczytywanie tych wartoci.
Przedstawiciele brany nie s zgodni w kwestii tego, czy naley uywa atrybutu title, czy te raczej unika jego stosowania, zdecydowanie jednak
nie powinien on stanowi jedynego dostpnego dla uytkownikw sposobu
identyfikacji docelowego miejsca cza.

Nagwki
Czytniki ekranowe czsto wykorzystuj nagwki znajdujce si na stronie
do tworzenia spisw treci, ktre maj pomaga uytkownikom w jej przegldaniu i przechodzeniu do odpowiednich obszarw. Jeli stosujesz elementy nagwkw w roli nagwkw i uywasz ich we waciwej kolejnoci,
masz szans sprawi , e ten sposb dziaania czytnikw ekranowych stanie
si bardziej uyteczny. Nie pomijaj zatem poszczeglnych poziomw nagwkw (a wic nie przeskakuj na przykad bezporednio z h2 do h4). Style
nagwkw widoczne na stronie mona zawsze zmieni za pomoc mechanizmu CSS, dlatego nie ma potrzeby pomijania w kodzie ktregokolwiek
poziomu nagwkw.

Tekst alternatywny
Kada tre nietekstowa powinna mie swj tekstowy zamiennik. W przypadku obrazw moesz go zapewni , stosujc atrybut alt. (Pedantyczna
uwaga weterana zamierzchych czasw: alt to nie znacznik). Wszelka tre
dodawana za pomoc atrybutu alt powinna by zwiza i cho w przypadku wszystkich elementw img wymagane jest zastosowanie tego atrybutu
w celu zapewnienia udanej walidacji strony dla obrazw o charakterze
czysto dekoracyjnym w roli wartoci atrybutu alt powinien wystpowa
pusty cig znakw. Jeszcze lepiej jednak, gdy czysto dekoracyjne obrazy
(a wic na przykad symbole pozycji listy czy ozdobne obrazy przeznaczone
do roli te) s doczane za pomoc mechanizmu CSS, nie za w kodzie
strony, poniewa ten ostatni powinien by zarezerwowany wycznie dla
treci uytecznej z semantycznego punktu widzenia.

Typowe problemy zwizan e z dos tpnoci (i ich rozw i  zania)

Kontrast kolorw
Uywanie do nieprecyzyjnego terminu niezdolnoci widzenia kolorw prowadzi czsto do nieporozumienia polegajcego na tym, e zwykym ludziom
moe si wydawa , i osoby z t przypadoci widz wiat jedynie w odcieniach szaroci. Ten rodzaj uszkodzenia wzroku (czyli widzenie monochromatyczne) jest jednak w rzeczywistoci bardzo rzadki; wikszo ludzi
z upoledzeniem widzenia barw widzi w kolorze, ma jednak trudnoci z rozrnianiem okrelonych kolorw, z rozrnianiem ktrych atwo radz sobie
osoby niecierpice na tego rodzaju dolegliwo .
Mimo e bardzo wane jest unikanie korzystania z kolorw w celu komunikowania pewnych znacze (nie naley zatem na przykad stosowa barwy
czerwonej w roli ostrzeenia, jeli nie towarzyszy jej dodatkowy ksztat,
tekst lub informacja innego rodzaju), trzeba rwnie rozway inne kwestie dostpnoci zwizane z kolorami. Powszechnie lekcewaonym problemem jest brak wystarczajcego kontrastu graficznego pomidzy tekstem
i jego tem. Zestawienie tekstu i ta, ktre osobie widzcej prawidowo wydaje
si w oczywisty sposb mocno skontrastowane, moe by zupenie nieczytelne dla kogo, kto cierpi na daltonizm lub inn wad wzroku.
Za pomoc wielu narzdzi jestemy w stanie stwierdzi , czy para kolorw
charakteryzuje si odpowiednio wysokim kontrastem, aby zapewni czytelno , jednak ich uywanie moe by do czasochonne, poniewa wymaga
od Ciebie rcznego porwnywania kadej stosowanej w serwisie kombinacji
barwy pierwszoplanowej z kolorem ta. Narzdzia takie jak AccessColor
firmy AccessKeys (www.accesskeys.org/tools/color-contrast.html) umoliwiaj
analizowanie caych dokumentw poprzez przegldanie skryptw DOM
i wskazywanie potencjalnych problemw z kontrastem. Wikszo narzdzi
do sprawdzania kontrastu radzi sobie jednak wycznie w sytuacjach, gdy
tekst porwnywany jest z kolorem ta (nie za z obrazem), a take nie testuje
kontrastu w przypadku efektw dynamicznych, takich jak unoszenie, nie
jest zatem w stanie zapewni niezawodnych metod badania kontrastu barw.

Tabele
Tabele sprawiaj szczeglne problemy osobom ze sabym wzrokiem. Struktura tabeli, ktra wydaje si oczywista dla osb widzcych prawidowo, moe
by bardzo zagmatwana, gdy zostaje przedstawiona przez czytnik ekranowy.
Jzyk HTML oferuje szereg elementw i atrybutw, ktrych zadaniem
jest uatwienie odczytywania i interpretowania zawartoci tabel za pomoc
czytnikw ekranowych.

205

206

Rozdzia 6. > Dostpno

Oprcz standardowych elementw td (danych tabeli) tabele mog rwnie


zawiera elementy nagwkw tabeli (th), o czym przekonalimy si ju
w rozdziale 4. Aby w jak najwikszym stopniu poprawi dostpno tabel,
w przypadku komrek stanowicych nagwki wierszy lub kolumn powiniene korzysta z elementw th.
caption oraz summary
Zadaniem elementu tabeli caption jest dostarczanie krtkiego opisu tabeli,
ktry jest wykorzystywany zarwno w sposb wizualny przez przegldark,
jak i przez czytniki ekranowe. Zaleca si, aby wszystkie tabele byy opisane
w ten sposb. Element caption powinien pojawi si bezporednio po otwierajcym znaczniku tabeli. Tabele mog mie tylko jeden element tego typu.
<table>
<caption>Harmonogram pierwszego dnia konferencji</caption>

Oprcz niego element tabeli moe zawiera atrybut summary, ktrego zadaniem jest dostarczanie przegldu zawartoci tabeli uytkownikom czytnikw ekranowych. Osoby widzce prawidowo mog szybko dowiedzie si,
jaki jest cel zamieszczenia tabeli i jaka jest jej zawarto ; atrybut summary
ma dostarczy tej wiedzy rwnie ludziom z problemami wzrokowymi.
W przeciwiestwie do opisw definiowanych za pomoc elementw caption
podsumowania okrelane przy uyciu atrybutw summary nie s renderowane przez przegldarki internetowe s one uywane wycznie przez
czytniki ekranowe.
<table summary="Peny harmonogram wszystkich trzech cieek
pierwszego dnia konferencji Web Directions South 2009">
<caption>Harmonogram pierwszego dnia konferencji</caption>

abbr oraz scope


Do tej pory udao nam si ju dostarczy przegldarce cakiem spor ilo
informacji, ktre sprawi, e nasza tabela bdzie znacznie bardziej dostpna.
Jednak zwaszcza w przypadku skomplikowanych tabel jzyk HTML oferuje
du liczb niedocenianych, lecz bardzo pomocnych moliwoci, z ktrych
mog korzysta czytniki ekranowe w celu uatwienia uytkownikom waciwego zinterpretowania tabel danych.
Z uwagi na fakt, e czytniki ekranowe odczytuj zwykle wszystkie komrki
tabeli (w tym rwnie komrki nagwkw) w sposb liniowy, kady nagwek jest odczytywany wielokrotnie, co moe by do czasochonne i uciliwe. Aby tego unikn , moesz zastosowa atrybut abbr zwizany z ele-

Typowe problemy zwizan e z dos tpnoci (i ich rozw i  zania)

mentem th. Pozwala nam to na zdefiniowanie skrtu tekstu, ktry ma by


odczytywany zamiast penej treci elementu th.
<th abbr="projetkowanie"> cieka Projektowa</th>
<th abbr="meneder"> cieka Menederska</th>
<th abbr="tworzenie"> cieka Twrcza</th>

Z samej struktury tabeli nie zawsze jasno wynika, czy element th jest nagwkiem wiersza, czy te kolumny komrek. Atrybut scope umoliwia nam
okrelenie, dla ktrych komrek element th stanowi nagwek. W przedstawionym powyej przypadku nagwki zwizane s z kolumnami, dlatego
odpowiedni kod powinien mie nastpujc posta :
<th abbr="projektowanie" scope="col"> cieka Projektowa</th>
<th abbr="meneder" scope="col"> cieka Menederska</th>
<th abbr="tworzenie" scope="col"> cieka Twrcza</th>

W przypadku stosunkowo prostych tabel czytniki ekranowe mog korzysta z atrybutu scope w celu odczytywania nagwka (lub jego skrtu, jeli
zastosowalimy odpowiedni atrybut abbr) bezporednio przed zawartoci
komrki.
Na przykad na rysunku 6.1 widoczna jest tabela, w przypadku ktrej czytnik ekranowy mgby odczyta zaznaczon komrk jako: projektowanie
Osadzanie czcionek i typografia Marek Butelka. Jednak jak doskonale
pokazuje ten przykad nadal jest to odlege od penego obrazu danych,
ktre naleaoby odczyta z tabeli. Informacja, ktr czytnik powinien otrzyma , musiaaby raczej brzmie 10:45 11:40 projektowanie Osadzanie
czcionek i typografia Marek Butelka. W istocie z komrk naley tu poczy wicej ni tylko jeden nagwek. Moemy to zrobi , dodajc atrybut id
do kadego z nagwkw, a nastpnie korzystajc z atrybutw headers zwizanych z elementami td w celu powizania z nimi odpowiednich elementw th.
<table summary="Peny harmonogram wszystkich trzech cieek
pierwszego dnia konferencji Web Directions South 2009">
<caption>Harmonogram pierwszego dnia konferencji</caption>
<tr>
<th>Godzina</th>
<th abbr="projektowanie" scope="col"> cieka
Projektowa</th>
<th abbr="meneder" scope="col"> cieka Menederska</th>
<th abbr="tworzenie" scope="col"> cieka Twrcza</th>
</tr>
<tr>

207

208

Rozdzia 6. > Dostpno

Rysunek 6.1.
Osoba o dobrym
wzroku moe atwo
wywnioskowa,
e prezentacja
dotyczca osadzania
czcionek naley
do cieki projektowej
i rozpocznie si
o godzinie 10:45.
Dla uytkownikw
korzystajcych
z czytnikw
ekranowych
z pewnoci nie bdzie
to takie proste,
chyba e zastosujemy
odpowiednie znaczniki

<th id="godzina1">7:00 9:00</th>


<td colspan="3">Rejestracja</td>
</tr>
<tr>
<th id="godzina2">9:00 9:10</th>
<td colspan="3">Otwarcie</td>
</tr>
<tr>
<th id="godzina3">9:10 10:15</th>
<td colspan="3">Otwierajca prezentacja oglna</td>
</tr>
<tr>
<th id="godzina4">10:15 10:45</th>
<td colspan="3">Poranna herbata</td>
</tr>
<tr>
<th id="godzina5">10:45 11:40</th>
<td headers="projektowanie godzina5"><a
href="http://south09...">Osadzanie czcionek...</a>
<a href="http://south09...">Marek Butelka</a></td>
<td headers="meneder godzina5"><a
href="http://south09...">Dalej...></a></td>

Typowe problemy zwizan e z dos tpnoci (i ich rozw i  zania)


<td headers="tworzenie godzina5"><a
href="http://south09...">...</a></td>
</tr>

Cho zapewnienie tych dodatkowych informacji wymaga pewnego nakadu


pracy zwizanego z kodowaniem, ich wpyw na dostpno strony WWW
dla osb korzystajcych z czytnikw ekranowych moe mie bardzo istotne
znaczenie. Podobnie jak wikszo sposobw tworzenia technika ta widziana
i stosowana po raz pierwszy moe Ci si wydawa zbdnym ciarem,
ale z czasem wykorzystywanie odpowiednich atrybutw i elementw stanie
si Twoj drug natur.

Formularze
Bezporednio i w znacznym stopniu moesz poprawi dostpno swoich
stron WWW przez zastosowanie odpowiednich znacznikw w stosunku do
zamieszczanych na nich formularzy. Wykorzystanie kilku prostych metod
pozwoli Ci znacznie zwikszy uyteczno formularzy dla osb z rnego
rodzaju ograniczeniami.
Niezwykle istotnych informacji dla uytkownikw czytnikw ekranowych
dostarczaj etykiety pl formularzy. Mimo e wskazwki graficzne znacznie uatwiaj okrelenie funkcji poszczeglnych pl tym z nas, ktrzy dysponuj dobrym wzrokiem, uytkownicy czytnikw ekranowych nie bd
w stanie w prosty sposb stwierdzi , do czego su pola formularza, jeli nie
zostan one jawnie i prawidowo poczone z odpowiednimi etykietami.
Niektre elementy formularzy na przykad elementy button maj
swoje wasne etykiety. W ich przypadku warto atrybutu value stanowi
etykiet danego elementu. Jeli nie istnieje adna jawna etykieta, jak ma
to miejsce w przypadku wikszoci elementw formularzy, naley zastosowa element label i za pomoc jego atrybutu for powiza go bezporednio z elementem, dla ktrego ma on by etykiet. Poniej zaprezentowany
zosta sposb, dziki ktremu mona zapewni maksymaln dostpno
w przypadku pola tekstowego posiadajcego etykiet:
<label for="nazwisko" id="etykieta-nazwisko">Nazwisko</label>
<input type="text" id="nazwisko" aria-labelledby=
"etykieta-nazwisko">

Zwr uwag na fakt, e zastosowalimy tu rwnie atrybut ARIA arialabelledby w obrbie samego elementu formularza a wic w elemencie input przedstawionym w poprzednim przykadzie w celu poinformowania przegldarki o id elementu, ktry jest opisywany przez biecy

209

210

Rozdzia 6. > Dostpno

element. W przykadzie naszym wskazalimy zatem, e element (a dokadnie element label) z id o wartoci etykieta-nazwisko stanowi etykiet dla
elementu input, ktrego id to nazwisko.
Spostrzegawczy czytelnicy mog te zauway , e atrybut aria-labelledby
zachowuje si tak jak dostpny w standardzie HTML 4 atrybut for, dziaa
jednak niejako w przeciwnym kierunku: w przypadku for to element etykiety identyfikuje element opisywany, wykorzystujc do tego jego id, za
w przypadku aria-labelledby to sam element opisywany wskazuje opisujcy go element za pomoc jego id. Zwr take uwag na to, e nazwa
labelledby, cho nie jest zgodna ze standardow, poprawn pisowni amerykask, jest w tym przypadku jak najbardziej prawidowa.
Gdy nie mona zastosowa elementu label, WCAG 2 sugeruje, e w roli
etykiety elementu wystarczy uy nalecego do niego atrybutu title. Do
skorzystania z title moemy by na przykad zmuszeni w przypadku pola
wyszukiwania znajdujcego si na pasku narzdzi strony, gdzie etykieta
musiaaby zaj wicej miejsca w poziomie, ni jest to moliwe.
Grupowanie elementw pl
Zrozumienie bardziej skomplikowanych formularzy mona uatwi uytkownikom poprzez zgrupowanie zwizanych ze sob pl i wyposaenie kadej
z tych grup w odpowiednie nagwki. Jzyk HTML wanie w tym celu oferuje elementy fieldset oraz legend. Zbir pl jest po prostu elementem
fieldset, ktry zawiera wszystkie zwizane ze sob elementy formularza.
Pierwszym elementem wchodzcym w skad fieldset powinien by element
legend, ktry spenia tu podobn funkcj jak opis w przypadku tabeli.
<fieldset>
<legend>Dane do rozliczenia</legend>
<p>Najpierw jednak musimy wiedzie, <strong>kto zapaci za
bilety?</strong></p>
<ol>
<li>
<label for="billing_name"><em
class="required">*Nazwisko</em></label>...
</fieldset>

Sposoby, ktre tu opisalimy, pozwalaj poradzi sobie z wieloma typowymi


problemami dotyczcymi dostpnoci, z jakimi spotykaj si uytkownicy
internetu. Implementowanie ich nie jest zwykle zbyt uciliwe, a znacznie
poprawia wygod korzystania z naszych serwisw WWW w przypadku osb,

Podsumowanie

ktre w najwikszym stopniu s uzalenione od sieci. Sposoby te w duej


mierze pomagaj rwnie w spenieniu ewentualnych wymaga stawianych
przez regulacje prawne i instytucjonalne organizacji, dla ktrej pracujesz.

Podsumowanie
W rozdziale tym oglnie przyjrzelimy si kwestii dostpnoci, w tym rwnie zwizanym z ni uwarunkowaniom prawnym i etycznym, istniejcym
standardom W3C oraz wystpujcym tu specyficznym problemom i ich
rozwizaniom. Co oprcz tego powiniene wynie z jego lektury? Najwaniejsz ide jest tutaj to, e prawdziwej dostpnoci nie da si osign
jedynie poprzez wdraanie listy odpowiednich poprawek na samym kocu
procesu tworzenia serwisu WWW, lecz raczej w wyniku zastosowania holistycznego podejcia do projektowania i tworzenia treci WWW. Z tak pojtej dostpnoci korzystaj nie tylko osoby niepenosprawne, lecz rwnie
wszyscy uytkownicy efektw naszych dziaa. (Te same sposoby, ktre
pozwalaj poprawi dostpno treci, zwykle zwikszaj take jej ogln
uyteczno ).
Rola dostpnoci w tworzeniu serwisw WWW znacznie wzrosa w ostatnich dziesiciu latach, a odbyo si to w duej mierze za spraw pojedynczych misjonarzy sprawy dziaajcych w naszej brany. Trudno dyskutowa
z faktem, e uwarunkowania prawne i oczekiwania spoeczne jak jeden
m zmierzaj w kierunku zapewniania wikszej dostpnoci dla coraz to
wikszej liczby ludzi. Zamiast wic martwi si kijem w rkach ustawodawcw i chtnych do wytyczania spraw prawnikw, pomyl lepiej o marchewce, czyli szansie dotarcia do wielu osb niepenosprawnych, ktre
odwiedzaj Twj serwis, przyjaznoci dla mechanizmw wyszukiwarek internetowych cechujcej kod zapewniajcy naleyt dostpno , a take satysfakcji, ktra stanie si Twoim udziaem, gdy zrobisz co, aby poprawi
komfort korzystania z internetu tak wielu ludzi.

211

You might also like