Tworzenie serwisów WWW. Standardy sieciowe Autor: John Allsopp TÅ‚umaczenie: Dagmara Suma ISBN: 978-83-246-2657-1 TytuÅ‚ oryginaÅ‚u: Developing with Web Standards Format: 158×235, stron: 480 Krajobraz nowoczesnych technologii WWW " Opanuj podstawy wiedzy o tworzeniu serwisów WWW " Poznaj zaawansowane rozwiÄ…zania dla profesjonalnych projektantów " Rozpracuj współczesne metody i technologie, używane do tworzenia serwisów WWW Z pewnoSciÄ… znasz książkÄ™ Projektowanie serwisów WWW. Standardy sieciowe Jeffreya Zeldmana. JeSli jesteS 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 doSwiadczonych twórców, szukajÄ…cych gÅ‚Ä™bszej wiedzy, pomagajÄ…cej wyjSć poza metody i modele, które już dobrze znajÄ…. Zawiera mnóstwo sztuczek i chwytów, choć jej podstawowym celem jest pomoc w budowaniu systematycznej wiedzy na temat praktyki tworzenia serwisów WWW. Poznaj: " podstawowe technologie tworzenia front-endu HTML i XHTML, CSS i DOM; " zalecane metody tworzenia Å‚atwych w użyciu serwisów WWW; " praktykÄ™ tworzenia serwisów WWW: semantyczny ukÅ‚ad znaczników, techniki radzenia sobie z niezgodnoSciami i bÅ‚Ä™dami przeglÄ…darek, ukÅ‚ady stron oparte na CSS oraz tematykÄ™ platform CSS; " technologie wchodzÄ…ce na rynek: przeÅ‚omowe narzÄ™dzia, z których możesz już zacząć korzystać, w tym HTML5, CSS3, czcionki WWW, SVG i Canvas. Witryna WWW zwiÄ…zana z oryginalnym wydaniem książki Tworzenie serwisów WWW. Standardy sieciowe (Developing with Web Standards) jest dostÄ™pna pod adresem devwws.com. Znajdziesz tam wiÄ™cej informacji i dodatków, bÄ™dziesz też mógÅ‚ osobiScie 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 sieciowe 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 sieciowe 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 sieciowe 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 sieciowe 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ów za 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- G 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. 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 ci Za 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 wiecie Ostatnimi 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 W3C Od 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 1 Opublikowany 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 kontrolne Jak 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 ne odpowiedniki tre ci d wi kowych i wizualnych Wytyczna 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 kolorze Zalecenie 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ów i rób to we w a ciwy sposób Wytyczna 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 tabele Dane 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 tu Wytyczna 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 1 Nie 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 2 Standard 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 techniki WCAG 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 2 Z 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. ARIA Wraz 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 klawiatury Strona 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 Role W 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 ). 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:
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 ci Opró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.
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 ARIA Wszystkie 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 ce A 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 walidacja Jak 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 ówki Czytniki 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 alternatywny Ka 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ów U 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. Tabele Tabele 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 summary Zadaniem 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.
Harmonogram pierwszego dnia konferencji
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.
Harmonogram pierwszego dnia konferencji
abbr oraz scope Do 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.
cie ka Projektowa
cie ka Mened erska
cie ka Twórcza
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 :
cie ka Projektowa
cie ka Mened erska
cie ka Twórcza
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.
Harmonogram pierwszego dnia konferencji
Godzina
cie ka Projektowa
cie ka Mened erska
cie ka Twórcza
208 Rozdzia 6. > Dost pno Rysunek 6.1. Osoba o dobrym wzroku mo e atwo wywnioskowa , e prezentacja dotycz ca osadzania czcionek nale y do cie ki projektowej i rozpocznie si o godzinie 10:45. Dla u ytkowników korzystaj cych z czytników ekranowych z pewno ci nie b dzie to takie proste, chyba e zastosujemy odpowiednie znaczniki
7:00 9:00
Rejestracja
9:00 9:10
Otwarcie
9:10 10:15
Otwieraj ca prezentacja ogólna
10:15 10:45
Poranna herbata
10:45 11:40
href="http://south09...">Osadzanie czcionek... Marek Butelka
href="http://south09...">Dalej...>
Typowe problemy zwi zane z dost pno ci (i ich rozwi zania) 209
href="http://south09...">...
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 . Formularze Bezpo 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 :
"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ól Zrozumienie 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.
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. Podsumowanie W 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.