Interval.cz

Odstra≥te bariΘry svΘho webu - co novΘho po dvou letech

Od doby, kdy jste se na Intervalu setkßvali s °adou Φlßnk∙ o p°φstupnosti webu, uplynuly ji₧ dva roky. Od tΘ doby se na tomto poli objevily n∞kterΘ novΘ postupy a takΘ se ukßzaly oblasti, kter²m jsem se dostateΦn∞ nev∞noval. V nßsledujφcφm textu proto projdu r∙znß tΘmata p°φstupnosti, a to podle zßsady "ka₧d² pes, jinß ves". Bude to n∞co jako dopl≥ujφcφ poznßmky k p∙vodnφm Φlßnk∙m - pokud jste je jeÜt∞ neΦetli, doporuΦuji vßm tak uΦinit.

Mnoho poznßmek vychßzφ z Pravidel pro tvorbu p°φstupnΘho webu, pomocφ kter²ch se pravd∞podobn∞ v budoucnu bude kontrolovat p°φstupnost web∙ naÜφ stßtnφ sprßvy - tato pravidla jsou proto pro ΦeskΘho tv∙rce webu nanejv²Ü relevantnφ.

ProhlßÜenφ o p°φstupnosti webu

Ka₧d² web by m∞l mφt specißlnφ strßnku, kde se nachßzφ prohlßÜenφ o p°φstupnosti webu a kontakt na jeho technickΘho sprßvce. Ono prohlßÜenφ by m∞lo °φkat, jakΘ Φßsti webu jsou jak p°φstupnΘ, p°φpadn∞ jakß jsou omezenφ r∙zn²ch Φßstφ. Je zde mo₧nΘ uvΘst i metodiky p°φstupnosti (nap°φklad WCAG, Blind Friendly Web nebo zmi≥ovanß Φeskß pravidla p°φstupnosti), jejich₧ pravidla web spl≥uje, a webovΘ standardy (nap°φklad XHTML, CSS), kterΘ web dodr₧uje.

Pokud nap°φklad mßte web, jeho₧ souΦßstφ je fotogalerie, text strßnky s prohlßÜenφm, kterß musφ b²t odkazovßna z ka₧dΘ strßnky webu, by mohl vypadat takto:

Odkazy na nonHTML soubory musφ b²t oznaΦeny

Pokud odkazujete na jin² soubor, ne₧ je webovß strßnka, musφte v odkazu uvΘst typ i velikost odkazovanΘho souboru. K tomu m∙₧ete vyu₧φt text odkazu nebo atribut "title" - osobn∞ se mi ale zdß text odkazu lepÜφ, proto₧e u₧ivatel vizußlnφho prohlφ₧eΦe ne v₧dy Φekß na zobrazenφ atributu "title", ne₧ na odkaz klikne. P°φklad:

Atribut "type"

M∙₧ete pou₧φt i atribut "type" a zazß°it tak p°ed ostatnφmi kodΘry:

Tento atribut slou₧φ k urΦenφ MIME-typu odkazovanΘho souboru. MIME-typy nejΦast∞jÜφch typ∙ soubor∙ odkazovan²ch na webu najdete v nßsledujφcφ tabulce:

Nevφm, jestli tento atribut dnes n∞jakΘ prohlφ₧eΦe pou₧φvajφ. I kdyby ho ale nepou₧φvali, dß se vyu₧φt v CSS - t°eba k p°idßnφ ikonky ke ka₧dΘmu odkazu, kter² vede na soubor PDF. Bohu₧el ale MSIE (bez specißlnφch extenzφ) nepodporuje atributovΘ selektory v CSS, tak₧e m∙₧ete s tφmto atributem opravdu v∞tÜinou jen fraje°it.

Obsah °adit podle d∙le₧itosti

Obsah strßnky by m∞l b²t v k≤du uspo°ßdßn podle d∙le₧itosti. Nejprve nejd∙le₧it∞jÜφ sd∞lenφ strßnky, a₧ potom navigace a ostatnφ informace. P°ed delÜφmi bloky obsahu byste m∞li uvßd∞t krßtkß shrnutφ, to pom∙₧e bez v²jimky vÜem u₧ivatel∙m.

Pokud musφte navigaci uvΘst jeÜt∞ p°ed hlavnφm obsahem (t°eba kv∙li vzhledu nebo man²rßm vaÜeho publikaΦnφho systΘmu), m∞lo by ji b²t mo₧nΘ p°eskoΦit pomocφ specißlnφho odkazu.

Skr²vßnφ obsahu ve vizußlnφch prohlφ₧eΦφch

Do k≤du strßnky je t°eba Φasto za°adit urΦit² obsah, kter² je v²znamn² pro strukturu strßnky a pro nevizußlnφ prohlφ₧eΦe, ale p°i zobrazenφ strßnky ve vizußlnφm prohlφ₧eΦi ztrßcφ smysl (vÜe je jasnΘ ze specifickΘho zobrazenφ dan²ch prvk∙) - nap°φklad nadpis "Navigace" nebo odkaz na p°eskoΦenφ urΦit²ch ·sek∙ strßnky. I tak by ale takov² obsah m∞l b²t do k≤du strßnky za°azen, pouze p°i zobrazenφ strßnky ve vizußlnφm prohlφ₧eΦi by m∞l b²t skryt pomocφ CSS.

Pravd∞podobn∞ byste toto skrytφ realizovali pomocφ vlastnostφ display nebo visibility, ale v tom je kßmen ·razu. Nevizußlnφ hlasovΘ ΦteΦky jsou toti₧ Φasto napojeny na b∞₧n² vizußlnφ prohlφ₧eΦ (t°eba MSIE), kterΘmu sv∞°ujφ interpretaci strßnky, samy se starajφ jen o Φtenφ. A bohu₧el, pokud skryjete n∞jak² obsah pomocφ display nebo visibility, ΦteΦka ho ignoruje. Je tedy t°eba pou₧φvat jin² zp∙sob, a sice absolutnφ pozicovßnφ mimo strßnku:

V tomto p°φpad∞ ji₧ hlasovΘ ΦteΦky p°eΦtou obsah bez problΘm∙. Je t°eba jen dßvat pozor na to, aby prvek, kter² takto skr²vßte, nebyl uvnit° jinΘho pozicovanΘho prvku - pak by se jeho absolutnφ pozice poΦφtala od pozice tohoto nad°azenΘho prvku.

Pozor na barvy

U₧ v p∙vodnφch Φlßncφch jsem mluvil o tom, ₧e byste se p°i p°enßÜenφ jakΘkoli informace nem∞li spolΘhat pouze na barvu. Na webu se ale s poruÜenφm tohoto pravidla setkßvßm vcelku Φasto.

Prvnφ problΘm je u odkaz∙ - urΦit∞ jste ji₧ mnohokrßt slyÜeli o tom, ₧e tφm, ₧e je nepodtrhnete a zv²raznφte je jen barvou, se dopouÜtφte proh°eÜku proti pou₧itelnosti. Jen₧e krom∞ toho zßrove≥ nechßvßte p°enos d∙le₧itΘ informace - ₧e je text odkazem - jen na barv∞. A to je proh°eÜek proti pravidl∙m p°φstupnosti.

S dalÜφm Φast²m proh°eÜkem proti tomuto pravidlu se setkßvßm u formulß°∙. Vzpome≥te si, kolikrßt jste u₧ u nich vid∞li text "PovinnΘ polo₧ky jsou oznaΦeny Φerven∞." SprßvnΘ oznaΦenφ je pomocφ n∞jakΘho v²znamovΘho prvku (t°eba <strong>) nebo hv∞zdiΦky.

M∞li byste takΘ dbßt na dostateΦn² kontrast barev, typicky textu a jeho pozadφ. K tomu m∙₧ete pou₧φt t°eba m∞°idlo kontrastu na Sov∞ v sφti.

Nezßvislost na vstupnφm za°φzenφ

Web m∙₧e b²t prohlφ₧en na tΘm∞° libovolnΘm za°φzenφ, proto byste nem∞li poΦφtat ani s konkrΘtnφm vstupnφm za°φzenφm.

╚astΘ jsou v tomto sm∞ru proh°eÜky hlavn∞ u formulß°∙. Zde se lze setkat s texty jako "Zadejte svΘ jmΘno a heslo a potΘ klikn∞te myÜφ na OK", p°φpadn∞ "Zadejte slovo k vyhledßnφ a stiskn∞te ENTER". Tyto texty by se na webu bu∩ nem∞li v∙bec nachßzet, a nebo by m∞lo b²t °eΦeno, pro jakou platformu jsou urΦeny (nap°φklad pomocφ CSS).

ProblΘm podobnΘho charakteru se vyskytuje i u nabφdek tvo°en²ch prvkem <select>, kde se dß vybrat najednou vφce mo₧nostφ. TΘm∞° poka₧dΘ se zde mluvφ o klßvese CTRL, kterou lze vybrat vφce polo₧ek. Sprßvn∞ by takov² text m∞l vypadat t°eba takto:

Jak pou₧φvat accesskey

Atribut "accesskey" umo₧≥uje p°i°adit urΦit² znak jako klßvesovou zkratku pro konkrΘtnφ odkaz. Jeho pou₧itφm m∙₧ete urychlit pohyb po webu vÜem u₧ivatel∙m, kte°φ nepou₧φvajφ myÜ. S tφmto atributem jsou ale takΘ spojeny urΦitΘ problΘmy:

Tyto problΘmy je mo₧no ΦßsteΦn∞ °eÜit tak, ₧e se jako zkratky pou₧ijφ Φφsla, tak₧e zkratky nebudou kolidovat s nastavenφm prohlφ₧eΦe. N∞kterΘ organizace navφc navrhujφ standardnφ Φφsla pro r∙znΘ strßnky a funkce webu:

DalÜφ informace k tomuto tΘmatu najdete na weblogu Vφta DlouhΘho v p°φsp∞vku ZvyÜuje accesskey p°φstupnost strßnek? Ano!.

Vyhledßvßnφ