Tworzenie serwisów WWW.
Standardy sieciowe
Autor: John Allsopp
T³umaczenie: Dagmara Suma
ISBN: 978-83-246-2657-1
Tytu³ orygina³u:
Format: 158
×235, stron: 480
Krajobraz nowoczesnych technologii WWW
• Opanuj podstawy wiedzy o tworzeniu serwisów WWW
• Poznaj zaawansowane rozwi¹zania dla profesjonalnych projektantów
• Rozpracuj wspó³czesne metody i technologie, u¿ywane do tworzenia serwisów WWW
Z pewnoœci¹ znasz ksi¹¿kê Projektowanie serwisów WWW. Standardy sieciowe
Jeffreya Zeldmana. Jeœli jesteœ zagorza³ym fanem tego kultowego podrêcznika,
niew¹tpliwie zainteresuje Ciê równie¿ ten tom towarzysz¹cy. Jego autor – instruktor
oraz twórca licznych propozycji standardów sieciowych – oferuje wiedzê na temat
architektury stoj¹cej za profesjonalnymi witrynami WWW, wskazuj¹c przy tym sposoby
stosowania standardów z czysto taktycznego i praktycznego punktu widzenia.
Ksi¹¿ka ta jest przeznaczona dla ¿ó³todziobów chc¹cych nauczyæ siê budowaæ strony
WWW, a tak¿e dla doœwiadczonych twórców, szukaj¹cych g³êbszej wiedzy, pomagaj¹cej
wyjœæ poza metody i modele, które ju¿ dobrze znaj¹. Zawiera mnóstwo sztuczek
i chwytów, choæ jej podstawowym celem jest pomoc w budowaniu systematycznej
wiedzy na temat praktyki tworzenia serwisów WWW.
Poznaj:
• podstawowe technologie tworzenia front-endu – HTML i XHTML, CSS i DOM;
• zalecane metody tworzenia ³atwych w u¿yciu serwisów WWW;
• praktykê tworzenia serwisów WWW: semantyczny uk³ad znaczników, techniki
radzenia sobie z niezgodnoœciami i b³êdami przegl¹darek, uk³ady stron oparte
na CSS oraz tematykê platform CSS;
• technologie wchodz¹ce na rynek: prze³omowe narzêdzia, z których mo¿esz
ju¿ zacz¹æ korzystaæ, w tym HTML5, CSS3, czcionki WWW, SVG i Canvas.
Witryna WWW zwi¹zana z oryginalnym wydaniem ksi¹¿ki Tworzenie serwisów WWW.
Standardy sieciowe (Developing with Web Standards) jest dostêpna pod adresem
devwws.com. Znajdziesz tam wiêcej informacji i dodatków, bêdziesz te¿ móg³ osobiœcie
skontaktowaæ siê z autorem ksi¹¿ki.
John Allsopp jest wspó³za³o¿ycielem witryny westciv.com oraz twórc¹ programu Style
Master, ciesz¹cego siê wielk¹ s³aw¹ narzêdzia do tworzenia arkuszy stylów na ró¿nych
platformach. Jest równie¿ autorem wielu kursów, materia³ów szkoleniowych, narzêdzi,
instrukcji oraz artyku³ów przeznaczonych dla projektantów czy twórców serwisów
WWW, w tym bardzo wa¿nego artyku³u The Dao of Web Design, opublikowanego na
witrynie A List Apart. Pe³ni te¿ funkcjê wspó³zarz¹dcy nowej, dzia³aj¹cej w ramach
organizacji W3C, Incubator Group, której prace koncentruj¹ siê na kszta³ceniu kolejnych
pokoleñ profesjonalnych twórców 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 standardów .......................................................................... 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 krótka historia jzyka HTML ......................................................... 38
HTML 4.01 .......................................................................................... 38
XHTML 1.0, 1.1, 2.0 ............................................................................ 39
HTML 5 ............................................................................................... 40
6
T w o r z e n i e s e r w i s ó w W W W . S t a n d a r d y s i e c i o w e
Kluczowe koncepcje jzyka HTML .............................................................. 41
Czym jest strona WWW? ....................................................................... 41
Terminologia: elementy, atrybuty, znaczniki i inne ............................... 42
Puste elementy HTML .......................................................................... 43
Typy dokumentów ....................................................................................... 44
Wprowadzenie do DOCTYPE ............................................................... 45
Strukturalne podstawy jzyka HTML ......................................................... 47
Podstawowy element html ..................................................................... 47
Element head ........................................................................................ 48
Element body ........................................................................................ 50
Elementy ródliniowe ............................................................................ 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 zasobów znajdujcych si w internecie .................... 66
Tre osadzona ............................................................................................ 66
Obrazy ................................................................................................... 66
Osadzanie obrazów ................................................................................ 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 komórek .................................................................................. 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
Rónice w skadni .................................................................................. 89
Udostpnianie dokumentu ..................................................................... 89
Obsuga bdów ..................................................................................... 89
Którego powiniene uywa? .................................................................. 91
S p i s t r e c i
7
4. Prezentacja ................................................................... 93
Krótka historia stylów stosowanych w serwisach WWW .............................. 93
Po co oddziela tre od wygldu? ......................................................... 96
Czym jest CSS? ........................................................................................... 96
Jak CSS jest wykorzystywany? ................................................................... 96
Styl ródliniowy ..................................................................................... 97
Osadzony kod CSS ................................................................................ 97
Doczanie zewntrznych arkuszy stylów ............................................... 97
Podstawowa skadnia jzyka CSS ............................................................... 98
Selektory, bloki deklaracji, deklaracje i wasnoci ................................. 98
Podstawowe informacje na temat selektorów ............................................. 100
Selektory typów ................................................................................... 100
Grupowanie selektorów ....................................................................... 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 szczegóowoci: 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 potomków i dzieci ................................................... 114
Selektory potomków ............................................................................ 114
Selektory dzieci ................................................................................... 115
czenie w acuchy ............................................................................ 116
Precyzja selektorów potomków 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
8
T w o r z e n i e s e r w i s ó w W W W . S t a n d a r d y s i e c i o w e
Podstawowe wasnoci ukadu strony ........................................................ 131
Elementy blokowe kontra elementy ródliniowe ................................... 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 ssiadów .............................................................................. 145
Selektory atrybutów ............................................................................ 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 mediów ............................................................................................. 150
CSS zalene od medium ....................................................................... 151
czenie z typami mediów ................................................................... 151
Osadzanie na podstawie typów mediów ................................................ 151
@media ............................................................................................... 151
Importowanie arkuszy stylów .................................................................... 152
@import .............................................................................................. 153
Zapewnianie jakoci ................................................................................... 154
Walidacja kodu CSS ............................................................................ 154
Sprawdzanie zgodnoci z przegldarkami ............................................ 154
Szczególne wyzwania i techniki .................................................................. 155
Formatowanie formularzy ................................................................... 156
Zastpowanie obrazem ........................................................................ 156
Ukad strony ....................................................................................... 158
Problemy z przegldarkami ................................................................. 158
Formatowanie CSS ............................................................................. 159
Wydajno mechanizmu CSS i serwisów WWW .................................. 159
5. DOM ........................................................................... 161
DOM poziomu zerowego ...................................................................... 162
Przejciowy DOM ................................................................................ 162
DOM poziomu pierwszego ................................................................... 163
S p i s t r e c i
9
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 skryptów DOM ................................................. 173
Tworzenie dyskretnych skryptów ........................................................ 174
Niezgodnoci przegldarek .................................................................. 176
Waciwo innerHTML kontra metody DOM .................................... 179
Bezpieczestwo ................................................................................... 180
Rozkwit bibliotek ....................................................................................... 181
Wybór biblioteki .................................................................................. 183
JQuery ................................................................................................ 183
Prototype ............................................................................................ 184
Script.aculo.us .................................................................................... 184
Yahoo User Interface Library (YUI) ................................................... 184
Sprawdzanie skryptów DOM ..................................................................... 184
IE Developer Toolbar dla programów 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
Nagówki ............................................................................................. 204
Tekst alternatywny ............................................................................. 204
Kontrast kolorów ................................................................................. 205
Tabele ................................................................................................. 205
Formularze ......................................................................................... 209
Podsumowanie .......................................................................................... 211
10
T w o r z e n i e s e r w i s ó w W W W . S t a n d a r d y s i e c i o w e
Cz II > Sztuka tworzenia w wiecie rzeczywistym
7. Blaski i cienie wspópracy z przegldarkami ........................... 215
Trzy rodzaje wad przegldarek .................................................................. 216
Tryby pracy przegldarki .......................................................................... 217
Tryb dziwactw i przeczanie DOCTYPE ............................................ 218
Wybieranie trybu standardów .............................................................. 219
Nowy model przeczania DOCTYPE wprowadzony w IE 8 ................ 220
Typowe bdy przegldarek ....................................................................... 222
Bd modelu polowego ......................................................................... 222
Bd podwójnego marginesu elementu dryfujcego ............................. 224
Bd niescalanych marginesów ............................................................ 225
IE i waciwo hasLayout ........................................................................ 227
W gbiach Twojej przegldarki .......................................................... 227
Jak element otrzymuje ukad? ............................................................. 228
Naprawianie (i wyzwalanie) bdów
zwizanych z waciwoci hasLayout ................................................. 229
Naprawianie bdów: hakowa czy nie hakowa? ....................................... 231
Poznaj swojego wroga .......................................................................... 232
Dopasowywanie si do przegldarek .......................................................... 234
Ukrywanie arkuszy stylów 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 elementów HTML oraz atrybutów class i id
do uzyskiwania lepszych konstrukcji semantycznych ........................... 247
Jzyk znaczników handlu elektronicznego (ECML) ............................ 251
Kodowanie i SEO ...................................................................................... 252
Mikroformaty ............................................................................................ 253
Zalety mikroformatów ......................................................................... 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
S p i s t r e c i
11
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 kolorów ................................................................................. 284
Ukady siatkowe ........................................................................................ 292
Wasnoci ukadu tabelarycznego CSS 2.1 .......................................... 292
Podsumowanie .......................................................................................... 294
10. Resety i platformy CSS .....................................................295
Resety CSS ............................................................................................... 296
Zalety resetów 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 serwisów WWW w praktyce
11. HTML 5 ........................................................................309
Czym jest HTML 5? .................................................................................. 309
Najwaniejsze moliwoci HTML 5 ........................................................... 311
Obsuga bdów ................................................................................... 311
Element canvas ................................................................................... 312
Lokalne przechowywanie danych ......................................................... 312
„Wielowtkowy” JavaScript z Web Workers ....................................... 312
Obsuga multimediów .......................................................................... 312
Lokalizowane aplikacje WWW z geolokacj ........................................ 313
Strony umoliwiajce uytkownikom edycj ........................................ 313
Rónice pomidzy HTML 4 a HTML 5 ..................................................... 313
Deklarowanie DOCTYPE ................................................................... 314
Nagówki, 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 elementów video i audio przez przegldarki ........................... 334
Dostpno materiaów wideo i audio .................................................. 335
12
T w o r z e n i e s e r w i s ó w W W W . S t a n d a r d y s i e c i o w e
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 naprzód „rozwizany”? .................. 345
Rozszerzenia specyficzne dla dostawców .............................................. 346
Nowe selektory .......................................................................................... 349
Strukturalne selektory pseudoelementów ............................................ 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
Póprzezroczyste 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 serwisów WWW do potrzeb rónych mediów
za pomoc CSS .............................................................. 387
Wszenie agenta uytkownika ............................................................. 388
Haki .................................................................................................... 389
S p i s t r e c i
13
Zapytania mediów ..................................................................................... 389
Korzystanie z zapyta mediów ............................................................ 392
Do czego mog si przyda zapytania mediów? ................................... 395
Kompatybilno ................................................................................... 399
Ale czy jest to w jaki sposób lepsze od wszenia agenta uytkownika? ...... 399
Podsumowanie .......................................................................................... 400
15. Czcionki w serwisach WWW ...............................................401
Krótka 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 problemów ........................................................................ 410
Czcionki jako usugi ............................................................................ 411
Podsumowanie .......................................................................................... 411
16. SVG i canvas: grafika w przegldarce ....................................413
SVG .......................................................................................................... 415
Podstawowe koncepcje i skadnia SVG ................................................ 416
Ukad wspórzdnych SVG .................................................................. 418
Zalety SVG .......................................................................................... 419
Przypadki zastosowania SVG .............................................................. 421
Umieszczanie obrazów 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
róda .........................................................................443
Skorowidz ....................................................................453
ROZDZIA SZÓSTY
Dostpno
dy Tim Berners-Lee tworzy zrby World Wide Web we wcze-
snych latach 90. ubiegego wieku, szczególnie mocno akcento-
wa 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,
których celem byo sprawienie, aby sie WWW bya jak najbardziej
dostpna, i wczaa czynniki odpowiedzialne za zapewnianie dostp-
noci do specyfikacji regulujcych standardy takie jak HTML czy
CSS. Równolegle z tym ciaa ustawodawcze na caym wiecie wprowa-
dzay przepisy prawne zwizane z dostpnoci oraz regulacje, które
miay taki sam wpyw na sie WWW jak na rodowisko fizyczne i które
czsto bezporednio odwoyway si do tych specyfikacji W3C.
Mimo to twórcy serwisów WWW wydaj si nieraz bagatelizowa kwe-
stie zwizane z dostpnoci. W najlepszym przypadku s one roz-
waane na samym kocu, stanowi list formalnoci, które 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 wiado-
moci powinnimy stara si osign, nie za rzecz, któr 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, spróbuj wyobrazi
sobie ograniczenie swoich wasnych moliwoci dostpu i zastanowi
si, w jakich sytuacjach znajduj si czsto ludzie niepenosprawni.
G
190
R o z d z i a 6 . > D o s t p n o
Przez tydzie rób zakupy przez sie i tylko w ten sposób 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 sza-
cunku dla ogromnych wyzwa, które wikszo serwisów WWW i usug
internetowych stawia przed ludmi niepenosprawnymi, wyzwa, które masz
okazj zmniejszy z racji wykonywanego zawodu.
Kluczowa rola odgrywana przez sie WWW w poprawianiu standardu ycia
tak wielu osób niepenosprawnych jest jednym z powodów, dla których zosta-
em twórc serwisów. Nie musi tak by w przypadku kadego, niezalenie
jednak od tego, czy Twoj motywacj jest altruizm, czy te wymogi prawne
i groba wytoczenia procesów sdowych, o których gono bywa ostatnimi
czasy w Stanach Zjednoczonych i Australii, przekonasz si, e zapewnienie
naleytej dostpnoci jest jednym z podstawowych zada zwizanych z pro-
fesjonalnym tworzeniem serwisów 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 szczegóowo 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, które
pomog nam tworzy odpowiednio dostpne serwisy WWW przy niewielkim
tylko dodatkowym wysiku z naszej strony.
Biznesowe argumenty za zapewnianiem dostpnoci
Za koniecznoci zapewniania dostpnoci serwisów WWW przemawiaj
take solidne argumenty natury biznesowej. Tworzenie takich serwisów moe
wpyn na poprawienie komfortu ycia odwiedzajcych je osób, przekada
si te jednak na bezporednie oszczdnoci (zwizane na przykad ze zmniej-
szeniem liczby uytkowników dzwonicych na numery telefonicznej obsugi
klienta) i umoliwia biznesowi dotarcie do znacznie wikszej grupy ludzi,
co wpywa z kolei na wzrost sprzeday i zysków. Liczba osób niepenospraw-
nych w naszych spoecznociach jest o wiele wiksza, ni gros ludzi sobie
wyobraa. Wydzia Zdrowia i Pomocy Humanitarnej Stanów 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 3 C
191
Gdy mówimy o osobach niepenosprawnych, mamy na myli dziesitki milio-
nów ludzi, a take segment rynku, który znacznie czciej korzysta z han-
dlu elektronicznego ni jakakolwiek inna grupa spoeczna. Zaspokajanie
potrzeb tej wspólnoty moe bezporednio wpyn na rentowno niejednej
firmy.
Oprócz tych zysków o charakterze czysto komercyjnym zastosowanie tech-
nik tworzenia dostpnych serwisów WWW moe mie równie szereg innych
pozytywnych skutków. Google i inne mechanizmy wyszukiwania s w pew-
nym sensie lepe. Jedynym tekstem, jaki widz, gdy indeksuj serwis, jest
prawdziwy tekst, nie za wszelkie obrazy czy pliki Flash, które mog zosta
waciwie zinterpretowane tylko przez ludzi dysponujcych odpowiednio
dobrym wzrokiem. Serwisy WWW, w przypadku których zastosowano dobr
i przejrzyst struktur semantyczn, uniknito uywania kodu opartego na
tabelach oraz zadbano o wykorzystanie innych technik zapewniania dostp-
noci, mog dziki temu cieszy si lepsz „wykrywalnoci” i pozycjono-
waniem przez mechanizmy wyszukiwania.
Prawodawstwo na wiecie
Ostatnimi czasy na caym wiecie uchwala si akty prawne majce zwal-
cza dyskryminacj osób niepenosprawnych. Przepisy tego rodzaju doty-
cz zwykle wielu rónych aspektów ycia, coraz wikszy jednak nacisk
kadzie si tu równie na kwestie zwizane z dostpnoci sieci i serwisów
WWW. Problem ten jest bardzo zoony, dlatego wszelkie próby prostego
zaprezentowania go tutaj skazane s na niepowodzenie i mog wprowadzi
tylko jeszcze wiksze zamieszanie. róda, z których moesz czerpa bar-
dziej 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 próby
tworzenia zalece, wytycznych i wskazówek dotyczcych kwestii zapewnia-
nia dostpnoci, a take wbudowania ich bezporednio w standardy takie
jak CSS i HTML. W roku 1999 W3C opublikowaa pierwsz wersj zbioru
dokumentów znanych jako „Wytyczne dotyczce dostpnoci treci interne-
towych” (ang. Web Content Accessibility Guidelines, w skrócie — WCAG 1),
za w roku 2008 udostpnia jego zaktualizowan wersj (znan jako
WCAG 2). Dodatkowo, aby zaspokoi rosnc potrzeb wytycznych zwi-
zanych z dostpnoci aplikacji WWW, dziaajca w obrbie W3C inicjatywa
192
R o z d z i a 6 . > D o s t p n o
dostpnoci do sieci (ang. Web Accessibility Initiative, w skrócie — WAI)
opracowaa regulujcy te kwestie standard Accessible Rich Internet Appli-
cations Suite (WAI-ARIA), którym zajmiemy si ju niebawem.
WCAG 1
Opublikowany w 1999 roku, w czasach panowania przegldarek wersji czwar-
tej, WCAG 1 by pierwsz wan prób skodyfikowania zbioru procedur
majcych zapewni wiksz dostpno serwisów WWW. Jego zadaniem
byo pokazanie sposobu „w jaki mona tworzy treci internetowe dostpne
dla osób 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 których kada
dzieli si na punkty kontrolne, a te z kolei maj priorytety od A do AAA
(okrelane czsto jako „potrójne 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 („podwójne A”), jeli spenia wymogi wszystkich punktów
kontrolnych AA, za z poziomem AAA, gdy zapewnia zgodno z wszystkimi
punktami kontrolnymi AAA.
Zanim bardziej zagbimy si w tematyk tych wytycznych i punktów kon-
trolnych, naley tu odnotowa, e zgodno AAA uwaa si ogólnie za trudn
do osignicia i nie zawsze jest warta woonego w ni wysiku, poniewa
wiele punktów kontrolnych AAA ma bardzo subiektywny charakter, a pena
zgodno z poziomem AAA ma do niewielkie znaczenie praktyczne.
W zwizku z tym przez wikszo ekspertów (a take niektóre 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 punktów kontrolnych. W rozdziale tym przyjrzymy si
tylko tym punktom kontrolnym, które najczciej sprawiaj trudnoci.
Wytyczne WCAG 1 (oraz towarzyszcy im dokument „Techniki”) s do
proste, nie bój si wic przeczyta ich samodzielnie.
Dostpno i W 3 C
193
Wytyczna 1: Zapewnij równowane
odpowiedniki treci dwikowych i wizualnych
Wytyczna ta ma na celu zaspokojenie potrzeb osób majcych problemy ze
suchem lub wzrokiem. Jednym z najbardziej powszechnych bdów pope-
nianych przez twórców serwisów WWW jest pomijanie treci
alt
zwiza-
nych z obrazami. W kodzie HTML 4 wszystkie elementy
img
musz mie
atrybut
alt
, cho warto tego atrybutu moe by pusta (a wic dopusz-
czalne 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 odpowiedników tekstowych, a opis niezbdnych technik, które
si tu wykorzystuje, znacznie wykracza poza zakres materiau prezento-
wanego w tej ksice. cza do róde informacji na ten temat oraz wiado-
moci dotyczcych sposobów 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 mecha-
nizmu CSS, nie za prezentacyjnego kodu HTML. Ocenia si, e nawet
osiem procent mskiej populacji ma pewnego rodzaju problemy z rozró-
nianiem barw, za osoby korzystajce z urzdze monochromatycznych
(takich jak czytnik Kindle firmy Amazon) nie s w stanie rozrónia jakich-
kolwiek kolorów poza odcieniami szaroci. Zamiast wic na przykad uy-
wa barwy zielonej w celu wskazania bezpiecznego wyboru i czerwieni do
oznaczania zagroenia, powiniene stosowa ksztaty, etykiety tekstowe
i inne rodzaje wskazówek przekazujcych t informacj.
Wytyczna 3: Korzystaj ze znaczników oraz arkuszy stylów
i rób to we waciwy sposób
Wytyczna ta sugeruje, e powinnimy uywa technologii WWW nie tylko
zgodnie z liter prawa (ukady stron wykorzystujce tabele mimo wszystko
przejd walidacj), lecz równie zgodnie z jego duchem. Nalece do niej
punkty kontrolne maj midzy innymi zapewni, e dokumenty s prawi-
dowe, w kodzie CSS stosowane s jednostki wzgldne, takie jak
em
i
%
,
zamiast
px
, za w kodzie HTML uywane s odpowiednie elementy seman-
tyczne i strukturalne (na przykad nagówki, listy, cytaty itd.).
194
R o z d z i a 6 . > D o s t p n o
Wytyczna 5: Twórz pynnie przeksztacajce si tabele
Dane tabelaryczne mog powodowa powane problemy w przypadku osób
korzystajcych z urzdze asystujcych, takich jak czytniki ekranowe.
Wytyczna 5 zawiera kilka punktów kontrolnych, które maj Ci pomóc
w poprawieniu dostpnoci danych tego rodzaju.
Wspomniane punkty kontrolne dotycz uywania nagówków
row
i
column
w tabelach danych, za w przypadkach skomplikowanych tabel korzystania
z takich elementów jak
thead
,
tfoot
oraz
tbody
w celu grupowania wierszy,
col
i
colgroup
w celu grupowania kolumn, a take atrybutów
axis
,
scope
i
headers
w celu wskazania relacji wystpujcych pomidzy komórkami
i nagówkami. 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 wejcio-
wego, a wic tego, czy zamiast samej myszy stosowana jest klawiatura,
wejciowe urzdzenie gosowe czy te sprzt jeszcze innego typu.
To tylko niektóre z wytycznych, lecz wiele wanych i popularnych serwi-
sów WWW nie spenia wymogów 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 sposób automatyczny
za pomoc odpowiednich narzdzi, którymi zajmiemy si ju za chwil.
Oznacza to w praktyce, e do atwo mona wyznaczy poziom zgodnoci
serwisów WWW z tymi wytycznymi, a ich twórcy nie dysponuj wieloma
wymówkami, 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 niektórych z nich wyma-
gany jest udzia czowieka, jednak w przypadku tych, dla których jest to mo-
liwe, 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 3 C
195
WCAG 2
Standard WCAG 1 powsta z myl o technologiach WWW istniejcych
w czasach, gdy zosta on opublikowany. W kolejnych latach niektóre z nich
bardziej dojrzay, za inne — takie jak skrypty DOM — zyskay na zna-
czeniu. 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, które 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 równie daj si dosto-
sowa do zmian zachodzcych w dziedzinie technologii WWW. Zgodnie
z owiadczeniem Web Accessibility Initiative WCAG 2 ma znale zasto-
sowanie w przypadku „rónych typów technologii sieciowych i technologii
bardziej zaawansowanych”, jak równie technologii, które „powstan w przy-
szoci”. Standard zosta take zaprojektowany w taki sposób, aby zgod-
no z definiowanymi przeze kryteriami sukcesu daa si „bardziej precy-
zyjnie testowa za pomoc testów automatycznych oraz analiz prowadzonych
przez ludzi” (www.w3.org/WAI/WCAG20/wcag2faq.html).
Podczas gdy WCAG 1 by zbiorem wytycznych, z którymi zwizane byy
punkty kontrolne, WCAG 2 podzielone zostao na cztery gówne zasady.
Kada z nich zawiera szereg wytycznych, za kada z wytycznych ma
pewn liczb punktów kontrolnych noszcych nazw kryteriów sukcesu.
Kade z tych kryteriów jest zwizane z wystarczajcymi technikami (czyli
rekomendowanymi sposobami speniania tego kryterium sukcesu) oraz tech-
nikami doradczymi (metodami, które 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 równie typowe defekty, które s definiowane przez grup
robocz jako „praktyki twórcze, których zastosowanie sprawia, e tre
WWW nie jest zgodna z WCAG 2.0”.
WCAG 2 ma swoich krytyków na forum osób zajmujcych si kwestiami
dostpnoci, a przyjmowanie go jako podstawowego wyznacznika dostp-
noci treci WWW odbywa si znacznie wolniej, ni organizacja W3C moga
si spodziewa. Wydaje si jednak, e zastpi on w kocu WCAG 1 jako naj-
waniejsze ródo wytycznych w tej dziedzinie. Przegld niektórych argumen-
tów przeciwko WCAG 2 wysuwanych przez uczestników w tej dyskusji moesz
znale w definicji dostpnoci treci WWW zamieszczonej w anglojzycznej
196
R o z d z i a 6 . > D o s t p n o
wersji Wikipedii, która w momencie pisania niniejszej ksiki bya zaska-
kujco dobra (en.wikipedia.org/wiki/Web_accessibility#Criticism_of_WAI_
guidelines).
WCAG 2 to dokument znacznie wikszy ni WCAG 1. Zosta on poddany
krytyce gównie za swoj ogólnikowo i zastosowanie niezrozumiaego ar-
gonu — 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/wcag-
guidelines-20.shtml. Standardowi towarzyszy jednak bardzo dokadna
dokumentacja, której zadaniem jest pomaganie twórcom w zrozumieniu
i spenieniu kadego kryterium sukcesu. Opracowano go równie w taki
sposób, aby strony speniajce w tej chwili wymogi stawiane przez kryteria
WCAG 1 A i AA w wikszoci przypadków speniay te kryteria WCAG 2
bez koniecznoci wprowadzania adnych poprawek lub dziki bardzo nie-
wielkiemu nakadowi pracy.
Szczegóowy opis otchani i zawioci standardu WCAG 2 daleko wykracza
poza zakres materiau prezentowany w niniejszej ksice, jednak wiele inte-
resujcych czy i adresów innych dokumentów zwizanych z tymi wytycz-
nymi znajdziesz w dodatku „róda” 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 eta-
pie rozwoju, dostpnych jest te w jego przypadku znacznie mniej zauto-
matyzowanych narzdzi do zapewniania jakoci ni w przypadku WCAG 1.
Z zaprezentowanej wczeniej listy rozwiza dla WCAG 1 jedynie narz-
dzie ATRC Web Accessibility Checker zapewnia dodatkow moliwo testo-
wania 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
problemów WAI opracowaa pakiet Accessible Rich Internet Applications,
zwany te WAI-ARIA lub — czciej — po prostu ARIA. ARIA jest zbio-
rem rozszerze jzyka HTML, których mona uywa do opisywania elemen-
tów, dziki czemu moliwe jest identyfikowanie roli, stanów i waciwoci
kadego z nich w sposób, który znacznie zwiksza dostpno wynikowej
strony.
Dostpno i W 3 C
197
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 wspóczesnych prze-
gldarek internetowych, w tym take programu Internet Explorer 8, jak
równie duej liczby czytników ekranowych, poza tym wydaje si cakiem
jasne, e twórcy przegldarek rzetelnie popieraj t technologi. ARIA pozo-
stanie 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, który
element strony jako pierwszy otrzymuje dane wejciowe wprowadzone przez
uytkownika za pomoc klawiatury lub innego urzdzenia wejciowego.
Ognisko wprowadzania moe przej ograniczona liczba elementów, takich
jak
a
,
area
,
button
,
input
oraz
select
, a uytkownik moe korzysta z kla-
wisza tabulacji w celu cyklicznego przechodzenia pomidzy nimi. Porzdek
przechodzenia klawiszem tabulacji (ang. tab order) tych elementów (czyli
kolejno, w której bd one przejmoway ognisko wprowadzania wraz z tym,
jak uytkownik bdzie naciska klawisz tabulacji) jest okrelany przez
kolejno ich wystpowania w ródowym kodzie HTML lub te przez war-
to atrybutu
tabindex
, który za pomoc liczb cakowitych definiuje odpo-
wiedni porzdek w nastpujcy sposób: im nisza jest warto przypisana
atrybutowi, tym wczeniejsze miejsce element zajmuje w porzdku prze-
chodzenia.
Twórcy serwisów 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 elementów, które nie przejmuj ogniska wprowadza-
nia i które 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 przegl-
darki IE 8, Opera 9.5, Safari 4 oraz Firefox 3.5.
198
R o z d z i a 6 . > D o s t p n o
Role
W kodzie HTML do dostarczania semantycznej informacji o dokumen-
tach wykorzystuje si nazwy elementów; mimo e sprytni twórcy serwisów
WWW uywaj równie atrybutów
class
i
id
do doczania dodatkowych
informacji na temat elementów, rozwizanie to ma raczej charakter zwycza-
jowy i nie jest oficjaln czci standardu. Wynika std, e jzyk HTML
jest nieco zuboay, jeli chodzi o jego moliwoci semantyczne. ARIA roz-
szerza moliwoci standardu XHTML 1.1 zwizane z atrybutem
role
,
pozwalajc twórcom opisywa dodatkow funkcj wypenian przez element,
niezwizan bezporednio z tym, jakiego rodzaju jest to element. Na przy-
kad listy s elementami
li
, mog te jednak odgrywa rol nawigacyjn,
cho i to nie musi by ich jedyna funkcja. Technologia ARIA dostarcza zbiór
moliwych wartoci atrybutu
role
, czyli zestaw nazw typów ról penionych
przez element. Fachowo mówi si o tym, e zapewnia atrybutowi
role
ontologi.
Korzystajc z atrybutu
role
do opisywania roli odgrywanej przez okrelony
element, twórcy serwisów WWW mog sprawi, aby przegldarki „rozu-
miejce” role technologii ARIA lepiej przedstawiay uytkownikom struktur
dokumentu. Atrybut
role
moe równie zapewnia standardowy, przewi-
dywany przez uytkownika sposób dziaania i wygld okrelonych rodza-
jów kontrolek, na przykad pól wyboru, które s implementowane przez
twórc za pomoc innych ni typowe elementów HTML (typowym elementem
byby w tym przypadku
<input
type="checkbox">
).
Role oferowane przez technologi ARIA nale do wielu rónych kategorii,
wród których wymieni mona nastpujce:
x Role znaków orientacyjnych, które opisuj regiony strony
przeznaczone do celów nawigacyjnych. Nale do nich:
application
,
banner
,
main
,
navigation
oraz
search
.
x Role struktury dokumentu, które 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, które 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 3 C
199
x Role elementów wejciowych uytkownika, takie jak
checkbox
,
slider
oraz
option
.
Korzystanie z atrybutu
role
jest atwe — polega po prostu na tym, e doda-
jemy jedn ze zdefiniowanych wartoci roli jako warto atrybutu
role
elementu, dokadnie tak, jak odbywao si to w przypadku wartoci atry-
butu
class
. Zaómy na przykad, e chcemy uy elementu
input
z
type
image
jako przycisku. W celu zapewnienia odpowiedniego opisu funkcji ele-
mentu 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, pozo-
stawia si ju inwencji twórców programu. Informacja ta jest jednak obecna
i moemy wyobrazi sobie, w jaki sposób przegldarki i urzdzenia asy-
stujce mog wykorzysta t wiedz nie tylko dla potrzeb osób niepeno-
sprawnych, lecz równie wszystkich innych uytkowników korzystajcych
z serwisu.
Stany i waciwoci
Oprócz umoliwiania twórcom serwisów WWW opisywania ról odgrywanych
przez elementy technologia ARIA pozwala te jawnie deklarowa stany
elementów, a wic na przykad to, czy dany element jest w tej chwili naci-
nity, jak równie podawa innego rodzaju informacje zwizane z elemen-
tami. Stany dostarczaj dynamicznych danych na temat elementów, czyli
takich informacji jak to, czy pole wyboru jest zaznaczone, podczas gdy wa-
ciwoci zapewniaj informacje podstawowe, zwizane z sam natur obiek-
tów. Oznacza to w praktyce, e rozrónienie pomidzy waciwociami
a stanami nie jest szczególnie wane, poniewa obydwa te typy informacji
dziaaj w bardzo podobny sposób. Naley tu jednak zaznaczy rónic
wystpujc pomidzy stanami i waciwociami a atrybutem
role
. Gdy
korzystamy z atrybutu
role
, przypisujemy wartoci do samego tego atry-
butu, lecz istnieje wiele atrybutów stanów i waciwoci, za kady z nich
posiada swoj wasn nazw — innymi sowy, nie istniej atrybuty ARIA
o nazwie
state
lub
property
. Nazwy atrybutów waciwoci i stanów ARIA
zawieraj przedrostek
aria-
; przykadem moe tu by stan
aria-disabled
,
który moe przyjmowa wartoci
true
i
false
, bd te waciwo
aria-
´
flawto
, która wskazuje nastpny element w zalecanej kolejnoci odczy-
tywania.
200
R o z d z i a 6 . > D o s t p n o
Wrómy do naszego przykadu z elementem wejciowym. Gdyby rozpatry-
wanym elementem by przycisk, który 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 równie IE 8, umo-
liwiaj nam formatowanie elementów w oparciu o ich waciwoci i stany
ARIA (a take wartoci ich atrybutów
role
) za pomoc selektorów atry-
butów. Na przykad aby zmieni kolor ta elementu w momencie, gdy jest
on nacinity, uylibymy nastpujcego kodu CSS:
[aria-pressed=true] {
background-color: #cfb725;
}
Dodawanie ról, waciwoci i stanów ARIA do naszych serwisów 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 mecha-
nizmu przechwytywania waciwoci i stanów widgetu czy te innej czci
strony lub aplikacji, moemy tu po prostu ponownie wykorzysta ten dosko-
nale przemylany, zestandaryzowany sposób. Nie tylko pomoe nam to
poprawi dostpno i ogóln uyteczno naszej czci sieci WWW, lecz rów-
nie umoliwi pisanie atwiejszego w konserwacji i bardziej spójnego kodu.
Z uwagi na to, e twórcy serwisów WWW coraz chtniej uywaj bibliotek
i platform, takich jak Dojo, JQuery, YUI oraz innych rozwiza tego
rodzaju, o których wspominalimy w rozdziale 5., jak równie 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 twórców tych bibliotek. Z efektów tych wysików
moesz korzysta midzy innymi w nastpujcych rozwizaniach:
Dostpno i W 3 C
201
x JQuery — Podstawowy zespó programistów rozpocz prace
nad zapewnieniem wsparcia technologii ARIA i istnieje ju wtyczka
o nazwie jARIA, której zadaniem jest udostpnienie moliwoci
ustawiania i pobierania ról, waciwoci i stanów za porednictwem
kodu JavaScript i przy uyciu skadni JQuery.
x Dojo — Zestaw narzdzi Dojo 1.0 zapewnia pene wsparcie
technologii ARIA w przypadku zbioru widgetów DojoX.
x YUI — Wiele widgetów YUI oferuje obsug technologii ARIA.
Obsuga zapewniana przez przegldarki i urzdzenia asystujce
A zatem jaki poziom obsugi zapewniaj wspóczesne przegldarki inter-
netowe moliwociom oferowanym przez technologi ARIA? Przekonali-
my si ju, e atrybut
tabindex
oraz moliwo przechwytywania ogniska
wprowadzania przez kady widoczny element obsugiwane s bardzo pow-
szechnie, dotyczy to równie programu Internet Explorer w wersji 5 i pó-
niejszych. Oto jak maj si sprawy w przypadku innych moliwoci tej
technologii:
x IE 8 zapewnia obsug ról, waciwoci i stanów ARIA.
x Firefox 3.5 oferuje najpeniejsz obsug technologii ARIA
ze wszystkich wspóczesnych przegldarek internetowych,
w tym take obsug ról, waciwoci i stanów.
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 ról, nie zapewniajc jednak
wsparcia dla stanów czy waciwoci. Z uwagi na fakt, e Safari
radzi sobie z obsug selektorów atrybutów CSS dla dowolnych
atrybutów, 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
atrybutów waciwoci i stanów 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.
202
R o z d z i a 6 . > D o s t p n o
Przedstawione tu zaangaowanie twórców w implementacj technologii ARIA
wskazuje szerokie poparcie, jakie zdobya ona sobie wród osób zwiza-
nych z WWW. Oprócz tego wiele bardzo popularnych serwisów i aplikacji
WWW, w tym takie jak czytnik Google Reader firmy Google czy Gmail,
intensywnie wykorzystuje t technologi. W zwizku z tym twórcy mog
mie pewno, e ARIA stanowi technologi, w któr zdecydowanie warto
zainwestowa swój 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 atrybutów nienale-
cych do specyfikacji jzyka HTML spowoduje, e opracowane w ten sposób
dokumenty bd nieprawidowe. Istnieje kilka metod korzystania z tych
moliwoci, które zapewniaj jednoczenie poprawno dokumentów, ich
zastosowanie moe jednak wymaga nieco wicej ni tylko zwykego wyboru
odpowiedniego
DOCTYPE
.
Moliwe jest uywanie wasnych
DTD
(definicji typu dokumentu — ang. docu-
ment type definitions), które 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 zagad-
nieniami dostpnoci, zaproponowaa eksperymentaln definicj typu doku-
mentu o nazwie HTML 4.01+ ARIA (wicej na ten temat znajdziesz pod
adresem: www.paciellogroup.com/blog/?p=107), której mona uywa wraz
z walidatorem kodu HTML oferowanym przez W3C.
Eksperymentalny walidator HTML 5 udostpniony pod adresem www.
validator.nu równie umoliwia sprawdzanie kodu ARIA i HTML 5. Zgasza
on bdy w przypadku natrafienia na typy
DOCTYPE
niezgodne ze standar-
dem HTML 5, ale jest bardzo przydatnym narzdziem, dziki któremu
mona zapewni, e technologia ARIA jest uywana w naleyty sposób.
Walidator ten ma pewne ograniczenia w kwestii aspektów technologii ARIA,
które jest w stanie przetestowa, a jednym z nich jest brak moliwoci roz-
poznawania ról „punktów orientacyjnych”.
Rozwój technologii ARIA prowadzi jednak do znacznie waniejszego pyta-
nia: 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 tworze-
nia prawidowych dokumentów zawierajcych elementy ARIA technologia
ta polegnie na przeszkodzie walidacji. Gdy mamy do czynienia z wykorzysta-
T y p o w e p r o b l e m y z w i z a n e z d o s t p n o c i ( i i c h r o z w i z a n i a )
203
niem nowych technologii WWW, walidacja przypomina nieco prowadzenie
samochodu przy patrzeniu wycznie we wsteczne lusterko. Henri Sivonen,
jedna z bardziej wpywowych osób w procesie tworzenia jzyka HTML 5
(a take twórca 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 wymogów walidacji starszych
standardów, 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 jed-
nak walidacja ma zasadniczo charakter mechanizmu zapewniania jakoci,
moliwe jest inteligentne wykorzystanie walidatorów kodu HTML 4 lub
HTML 5 w celu przeprowadzenia kontroli jakoci Twojego kodu zawiera-
jcego elementy ARIA nawet wówczas, gdy dokument nie jest cile zgodny
z ich wymogami.
Typowe problemy zwizane z dostpnoci
(i ich rozwizania)
Rozdzia ten zakoczymy opisem niektórych z najczciej spotykanych pro-
blemów dotyczcych dostpnoci oraz sposobów ich rozwizywania wycz-
nie 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 zawar-
toci strony. Mimo e stanowi bardzo niewielki procent tekstu znajduj-
cego si na stronie, wielu uytkownikom oferuj kluczow metod dostpu
do jej zawartoci. Tekst cza jest istotn wskazówk 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 sto-
sowaniu takich opisów 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.
204
R o z d z i a 6 . > D o s t p n o
Cho wiele osób uwaa, e atrybut
title
zwizany z elementami czy dostar-
cza 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, które wywietlaj informacj dostarczan przez
title
w postaci
podpowiedzi, nie jest dostpny, zanim uytkownik nie poruszy mysz, nie
mog te z niego korzysta uytkownicy czytników ekranowych, w których
nie okrelono ustawie odpowiedzialnych za odczytywanie tych wartoci.
Przedstawiciele brany nie s zgodni w kwestii tego, czy naley uywa atry-
butu
title
, czy te raczej unika jego stosowania, zdecydowanie jednak
nie powinien on stanowi jedynego dostpnego dla uytkowników sposobu
identyfikacji docelowego miejsca cza.
Nagówki
Czytniki ekranowe czsto wykorzystuj nagówki znajdujce si na stronie
do tworzenia „spisów treci”, które maj pomaga uytkownikom w jej prze-
gldaniu i przechodzeniu do odpowiednich obszarów. Jeli stosujesz ele-
menty nagówków w roli nagówków i uywasz ich we waciwej kolejnoci,
masz szans sprawi, e ten sposób dziaania czytników ekranowych stanie
si bardziej uyteczny. Nie pomijaj zatem poszczególnych poziomów nagów-
ków (a wic nie przeskakuj na przykad bezporednio z
h2
do
h4
). Style
nagówków widoczne na stronie mona zawsze zmieni za pomoc mecha-
nizmu CSS, dlatego nie ma potrzeby pomijania w kodzie któregokolwiek
poziomu nagówków.
Tekst alternatywny
Kada tre nietekstowa powinna mie swój tekstowy zamiennik. W przy-
padku obrazów moesz go zapewni, stosujc atrybut
alt
. (Pedantyczna
uwaga weterana zamierzchych czasów:
alt
to nie znacznik). Wszelka tre
dodawana za pomoc atrybutu
alt
powinna by zwiza i — cho w przy-
padku wszystkich elementów
img
wymagane jest zastosowanie tego atrybutu
w celu zapewnienia udanej walidacji strony — dla obrazów o charakterze
czysto dekoracyjnym w roli wartoci atrybutu
alt
powinien wystpowa
pusty cig znaków. 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)
205
Kontrast kolorów
Uywanie do nieprecyzyjnego terminu niezdolnoci widzenia kolorów pro-
wadzi czsto do nieporozumienia polegajcego na tym, e zwykym ludziom
moe si wydawa, i osoby z t przypadoci widz wiat jedynie w odcie-
niach szaroci. Ten rodzaj uszkodzenia wzroku (czyli „widzenie monochro-
matyczne”) jest jednak w rzeczywistoci bardzo rzadki; wikszo ludzi
z upoledzeniem widzenia barw widzi w kolorze, ma jednak trudnoci z roz-
rónianiem okrelonych kolorów, z rozrónianiem których atwo radz sobie
osoby niecierpice na tego rodzaju dolegliwo.
Mimo e bardzo wane jest unikanie korzystania z kolorów w celu komu-
nikowania 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 równie rozway inne kwe-
stie dostpnoci zwizane z kolorami. Powszechnie lekcewaonym proble-
mem jest brak wystarczajcego kontrastu graficznego pomidzy tekstem
i jego tem. Zestawienie tekstu i ta, które osobie widzcej prawidowo wydaje
si w „oczywisty sposób” mocno skontrastowane, moe by zupenie nieczy-
telne dla kogo, kto cierpi na daltonizm lub inn wad wzroku.
Za pomoc wielu narzdzi jestemy w stanie stwierdzi, czy para kolorów
charakteryzuje si odpowiednio wysokim kontrastem, aby zapewni czytel-
no, jednak ich uywanie moe by do czasochonne, poniewa wymaga
od Ciebie rcznego porównywania 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 dokumentów poprzez przegldanie skryptów DOM
i wskazywanie potencjalnych problemów z kontrastem. Wikszo narzdzi
do sprawdzania kontrastu radzi sobie jednak wycznie w sytuacjach, gdy
tekst porównywany jest z kolorem ta (nie za z obrazem), a take nie testuje
kontrastu w przypadku efektów dynamicznych, takich jak unoszenie, nie
jest zatem w stanie zapewni niezawodnych metod badania kontrastu barw.
Tabele
Tabele sprawiaj szczególne problemy osobom ze sabym wzrokiem. Struk-
tura tabeli, która wydaje si oczywista dla osób widzcych prawidowo, moe
by bardzo zagmatwana, gdy zostaje przedstawiona przez czytnik ekranowy.
Jzyk HTML oferuje szereg elementów i atrybutów, których zadaniem
jest uatwienie odczytywania i interpretowania zawartoci tabel za pomoc
czytników ekranowych.
206
R o z d z i a 6 . > D o s t p n o
Oprócz standardowych elementów
td
(danych tabeli) tabele mog równie
zawiera elementy nagówków tabeli (
th
), o czym przekonalimy si ju
w rozdziale 4. Aby w jak najwikszym stopniu poprawi dostpno tabel,
w przypadku komórek stanowicych nagówki wierszy lub kolumn powinie-
ne korzysta z elementów
th
.
caption oraz summary
Zadaniem elementu tabeli
caption
jest dostarczanie krótkiego opisu tabeli,
który jest wykorzystywany zarówno w sposób wizualny przez przegldark,
jak i przez czytniki ekranowe. Zaleca si, aby wszystkie tabele byy opisane
w ten sposób. Element
caption
powinien pojawi si bezporednio po otwie-
rajcym znaczniku tabeli. Tabele mog mie tylko jeden element tego typu.
<table>
<caption>Harmonogram pierwszego dnia konferencji</caption>
Oprócz niego element tabeli moe zawiera atrybut
summary
, którego zada-
niem jest dostarczanie przegldu zawartoci tabeli uytkownikom czytni-
ków ekranowych. Osoby widzce prawidowo mog szybko dowiedzie si,
jaki jest cel zamieszczenia tabeli i jaka jest jej zawarto; atrybut
summary
ma dostarczy tej wiedzy równie ludziom z problemami wzrokowymi.
W przeciwiestwie do opisów definiowanych za pomoc elementów
caption
podsumowania okrelane przy uyciu atrybutów
summary
nie s rendero-
wane 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, które 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 których
mog korzysta czytniki ekranowe w celu uatwienia uytkownikom waci-
wego zinterpretowania tabel danych.
Z uwagi na fakt, e czytniki ekranowe odczytuj zwykle wszystkie komórki
tabeli (w tym równie komórki nagówków) w sposób liniowy, kady nagó-
wek jest odczytywany wielokrotnie, co moe by do czasochonne i uci-
liwe. Aby tego unikn, moesz zastosowa atrybut
abbr
zwizany z ele-
Typowe problemy zwizan e z dos tpnoci (i ich rozw i zania)
207
mentem
th
. Pozwala nam to na zdefiniowanie skrótu tekstu, który ma by
odczytywany zamiast penej treci elementu
th
.
<th abbr="projetkowanie">cieka Projektowa</th>
<th abbr="meneder">cieka Menederska</th>
<th abbr="tworzenie">cieka Twórcza</th>
Z samej struktury tabeli nie zawsze jasno wynika, czy element
th
jest nag-
ówkiem wiersza, czy te kolumny komórek. Atrybut
scope
umoliwia nam
okrelenie, dla których komórek element
th
stanowi nagówek. W przed-
stawionym powyej przypadku nagówki 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 Twórcza</th>
W przypadku stosunkowo prostych tabel czytniki ekranowe mog korzy-
sta z atrybutu
scope
w celu odczytywania nagówka (lub jego skrótu, jeli
zastosowalimy odpowiedni atrybut
abbr
) bezporednio przed zawartoci
komórki.
Na przykad na rysunku 6.1 widoczna jest tabela, w przypadku której czyt-
nik ekranowy mógby odczyta zaznaczon komórk jako: „projektowanie
Osadzanie czcionek i typografia Marek Butelka”. Jednak — jak doskonale
pokazuje ten przykad — nadal jest to odlege od penego obrazu danych,
które naleaoby odczyta z tabeli. Informacja, któr czytnik powinien otrzy-
ma, musiaaby raczej brzmie „10:45 – 11:40 projektowanie Osadzanie
czcionek i typografia Marek Butelka”. W istocie z komórk naley tu po-
czy wicej ni tylko jeden nagówek. Moemy to zrobi, dodajc atrybut
id
do kadego z nagówków, a nastpnie korzystajc z atrybutów
headers
zwi-
zanych z elementami
td
w celu powizania z nimi odpowiednich elementów
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 Twórcza</th>
</tr>
<tr>
208
R o z d z i a 6 . > D o s t p n o
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 uytkowników
korzystajcych
z czytników
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 ogólna</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)
209
<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 osób korzystajcych z czytników ekranowych moe mie bardzo istotne
znaczenie. Podobnie jak wikszo sposobów tworzenia technika ta widziana
i stosowana po raz pierwszy moe Ci si wydawa zbdnym ciarem,
ale z czasem wykorzystywanie odpowiednich atrybutów i elementów stanie
si Twoj drug natur.
Formularze
Bezporednio i w znacznym stopniu moesz poprawi dostpno swoich
stron WWW przez zastosowanie odpowiednich znaczników w stosunku do
zamieszczanych na nich formularzy. Wykorzystanie kilku prostych metod
pozwoli Ci znacznie zwikszy uyteczno formularzy dla osób z rónego
rodzaju ograniczeniami.
Niezwykle istotnych informacji dla uytkowników czytników ekranowych
dostarczaj etykiety pól formularzy. Mimo e wskazówki graficzne znacz-
nie uatwiaj okrelenie funkcji poszczególnych pól tym z nas, którzy dys-
ponuj dobrym wzrokiem, uytkownicy czytników ekranowych nie bd
w stanie w prosty sposób stwierdzi, do czego su pola formularza, jeli nie
zostan one jawnie i prawidowo poczone z odpowiednimi etykietami.
Niektóre 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 elementów formularzy, naley zastoso-
wa element
label
i za pomoc jego atrybutu
for
powiza go bezpored-
nio z elementem, dla którego ma on by etykiet. Poniej zaprezentowany
zosta sposób, dziki któremu 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 równie atrybut ARIA
aria-
´
labelledby
w obrbie samego elementu formularza — a wic w elemen-
cie
input
przedstawionym w poprzednim przykadzie — w celu poinfor-
mowania przegldarki o
id
elementu, który jest opisywany przez biecy
210
R o z d z i a 6 . > D o s t p n o
element. W przykadzie naszym wskazalimy zatem, e element (a dokad-
nie element
label
) z
id
o wartoci
etykieta-nazwisko
stanowi etykiet dla
elementu
input
, którego
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 ety-
kiety identyfikuje element opisywany, wykorzystujc do tego jego
id
, za
w przypadku
aria-labelledby
to sam element opisywany wskazuje opisu-
jcy go element za pomoc jego
id
. Zwró take uwag na to, e nazwa
labelledby
, cho nie jest zgodna ze standardow, poprawn pisowni ame-
rykask, 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 elementów pól
Zrozumienie bardziej skomplikowanych formularzy mona uatwi uytkow-
nikom poprzez zgrupowanie zwizanych ze sob pól i wyposaenie kadej
z tych grup w odpowiednie nagówki. Jzyk HTML wanie w tym celu ofe-
ruje elementy
fieldset
oraz
legend
. Zbiór pól jest po prostu elementem
fieldset
, który zawiera wszystkie zwizane ze sob elementy formularza.
Pierwszym elementem wchodzcym w skad
fieldset
powinien by element
legend
, który 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, które 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 serwisów WWW w przypadku osób,
P od s um ow a ni e
211
które w najwikszym stopniu s uzalenione od sieci. Sposoby te w duej
mierze pomagaj równie w spenieniu ewentualnych wymaga stawianych
przez regulacje prawne i instytucjonalne organizacji, dla której pracujesz.
Podsumowanie
W rozdziale tym ogólnie przyjrzelimy si kwestii dostpnoci, w tym rów-
nie zwizanym z ni uwarunkowaniom prawnym i etycznym, istniejcym
standardom W3C oraz wystpujcym tu specyficznym problemom i ich
rozwizaniom. Co oprócz tego powiniene wynie z jego lektury? Najwa-
niejsz 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 holi-
stycznego podejcia do projektowania i tworzenia treci WWW. Z tak poj-
tej dostpnoci korzystaj nie tylko osoby niepenosprawne, lecz równie
wszyscy uytkownicy efektów naszych dziaa. (Te same sposoby, które
pozwalaj poprawi dostpno treci, zwykle zwikszaj take jej ogóln
uyteczno).
Rola dostpnoci w tworzeniu serwisów WWW znacznie wzrosa w ostat-
nich dziesiciu latach, a odbyo si to w duej mierze za spraw pojedyn-
czych 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 ustawo-
dawców i chtnych do wytyczania spraw prawników, pomyl lepiej o „mar-
chewce”, czyli szansie dotarcia do wielu osób niepenosprawnych, które
odwiedzaj Twój serwis, przyjaznoci dla mechanizmów wyszukiwarek inter-
netowych cechujcej kod zapewniajcy naleyt dostpno, a take satys-
fakcji, która stanie si Twoim udziaem, gdy zrobisz co, aby poprawi
komfort korzystania z internetu tak wielu ludzi.
Wyszukiwarka
Podobne podstrony:
Projektowanie serwisów WWW Standardy sieciowe Wydanie III
INTERNET Tworzenie serwisów WWW Dźwięk
CSS i Ajax Strony WWW zgodne ze standardami sieciowymi W3C cssaww
więcej podobnych podstron