Professional Documents
Culture Documents
Standardy sieciowe
Autor: John Allsopp
Tumaczenie: Dagmara Suma
ISBN: 978-83-246-2657-1
Tytu oryginau: Developing with Web Standards
Format: 158235, stron: 480
Spis treci
Spis treci
4. Prezentacja ................................................................... 93
Krtka historia stylw stosowanych w serwisach WWW .............................. 93
Po co oddziela tre od wygldu? ......................................................... 96
Czym jest CSS? ........................................................................................... 96
Jak CSS jest wykorzystywany? ................................................................... 96
Styl rdliniowy ..................................................................................... 97
Osadzony kod CSS ................................................................................ 97
Doczanie zewntrznych arkuszy stylw ............................................... 97
Podstawowa skadnia jzyka CSS ............................................................... 98
Selektory, bloki deklaracji, deklaracje i wasnoci ................................. 98
Podstawowe informacje na temat selektorw ............................................. 100
Selektory typw ................................................................................... 100
Grupowanie selektorw ....................................................................... 100
Podstawowe wasnoci: style czcionek ........................................................ 100
color .................................................................................................... 101
font-family .......................................................................................... 102
font-size .............................................................................................. 104
font-weight .......................................................................................... 106
font-style ............................................................................................. 106
text-decoration .................................................................................... 107
Dziedziczenie ............................................................................................. 107
Zwikszenie szczegowoci: selektory class i id ......................................... 108
Selektory class ..................................................................................... 109
Selektory id ......................................................................................... 109
Precyzja selektora ............................................................................... 109
Czsto uywane wasnoci ukadu tekstu ................................................... 110
text-align ............................................................................................. 111
line-height ........................................................................................... 111
Odstpy pomidzy literami i sowami ................................................... 113
text-indent ........................................................................................... 113
Kombinacje: selektory potomkw i dzieci ................................................... 114
Selektory potomkw ............................................................................ 114
Selektory dzieci ................................................................................... 115
Spis treci
Poziom drugi ....................................................................................... 163
Poziom trzeci ....................................................................................... 163
Drzewo DOM ............................................................................................ 164
Podstawowe obiekty i metody DOM .......................................................... 166
Obiekt window ..................................................................................... 166
Obiekt document ................................................................................. 167
Obiekt element .................................................................................... 168
Zdarzenia .................................................................................................. 170
Odbiorniki zdarze .............................................................................. 171
Propagacja zdarze ............................................................................. 172
Najlepsze praktyki w tworzeniu nowoczesnych,
zgodnych ze standardami skryptw DOM ................................................. 173
Tworzenie dyskretnych skryptw ........................................................ 174
Niezgodnoci przegldarek .................................................................. 176
Waciwo innerHTML kontra metody DOM .................................... 179
Bezpieczestwo ................................................................................... 180
Rozkwit bibliotek ....................................................................................... 181
Wybr biblioteki .................................................................................. 183
JQuery ................................................................................................ 183
Prototype ............................................................................................ 184
Script.aculo.us .................................................................................... 184
Yahoo User Interface Library (YUI) ................................................... 184
Sprawdzanie skryptw DOM ..................................................................... 184
IE Developer Toolbar dla programw IE 6 i 7 .................................... 185
Internet Explorer 8 Developer Toolbar ............................................... 185
Firebug oraz Web Developer Toolbar dla Firefoksa ............................ 185
DragonFly dla programu Opera .......................................................... 185
Web Inspector dla Safari ..................................................................... 186
Ajax? ......................................................................................................... 187
Podsumowanie .......................................................................................... 187
6. Dostpno ...................................................................189
Biznesowe argumenty za zapewnianiem dostpnoci ........................... 190
Prawodawstwo na wiecie .................................................................... 191
Dostpno i W3C ..................................................................................... 191
WCAG 1 .............................................................................................. 192
WCAG 2 .............................................................................................. 195
ARIA ................................................................................................... 196
Typowe problemy zwizane z dostpnoci (i ich rozwizania) .................. 203
10
Spis treci
Ukady wykorzystujce dryfowanie ........................................................... 274
Poziome, dryfujce listy nawigacji ....................................................... 274
Wypenianie pola ................................................................................. 276
Obramowanie dookoa listy nawigacji .................................................. 277
Wielokolumnowe ukady wykorzystujce dryfowanie ........................... 278
Stopka ................................................................................................. 284
Zagadka kolorw ................................................................................. 284
Ukady siatkowe ........................................................................................ 292
Wasnoci ukadu tabelarycznego CSS 2.1 .......................................... 292
Podsumowanie .......................................................................................... 294
10. Resety i platformy CSS .....................................................295
Resety CSS ............................................................................................... 296
Zalety resetw CSS ............................................................................. 296
Argumenty przeciwko resetom ............................................................ 297
Jak wygldaj resety CSS? ................................................................. 299
Popularne resety CSS ......................................................................... 299
Platformy CSS .......................................................................................... 301
Platformy CSS za i przeciw ............................................................ 301
Popularne platformy i ich zastosowania .............................................. 303
Podsumowanie .......................................................................................... 305
Cz III > Tworzenie serwisw WWW w praktyce
11. HTML 5 ........................................................................309
Czym jest HTML 5? .................................................................................. 309
Najwaniejsze moliwoci HTML 5 ........................................................... 311
Obsuga bdw ................................................................................... 311
Element canvas ................................................................................... 312
Lokalne przechowywanie danych ......................................................... 312
Wielowtkowy JavaScript z Web Workers ....................................... 312
Obsuga multimediw .......................................................................... 312
Lokalizowane aplikacje WWW z geolokacj ........................................ 313
Strony umoliwiajce uytkownikom edycj ........................................ 313
Rnice pomidzy HTML 4 a HTML 5 ..................................................... 313
Deklarowanie DOCTYPE ................................................................... 314
Nagwki, stopki, sekcje i inne nowe elementy strukturalne
w jzyku HTML 5 ............................................................................... 315
Przykad dokumentu HTML 5 .................................................................. 323
Materiay wideo, audio i inne osadzone treci w jzyku HTML 5 .............. 329
Wideo .................................................................................................. 330
Audio ................................................................................................... 334
Obsuga elementw video i audio przez przegldarki ........................... 334
Dostpno materiaw wideo i audio .................................................. 335
11
12
Spis treci
Zapytania mediw ..................................................................................... 389
Korzystanie z zapyta mediw ............................................................ 392
Do czego mog si przyda zapytania mediw? ................................... 395
Kompatybilno ................................................................................... 399
Ale czy jest to w jaki sposb lepsze od wszenia agenta uytkownika? ...... 399
Podsumowanie .......................................................................................... 400
15. Czcionki w serwisach WWW ...............................................401
Krtka historia czenia i osadzania czcionek ............................................ 402
Bieca sytuacja prawna ........................................................................... 404
Bieca sytuacja techniczna ...................................................................... 405
@font-face i osadzanie czcionek ................................................................ 405
Osadzanie czcionek w przypadku programu Internet Explorer ............ 406
13
ROZDZIA SZSTY
Dostpno
dy Tim Berners-Lee tworzy zrby World Wide Web we wczesnych latach 90. ubiegego wieku, szczeglnie mocno akcentowa znaczenie jej powszechnoci i uniwersalnoci. Dostpno dla
wszystkich ludzi, niezalenie od ich ewentualnej niepenosprawnoci,
bya fundamentaln czci tej wizji.
Przez ponad dziesi lat organizacja W3C opracowywaa protokoy,
ktrych celem byo sprawienie, aby sie WWW bya jak najbardziej
dostpna, i wczaa czynniki odpowiedzialne za zapewnianie dostpnoci do specyfikacji regulujcych standardy takie jak HTML czy
CSS. Rwnolegle z tym ciaa ustawodawcze na caym wiecie wprowadzay przepisy prawne zwizane z dostpnoci oraz regulacje, ktre
miay taki sam wpyw na sie WWW jak na rodowisko fizyczne i ktre
czsto bezporednio odwoyway si do tych specyfikacji W3C.
Mimo to twrcy serwisw WWW wydaj si nieraz bagatelizowa kwestie zwizane z dostpnoci. W najlepszym przypadku s one rozwaane na samym kocu, stanowi list formalnoci, ktre musz
zosta dopenione jak najmniejszym wysikiem i kosztem finansowym
ju po cakowitym zakoczeniu prawdziwej pracy nad projektem.
Jednak zaangaowanie w zapewnianie dostpnoci powinno by jedn
z podstaw etyki naszej rodzcej si profesji: czym, co z pen wiadomoci powinnimy stara si osign , nie za rzecz, ktr robimy
niechtnie i tylko wtedy, gdy wymaga tego od nas prawo. Jeli na co
dzie utrzymujesz kontakty z osob niepenosprawn, z pewnoci
wiesz, jak trudne moe by uzyskanie dostpu do istotnych informacji,
sieci spoecznych i usug. Jeli nie masz tej okazji, sprbuj wyobrazi
sobie ograniczenie swoich wasnych moliwoci dostpu i zastanowi
si, w jakich sytuacjach znajduj si czsto ludzie niepenosprawni.
190
Przez tydzie rb zakupy przez sie i tylko w ten sposb utrzymuj swoje
kontakty biznesowe. Korzystaj z czytnika ekranowego w celu sprawdzania
swojej poczty elektronicznej i najwieszych informacji ze wiata. Nawiguj,
uywajc wycznie klawiatury lub jedynie myszy. Szybko nabierzesz szacunku dla ogromnych wyzwa, ktre wikszo serwisw WWW i usug
internetowych stawia przed ludmi niepenosprawnymi, wyzwa, ktre masz
okazj zmniejszy z racji wykonywanego zawodu.
Kluczowa rola odgrywana przez sie WWW w poprawianiu standardu ycia
tak wielu osb niepenosprawnych jest jednym z powodw, dla ktrych zostaem twrc serwisw. Nie musi tak by w przypadku kadego, niezalenie
jednak od tego, czy Twoj motywacj jest altruizm, czy te wymogi prawne
i groba wytoczenia procesw sdowych, o ktrych gono bywa ostatnimi
czasy w Stanach Zjednoczonych i Australii, przekonasz si, e zapewnienie
naleytej dostpnoci jest jednym z podstawowych zada zwizanych z profesjonalnym tworzeniem serwisw WWW.
Na szczcie, jest to te znacznie mniej kopotliwe i wcale nie tak trudne do
osignicia, jak nauczono Ci wierzy .
W rozdziale tym nie bdziemy w stanie bardzo szczegowo opisa wszystkich
zagadnie zwizanych z zapewnianiem dostpnoci, ale postaramy si zaj
najwaniejszymi kwestiami, zaleceniami oraz wyzwaniami technicznymi
dotyczcymi tej materii, a take przyjrze kilku prostym krokom, ktre
pomog nam tworzy odpowiednio dostpne serwisy WWW przy niewielkim
tylko dodatkowym wysiku z naszej strony.
Dostpno i W 3C
Gdy mwimy o osobach niepenosprawnych, mamy na myli dziesitki milionw ludzi, a take segment rynku, ktry znacznie czciej korzysta z handlu elektronicznego ni jakakolwiek inna grupa spoeczna. Zaspokajanie
potrzeb tej wsplnoty moe bezporednio wpyn na rentowno niejednej
firmy.
Oprcz tych zyskw o charakterze czysto komercyjnym zastosowanie technik tworzenia dostpnych serwisw WWW moe mie rwnie szereg innych
pozytywnych skutkw. Google i inne mechanizmy wyszukiwania s w pewnym sensie lepe. Jedynym tekstem, jaki widz, gdy indeksuj serwis, jest
prawdziwy tekst, nie za wszelkie obrazy czy pliki Flash, ktre mog zosta
waciwie zinterpretowane tylko przez ludzi dysponujcych odpowiednio
dobrym wzrokiem. Serwisy WWW, w przypadku ktrych zastosowano dobr
i przejrzyst struktur semantyczn, uniknito uywania kodu opartego na
tabelach oraz zadbano o wykorzystanie innych technik zapewniania dostpnoci, mog dziki temu cieszy si lepsz wykrywalnoci i pozycjonowaniem przez mechanizmy wyszukiwania.
Prawodawstwo na wiecie
Ostatnimi czasy na caym wiecie uchwala si akty prawne majce zwalcza dyskryminacj osb niepenosprawnych. Przepisy tego rodzaju dotycz zwykle wielu rnych aspektw ycia, coraz wikszy jednak nacisk
kadzie si tu rwnie na kwestie zwizane z dostpnoci sieci i serwisw
WWW. Problem ten jest bardzo zoony, dlatego wszelkie prby prostego
zaprezentowania go tutaj skazane s na niepowodzenie i mog wprowadzi
tylko jeszcze wiksze zamieszanie. rda, z ktrych moesz czerpa bardziej obszern wiedz na temat sytuacji na wiecie w tej materii, zostay
wymienione na kocu niniejszej ksiki.
Dostpno i W3C
Od pierwszych dni swojego istnienia organizacja W3C podejmuje prby
tworzenia zalece, wytycznych i wskazwek dotyczcych kwestii zapewniania dostpnoci, a take wbudowania ich bezporednio w standardy takie
jak CSS i HTML. W roku 1999 W3C opublikowaa pierwsz wersj zbioru
dokumentw znanych jako Wytyczne dotyczce dostpnoci treci internetowych (ang. Web Content Accessibility Guidelines, w skrcie WCAG 1),
za w roku 2008 udostpnia jego zaktualizowan wersj (znan jako
WCAG 2). Dodatkowo, aby zaspokoi rosnc potrzeb wytycznych zwizanych z dostpnoci aplikacji WWW, dziaajca w obrbie W3C inicjatywa
191
192
WCAG 1
Opublikowany w 1999 roku, w czasach panowania przegldarek wersji czwartej, WCAG 1 by pierwsz wan prb skodyfikowania zbioru procedur
majcych zapewni wiksz dostpno serwisw WWW. Jego zadaniem
byo pokazanie sposobu w jaki mona tworzy treci internetowe dostpne
dla osb niepenosprawnych (jak mona przeczyta ju w pierwszym
zdaniu opisu WCAG 1 znajdujcego si pod adresem: www.w3.org/TR/
WCAG10).
WCAG 1 zosta podzielony na czternacie wytycznych, z ktrych kada
dzieli si na punkty kontrolne, a te z kolei maj priorytety od A do AAA
(okrelane czsto jako potrjne A). Zgodno z wytycznymi WCAG 1 moe
by mierzona stopniem zgodnoci z tymi punktami kontrolnymi. Dokument
ma zgodno poziomu A, jeli zapewnia zgodno ze wszystkim punktami
kontrolnymi poziomu A. Analogicznie, dokument uwaany jest za zgodny
z poziomem AA (podwjne A), jeli spenia wymogi wszystkich punktw
kontrolnych AA, za z poziomem AAA, gdy zapewnia zgodno z wszystkimi
punktami kontrolnymi AAA.
Zanim bardziej zagbimy si w tematyk tych wytycznych i punktw kontrolnych, naley tu odnotowa , e zgodno AAA uwaa si oglnie za trudn
do osignicia i nie zawsze jest warta woonego w ni wysiku, poniewa
wiele punktw kontrolnych AAA ma bardzo subiektywny charakter, a pena
zgodno z poziomem AAA ma do niewielkie znaczenie praktyczne.
W zwizku z tym przez wikszo ekspertw (a take niektre oficjalne
wytyczne rzdowe) zgodno poziomu AA jest zalecana jako wystarczajca.
Wytyczne i punkty kontrolne
Jak ju wspomnielimy powyej, kada z czternastu wytycznych WCAG 1
zawiera kilkanacie punktw kontrolnych. W rozdziale tym przyjrzymy si
tylko tym punktom kontrolnym, ktre najczciej sprawiaj trudnoci.
Wytyczne WCAG 1 (oraz towarzyszcy im dokument Techniki) s do
proste, nie bj si wic przeczyta ich samodzielnie.
Dostpno i W 3C
193
194
Dostpno i W 3C
WCAG 2
Standard WCAG 1 powsta z myl o technologiach WWW istniejcych
w czasach, gdy zosta on opublikowany. W kolejnych latach niektre z nich
bardziej dojrzay, za inne takie jak skrypty DOM zyskay na znaczeniu. Drugie wydanie WCAG, czyli WCAG 2, ma ju zatem nieco inn
struktur.
Zasady, wytyczne, kryteria sukcesu i techniki
WCAG 2 powsta w celu utworzenia wytycznych, ktre s w mniejszym
stopniu zwizane z konkretnymi technologiami, bardziej obiektowe, a
co za tym idzie znacznie atwiej poddaj si testom (przeprowadzanym
za pomoc oprogramowania lub przez ludzi), jak rwnie daj si dostosowa do zmian zachodzcych w dziedzinie technologii WWW. Zgodnie
z owiadczeniem Web Accessibility Initiative WCAG 2 ma znale zastosowanie w przypadku rnych typw technologii sieciowych i technologii
bardziej zaawansowanych, jak rwnie technologii, ktre powstan w przyszoci. Standard zosta take zaprojektowany w taki sposb, aby zgodno z definiowanymi przeze kryteriami sukcesu daa si bardziej precyzyjnie testowa za pomoc testw automatycznych oraz analiz prowadzonych
przez ludzi (www.w3.org/WAI/WCAG20/wcag2faq.html).
Podczas gdy WCAG 1 by zbiorem wytycznych, z ktrymi zwizane byy
punkty kontrolne, WCAG 2 podzielone zostao na cztery gwne zasady.
Kada z nich zawiera szereg wytycznych, za kada z wytycznych ma
pewn liczb punktw kontrolnych noszcych nazw kryteriw sukcesu.
Kade z tych kryteriw jest zwizane z wystarczajcymi technikami (czyli
rekomendowanymi sposobami speniania tego kryterium sukcesu) oraz technikami doradczymi (metodami, ktre same w sobie nie s wystarczajce
do spenienia kryterium, lecz s mimo to zalecane).
adna z tych technik
nie jest wymagana w celu spenienia kryterium. W dokumencie Techniki
WCAG 2 opisano rwnie typowe defekty, ktre s definiowane przez grup
robocz jako praktyki twrcze, ktrych zastosowanie sprawia, e tre
WWW nie jest zgodna z WCAG 2.0.
WCAG 2 ma swoich krytykw na forum osb zajmujcych si kwestiami
dostpnoci, a przyjmowanie go jako podstawowego wyznacznika dostpnoci treci WWW odbywa si znacznie wolniej, ni organizacja W3C moga
si spodziewa . Wydaje si jednak, e zastpi on w kocu WCAG 1 jako najwaniejsze rdo wytycznych w tej dziedzinie. Przegld niektrych argumentw przeciwko WCAG 2 wysuwanych przez uczestnikw w tej dyskusji moesz
znale w definicji dostpnoci treci WWW zamieszczonej w anglojzycznej
195
196
wersji Wikipedii, ktra w momencie pisania niniejszej ksiki bya zaskakujco dobra (en.wikipedia.org/wiki/Web_accessibility#Criticism_of_WAI_
guidelines).
WCAG 2 to dokument znacznie wikszy ni WCAG 1. Zosta on poddany
krytyce gwnie za swoj oglnikowo i zastosowanie niezrozumiaego argonu przykad tej krytyki moesz znale w artykuach zamieszczonych
pod adresami: http://www.alistapart.com/articles/tohellwithwcag2 oraz
http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/wcagguidelines-20.shtml. Standardowi towarzyszy jednak bardzo dokadna
dokumentacja, ktrej zadaniem jest pomaganie twrcom w zrozumieniu
i spenieniu kadego kryterium sukcesu. Opracowano go rwnie w taki
sposb, aby strony speniajce w tej chwili wymogi stawiane przez kryteria
WCAG 1 A i AA w wikszoci przypadkw speniay te kryteria WCAG 2
bez koniecznoci wprowadzania adnych poprawek lub dziki bardzo niewielkiemu nakadowi pracy.
Szczegowy opis otchani i zawioci standardu WCAG 2 daleko wykracza
poza zakres materiau prezentowany w niniejszej ksice, jednak wiele interesujcych czy i adresw innych dokumentw zwizanych z tymi wytycznymi znajdziesz w dodatku rda zamieszczonym na kocu tej publikacji.
Narzdzia do zapewniania jakoci dla WCAG 2
Z uwagi na to, e WCAG 2 nadal znajduje si na stosunkowo wczesnym etapie rozwoju, dostpnych jest te w jego przypadku znacznie mniej zautomatyzowanych narzdzi do zapewniania jakoci ni w przypadku WCAG 1.
Z zaprezentowanej wczeniej listy rozwiza dla WCAG 1 jedynie narzdzie ATRC Web Accessibility Checker zapewnia dodatkow moliwo testowania stron pod ktem zgodnoci z wymogami WCAG 2.
ARIA
Wraz z tym, jak treci i serwisy WWW staway si bardziej zoone i zaczy
w coraz wikszym stopniu przypomina aplikacje, wzrastaa te trudno
zapewniania, a nawet definiowania ich dostpnoci. W celu rozwizania tych
problemw WAI opracowaa pakiet Accessible Rich Internet Applications,
zwany te WAI-ARIA lub czciej po prostu ARIA. ARIA jest zbiorem rozszerze jzyka HTML, ktrych mona uywa do opisywania elementw, dziki czemu moliwe jest identyfikowanie roli, stanw i waciwoci
kadego z nich w sposb, ktry znacznie zwiksza dostpno wynikowej
strony.
Dostpno i W 3C
197
198
Role
W kodzie HTML do dostarczania semantycznej informacji o dokumentach wykorzystuje si nazwy elementw; mimo e sprytni twrcy serwisw
WWW uywaj rwnie atrybutw class i id do doczania dodatkowych
informacji na temat elementw, rozwizanie to ma raczej charakter zwyczajowy i nie jest oficjaln czci standardu. Wynika std, e jzyk HTML
jest nieco zuboay, jeli chodzi o jego moliwoci semantyczne. ARIA rozszerza moliwoci standardu XHTML 1.1 zwizane z atrybutem role,
pozwalajc twrcom opisywa dodatkow funkcj wypenian przez element,
niezwizan bezporednio z tym, jakiego rodzaju jest to element. Na przykad listy s elementami li, mog te jednak odgrywa rol nawigacyjn,
cho i to nie musi by ich jedyna funkcja. Technologia ARIA dostarcza zbir
moliwych wartoci atrybutu role, czyli zestaw nazw typw rl penionych
przez element. Fachowo mwi si o tym, e zapewnia atrybutowi role
ontologi.
Korzystajc z atrybutu role do opisywania roli odgrywanej przez okrelony
element, twrcy serwisw WWW mog sprawi , aby przegldarki rozumiejce role technologii ARIA lepiej przedstawiay uytkownikom struktur
dokumentu. Atrybut role moe rwnie zapewnia standardowy, przewidywany przez uytkownika sposb dziaania i wygld okrelonych rodzajw kontrolek, na przykad pl wyboru, ktre s implementowane przez
twrc za pomoc innych ni typowe elementw HTML (typowym elementem
byby w tym przypadku <input type="checkbox">).
Role oferowane przez technologi ARIA nale do wielu rnych kategorii,
wrd ktrych wymieni mona nastpujce:
x Role znakw orientacyjnych, ktre opisuj regiony strony
przeznaczone do celw nawigacyjnych. Nale do nich: application,
banner, main, navigation oraz search.
x Role struktury dokumentu, ktre opisuj funkcj odgrywan przez
element w strukturze dokumentu. Nale do nich: navigation,
section, note oraz heading (jak przekonamy si w rozdziale 11.,
s one zwykle cile zwizane z nowymi elementami strukturalnymi
standardu HTML 5).
x Role struktury aplikacji, ktre opisuj funkcj odgrywan przez
element w strukturze aplikacji. Nale do nich: alert, alertdialog,
progressbar oraz status.
x Elementy interfejsu uytkownika, takie jak treegrid, toolbar
oraz menuitem.
Dostpno i W 3C
Co przegldarka zrobi z informacj, e dany element jest przyciskiem, pozostawia si ju inwencji twrcw programu. Informacja ta jest jednak obecna
i moemy wyobrazi sobie, w jaki sposb przegldarki i urzdzenia asystujce mog wykorzysta t wiedz nie tylko dla potrzeb osb niepenosprawnych, lecz rwnie wszystkich innych uytkownikw korzystajcych
z serwisu.
Stany i waciwoci
Oprcz umoliwiania twrcom serwisw WWW opisywania rl odgrywanych
przez elementy technologia ARIA pozwala te jawnie deklarowa stany
elementw, a wic na przykad to, czy dany element jest w tej chwili nacinity, jak rwnie podawa innego rodzaju informacje zwizane z elementami. Stany dostarczaj dynamicznych danych na temat elementw, czyli
takich informacji jak to, czy pole wyboru jest zaznaczone, podczas gdy waciwoci zapewniaj informacje podstawowe, zwizane z sam natur obiektw. Oznacza to w praktyce, e rozrnienie pomidzy waciwociami
a stanami nie jest szczeglnie wane, poniewa obydwa te typy informacji
dziaaj w bardzo podobny sposb. Naley tu jednak zaznaczy rnic
wystpujc pomidzy stanami i waciwociami a atrybutem role. Gdy
korzystamy z atrybutu role, przypisujemy wartoci do samego tego atrybutu, lecz istnieje wiele atrybutw stanw i waciwoci, za kady z nich
posiada swoj wasn nazw innymi sowy, nie istniej atrybuty ARIA
o nazwie state lub property. Nazwy atrybutw waciwoci i stanw ARIA
zawieraj przedrostek aria-; przykadem moe tu by stan aria-disabled,
ktry moe przyjmowa wartoci true i false, bd te waciwo ariaflawto, ktra wskazuje nastpny element w zalecanej kolejnoci odczytywania.
199
200
Wr my do naszego przykadu z elementem wejciowym. Gdyby rozpatrywanym elementem by przycisk, ktry moe przyjmowa dwa stany (wcinity
i niewcinity), poinformowa o stanie biecym moglibymy za pomoc
stanu ARIA aria-pressed, tak jak zostao to przedstawione poniej.
<input type="image" alt="font-weight: bold" src="./images/
bold-unpressed.png" role="button" aria-pressed="false">
Dostpno i W 3C
201
202
cza i tytuy
203
204
Cho wiele osb uwaa, e atrybut title zwizany z elementami czy dostarcza dodatkowych informacji istotnych dla dostpnoci, w rzeczywistoci
wcale nie musi on by a tak pomocny. Atrybut ten moe w gruncie rzeczy
wyrzdzi pewne szkody, moe bowiem przesania inn tre w przypadku
przegldarek, ktre wywietlaj informacj dostarczan przez title w postaci
podpowiedzi, nie jest dostpny, zanim uytkownik nie poruszy mysz, nie
mog te z niego korzysta uytkownicy czytnikw ekranowych, w ktrych
nie okrelono ustawie odpowiedzialnych za odczytywanie tych wartoci.
Przedstawiciele brany nie s zgodni w kwestii tego, czy naley uywa atrybutu title, czy te raczej unika jego stosowania, zdecydowanie jednak
nie powinien on stanowi jedynego dostpnego dla uytkownikw sposobu
identyfikacji docelowego miejsca cza.
Nagwki
Czytniki ekranowe czsto wykorzystuj nagwki znajdujce si na stronie
do tworzenia spisw treci, ktre maj pomaga uytkownikom w jej przegldaniu i przechodzeniu do odpowiednich obszarw. Jeli stosujesz elementy nagwkw w roli nagwkw i uywasz ich we waciwej kolejnoci,
masz szans sprawi , e ten sposb dziaania czytnikw ekranowych stanie
si bardziej uyteczny. Nie pomijaj zatem poszczeglnych poziomw nagwkw (a wic nie przeskakuj na przykad bezporednio z h2 do h4). Style
nagwkw widoczne na stronie mona zawsze zmieni za pomoc mechanizmu CSS, dlatego nie ma potrzeby pomijania w kodzie ktregokolwiek
poziomu nagwkw.
Tekst alternatywny
Kada tre nietekstowa powinna mie swj tekstowy zamiennik. W przypadku obrazw moesz go zapewni , stosujc atrybut alt. (Pedantyczna
uwaga weterana zamierzchych czasw: alt to nie znacznik). Wszelka tre
dodawana za pomoc atrybutu alt powinna by zwiza i cho w przypadku wszystkich elementw img wymagane jest zastosowanie tego atrybutu
w celu zapewnienia udanej walidacji strony dla obrazw o charakterze
czysto dekoracyjnym w roli wartoci atrybutu alt powinien wystpowa
pusty cig znakw. Jeszcze lepiej jednak, gdy czysto dekoracyjne obrazy
(a wic na przykad symbole pozycji listy czy ozdobne obrazy przeznaczone
do roli te) s doczane za pomoc mechanizmu CSS, nie za w kodzie
strony, poniewa ten ostatni powinien by zarezerwowany wycznie dla
treci uytecznej z semantycznego punktu widzenia.
Kontrast kolorw
Uywanie do nieprecyzyjnego terminu niezdolnoci widzenia kolorw prowadzi czsto do nieporozumienia polegajcego na tym, e zwykym ludziom
moe si wydawa , i osoby z t przypadoci widz wiat jedynie w odcieniach szaroci. Ten rodzaj uszkodzenia wzroku (czyli widzenie monochromatyczne) jest jednak w rzeczywistoci bardzo rzadki; wikszo ludzi
z upoledzeniem widzenia barw widzi w kolorze, ma jednak trudnoci z rozrnianiem okrelonych kolorw, z rozrnianiem ktrych atwo radz sobie
osoby niecierpice na tego rodzaju dolegliwo .
Mimo e bardzo wane jest unikanie korzystania z kolorw w celu komunikowania pewnych znacze (nie naley zatem na przykad stosowa barwy
czerwonej w roli ostrzeenia, jeli nie towarzyszy jej dodatkowy ksztat,
tekst lub informacja innego rodzaju), trzeba rwnie rozway inne kwestie dostpnoci zwizane z kolorami. Powszechnie lekcewaonym problemem jest brak wystarczajcego kontrastu graficznego pomidzy tekstem
i jego tem. Zestawienie tekstu i ta, ktre osobie widzcej prawidowo wydaje
si w oczywisty sposb mocno skontrastowane, moe by zupenie nieczytelne dla kogo, kto cierpi na daltonizm lub inn wad wzroku.
Za pomoc wielu narzdzi jestemy w stanie stwierdzi , czy para kolorw
charakteryzuje si odpowiednio wysokim kontrastem, aby zapewni czytelno , jednak ich uywanie moe by do czasochonne, poniewa wymaga
od Ciebie rcznego porwnywania kadej stosowanej w serwisie kombinacji
barwy pierwszoplanowej z kolorem ta. Narzdzia takie jak AccessColor
firmy AccessKeys (www.accesskeys.org/tools/color-contrast.html) umoliwiaj
analizowanie caych dokumentw poprzez przegldanie skryptw DOM
i wskazywanie potencjalnych problemw z kontrastem. Wikszo narzdzi
do sprawdzania kontrastu radzi sobie jednak wycznie w sytuacjach, gdy
tekst porwnywany jest z kolorem ta (nie za z obrazem), a take nie testuje
kontrastu w przypadku efektw dynamicznych, takich jak unoszenie, nie
jest zatem w stanie zapewni niezawodnych metod badania kontrastu barw.
Tabele
Tabele sprawiaj szczeglne problemy osobom ze sabym wzrokiem. Struktura tabeli, ktra wydaje si oczywista dla osb widzcych prawidowo, moe
by bardzo zagmatwana, gdy zostaje przedstawiona przez czytnik ekranowy.
Jzyk HTML oferuje szereg elementw i atrybutw, ktrych zadaniem
jest uatwienie odczytywania i interpretowania zawartoci tabel za pomoc
czytnikw ekranowych.
205
206
Oprcz niego element tabeli moe zawiera atrybut summary, ktrego zadaniem jest dostarczanie przegldu zawartoci tabeli uytkownikom czytnikw ekranowych. Osoby widzce prawidowo mog szybko dowiedzie si,
jaki jest cel zamieszczenia tabeli i jaka jest jej zawarto ; atrybut summary
ma dostarczy tej wiedzy rwnie ludziom z problemami wzrokowymi.
W przeciwiestwie do opisw definiowanych za pomoc elementw caption
podsumowania okrelane przy uyciu atrybutw summary nie s renderowane przez przegldarki internetowe s one uywane wycznie przez
czytniki ekranowe.
<table summary="Peny harmonogram wszystkich trzech cieek
pierwszego dnia konferencji Web Directions South 2009">
<caption>Harmonogram pierwszego dnia konferencji</caption>
Z samej struktury tabeli nie zawsze jasno wynika, czy element th jest nagwkiem wiersza, czy te kolumny komrek. Atrybut scope umoliwia nam
okrelenie, dla ktrych komrek element th stanowi nagwek. W przedstawionym powyej przypadku nagwki zwizane s z kolumnami, dlatego
odpowiedni kod powinien mie nastpujc posta :
<th abbr="projektowanie" scope="col">cieka Projektowa</th>
<th abbr="meneder" scope="col">cieka Menederska</th>
<th abbr="tworzenie" scope="col">cieka Twrcza</th>
W przypadku stosunkowo prostych tabel czytniki ekranowe mog korzysta z atrybutu scope w celu odczytywania nagwka (lub jego skrtu, jeli
zastosowalimy odpowiedni atrybut abbr) bezporednio przed zawartoci
komrki.
Na przykad na rysunku 6.1 widoczna jest tabela, w przypadku ktrej czytnik ekranowy mgby odczyta zaznaczon komrk jako: projektowanie
Osadzanie czcionek i typografia Marek Butelka. Jednak jak doskonale
pokazuje ten przykad nadal jest to odlege od penego obrazu danych,
ktre naleaoby odczyta z tabeli. Informacja, ktr czytnik powinien otrzyma , musiaaby raczej brzmie 10:45 11:40 projektowanie Osadzanie
czcionek i typografia Marek Butelka. W istocie z komrk naley tu poczy wicej ni tylko jeden nagwek. Moemy to zrobi , dodajc atrybut id
do kadego z nagwkw, a nastpnie korzystajc z atrybutw headers zwizanych z elementami td w celu powizania z nimi odpowiednich elementw th.
<table summary="Peny harmonogram wszystkich trzech cieek
pierwszego dnia konferencji Web Directions South 2009">
<caption>Harmonogram pierwszego dnia konferencji</caption>
<tr>
<th>Godzina</th>
<th abbr="projektowanie" scope="col">cieka
Projektowa</th>
<th abbr="meneder" scope="col">cieka Menederska</th>
<th abbr="tworzenie" scope="col">cieka Twrcza</th>
</tr>
<tr>
207
208
Rysunek 6.1.
Osoba o dobrym
wzroku moe atwo
wywnioskowa,
e prezentacja
dotyczca osadzania
czcionek naley
do cieki projektowej
i rozpocznie si
o godzinie 10:45.
Dla uytkownikw
korzystajcych
z czytnikw
ekranowych
z pewnoci nie bdzie
to takie proste,
chyba e zastosujemy
odpowiednie znaczniki
Formularze
Bezporednio i w znacznym stopniu moesz poprawi dostpno swoich
stron WWW przez zastosowanie odpowiednich znacznikw w stosunku do
zamieszczanych na nich formularzy. Wykorzystanie kilku prostych metod
pozwoli Ci znacznie zwikszy uyteczno formularzy dla osb z rnego
rodzaju ograniczeniami.
Niezwykle istotnych informacji dla uytkownikw czytnikw ekranowych
dostarczaj etykiety pl formularzy. Mimo e wskazwki graficzne znacznie uatwiaj okrelenie funkcji poszczeglnych pl tym z nas, ktrzy dysponuj dobrym wzrokiem, uytkownicy czytnikw ekranowych nie bd
w stanie w prosty sposb stwierdzi , do czego su pola formularza, jeli nie
zostan one jawnie i prawidowo poczone z odpowiednimi etykietami.
Niektre elementy formularzy na przykad elementy button maj
swoje wasne etykiety. W ich przypadku warto atrybutu value stanowi
etykiet danego elementu. Jeli nie istnieje adna jawna etykieta, jak ma
to miejsce w przypadku wikszoci elementw formularzy, naley zastosowa element label i za pomoc jego atrybutu for powiza go bezporednio z elementem, dla ktrego ma on by etykiet. Poniej zaprezentowany
zosta sposb, dziki ktremu mona zapewni maksymaln dostpno
w przypadku pola tekstowego posiadajcego etykiet:
<label for="nazwisko" id="etykieta-nazwisko">Nazwisko</label>
<input type="text" id="nazwisko" aria-labelledby=
"etykieta-nazwisko">
Zwr uwag na fakt, e zastosowalimy tu rwnie atrybut ARIA arialabelledby w obrbie samego elementu formularza a wic w elemencie input przedstawionym w poprzednim przykadzie w celu poinformowania przegldarki o id elementu, ktry jest opisywany przez biecy
209
210
element. W przykadzie naszym wskazalimy zatem, e element (a dokadnie element label) z id o wartoci etykieta-nazwisko stanowi etykiet dla
elementu input, ktrego id to nazwisko.
Spostrzegawczy czytelnicy mog te zauway , e atrybut aria-labelledby
zachowuje si tak jak dostpny w standardzie HTML 4 atrybut for, dziaa
jednak niejako w przeciwnym kierunku: w przypadku for to element etykiety identyfikuje element opisywany, wykorzystujc do tego jego id, za
w przypadku aria-labelledby to sam element opisywany wskazuje opisujcy go element za pomoc jego id. Zwr take uwag na to, e nazwa
labelledby, cho nie jest zgodna ze standardow, poprawn pisowni amerykask, jest w tym przypadku jak najbardziej prawidowa.
Gdy nie mona zastosowa elementu label, WCAG 2 sugeruje, e w roli
etykiety elementu wystarczy uy nalecego do niego atrybutu title. Do
skorzystania z title moemy by na przykad zmuszeni w przypadku pola
wyszukiwania znajdujcego si na pasku narzdzi strony, gdzie etykieta
musiaaby zaj wicej miejsca w poziomie, ni jest to moliwe.
Grupowanie elementw pl
Zrozumienie bardziej skomplikowanych formularzy mona uatwi uytkownikom poprzez zgrupowanie zwizanych ze sob pl i wyposaenie kadej
z tych grup w odpowiednie nagwki. Jzyk HTML wanie w tym celu oferuje elementy fieldset oraz legend. Zbir pl jest po prostu elementem
fieldset, ktry zawiera wszystkie zwizane ze sob elementy formularza.
Pierwszym elementem wchodzcym w skad fieldset powinien by element
legend, ktry spenia tu podobn funkcj jak opis w przypadku tabeli.
<fieldset>
<legend>Dane do rozliczenia</legend>
<p>Najpierw jednak musimy wiedzie, <strong>kto zapaci za
bilety?</strong></p>
<ol>
<li>
<label for="billing_name"><em
class="required">*Nazwisko</em></label>...
</fieldset>
Podsumowanie
Podsumowanie
W rozdziale tym oglnie przyjrzelimy si kwestii dostpnoci, w tym rwnie zwizanym z ni uwarunkowaniom prawnym i etycznym, istniejcym
standardom W3C oraz wystpujcym tu specyficznym problemom i ich
rozwizaniom. Co oprcz tego powiniene wynie z jego lektury? Najwaniejsz ide jest tutaj to, e prawdziwej dostpnoci nie da si osign
jedynie poprzez wdraanie listy odpowiednich poprawek na samym kocu
procesu tworzenia serwisu WWW, lecz raczej w wyniku zastosowania holistycznego podejcia do projektowania i tworzenia treci WWW. Z tak pojtej dostpnoci korzystaj nie tylko osoby niepenosprawne, lecz rwnie
wszyscy uytkownicy efektw naszych dziaa. (Te same sposoby, ktre
pozwalaj poprawi dostpno treci, zwykle zwikszaj take jej ogln
uyteczno ).
Rola dostpnoci w tworzeniu serwisw WWW znacznie wzrosa w ostatnich dziesiciu latach, a odbyo si to w duej mierze za spraw pojedynczych misjonarzy sprawy dziaajcych w naszej brany. Trudno dyskutowa
z faktem, e uwarunkowania prawne i oczekiwania spoeczne jak jeden
m zmierzaj w kierunku zapewniania wikszej dostpnoci dla coraz to
wikszej liczby ludzi. Zamiast wic martwi si kijem w rkach ustawodawcw i chtnych do wytyczania spraw prawnikw, pomyl lepiej o marchewce, czyli szansie dotarcia do wielu osb niepenosprawnych, ktre
odwiedzaj Twj serwis, przyjaznoci dla mechanizmw wyszukiwarek internetowych cechujcej kod zapewniajcy naleyt dostpno , a take satysfakcji, ktra stanie si Twoim udziaem, gdy zrobisz co, aby poprawi
komfort korzystania z internetu tak wielu ludzi.
211