Tworzenie serwisów WWW. Standardy sieciowepdf.helion.pl/tswwws/ts · 2010. 6. 1. · Z pewnoœci¹...
Transcript of Tworzenie serwisów WWW. Standardy sieciowepdf.helion.pl/tswwws/ts · 2010. 6. 1. · Z pewnoœci¹...
Tworzenie serwisów WWW.Standardy siecioweAutor: John AllsoppT³umaczenie: Dagmara SumaISBN: 978-83-246-2657-1Tytu³ orygina³u: Developing with Web StandardsFormat: 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 sztuczeki 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¿eszju¿ 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 tre�ci
Cz��� I > Podstawy
1. Zanim zaczniesz ..............................................................21
Dla kogo jest ta ksi��ka .............................................................................. 23
Wi�c dla kogo nie jest ta ksi��ka ........................................................... 24
Co da mi ta ksi��ka ..................................................................................... 24
Czego ta ksi��ka mi nie da .......................................................................... 25
Jak u�ywa tej ksi��ki ................................................................................. 26
Przy��czanie si� do spo�eczno�ci ............................................................ 26
Co dalej ....................................................................................................... 26
2. Filozofie i techniki ...........................................................27
Wojny przegl�darek .............................................................................. 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 wygl�da tak samo w ka�dej przegl�darce ................ 31
Stopniowe usprawnianie ........................................................................ 32
Rozdzielanie tre�ci, prezentacji i zachowania ........................................ 33
Jeszcze raz, z sensem ............................................................................ 33
Moja kolejna sztuczka ........................................................................... 34
3. Kodowanie .....................................................................35
Dlaczego „to dzia�a w przegl�darkach” nie wystarcza ................................. 36
HTML i XHTML ....................................................................................... 36
Sk�adnia i semantyka .................................................................................. 37
Bardzo krótka historia j�zyka HTML ......................................................... 38
HTML 4.01 .......................................................................................... 38
XHTML 1.0, 1.1, 2.0 ............................................................................ 39
HTML 5 ............................................................................................... 40
6 Tworzenie serwisów WWW. Standardy s ieciowe
Kluczowe koncepcje j�zyka 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 j�zyka 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 „hipertek�cie” .................................................................. 60
Kotwice ................................................................................................. 61
Wzgl�dne i bezwzgl�dne adresy URL .................................................... 62
Tworzenie ��czy do zasobów znajduj�cych 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
Wy��czanie 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 jako�ci ..................................................................................... 86
Walidacja kodu ...................................................................................... 87
Sprawdzanie ��czy ................................................................................. 88
HTML Tidy .......................................................................................... 88
HTML kontra XHTML .............................................................................. 89
Ró�nice w sk�adni .................................................................................. 89
Udost�pnianie dokumentu ..................................................................... 89
Obs�uga b��dów ..................................................................................... 89
Którego powiniene� u�ywa? .................................................................. 91
Spis tre�ci 7
4. Prezentacja ................................................................... 93
Krótka historia stylów stosowanych w serwisach WWW .............................. 93
Po co oddziela tre� od wygl�du? ......................................................... 96
Czym jest CSS? ........................................................................................... 96
Jak CSS jest wykorzystywany? ................................................................... 96
Styl �ródliniowy ..................................................................................... 97
Osadzony kod CSS ................................................................................ 97
Do��czanie zewn�trznych arkuszy stylów ............................................... 97
Podstawowa sk�adnia j�zyka CSS ............................................................... 98
Selektory, bloki deklaracji, deklaracje i w�asno�ci ................................. 98
Podstawowe informacje na temat selektorów ............................................. 100
Selektory typów ................................................................................... 100
Grupowanie selektorów ....................................................................... 100
Podstawowe w�asno�ci: style czcionek ........................................................ 100
color .................................................................................................... 101
font-family .......................................................................................... 102
font-size .............................................................................................. 104
font-weight .......................................................................................... 106
font-style ............................................................................................. 106
text-decoration .................................................................................... 107
Dziedziczenie ............................................................................................. 107
Zwi�kszenie szczegó�owo�ci: selektory class i id ......................................... 108
Selektory class ..................................................................................... 109
Selektory id ......................................................................................... 109
Precyzja selektora ............................................................................... 109
Cz�sto u�ywane w�asno�ci uk�adu tekstu ................................................... 110
text-align ............................................................................................. 111
line-height ........................................................................................... 111
Odst�py pomi�dzy literami i s�owami ................................................... 113
text-indent ........................................................................................... 113
Kombinacje: selektory potomków i dzieci ................................................... 114
Selektory potomków ............................................................................ 114
Selektory dzieci ................................................................................... 115
�czenie w �a�cuchy ............................................................................ 116
Precyzja selektorów potomków i dzieci ................................................ 118
Cz�sto u�ywane w�asno�ci t�a .................................................................... 121
background-color ................................................................................. 122
background-image ............................................................................... 123
Warto�ci URL ..................................................................................... 123
background-repeat .............................................................................. 124
background-position ............................................................................ 125
background-attach .............................................................................. 128
W�asno�ci t�a w CSS 3 ........................................................................ 128
W�asno�ci zbiorcze ............................................................................... 129
Selektory dynamiczne ................................................................................ 129
8 Tworzenie serwisów WWW. Standardy s ieciowe
Podstawowe w�asno�ci uk�adu strony ........................................................ 131
Elementy blokowe kontra elementy �ródliniowe ................................... 132
Model polowy ....................................................................................... 133
width ................................................................................................... 134
height .................................................................................................. 134
Przelewaj�ca si� tre� .......................................................................... 135
margin ................................................................................................. 135
border .................................................................................................. 137
padding ............................................................................................... 139
Jak szeroki i wysoki jest element? ....................................................... 140
Zaawansowane w�asno�ci uk�adu strony .................................................... 140
float ..................................................................................................... 140
clear .................................................................................................... 142
Pozycjonowanie ......................................................................................... 142
W�asno� position i schematy pozycjonowania ..................................... 142
Zaawansowane selektory ........................................................................... 144
Selektory s�siadów .............................................................................. 145
Selektory atrybutów ............................................................................ 145
Typy wy�wietlania ..................................................................................... 147
visibility ............................................................................................... 147
Pozycje listy ........................................................................................ 148
Wi�cej w�asno�ci ........................................................................................ 149
W�asno�ci drukowania ......................................................................... 149
W�asno�ci interfejsu u�ytkownika ........................................................ 149
Selektory ............................................................................................. 149
Tre� generowana ................................................................................ 150
Typy mediów ............................................................................................. 150
CSS zale�ne 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 jako�ci ................................................................................... 154
Walidacja kodu CSS ............................................................................ 154
Sprawdzanie zgodno�ci z przegl�darkami ............................................ 154
Szczególne wyzwania i techniki .................................................................. 155
Formatowanie formularzy ................................................................... 156
Zast�powanie obrazem ........................................................................ 156
Uk�ad strony ....................................................................................... 158
Problemy z przegl�darkami ................................................................. 158
Formatowanie CSS ............................................................................. 159
Wydajno� mechanizmu CSS i serwisów WWW .................................. 159
5. DOM ........................................................................... 161
DOM poziomu zerowego ...................................................................... 162
Przej�ciowy DOM ................................................................................ 162
DOM poziomu pierwszego ................................................................... 163
Spis tre�ci 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
Niezgodno�ci przegl�darek .................................................................. 176
W�a�ciwo� innerHTML kontra metody DOM .................................... 179
Bezpiecze�stwo ................................................................................... 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. Dost�pno�� ...................................................................189
Biznesowe argumenty za zapewnianiem dost�pno�ci ........................... 190
Prawodawstwo na �wiecie .................................................................... 191
Dost�pno� i W3C ..................................................................................... 191
WCAG 1 .............................................................................................. 192
WCAG 2 .............................................................................................. 195
ARIA ................................................................................................... 196
Typowe problemy zwi�zane z dost�pno�ci� (i ich rozwi�zania) .................. 203
�cza i tytu�y ...................................................................................... 203
Nag�ówki ............................................................................................. 204
Tekst alternatywny ............................................................................. 204
Kontrast kolorów ................................................................................. 205
Tabele ................................................................................................. 205
Formularze ......................................................................................... 209
Podsumowanie .......................................................................................... 211
10 Tworzenie serwisów WWW. Standardy s ieciowe
Cz��� II > Sztuka tworzenia w �wiecie rzeczywistym
7. Blaski i cienie wspó�pracy z przegl�darkami ........................... 215
Trzy rodzaje wad przegl�darek .................................................................. 216
Tryby pracy przegl�darki .......................................................................... 217
Tryb dziwactw i prze��czanie DOCTYPE ............................................ 218
Wybieranie trybu standardów .............................................................. 219
Nowy model prze��czania DOCTYPE wprowadzony w IE 8 ................ 220
Typowe b��dy przegl�darek ....................................................................... 222
B��d modelu polowego ......................................................................... 222
B��d podwójnego marginesu elementu dryfuj�cego ............................. 224
B��d niescalanych marginesów ............................................................ 225
IE i w�a�ciwo� hasLayout ........................................................................ 227
W g��biach Twojej przegl�darki .......................................................... 227
Jak element otrzymuje uk�ad? ............................................................. 228
Naprawianie (i wyzwalanie) b��dów
zwi�zanych z w�a�ciwo�ci� hasLayout ................................................. 229
Naprawianie b��dów: hakowa czy nie hakowa? ....................................... 231
Poznaj swojego wroga .......................................................................... 232
Dopasowywanie si� do przegl�darek .......................................................... 234
Ukrywanie arkuszy stylów przed starszymi przegl�darkami ................ 235
Gdy brakuje obs�ugi mo�liwo�ci ................................................................. 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
U�ywanie elementów HTML oraz atrybutów class i id
do uzyskiwania lepszych konstrukcji semantycznych ........................... 247
J�zyk znaczników handlu elektronicznego (ECML) ............................ 251
Kodowanie i SEO ...................................................................................... 252
Mikroformaty ............................................................................................ 253
Zalety mikroformatów ......................................................................... 253
Mikroformaty w akcji .......................................................................... 255
Narz�dzia zwi�zane z mikroformatami ................................................ 257
Wiele, wiele wi�cej ............................................................................... 258
Podsumowanie ........................................................................................... 258
9. Uk�ady stron wykorzystuj�ce CSS ........................................ 259
Wy�rodkowanie poziome ............................................................................ 260
Wy�rodkowanie pionowe ............................................................................ 263
Pozycjonowanie CSS ................................................................................. 264
Schematy pozycjonowania ................................................................... 265
W�asno�ci pozycjonowania ................................................................... 265
Pozycjonowanie bezwzgl�dne w akcji ................................................... 266
Spis tre�ci 11
Uk�ady wykorzystuj�ce dryfowanie ........................................................... 274
Poziome, dryfuj�ce listy nawigacji ....................................................... 274
Wype�nianie pola ................................................................................. 276
Obramowanie dooko�a listy nawigacji .................................................. 277
Wielokolumnowe uk�ady wykorzystuj�ce dryfowanie ........................... 278
Stopka ................................................................................................. 284
Zagadka kolorów ................................................................................. 284
Uk�ady siatkowe ........................................................................................ 292
W�asno�ci uk�adu 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 wygl�daj� 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
Najwa�niejsze mo�liwo�ci HTML 5 ........................................................... 311
Obs�uga b��dów ................................................................................... 311
Element canvas ................................................................................... 312
Lokalne przechowywanie danych ......................................................... 312
„Wielow�tkowy” JavaScript z Web Workers ....................................... 312
Obs�uga multimediów .......................................................................... 312
Lokalizowane aplikacje WWW z geolokacj� ........................................ 313
Strony umo�liwiaj�ce u�ytkownikom edycj� ........................................ 313
Ró�nice pomi�dzy HTML 4 a HTML 5 ..................................................... 313
Deklarowanie DOCTYPE ................................................................... 314
Nag�ówki, stopki, sekcje i inne nowe elementy strukturalne
w j�zyku HTML 5 ............................................................................... 315
Przyk�ad dokumentu HTML 5 .................................................................. 323
Materia�y wideo, audio i inne osadzone tre�ci w j�zyku HTML 5 .............. 329
Wideo .................................................................................................. 330
Audio ................................................................................................... 334
Obs�uga elementów video i audio przez przegl�darki ........................... 334
Dost�pno� materia�ów wideo i audio .................................................. 335
12 Tworzenie serwisów WWW. Standardy s ieciowe
Obs�uga standardu HTML 5 przez przegl�darki ....................................... 336
IE 7 i wcze�niejsze wersje programu Internet Explorer ....................... 336
Sprawdzanie poprawno�ci i udost�pnianie kodu HTML 5 ......................... 337
Czy powinienem ju� korzysta z j�zyka HTML 5? ..................................... 338
12. CSS 3 i przysz�o�� CSS ...................................................... 341
CSS prze�adowany ..................................................................................... 341
Wej�cie CSS 3 ........................................................................................... 342
Problem kompatybilno�ci wstecz i naprzód „rozwi�zany”? .................. 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 w�asno�ci w CSS 3 ................................................... 363
Efekty cieni ............................................................................................... 364
W�asno� text-shadow .......................................................................... 364
W�asno� box-shadow .......................................................................... 368
W�asno� border-radius ............................................................................. 370
Kompatybilno� ................................................................................... 373
W�asno� transparency .............................................................................. 373
Konstrukcja background-color: transparent ........................................ 373
Pó�przezroczyste obrazy t�a ................................................................. 374
W�asno� opacity ................................................................................. 374
Kolory RGBa ............................................................................................. 375
Kompatybilno� ................................................................................... 376
Tekst wielokolumnowy ............................................................................... 376
Przej�cia .................................................................................................... 378
Definiowanie przej�cia ......................................................................... 380
Inne w�asno�ci ........................................................................................... 382
Obrazy obramowa� .............................................................................. 382
Wielokrotne obrazy t�a ........................................................................ 382
Przekszta�cenia CSS ........................................................................... 383
Gradienty ............................................................................................ 383
Wi�cej, wi�cej, wi�cej! ................................................................................ 384
14. Dostosowywanie serwisów WWW do potrzeb ró�nych mediówza pomoc� CSS .............................................................. 387
W�szenie agenta u�ytkownika ............................................................. 388
Haki .................................................................................................... 389
Spis tre�ci 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 w�szenia agenta u�ytkownika? ...... 399
Podsumowanie .......................................................................................... 400
15. Czcionki w serwisach WWW ...............................................401
Krótka historia ��czenia i osadzania czcionek ............................................ 402
Bie��ca sytuacja prawna ........................................................................... 404
Bie��ca sytuacja techniczna ...................................................................... 405
@font-face i osadzanie czcionek ................................................................ 405
Osadzanie czcionek w przypadku programu Internet Explorer ............ 406
�czenie czcionek w przypadku innych przegl�darek .......................... 407
Wyzwania ............................................................................................ 409
agodzenie problemów ........................................................................ 410
Czcionki jako us�ugi ............................................................................ 411
Podsumowanie .......................................................................................... 411
16. SVG i canvas: grafika w przegl�darce ....................................413
SVG .......................................................................................................... 415
Podstawowe koncepcje i sk�adnia SVG ................................................ 416
Uk�ad wspó�rz�dnych SVG .................................................................. 418
Zalety SVG .......................................................................................... 419
Przypadki zastosowania SVG .............................................................. 421
Umieszczanie obrazów SVG w serwisach WWW .................................. 422
Obs�uga SVG zapewniana przez przegl�darki ..................................... 425
Udost�pnianie SVG ............................................................................. 427
Poza SVG ............................................................................................ 427
Element canvas standardu HTML 5 ......................................................... 428
U�ywanie elementu canvas .................................................................. 428
Dodawanie elementu canvas ................................................................ 428
Pobieranie kontekstu rysowania .......................................................... 430
Rysowanie za pomoc� kontekstu ......................................................... 432
I wi�cej… ............................................................................................ 437
Przypadki zastosowania elementu canvas ............................................ 438
Kanwy kontra SVG ................................................................................... 439
Podsumowanie .......................................................................................... 441
�ród�a .........................................................................443
Skorowidz ....................................................................453
ROZDZIA� SZÓSTY
Dost�pno��
dy Tim Berners-Lee tworzy� zr�by World Wide Web we wcze-
snych latach 90. ubieg�ego wieku, szczególnie mocno akcento-
wa� znaczenie jej powszechno�ci i uniwersalno�ci. Dost�pno� dla
wszystkich ludzi, niezale�nie od ich ewentualnej niepe�nosprawno�ci,
by�a fundamentaln� cz��ci� tej wizji.
Przez ponad dziesi� lat organizacja W3C opracowywa�a protoko�y,
których celem by�o sprawienie, aby sie WWW by�a jak najbardziej
dost�pna, i w��cza�a czynniki odpowiedzialne za zapewnianie dost�p-
no�ci do specyfikacji reguluj�cych standardy takie jak HTML czy
CSS. Równolegle z tym cia�a ustawodawcze na ca�ym �wiecie wprowa-
dza�y przepisy prawne zwi�zane z dost�pno�ci� oraz regulacje, które
mia�y taki sam wp�yw na sie WWW jak na �rodowisko fizyczne i które
cz�sto bezpo�rednio odwo�ywa�y si� do tych specyfikacji W3C.
Mimo to twórcy serwisów WWW wydaj� si� nieraz bagatelizowa kwe-
stie zwi�zane z dost�pno�ci�. W najlepszym przypadku s� one roz-
wa�ane na samym ko�cu, stanowi� list� formalno�ci, które musz�
zosta dope�nione jak najmniejszym wysi�kiem i kosztem finansowym
ju� po ca�kowitym zako�czeniu „prawdziwej” pracy nad projektem.
Jednak zaanga�owanie w zapewnianie dost�pno�ci powinno by jedn�
z podstaw etyki naszej rodz�cej si� profesji: czym�, co z pe�n� �wiado-
mo�ci� powinni�my stara si� osi�gn�, nie za� rzecz�, któr� robimy
niech�tnie i tylko wtedy, gdy wymaga tego od nas prawo. Je�li na co
dzie� utrzymujesz kontakty z osob� niepe�nosprawn�, z pewno�ci�
wiesz, jak trudne mo�e by uzyskanie dost�pu do istotnych informacji,
sieci spo�ecznych i us�ug. Je�li nie masz tej okazji, spróbuj wyobrazi
sobie ograniczenie swoich w�asnych mo�liwo�ci dost�pu i zastanowi
si�, w jakich sytuacjach znajduj� si� cz�sto ludzie niepe�nosprawni.
G
190 Rozdzia� 6. > Dost�pno��
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 naj�wie�szych informacji ze �wiata. Nawiguj,
u�ywaj�c wy��cznie klawiatury lub jedynie myszy. Szybko nabierzesz sza-
cunku dla ogromnych wyzwa�, które wi�kszo� serwisów WWW i us�ug
internetowych stawia przed lud�mi niepe�nosprawnymi, wyzwa�, które masz
okazj� zmniejszy z racji wykonywanego zawodu.
Kluczowa rola odgrywana przez sie WWW w poprawianiu standardu �ycia
tak wielu osób niepe�nosprawnych jest jednym z powodów, dla których zosta-
�em twórc� serwisów. Nie musi tak by w przypadku ka�dego, niezale�nie
jednak od tego, czy Twoj� motywacj� jest altruizm, czy te� wymogi prawne
i gro�ba wytoczenia procesów s�dowych, o których g�o�no bywa ostatnimi
czasy w Stanach Zjednoczonych i Australii, przekonasz si�, �e zapewnienie
nale�ytej dost�pno�ci jest jednym z podstawowych zada� zwi�zanych z pro-
fesjonalnym tworzeniem serwisów WWW.
Na szcz��cie, jest to te� znacznie mniej k�opotliwe i wcale nie tak trudne do
osi�gni�cia, jak nauczono Ci� wierzy.
W rozdziale tym nie b�dziemy w stanie bardzo szczegó�owo opisa wszystkich
zagadnie� zwi�zanych z zapewnianiem dost�pno�ci, ale postaramy si� zaj�
najwa�niejszymi kwestiami, zaleceniami oraz wyzwaniami technicznymi
dotycz�cymi tej materii, a tak�e przyjrze kilku prostym krokom, które
pomog� nam tworzy odpowiednio dost�pne serwisy WWW przy niewielkim
tylko dodatkowym wysi�ku z naszej strony.
Biznesowe argumenty za zapewnianiem dost�pno�ciZa konieczno�ci� zapewniania dost�pno�ci serwisów WWW przemawiaj�
tak�e solidne argumenty natury biznesowej. Tworzenie takich serwisów mo�e
wp�yn� na poprawienie komfortu �ycia odwiedzaj�cych je osób, przek�ada
si� te� jednak na bezpo�rednie oszcz�dno�ci (zwi�zane na przyk�ad ze zmniej-
szeniem liczby u�ytkowników dzwoni�cych na numery telefonicznej obs�ugi
klienta) i umo�liwia biznesowi dotarcie do znacznie wi�kszej grupy ludzi,
co wp�ywa z kolei na wzrost sprzeda�y i zysków. Liczba osób niepe�nospraw-
nych w naszych spo�eczno�ciach jest o wiele wi�ksza, ni� gros ludzi sobie
wyobra�a. Wydzia� Zdrowia i Pomocy Humanitarnej Stanów Zjednoczonych
og�osi� na przyk�ad niedawno, �e jeden na pi�ciu obywateli USA cierpi
z powodu jakiego� rodzaju niepe�nosprawno�ci, a w przypadku jednej osoby
na osiem niepe�nosprawno� ta ma charakter powa�ny.
Dost�pno�� i W3C 191
Gdy mówimy o osobach niepe�nosprawnych, mamy na my�li dziesi�tki milio-
nów ludzi, a tak�e segment rynku, który znacznie cz��ciej korzysta z han-
dlu elektronicznego ni� jakakolwiek inna grupa spo�eczna. Zaspokajanie
potrzeb tej wspólnoty mo�e bezpo�rednio wp�yn� na rentowno� niejednej
firmy.
Oprócz tych zysków o charakterze czysto komercyjnym zastosowanie tech-
nik tworzenia dost�pnych serwisów WWW mo�e 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
w�a�ciwie zinterpretowane tylko przez ludzi dysponuj�cych odpowiednio
dobrym wzrokiem. Serwisy WWW, w przypadku których zastosowano dobr�
i przejrzyst� struktur� semantyczn�, unikni�to u�ywania kodu opartego na
tabelach oraz zadbano o wykorzystanie innych technik zapewniania dost�p-
no�ci, mog� dzi�ki temu cieszy si� lepsz� „wykrywalno�ci�” i pozycjono-
waniem przez mechanizmy wyszukiwania.
Prawodawstwo na �wiecieOstatnimi czasy na ca�ym �wiecie uchwala si� akty prawne maj�ce zwal-
cza dyskryminacj� osób niepe�nosprawnych. Przepisy tego rodzaju doty-
cz� zwykle wielu ró�nych aspektów �ycia, coraz wi�kszy jednak nacisk
k�adzie si� tu równie� na kwestie zwi�zane z dost�pno�ci� sieci i serwisów
WWW. Problem ten jest bardzo z�o�ony, dlatego wszelkie próby prostego
zaprezentowania go tutaj skazane s� na niepowodzenie i mog� wprowadzi
tylko jeszcze wi�ksze zamieszanie. �ród�a, z których mo�esz czerpa bar-
dziej obszern� wiedz� na temat sytuacji na �wiecie w tej materii, zosta�y
wymienione na ko�cu niniejszej ksi��ki.
Dost�pno�� i W3COd pierwszych dni swojego istnienia organizacja W3C podejmuje próby
tworzenia zalece�, wytycznych i wskazówek dotycz�cych kwestii zapewnia-
nia dost�pno�ci, a tak�e wbudowania ich bezpo�rednio w standardy takie
jak CSS i HTML. W roku 1999 W3C opublikowa�a pierwsz� wersj� zbioru
dokumentów znanych jako „Wytyczne dotycz�ce dost�pno�ci tre�ci interne-
towych” (ang. Web Content Accessibility Guidelines, w skrócie — WCAG 1),
za� w roku 2008 udost�pni�a jego zaktualizowan� wersj� (znan� jako
WCAG 2). Dodatkowo, aby zaspokoi rosn�c� potrzeb� wytycznych zwi�-
zanych z dost�pno�ci� aplikacji WWW, dzia�aj�ca w obr�bie W3C inicjatywa
192 Rozdzia� 6. > Dost�pno��
dost�pno�ci do sieci (ang. Web Accessibility Initiative, w skrócie — WAI)
opracowa�a reguluj�cy te kwestie standard Accessible Rich Internet Appli-
cations Suite (WAI-ARIA), którym zajmiemy si� ju� niebawem.
WCAG 1Opublikowany w 1999 roku, w czasach panowania przegl�darek wersji czwar-
tej, WCAG 1 by� pierwsz� wa�n� prób� skodyfikowania zbioru procedur
maj�cych zapewni wi�ksz� dost�pno� serwisów WWW. Jego zadaniem
by�o pokazanie sposobu „w jaki mo�na tworzy tre�ci internetowe dost�pne
dla osób niepe�nosprawnych” (jak mo�na przeczyta ju� w pierwszym
zdaniu opisu WCAG 1 znajduj�cego si� pod adresem: www.w3.org/TR/
WCAG10).
WCAG 1 zosta� podzielony na czterna�cie wytycznych, z których ka�da
dzieli si� na punkty kontrolne, a te z kolei maj� priorytety od A do AAA
(okre�lane cz�sto jako „potrójne A”). Zgodno� z wytycznymi WCAG 1 mo�e
by mierzona stopniem zgodno�ci z tymi punktami kontrolnymi. Dokument
ma zgodno� poziomu A, je�li zapewnia zgodno� ze wszystkim punktami
kontrolnymi poziomu A. Analogicznie, dokument uwa�any jest za zgodny
z poziomem AA („podwójne A”), je�li spe�nia wymogi wszystkich punktów
kontrolnych AA, za� z poziomem AAA, gdy zapewnia zgodno� z wszystkimi
punktami kontrolnymi AAA.
Zanim bardziej zag��bimy si� w tematyk� tych wytycznych i punktów kon-
trolnych, nale�y tu odnotowa, �e zgodno� AAA uwa�a si� ogólnie za trudn�
do osi�gni�cia i nie zawsze jest warta w�o�onego w ni� wysi�ku, poniewa�
wiele punktów kontrolnych AAA ma bardzo subiektywny charakter, a pe�na
zgodno� z poziomem AAA ma do� niewielkie znaczenie praktyczne.
W zwi�zku z tym przez wi�kszo� ekspertów (a tak�e niektóre oficjalne
wytyczne rz�dowe) zgodno� poziomu AA jest zalecana jako wystarczaj�ca.
Wytyczne i punkty kontrolneJak ju� wspomnieli�my powy�ej, ka�da z czternastu wytycznych WCAG 1
zawiera kilkana�cie punktów kontrolnych. W rozdziale tym przyjrzymy si�
tylko tym punktom kontrolnym, które najcz��ciej sprawiaj� trudno�ci.
Wytyczne WCAG 1 (oraz towarzysz�cy im dokument „Techniki”) s� do�
proste, nie bój si� wi�c przeczyta ich samodzielnie.
Dost�pno�� i W3C 193
Wytyczna 1: Zapewnij równowa�neodpowiedniki tre�ci dwi�kowych i wizualnychWytyczna ta ma na celu zaspokojenie potrzeb osób maj�cych problemy ze
s�uchem lub wzrokiem. Jednym z najbardziej powszechnych b��dów pope�-
nianych przez twórców serwisów WWW jest pomijanie tre�ci alt zwi�za-
nych z obrazami. W kodzie HTML 4 wszystkie elementy img musz� mie
atrybut alt, cho warto� tego atrybutu mo�e by pusta (a wi�c dopusz-
czalne jest tu wyra�enie alt="") w przypadku grafik pe�ni�cych funkcje
wy��cznie dekoracyjne. W takich przypadkach zdecydowanie powinni�my
u�ywa mo�liwo�ci oferowanych przez CSS, zamiast dodawa tego typu
obrazy za pomoc� kodu HTML.
Zapewnianie dost�pno�ci tre�ci audio i wideo wymaga znacznie wi�cej ni�
tylko prostych odpowiedników tekstowych, a opis niezb�dnych technik, które
si� tu wykorzystuje, znacznie wykracza poza zakres materia�u prezento-
wanego w tej ksi��ce. �cza do �róde� informacji na ten temat oraz wiado-
mo�ci dotycz�cych sposobów zapewniania dost�pno�ci tre�ci audio i wideo
znajdziesz na ko�cu niniejszej publikacji.
Wytyczna 2: Nie polegaj wy��cznie na kolorzeZalecenie to ma zastosowanie raczej do kodu CSS ni� HTML, poniewa�
formatowanie zawsze powinno by definiowane za po�rednictwem mecha-
nizmu CSS, nie za� prezentacyjnego kodu HTML. Ocenia si�, �e nawet
osiem procent m�skiej populacji ma pewnego rodzaju problemy z rozró�-
nianiem barw, za� osoby korzystaj�ce z urz�dze� monochromatycznych
(takich jak czytnik Kindle firmy Amazon) nie s� w stanie rozró�nia jakich-
kolwiek kolorów poza odcieniami szaro�ci. Zamiast wi�c na przyk�ad u�y-
wa barwy zielonej w celu wskazania bezpiecznego wyboru i czerwieni do
oznaczania zagro�enia, powiniene� stosowa kszta�ty, etykiety tekstowe
i inne rodzaje wskazówek przekazuj�cych t� informacj�.
Wytyczna 3: Korzystaj ze znaczników oraz arkuszy stylówi rób to we w�a�ciwy sposóbWytyczna ta sugeruje, �e powinni�my u�ywa technologii WWW nie tylko
zgodnie z liter� prawa (uk�ady stron wykorzystuj�ce tabele mimo wszystko
przejd� walidacj�), lecz równie� zgodnie z jego duchem. Nale��ce do niej
punkty kontrolne maj� mi�dzy innymi zapewni, �e dokumenty s� prawi-
d�owe, w kodzie CSS stosowane s� jednostki wzgl�dne, takie jak em i %,
zamiast px, za� w kodzie HTML u�ywane s� odpowiednie elementy seman-
tyczne i strukturalne (na przyk�ad nag�ówki, listy, cytaty itd.).
194 Rozdzia� 6. > Dost�pno��
Wytyczna 5: Twórz p�ynnie przekszta�caj�ce si� tabeleDane tabelaryczne mog� powodowa powa�ne problemy w przypadku osób
korzystaj�cych z urz�dze� asystuj�cych, takich jak czytniki ekranowe.
Wytyczna 5 zawiera kilka punktów kontrolnych, które maj� Ci pomóc
w poprawieniu dost�pno�ci danych tego rodzaju.
Wspomniane punkty kontrolne dotycz� u�ywania 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 tak�e atrybutów axis, scope
i headers w celu wskazania relacji wyst�puj�cych pomi�dzy komórkami
i nag�ówkami. Sposobami poprawiania dost�pno�ci tabel danych zajmiemy
si� jeszcze w dalszej cz��ci niniejszego rozdzia�u.
Wytyczna 9: Projektuj zgodnie z zasad� niezale�no�ci od sprz�tuWytyczna 9 koncentruje si� na znaczeniu mo�liwo�ci u�ywania serwisu lub
strony WWW niezale�nie od rodzaju wykorzystywanego urz�dzenia wej�cio-
wego, a wi�c tego, czy zamiast samej myszy stosowana jest klawiatura,
wej�ciowe urz�dzenie g�osowe czy te� sprz�t jeszcze innego typu.
To tylko niektóre z wytycznych, lecz wiele wa�nych i popularnych serwi-
sów WWW nie spe�nia wymogów stawianych nawet przez nie. Zapewnienie
zgodno�ci poziomu AA standardu WCAG 1 jest w du�ej mierze spraw�
prost�, a stopie� tej zgodno�ci da si� zwykle oceni w sposób automatyczny
za pomoc� odpowiednich narz�dzi, którymi zajmiemy si� ju� za chwil�.
Oznacza to w praktyce, �e do� �atwo mo�na wyznaczy poziom zgodno�ci
serwisów WWW z tymi wytycznymi, a ich twórcy nie dysponuj� wieloma
wymówkami, �eby tego nie robi.
Narz�dzia do zapewniania jako�ci dla WCAG 1Nie da si� sprawdzi mechanicznie zgodno�ci ze wszystkimi wytycznymi
WCAG 1, poniewa� do oceny stopnia przestrzegania niektórych z nich wyma-
gany jest udzia� cz�owieka, jednak w przypadku tych, dla których jest to mo�-
liwe, istnieje sporo narz�dzi u�atwiaj�cych proces testowania. Nale�� do nich:
� CynthiaSays firmy HiSoftware — www.cynthiasays.com,
� HERA — www.sidar.org/hera/index.php.en,
� WAVE firmy Webaim — wave.webaim.org,
� Total Validator — www.totalvalidator.com,
� ATRC Web Accessibility Checker — www.achecker.ca/checker/
index.php.
Dost�pno�� i W3C 195
WCAG 2Standard WCAG 1 powsta� z my�l� o technologiach WWW istniej�cych
w czasach, gdy zosta� on opublikowany. W kolejnych latach niektóre z nich
bardziej dojrza�y, za� inne — takie jak skrypty DOM — zyska�y na zna-
czeniu. Drugie wydanie WCAG, czyli WCAG 2, ma ju� zatem nieco inn�
struktur�.
Zasady, wytyczne, kryteria sukcesu i technikiWCAG 2 powsta� w celu utworzenia wytycznych, które s� w mniejszym
stopniu zwi�zane 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 zachodz�cych w dziedzinie technologii WWW. Zgodnie
z o�wiadczeniem 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-
sz�o�ci”. Standard zosta� tak�e zaprojektowany w taki sposób, aby zgod-
no� z definiowanymi przeze� kryteriami sukcesu da�a 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 zwi�zane by�y
punkty kontrolne, WCAG 2 podzielone zosta�o na cztery g�ówne zasady.
Ka�da z nich zawiera szereg wytycznych, za� ka�da z wytycznych ma
pewn� liczb� punktów kontrolnych nosz�cych nazw� kryteriów sukcesu.
Ka�de z tych kryteriów jest zwi�zane z wystarczaj�cymi technikami (czyli
rekomendowanymi sposobami spe�niania tego kryterium sukcesu) oraz tech-
nikami doradczymi (metodami, które same w sobie nie s� wystarczaj�ce
do spe�nienia kryterium, lecz s� mimo to zalecane). adna z tych technik
nie jest wymagana w celu spe�nienia 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 zajmuj�cych si� kwestiami
dost�pno�ci, a przyjmowanie go jako podstawowego wyznacznika dost�p-
no�ci tre�ci WWW odbywa si� znacznie wolniej, ni� organizacja W3C mog�a
si� spodziewa. Wydaje si� jednak, �e zast�pi on w ko�cu WCAG 1 jako naj-
wa�niejsze �ród�o wytycznych w tej dziedzinie. Przegl�d niektórych argumen-
tów przeciwko WCAG 2 wysuwanych przez uczestników w tej dyskusji mo�esz
znale� w definicji dost�pno�ci tre�ci WWW zamieszczonej w angloj�zycznej
196 Rozdzia� 6. > Dost�pno��
wersji Wikipedii, która w momencie pisania niniejszej ksi��ki by�a zaska-
kuj�co dobra (en.wikipedia.org/wiki/Web_accessibility#Criticism_of_WAI_
guidelines).
WCAG 2 to dokument znacznie wi�kszy ni� WCAG 1. Zosta� on poddany
krytyce g�ównie za swoj� ogólnikowo� i zastosowanie niezrozumia�ego �ar-
gonu — przyk�ad tej krytyki mo�esz znale� w artyku�ach 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 dok�adna
dokumentacja, której zadaniem jest pomaganie twórcom w zrozumieniu
i spe�nieniu ka�dego kryterium sukcesu. Opracowano go równie� w taki
sposób, aby strony spe�niaj�ce w tej chwili wymogi stawiane przez kryteria
WCAG 1 A i AA w wi�kszo�ci przypadków spe�nia�y te� kryteria WCAG 2
bez konieczno�ci wprowadzania �adnych poprawek lub dzi�ki bardzo nie-
wielkiemu nak�adowi pracy.
Szczegó�owy opis otch�ani i zawi�o�ci standardu WCAG 2 daleko wykracza
poza zakres materia�u prezentowany w niniejszej ksi��ce, jednak wiele inte-
resuj�cych ��czy i adresów innych dokumentów zwi�zanych z tymi wytycz-
nymi znajdziesz w dodatku „�ród�a” zamieszczonym na ko�cu tej publikacji.
Narz�dzia do zapewniania jako�ci dla WCAG 2Z uwagi na to, �e WCAG 2 nadal znajduje si� na stosunkowo wczesnym eta-
pie rozwoju, dost�pnych jest te� w jego przypadku znacznie mniej zauto-
matyzowanych narz�dzi do zapewniania jako�ci ni� w przypadku WCAG 1.
Z zaprezentowanej wcze�niej listy rozwi�za� dla WCAG 1 jedynie narz�-
dzie ATRC Web Accessibility Checker zapewnia dodatkow� mo�liwo� testo-
wania stron pod k�tem zgodno�ci z wymogami WCAG 2.
ARIAWraz z tym, jak tre�ci i serwisy WWW stawa�y si� bardziej z�o�one i zacz��y
w coraz wi�kszym stopniu przypomina aplikacje, wzrasta�a te� trudno�
zapewniania, a nawet definiowania ich dost�pno�ci. W celu rozwi�zania tych
problemów WAI opracowa�a pakiet Accessible Rich Internet Applications,
zwany te� WAI-ARIA lub — cz��ciej — po prostu ARIA. ARIA jest zbio-
rem rozszerze� j�zyka HTML, których mo�na u�ywa do opisywania elemen-
tów, dzi�ki czemu mo�liwe jest identyfikowanie roli, stanów i w�a�ciwo�ci
ka�dego z nich w sposób, który znacznie zwi�ksza dost�pno� wynikowej
strony.
Dost�pno�� i W3C 197
W punkcie tym przyjrzymy si� najpierw pobie�nie temu, co umo�liwia Ci
ARIA. Cho jest ona w dalszym ci�gu w pocz�tkowej fazie rozwoju, cieszy
si� naprawd� niez�� obs�ug� w przypadku wszystkich wspó�czesnych prze-
gl�darek internetowych, w tym tak�e programu Internet Explorer 8, jak
równie� du�ej liczby czytników ekranowych, poza tym wydaje si� ca�kiem
jasne, �e twórcy przegl�darek rzetelnie popieraj� t� technologi�. ARIA pozo-
stanie z nami na sta�e.
Dost�p za pomoc� klawiaturyStrona czy aplikacja WWW, aby by�a dost�pna, musi by w pe�ni u�yteczna
za pomoc� urz�dze� innych ni� mysz. ARIA zapewnia, �e aplikacje i strony
mog� by u�ywane za pomoc� klawiatury, nie wymagaj�c zastosowania
myszy.
W standardzie HTML 4 ognisko wprowadzania (ang. focus) okre�la, który
element strony jako pierwszy otrzymuje dane wej�ciowe wprowadzone przez
u�ytkownika za pomoc� klawiatury lub innego urz�dzenia wej�ciowego.
Ognisko wprowadzania mo�e przej� ograniczona liczba elementów, takich
jak a, area, button, input oraz select, a u�ytkownik mo�e korzysta z kla-
wisza tabulacji w celu cyklicznego przechodzenia pomi�dzy nimi. Porz�dek
przechodzenia klawiszem tabulacji (ang. tab order) tych elementów (czyli
kolejno�, w której b�d� one przejmowa�y ognisko wprowadzania wraz z tym,
jak u�ytkownik b�dzie naciska� klawisz tabulacji) jest okre�lany przez
kolejno� ich wyst�powania w �ród�owym kodzie HTML lub te� przez war-
to� atrybutu tabindex, który za pomoc� liczb ca�kowitych definiuje odpo-
wiedni porz�dek w nast�puj�cy sposób: im ni�sza jest warto� przypisana
atrybutowi, tym wcze�niejsze miejsce element zajmuje w porz�dku prze-
chodzenia.
Twórcy serwisów WWW mog� za pomoc� j�zyka HTML 4 tworzy w�asne
kontrolki aplikacji lub widgety, jak s� one nazywane w technologii ARIA.
U�ywa 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. Stosuj�c technologi� ARIA, mo�na sprawi, aby wszystkie
widoczne elementy mia�y przypisany tabindex, dzi�ki czemu mog� one
przejmowa ognisko wprowadzania i dzi�ki czemu mo�na ich u�ywa za
pomoc� klawiatury.
Ta mo�liwo� technologii ARIA jest w tej chwili obs�ugiwana przez przegl�-
darki IE 8, Opera 9.5, Safari 4 oraz Firefox 3.5.
198 Rozdzia� 6. > Dost�pno��
RoleW kodzie HTML do dostarczania semantycznej informacji o dokumen-
tach wykorzystuje si� nazwy elementów; mimo �e sprytni twórcy serwisów
WWW u�ywaj� równie� atrybutów class i id do do��czania dodatkowych
informacji na temat elementów, rozwi�zanie to ma raczej charakter zwycza-
jowy i nie jest oficjaln� cz��ci� standardu. Wynika st�d, �e j�zyk HTML
jest nieco zubo�a�y, je�li chodzi o jego mo�liwo�ci semantyczne. ARIA roz-
szerza mo�liwo�ci standardu XHTML 1.1 zwi�zane z atrybutem role,
pozwalaj�c twórcom opisywa dodatkow� funkcj� wype�nian� przez element,
niezwi�zan� bezpo�rednio z tym, jakiego rodzaju jest to element. Na przy-
k�ad listy s� elementami li, mog� te� jednak odgrywa rol� nawigacyjn�,
cho i to nie musi by ich jedyna funkcja. Technologia ARIA dostarcza zbiór
mo�liwych warto�ci atrybutu role, czyli zestaw nazw typów ról pe�nionych
przez element. Fachowo mówi si� o tym, �e zapewnia atrybutowi role
ontologi�.
Korzystaj�c z atrybutu role do opisywania roli odgrywanej przez okre�lony
element, twórcy serwisów WWW mog� sprawi, aby przegl�darki „rozu-
miej�ce” role technologii ARIA lepiej przedstawia�y u�ytkownikom struktur�
dokumentu. Atrybut role mo�e równie� zapewnia standardowy, przewi-
dywany przez u�ytkownika sposób dzia�ania i wygl�d okre�lonych rodza-
jów kontrolek, na przyk�ad pól wyboru, które s� implementowane przez
twórc� za pomoc� innych ni� typowe elementów HTML (typowym elementem
by�by w tym przypadku <input type="checkbox">).
Role oferowane przez technologi� ARIA nale�� do wielu ró�nych kategorii,
w�ród których wymieni mo�na nast�puj�ce:
� Role znaków orientacyjnych, które opisuj� regiony strony
przeznaczone do celów nawigacyjnych. Nale�� do nich: application,
banner, main, navigation oraz search.
� 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 �ci�le zwi�zane z nowymi elementami strukturalnymi
standardu HTML 5).
� Role struktury aplikacji, które opisuj� funkcj� odgrywan� przez
element w strukturze aplikacji. Nale�� do nich: alert, alertdialog,
progressbar oraz status.
� Elementy interfejsu u�ytkownika, takie jak treegrid, toolbar
oraz menuitem.
Dost�pno�� i W3C 199
� Role elementów wej�ciowych u�ytkownika, takie jak checkbox,
slider oraz option.
Korzystanie z atrybutu role jest �atwe — polega po prostu na tym, �e doda-
jemy jedn� ze zdefiniowanych warto�ci roli jako warto� atrybutu role
elementu, dok�adnie tak, jak odbywa�o si� to w przypadku warto�ci atry-
butu class. Za�ó�my na przyk�ad, �e chcemy u�y elementu input z type
image jako przycisku. W celu zapewnienia odpowiedniego opisu funkcji ele-
mentu wej�ciowego powinni�my po prostu doda rol� button, tak jak zosta�o
to pokazane poni�ej:
<input type="image" alt="font-weight: bold" src="./images/�bold-unpressed.png" role="button">
Co przegl�darka zrobi z informacj�, �e dany element jest przyciskiem, pozo-
stawia si� ju� inwencji twórców programu. Informacja ta jest jednak obecna
i mo�emy wyobrazi sobie, w jaki sposób przegl�darki i urz�dzenia asy-
stuj�ce mog� wykorzysta t� wiedz� nie tylko dla potrzeb osób niepe�no-
sprawnych, lecz równie� wszystkich innych u�ytkowników korzystaj�cych
z serwisu.
Stany i w�a�ciwo�ciOprócz umo�liwiania twórcom serwisów WWW opisywania ról odgrywanych
przez elementy technologia ARIA pozwala te� jawnie deklarowa stany
elementów, a wi�c na przyk�ad to, czy dany element jest w tej chwili naci-
�ni�ty, jak równie� podawa innego rodzaju informacje zwi�zane z elemen-
tami. Stany dostarczaj� dynamicznych danych na temat elementów, czyli
takich informacji jak to, czy pole wyboru jest zaznaczone, podczas gdy w�a-
�ciwo�ci zapewniaj� informacje podstawowe, zwi�zane z sam� natur� obiek-
tów. Oznacza to w praktyce, �e rozró�nienie pomi�dzy w�a�ciwo�ciami
a stanami nie jest szczególnie wa�ne, poniewa� obydwa te typy informacji
dzia�aj� w bardzo podobny sposób. Nale�y tu jednak zaznaczy ró�nic�
wyst�puj�c� pomi�dzy stanami i w�a�ciwo�ciami a atrybutem role. Gdy
korzystamy z atrybutu role, przypisujemy warto�ci do samego tego atry-
butu, lecz istnieje wiele atrybutów stanów i w�a�ciwo�ci, za� ka�dy z nich
posiada swoj� w�asn� nazw� — innymi s�owy, nie istniej� atrybuty ARIA
o nazwie state lub property. Nazwy atrybutów w�a�ciwo�ci i stanów ARIA
zawieraj� przedrostek aria-; przyk�adem mo�e tu by stan aria-disabled,
który mo�e przyjmowa warto�ci true i false, b�d� te� w�a�ciwo� aria-
�flawto, która wskazuje nast�pny element w zalecanej kolejno�ci odczy-
tywania.
200 Rozdzia� 6. > Dost�pno��
Wrómy do naszego przyk�adu z elementem wej�ciowym. Gdyby rozpatry-
wanym elementem by� przycisk, który mo�e przyjmowa dwa stany (wci�ni�ty
i niewci�ni�ty), poinformowa o stanie bie��cym mogliby�my za pomoc�
stanu ARIA aria-pressed, tak jak zosta�o to przedstawione poni�ej.
<input type="image" alt="font-weight: bold" src="./images/�bold-unpressed.png" role="button" aria-pressed="false">
Mogliby�my te� nast�pnie zmieni stan aria-pressed, korzystaj�c z kodu
JavaScript, gdy element zosta�by klikni�ty lub odebra� zdarzenie zwi�zane
z naci�ni�ciem klawisza Enter.
CSS i ARIAWszystkie nowoczesne przegl�darki internetowe, w tym równie� IE 8, umo�-
liwiaj� nam formatowanie elementów w oparciu o ich w�a�ciwo�ci i stany
ARIA (a tak�e warto�ci ich atrybutów role) za pomoc� selektorów atry-
butów. Na przyk�ad aby zmieni kolor t�a elementu w momencie, gdy jest
on naci�ni�ty, u�yliby�my nast�puj�cego kodu CSS:
[aria-pressed=true] { background-color: #cfb725;}
Dodawanie ról, w�a�ciwo�ci i stanów ARIA do naszych serwisów WWW
lub aplikacji wymaga dodatkowego nak�adu pracy, lecz nie jest to nak�ad
o wiele wi�kszy ni� po�wi�cony na zastosowanie warto�ci class i id, je�li
zdecydowaliby�my si� na to rozwi�zanie do osi�gni�cia tego samego efektu.
Zamiast jednak zmaga si� z konieczno�ci� zapewniania w�asnego mecha-
nizmu przechwytywania w�a�ciwo�ci i stanów widgetu czy te� innej cz��ci
strony lub aplikacji, mo�emy tu po prostu ponownie wykorzysta ten dosko-
nale przemy�lany, zestandaryzowany sposób. Nie tylko pomo�e nam to
poprawi dost�pno� i ogóln� u�yteczno� naszej cz��ci sieci WWW, lecz rów-
nie� umo�liwi pisanie �atwiejszego w konserwacji i bardziej spójnego kodu.
Z uwagi na to, �e twórcy serwisów WWW coraz ch�tniej u�ywaj� bibliotek
i platform, takich jak Dojo, JQuery, YUI oraz innych rozwi�za� tego
rodzaju, o których wspominali�my w rozdziale 5., jak równie� ze wzgl�du
na fakt, �e biblioteki te w coraz wi�kszym stopniu wspieraj� technologi�
ARIA, znaczna cz�� pracy maj�cej na celu zapewnienie jej obs�ugi jest ju�
wykonana za nas przez twórców tych bibliotek. Z efektów tych wysi�ków
mo�esz korzysta mi�dzy innymi w nast�puj�cych rozwi�zaniach:
Dost�pno�� i W3C 201
� JQuery — Podstawowy zespó� programistów rozpocz�� prace
nad zapewnieniem wsparcia technologii ARIA i istnieje ju� wtyczka
o nazwie jARIA, której zadaniem jest udost�pnienie mo�liwo�ci
ustawiania i pobierania ról, w�a�ciwo�ci i stanów za po�rednictwem
kodu JavaScript i przy u�yciu sk�adni JQuery.
� Dojo — Zestaw narz�dzi Dojo 1.0 zapewnia pe�ne wsparcie
technologii ARIA w przypadku zbioru widgetów DojoX.
� YUI — Wiele widgetów YUI oferuje obs�ug� technologii ARIA.
Obs�uga zapewniana przez przegl�darki i urz�dzenia asystuj�ceA zatem jaki poziom obs�ugi zapewniaj� wspó�czesne przegl�darki inter-
netowe mo�liwo�ciom oferowanym przez technologi� ARIA? Przekonali-
�my si� ju�, �e atrybut tabindex oraz mo�liwo� przechwytywania ogniska
wprowadzania przez ka�dy widoczny element obs�ugiwane 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 mo�liwo�ci tej
technologii:
� IE 8 zapewnia obs�ug� ról, w�a�ciwo�ci i stanów ARIA.
� Firefox 3.5 oferuje najpe�niejsz� obs�ug� technologii ARIA
ze wszystkich wspó�czesnych przegl�darek internetowych,
w tym tak�e obs�ug� ról, w�a�ciwo�ci i stanów.
� Zgodnie z tym, co publikuje przedsi�biorstwo Opera Software,
„Opera 9.5 obs�uguje parsowanie ARIA w kodzie HTML…
Wsparcie to ma charakter eksperymentalny, poniewa� standard
ARIA si� ustala”.
� Safari 4 oferuje ograniczon� obs�ug� technologii ARIA, umo�liwiaj�c
korzystanie z wielu cz�sto u�ywanych ról, nie zapewniaj�c jednak
wsparcia dla stanów czy w�a�ciwo�ci. Z uwagi na fakt, �e Safari
radzi sobie z obs�ug� selektorów atrybutów CSS dla dowolnych
atrybutów, niezale�nie od tego, czy s� one cz��ci� bie��cego
standardu HTML, czy te� nie, mo�liwe jest formatowanie kodu
HTML wy�wietlanego za pomoc� Safari przy u�yciu warto�ci
atrybutów w�a�ciwo�ci i stanów ARIA. Dok�adnie to samo odnosi
si� do Opery, Firefoksa 3.5, a nawet Internet Explorera.
� By mo�e najwa�niejsze 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 Rozdzia� 6. > Dost�pno��
Przedstawione tu zaanga�owanie twórców w implementacj� technologii ARIA
wskazuje szerokie poparcie, jakie zdoby�a ona sobie w�ród osób zwi�za-
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 zwi�zku z tym twórcy mog�
mie pewno�, �e ARIA stanowi technologi�, w któr� zdecydowanie warto
zainwestowa swój czas i wysi�ek niezb�dny do jej opanowania.
ARIA i walidacjaJak zatem mo�emy wykorzystywa technologi� ARIA w naszym kodzie ju�
dzisiaj? Wiemy, �e proste dodawanie do naszego kodu atrybutów nienale��-
cych do specyfikacji j�zyka HTML spowoduje, �e opracowane w ten sposób
dokumenty b�d� nieprawid�owe. Istnieje kilka metod korzystania z tych
mo�liwo�ci, które zapewniaj� jednocze�nie poprawno� dokumentów, ich
zastosowanie mo�e jednak wymaga nieco wi�cej ni� tylko zwyk�ego wyboru
odpowiedniego DOCTYPE.
Mo�liwe jest u�ywanie w�asnych 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 opracowa�a. Paciello Group, doskonale znana
i bardzo powa�ana firma zajmuj�ca si� doradztwem zwi�zanym z zagad-
nieniami dost�pno�ci, zaproponowa�a eksperymentaln� definicj� typu doku-
mentu o nazwie HTML 4.01+ ARIA (wi�cej na ten temat znajdziesz pod
adresem: www.paciellogroup.com/blog/?p=107), której mo�na u�ywa wraz
z walidatorem kodu HTML oferowanym przez W3C.
Eksperymentalny walidator HTML 5 udost�pniony pod adresem www.
validator.nu równie� umo�liwia sprawdzanie kodu ARIA i HTML 5. Zg�asza
on b��dy w przypadku natrafienia na typy DOCTYPE niezgodne ze standar-
dem HTML 5, ale jest bardzo przydatnym narz�dziem, dzi�ki któremu
mo�na zapewni, �e technologia ARIA jest u�ywana w nale�yty 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 mo�liwo�ci roz-
poznawania ról „punktów orientacyjnych”.
Rozwój technologii ARIA prowadzi jednak do znacznie wa�niejszego pyta-
nia: czy walidacja zawsze powinna by istotnym celem? W ko�cu mimo
potencjalnej olbrzymiej warto�ci technologii ARIA i mocnego wsparcia ze
strony przegl�darek internetowych bez zapewnienia dobrej metody tworze-
nia prawid�owych dokumentów zawieraj�cych elementy ARIA technologia
ta polegnie na przeszkodzie walidacji. Gdy mamy do czynienia z wykorzysta-
Typowe problemy zwi�zane z dost�pno�ci� (i ich rozwi�zania) 203
niem nowych technologii WWW, walidacja przypomina nieco prowadzenie
samochodu przy patrzeniu wy��cznie we wsteczne lusterko. Henri Sivonen,
jedna z bardziej wp�ywowych osób w procesie tworzenia j�zyka HTML 5
(a tak�e twórca walidatora kodu HTML 5), stwierdzi�:
Wykorzystanie nowych mo�liwo�ci jest znacznie wa�niejsze ni�
osi�ganie zgodno�ci ze starszymi celami walidacji. ARIA dodaje
pewne znaczniki, dlatego nie spe�nia 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).
Dost�pne s� odpowiednie rozwi�zania, je�li walidacja jest bezwzgl�dnie
konieczna z uwagi na wymagania wewn�trzne lub regulacyjne. Je�li jed-
nak walidacja ma zasadniczo charakter mechanizmu zapewniania jako�ci,
mo�liwe jest inteligentne wykorzystanie walidatorów kodu HTML 4 lub
HTML 5 w celu przeprowadzenia kontroli jako�ci Twojego kodu zawiera-
j�cego elementy ARIA nawet wówczas, gdy dokument nie jest �ci�le zgodny
z ich wymogami.
Typowe problemy zwi�zane z dost�pno�ci�(i ich rozwi�zania)Rozdzia� ten zako�czymy opisem niektórych z najcz��ciej spotykanych pro-
blemów dotycz�cych dost�pno�ci oraz sposobów ich rozwi�zywania wy��cz-
nie za pomoc� kodu HTML i CSS.
��cza i tytu�y�cza s� intensywnie wykorzystywane przez czytniki ekranowe i urz�dzenia
asystuj�ce w celu umo�liwienia u�ytkownikom szybkiego dost�pu do zawar-
to�ci strony. Mimo �e stanowi� bardzo niewielki procent tekstu znajduj�-
cego si� na stronie, wielu u�ytkownikom oferuj� kluczow� metod� dost�pu
do jej zawarto�ci. Tekst ��cza jest istotn� wskazówk� dotycz�c� tego, dok�d
to ��cze prowadzi. W celu zapewnienia optymalnej dost�pno�ci tekst ten
powinien „jasno identyfikowa cel ka�dego ��cza” (WCAG 1) i nie powinien
zawiera w sobie jakichkolwiek za�o�e� zwi�zanych z wykorzystywanym
przez u�ytkownika urz�dzeniem wej�ciowym, co przejawia si� mo�e w sto-
sowaniu takich opisów ��czy jak „kliknij tutaj”. Gdy w wi�kszej liczbie ��czy
znajduj�cych si� na stronie wykorzystuje si� ten sam tekst, wszystkie one
powinny wskazywa t� sam� lokalizacj�.
204 Rozdzia� 6. > Dost�pno��
Cho wiele osób uwa�a, �e atrybut title zwi�zany z elementami ��czy dostar-
cza dodatkowych informacji istotnych dla dost�pno�ci, w rzeczywisto�ci
wcale nie musi on by a� tak pomocny. Atrybut ten mo�e w gruncie rzeczy
wyrz�dzi pewne szkody, mo�e bowiem przes�ania inn� tre� w przypadku
przegl�darek, które wy�wietlaj� informacj� dostarczan� przez title w postaci
podpowiedzi, nie jest dost�pny, zanim u�ytkownik nie poruszy mysz�, nie
mog� te� z niego korzysta u�ytkownicy czytników ekranowych, w których
nie okre�lono ustawie� odpowiedzialnych za odczytywanie tych warto�ci.
Przedstawiciele bran�y nie s� zgodni w kwestii tego, czy nale�y u�ywa atry-
butu title, czy te� raczej unika jego stosowania, zdecydowanie jednak
nie powinien on stanowi jedynego dost�pnego dla u�ytkowników sposobu
identyfikacji docelowego miejsca ��cza.
Nag�ówkiCzytniki ekranowe cz�sto wykorzystuj� nag�ówki znajduj�ce si� na stronie
do tworzenia „spisów tre�ci”, które maj� pomaga u�ytkownikom w jej prze-
gl�daniu i przechodzeniu do odpowiednich obszarów. Je�li stosujesz ele-
menty nag�ówków w roli nag�ówków i u�ywasz ich we w�a�ciwej kolejno�ci,
masz szans� sprawi, �e ten sposób dzia�ania czytników ekranowych stanie
si� bardziej u�yteczny. Nie pomijaj zatem poszczególnych poziomów nag�ów-
ków (a wi�c nie przeskakuj na przyk�ad bezpo�rednio z h2 do h4). Style
nag�ówków widoczne na stronie mo�na zawsze zmieni za pomoc� mecha-
nizmu CSS, dlatego nie ma potrzeby pomijania w kodzie któregokolwiek
poziomu nag�ówków.
Tekst alternatywnyKa�da tre� nietekstowa powinna mie swój tekstowy zamiennik. W przy-
padku obrazów mo�esz go zapewni, stosuj�c atrybut alt. (Pedantyczna
uwaga weterana zamierzch�ych czasów: alt to nie znacznik). Wszelka tre�
dodawana za pomoc� atrybutu alt powinna by zwi�z�a 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 warto�ci atrybutu alt powinien wyst�powa
pusty ci�g znaków. Jeszcze lepiej jednak, gdy czysto dekoracyjne obrazy
(a wi�c na przyk�ad symbole pozycji listy czy ozdobne obrazy przeznaczone
do roli te�) s� do��czane za pomoc� mechanizmu CSS, nie za� w kodzie
strony, poniewa� ten ostatni powinien by zarezerwowany wy��cznie dla
tre�ci u�ytecznej z semantycznego punktu widzenia.
Typowe problemy zwi�zane z dost�pno�ci� (i ich rozwi�zania) 205
Kontrast kolorówU�ywanie do� nieprecyzyjnego terminu niezdolno�ci widzenia kolorów pro-
wadzi cz�sto do nieporozumienia polegaj�cego na tym, �e zwyk�ym ludziom
mo�e si� wydawa, i� osoby z t� przypad�o�ci� widz� �wiat jedynie w odcie-
niach szaro�ci. Ten rodzaj uszkodzenia wzroku (czyli „widzenie monochro-
matyczne”) jest jednak w rzeczywisto�ci bardzo rzadki; wi�kszo� ludzi
z upo�ledzeniem widzenia barw widzi w kolorze, ma jednak trudno�ci z roz-
ró�nianiem okre�lonych kolorów, z rozró�nianiem których �atwo radz� sobie
osoby niecierpi�ce na tego rodzaju dolegliwo�.
Mimo �e bardzo wa�ne jest unikanie korzystania z kolorów w celu komu-
nikowania pewnych znacze� (nie nale�y zatem na przyk�ad stosowa barwy
czerwonej w roli ostrze�enia, je�li nie towarzyszy jej dodatkowy kszta�t,
tekst lub informacja innego rodzaju), trzeba równie� rozwa�y inne kwe-
stie dost�pno�ci zwi�zane z kolorami. Powszechnie lekcewa�onym proble-
mem jest brak wystarczaj�cego kontrastu graficznego pomi�dzy tekstem
i jego t�em. Zestawienie tekstu i t�a, które osobie widz�cej prawid�owo wydaje
si� w „oczywisty sposób” mocno skontrastowane, mo�e by zupe�nie nieczy-
telne dla kogo�, kto cierpi na daltonizm lub inn� wad� wzroku.
Za pomoc� wielu narz�dzi jeste�my w stanie stwierdzi, czy para kolorów
charakteryzuje si� odpowiednio wysokim kontrastem, aby zapewni czytel-
no�, jednak ich u�ywanie mo�e by do� czasoch�onne, poniewa� wymaga
od Ciebie r�cznego porównywania ka�dej stosowanej w serwisie kombinacji
barwy pierwszoplanowej z kolorem t�a. Narz�dzia takie jak AccessColor
firmy AccessKeys (www.accesskeys.org/tools/color-contrast.html) umo�liwiaj�
analizowanie ca�ych dokumentów poprzez przegl�danie skryptów DOM
i wskazywanie potencjalnych problemów z kontrastem. Wi�kszo� narz�dzi
do sprawdzania kontrastu radzi sobie jednak wy��cznie w sytuacjach, gdy
tekst porównywany jest z kolorem t�a (nie za� z obrazem), a tak�e nie testuje
kontrastu w przypadku efektów dynamicznych, takich jak unoszenie, nie
jest zatem w stanie zapewni niezawodnych metod badania kontrastu barw.
TabeleTabele sprawiaj� szczególne problemy osobom ze s�abym wzrokiem. Struk-
tura tabeli, która wydaje si� oczywista dla osób widz�cych prawid�owo, mo�e
by bardzo zagmatwana, gdy zostaje przedstawiona przez czytnik ekranowy.
J�zyk HTML oferuje szereg elementów i atrybutów, których zadaniem
jest u�atwienie odczytywania i interpretowania zawarto�ci tabel za pomoc�
czytników ekranowych.
206 Rozdzia� 6. > Dost�pno��
Oprócz standardowych elementów td (danych tabeli) tabele mog� równie�
zawiera elementy nag�ówków tabeli (th), o czym przekonali�my si� ju�
w rozdziale 4. Aby w jak najwi�kszym stopniu poprawi dost�pno� tabel,
w przypadku komórek stanowi�cych nag�ówki wierszy lub kolumn powinie-
ne� korzysta z elementów th.
caption oraz summaryZadaniem elementu tabeli caption jest dostarczanie krótkiego opisu tabeli,
który jest wykorzystywany zarówno w sposób wizualny przez przegl�dark�,
jak i przez czytniki ekranowe. Zaleca si�, aby wszystkie tabele by�y opisane
w ten sposób. Element caption powinien pojawi si� bezpo�rednio po otwie-
raj�cym znaczniku tabeli. Tabele mog� mie tylko jeden element tego typu.
<table><caption>Harmonogram pierwszego dnia konferencji</caption>
Oprócz niego element tabeli mo�e zawiera atrybut summary, którego zada-
niem jest dostarczanie przegl�du zawarto�ci tabeli u�ytkownikom czytni-
ków ekranowych. Osoby widz�ce prawid�owo 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 przeciwie�stwie do opisów definiowanych za pomoc� elementów caption
podsumowania okre�lane przy u�yciu atrybutów summary nie s� rendero-
wane przez przegl�darki internetowe — s� one u�ywane wy��cznie przez
czytniki ekranowe.
<table summary="Pe�ny harmonogram wszystkich trzech �cie�ek�pierwszego dnia konferencji Web Directions South 2009"><caption>Harmonogram pierwszego dnia konferencji</caption>
abbr oraz scopeDo tej pory uda�o nam si� ju� dostarczy przegl�darce ca�kiem spor� ilo�
informacji, które sprawi�, �e nasza tabela b�dzie znacznie bardziej dost�pna.
Jednak zw�aszcza w przypadku skomplikowanych tabel j�zyk HTML oferuje
du�� liczb� niedocenianych, lecz bardzo pomocnych mo�liwo�ci, z których
mog� korzysta czytniki ekranowe w celu u�atwienia u�ytkownikom w�a�ci-
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, ka�dy nag�ó-
wek jest odczytywany wielokrotnie, co mo�e by do� czasoch�onne i uci��-
liwe. Aby tego unikn�, mo�esz zastosowa atrybut abbr zwi�zany z ele-
Typowe problemy zwi�zane z dost�pno�ci� (i ich rozwi�zania) 207
mentem th. Pozwala nam to na zdefiniowanie skrótu tekstu, który ma by
odczytywany zamiast pe�nej tre�ci elementu th.
<th abbr="projetkowanie">�cie�ka Projektowa</th><th abbr="mened�er">�cie�ka Mened�erska</th><th abbr="tworzenie">�cie�ka 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 umo�liwia nam
okre�lenie, dla których komórek element th stanowi nag�ówek. W przed-
stawionym powy�ej przypadku nag�ówki zwi�zane s� z kolumnami, dlatego
odpowiedni kod powinien mie nast�puj�c� posta:
<th abbr="projektowanie" scope="col">�cie�ka Projektowa</th><th abbr="mened�er" scope="col">�cie�ka Mened�erska</th><th abbr="tworzenie" scope="col">�cie�ka 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, je�li
zastosowali�my odpowiedni atrybut abbr) bezpo�rednio przed zawarto�ci�
komórki.
Na przyk�ad na rysunku 6.1 widoczna jest tabela, w przypadku której czyt-
nik ekranowy móg�by odczyta zaznaczon� komórk� jako: „projektowanie
Osadzanie czcionek i typografia Marek Butelka”. Jednak — jak doskonale
pokazuje ten przyk�ad — nadal jest to odleg�e od pe�nego obrazu danych,
które nale�a�oby odczyta z tabeli. Informacja, któr� czytnik powinien otrzy-
ma, musia�aby raczej brzmie „10:45 – 11:40 projektowanie Osadzanie
czcionek i typografia Marek Butelka”. W istocie z komórk� nale�y tu po��-
czy wi�cej ni� tylko jeden nag�ówek. Mo�emy to zrobi, dodaj�c atrybut id
do ka�dego z nag�ówków, a nast�pnie korzystaj�c z atrybutów headers zwi�-
zanych z elementami td w celu powi�zania z nimi odpowiednich elementów th.
<table summary="Pe�ny harmonogram wszystkich trzech �cie�ek�pierwszego dnia konferencji Web Directions South 2009"><caption>Harmonogram pierwszego dnia konferencji</caption>
<tr> <th>Godzina</th> <th abbr="projektowanie" scope="col">�cie�ka �Projektowa</th> <th abbr="mened�er" scope="col">�cie�ka Mened�erska</th> <th abbr="tworzenie" scope="col">�cie�ka Twórcza</th> </tr>
<tr>
208 Rozdzia� 6. > Dost�pno��
Rysunek 6.1.Osoba o dobrymwzroku mo�e �atwowywnioskowa�,�e prezentacjadotycz�ca osadzaniaczcionek nale�ydo �cie�ki projektoweji rozpocznie si�o godzinie 10:45.Dla u�ytkownikówkorzystaj�cychz czytnikówekranowychz pewno�ci� nie b�dzieto takie proste,chyba �e zastosujemyodpowiednie 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">Otwieraj�ca 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="mened�er godzina5"><a �href="http://south09...">Dalej...></a></td>
Typowe problemy zwi�zane z dost�pno�ci� (i ich rozwi�zania) 209
<td headers="tworzenie godzina5"><a �href="http://south09...">...</a></td> </tr>
Cho zapewnienie tych dodatkowych informacji wymaga pewnego nak�adu
pracy zwi�zanego z kodowaniem, ich wp�yw na dost�pno� strony WWW
dla osób korzystaj�cych z czytników ekranowych mo�e mie bardzo istotne
znaczenie. Podobnie jak wi�kszo� sposobów tworzenia technika ta widziana
i stosowana po raz pierwszy mo�e Ci si� wydawa zb�dnym ci��arem,
ale z czasem wykorzystywanie odpowiednich atrybutów i elementów stanie
si� Twoj� drug� natur�.
FormularzeBezpo�rednio i w znacznym stopniu mo�esz poprawi dost�pno� swoich
stron WWW przez zastosowanie odpowiednich znaczników w stosunku do
zamieszczanych na nich formularzy. Wykorzystanie kilku prostych metod
pozwoli Ci znacznie zwi�kszy u�yteczno� formularzy dla osób z ró�nego
rodzaju ograniczeniami.
Niezwykle istotnych informacji dla u�ytkowników czytników ekranowych
dostarczaj� etykiety pól formularzy. Mimo �e wskazówki graficzne znacz-
nie u�atwiaj� okre�lenie funkcji poszczególnych pól tym z nas, którzy dys-
ponuj� dobrym wzrokiem, u�ytkownicy czytników ekranowych nie b�d�
w stanie w prosty sposób stwierdzi, do czego s�u�� pola formularza, je�li nie
zostan� one jawnie i prawid�owo po��czone z odpowiednimi etykietami.
Niektóre elementy formularzy — na przyk�ad elementy button — maj�
swoje w�asne etykiety. W ich przypadku warto� atrybutu value stanowi
etykiet� danego elementu. Je�li nie istnieje �adna jawna etykieta, jak ma
to miejsce w przypadku wi�kszo�ci elementów formularzy, nale�y zastoso-
wa element label i za pomoc� jego atrybutu for powi�za go bezpo�red-
nio z elementem, dla którego ma on by etykiet�. Poni�ej zaprezentowany
zosta� sposób, dzi�ki któremu mo�na zapewni maksymaln� dost�pno�
w przypadku pola tekstowego posiadaj�cego etykiet�:
<label for="nazwisko" id="etykieta-nazwisko">Nazwisko</label>�<input type="text" id="nazwisko" aria-labelledby=�"etykieta-nazwisko">
Zwró uwag� na fakt, �e zastosowali�my tu równie� atrybut ARIA aria-
�labelledby w obr�bie samego elementu formularza — a wi�c w elemen-
cie input przedstawionym w poprzednim przyk�adzie — w celu poinfor-
mowania przegl�darki o id elementu, który jest opisywany przez bie��cy
210 Rozdzia� 6. > Dost�pno��
element. W przyk�adzie naszym wskazali�my zatem, �e element (a dok�ad-
nie element label) z id o warto�ci etykieta-nazwisko stanowi etykiet� dla
elementu input, którego id to nazwisko.
Spostrzegawczy czytelnicy mog� te� zauwa�y, �e atrybut aria-labelledby
zachowuje si� tak jak dost�pny w standardzie HTML 4 atrybut for, dzia�a
jednak niejako w przeciwnym kierunku: w przypadku for to element ety-
kiety identyfikuje element opisywany, wykorzystuj�c do tego jego id, za�
w przypadku aria-labelledby to sam element opisywany wskazuje opisu-
j�cy go element za pomoc� jego id. Zwró tak�e uwag� na to, �e nazwa
labelledby, cho nie jest zgodna ze standardow�, poprawn� pisowni� ame-
ryka�sk�, jest w tym przypadku jak najbardziej prawid�owa.
Gdy nie mo�na zastosowa elementu label, WCAG 2 sugeruje, �e w roli
etykiety elementu wystarczy u�y nale��cego do niego atrybutu title. Do
skorzystania z title mo�emy by na przyk�ad zmuszeni w przypadku pola
wyszukiwania znajduj�cego si� na pasku narz�dzi strony, gdzie etykieta
musia�aby zaj� wi�cej miejsca w poziomie, ni� jest to mo�liwe.
Grupowanie elementów pólZrozumienie bardziej skomplikowanych formularzy mo�na u�atwi u�ytkow-
nikom poprzez zgrupowanie zwi�zanych ze sob� pól i wyposa�enie ka�dej
z tych grup w odpowiednie nag�ówki. J�zyk HTML w�a�nie w tym celu ofe-
ruje elementy fieldset oraz legend. Zbiór pól jest po prostu elementem
fieldset, który zawiera wszystkie zwi�zane ze sob� elementy formularza.
Pierwszym elementem wchodz�cym w sk�ad fieldset powinien by element
legend, który spe�nia tu podobn� funkcj� jak opis w przypadku tabeli.
<fieldset> <legend>Dane do rozliczenia</legend> <p>Najpierw jednak musimy wiedzie�, <strong>kto zap�aci� za �bilety?</strong></p> <ol> <li> <label for="billing_name"><em �class="required">*Nazwisko</em></label>...</fieldset>
Sposoby, które tu opisali�my, pozwalaj� poradzi sobie z wieloma typowymi
problemami dotycz�cymi dost�pno�ci, z jakimi spotykaj� si� u�ytkownicy
internetu. Implementowanie ich nie jest zwykle zbyt uci��liwe, a znacznie
poprawia wygod� korzystania z naszych serwisów WWW w przypadku osób,
Podsumowanie 211
które w najwi�kszym stopniu s� uzale�nione od sieci. Sposoby te w du�ej
mierze pomagaj� równie� w spe�nieniu ewentualnych wymaga� stawianych
przez regulacje prawne i instytucjonalne organizacji, dla której pracujesz.
PodsumowanieW rozdziale tym ogólnie przyjrzeli�my si� kwestii dost�pno�ci, w tym rów-
nie� zwi�zanym z ni� uwarunkowaniom prawnym i etycznym, istniej�cym
standardom W3C oraz wyst�puj�cym tu specyficznym problemom i ich
rozwi�zaniom. Co oprócz tego powiniene� wynie� z jego lektury? Najwa�-
niejsz� ide� jest tutaj to, �e prawdziwej dost�pno�ci nie da si� osi�gn�
jedynie poprzez wdra�anie listy odpowiednich poprawek na samym ko�cu
procesu tworzenia serwisu WWW, lecz raczej w wyniku zastosowania holi-
stycznego podej�cia do projektowania i tworzenia tre�ci WWW. Z tak poj�-
tej dost�pno�ci korzystaj� nie tylko osoby niepe�nosprawne, lecz równie�
wszyscy u�ytkownicy efektów naszych dzia�a�. (Te same sposoby, które
pozwalaj� poprawi dost�pno� tre�ci, zwykle zwi�kszaj� tak�e jej ogóln�
u�yteczno�).
Rola dost�pno�ci w tworzeniu serwisów WWW znacznie wzros�a w ostat-
nich dziesi�ciu latach, a odby�o si� to w du�ej mierze za spraw� pojedyn-
czych misjonarzy sprawy dzia�aj�cych w naszej bran�y. Trudno dyskutowa
z faktem, �e uwarunkowania prawne i oczekiwania spo�eczne jak jeden
m�� zmierzaj� w kierunku zapewniania wi�kszej dost�pno�ci dla coraz to
wi�kszej liczby ludzi. Zamiast wi�c martwi si� „kijem” w r�kach ustawo-
dawców i ch�tnych do wytyczania spraw prawników, pomy�l lepiej o „mar-
chewce”, czyli szansie dotarcia do wielu osób niepe�nosprawnych, które
odwiedzaj� Twój serwis, przyjazno�ci dla mechanizmów wyszukiwarek inter-
netowych cechuj�cej kod zapewniaj�cy nale�yt� dost�pno�, a tak�e satys-
fakcji, która stanie si� Twoim udzia�em, gdy zrobisz co�, aby poprawi
komfort korzystania z internetu tak wielu ludzi.