<meta http-equiv='pics-label' content='(pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline EN v2.0" l gen true for "http://interval.cz" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://interval.cz" r (n 0 s 0 v 0 l 0))' />
<h2>Odstra≥te bariΘry svΘho webu - co novΘho po dvou letech</h2>
<p id='prepend'>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.</p>
<p>Mnoho poznßmek vychßzφ z <a href='http://pristupnost.nawebu.cz/texty/pravidla-standardy.php?full'>Pravidel pro tvorbu p°φstupnΘho webu</a>, 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φ.</p>
<h3>ProhlßÜenφ o p°φstupnosti webu</h3>
<p>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 <acronym title='Web Content Accessibility Guidelines'>WCAG</acronym>, Blind Friendly Web nebo zmi≥ovanß Φeskß pravidla p°φstupnosti), jejich₧ pravidla web spl≥uje, a webovΘ standardy (nap°φklad <acronym title='eXtensible HyperText Markup Language'>XHTML</acronym>, <acronym title='Cascading Style Sheets'>CSS</acronym>), kterΘ web dodr₧uje.</p>
<p>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:</p>
<div class='sample'>
V p°φpad∞ technick²ch potφ₧φ se obra¥te na sprßvce webu:
<br />Tento web je pln∞ p°φstupn² vÜem u₧ivatel∙m ve vÜech sv²ch Φßstech krom∞ fotogalerie - zde se nachßzejφ informaΦn∞ nedostateΦnΘ popisky k jednotliv²m fotkßm.
<br />Ve vÜech Φßstech krom∞ fotogalerie jsou dodr₧ena vÜechna pravidla metodiky WCAG.
<br />
<br />Tento web takΘ pln∞ vyhovuje standard∙m jazyk∙ XHTML a CSS.
</div>
<h3>Odkazy na nonHTML soubory musφ b²t oznaΦeny</h3>
<p>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:</p>
<div class='sample'>
P°eΦt∞te si <a href="casopis-ukazka.pdf">ukßzkovΘ Φφslo naÜeho Φasopisu (formßt PDF, 150 kB)</a>.
<p>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:</p>
<div class='table'>
<table cellspacing='0' summary='Tabulka obsahuje MIME-typy nejΦast∞jÜφch typ∙ soubor∙ odkazovan²ch na webu. V levΘm sloupci se nachßzφ typ souboru a v pravΘm jeho MIME-typ.'>
<tr><th>Typ souboru</th><th>MIME-typ</th></tr>
<tr><td>PDF</td><td>application/pdf</td></tr>
<tr><td>DOC (formßt MS Wordu)</td><td>application/msword</td></tr>
<tr><td>ZIP</td><td>application/zip</td></tr>
<tr><td>PPT (formßt MS PowerPointu)</td><td>application/vnd.ms-powerpoint</td></tr>
<tr><td>JPEG</td><td>image/jpeg</td></tr>
</table>
</div>
<p>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.</p>
<h3>Obsah °adit podle d∙le₧itosti</h3>
<p>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.</p>
<p>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.</p>
<h3>Skr²vßnφ obsahu ve vizußlnφch prohlφ₧eΦφch</h3>
<p>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.</p>
<p>Pravd∞podobn∞ byste toto skrytφ realizovali pomocφ vlastnostφ <samp>display</samp> nebo <samp>visibility</samp>, 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φ <samp>display</samp> nebo <samp>visibility</samp>, ΦteΦka ho ignoruje. Je tedy t°eba pou₧φvat jin² zp∙sob, a sice absolutnφ pozicovßnφ mimo strßnku:</p>
<div class='sample'>
#navigace h2 {
<br /> position: absolute;
<br /> top: -500px;
<br />}
</div>
<p>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.</p>
<h3>Pozor na barvy</h3>
<p>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.</p>
<p>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.</p>
<p>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 <samp><strong></samp>) nebo hv∞zdiΦky.</p>
<p>M∞li byste takΘ dbßt na dostateΦn² kontrast barev, typicky textu a jeho pozadφ. K tomu m∙₧ete pou₧φt t°eba <a href='http://www.sovavsiti.cz/kontrast/'>m∞°idlo kontrastu</a> na Sov∞ v sφti.</p>
<h3>Nezßvislost na vstupnφm za°φzenφ</h3>
<p>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.</p>
<p>╚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).</p>
<p>ProblΘm podobnΘho charakteru se vyskytuje i u nabφdek tvo°en²ch prvkem <samp><select></samp>, 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:</p>
<div class='sample'>
V nabφdce m∙₧ete vybrat vφce polo₧ek najednou. Obvykle tak lze uΦinit pomocφ funkΦnφ klßvesy - na MS Windows pou₧ijte CTRL.
</div>
<h3>Jak pou₧φvat accesskey</h3>
<p>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:</p>
<div class='list'>
<ul>
<li>DefinovanΘ klßvesovΘ zkratky mohou kolidovat s klßvesov²mi zkratkami v prohlφ₧eΦi u₧ivatele, co₧ znemo₧nφ jejich pou₧itφ.</li>
<li>Pro klßvesovΘ zkratky neexistuje ₧ßdn² standard, tak₧e se u₧ivatel musφ na ka₧dΘm webu seznamovat s nov²mi klßvesami pro jednotlivΘ funkce a strßnky.</li>
</ul>
</div>
<p>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:</p>
<div class='list'>
<ul>
<li>0 pro bli₧Üφ informace o pou₧itφ klßvesov²ch zkratek</li>
<li>1 pro odkaz na ·vodnφ strßnku</li>
<li>2 pro odkaz na p°eskoΦenφ navigace</li>
<li>4 pro odkaz na vyhledßvßnφ</li>
</ul>
</div>
<p>DalÜφ informace k tomuto tΘmatu najdete na weblogu Vφta DlouhΘho v p°φsp∞vku <a href='http://www.vitdlouhy.cz/weblog/2004/02/pristupnost-accesskey.html'>ZvyÜuje accesskey p°φstupnost strßnek? Ano!</a>.</p><div class='refer'><h3><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/serial.asp?serial=40' title='p°ehled Φlßnk∙ vΦetn∞ anotacφ'>Odstra≥te bariΘry svΘho webu</a></h3><p>BezbariΘrov² web neklade p°ekß₧ky ₧ßdnΘmu u₧ivateli, bez ohledu na pou₧itΘ za°φzenφ nebo handicap. Navφc b²vß i kvalitn∞jÜφ a p°φstupn∞jÜφ pro vÜechny u₧ivatele. Ka₧d² webmaster by proto m∞l znßt zßkladnφ pravidla pro tvorbu takovΘho webu. Tato sΘrie Φlßnk∙ ji₧ byla uzav°ena, aΦkoli dalÜφ pokraΦovßnφ nelze vylouΦit.</p><ul><li><strong>Odstra≥te bariΘry svΘho webu - co novΘho po dvou letech</strong> (prßv∞ Φtete)</li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1302'>Odstra≥te bariΘry svΘho webu - kontrola</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1276'>Odstra≥te bariΘry svΘho webu - navigace a alternativy</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1248'>Odstra≥te bariΘry svΘho webu - modernφ technologie</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1223'>Odstra≥te bariΘry svΘho webu - tabulky</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1182'>Odstra≥te bariΘry svΘho webu - struktura dokumentu a jednotky</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1159'>Odstra≥te bariΘry svΘho webu - odkazy a formulß°e</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1141'>Odstra≥te bariΘry svΘho webu - obrßzky a zvuky</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1130'>Odstra≥te bariΘry svΘho webu</a></li></ul></div>
