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).

http://helion.pl

http://helion.pl/zamow_katalog.htm

http://helion.pl/katalog.htm

http://helion.pl/zakupy/add.cgi?id=tswwws

http://helion.pl/emaile.cgi

http://helion.pl/cennik.htm

http://helion.pl/online.htm

mailto:[email protected]

http://helion.pl/ksiazki/tswwws.htm

http://www.amazon.com/exec/obidos/ASIN/0321646924/helion-20

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


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


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


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


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.


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.).


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.


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


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.


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.


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.


� 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.


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:


� 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.


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�.


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.


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.


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-


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>


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>


<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


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.

Tworzenie serwisów WWW. Standardy sieciowepdf.helion.pl/tswwws/ts · 2010. 6. 1. · Z pewnoœci¹...

Documents

Transcript of Tworzenie serwisów WWW. Standardy sieciowepdf.helion.pl/tswwws/ts · 2010. 6. 1. · Z pewnoœci¹...