Open Monday: Pravidla přístupnosti pro pokročilé tvůrce webu
23.9.2008Na prvním Open Monday (22. září 2008) přednášel David Špinar o pokročilých metodách a postupech při tvorbě přístupného webu. Zaměřil se zejména na méně známé a obtížnější aspekty pravidel přístupnosti, které bývají často opomíjeny nebo nesprávně interpretovány.
Podívejte se na záznam Davidovy přednášky nebo si prezentaci proklikejte.
Video
Prezentace
Fotografie
Příště, tedy 6. listopadu, se můžete těšit na Honzu Tichého a jeho téma „Pozice nejsou správným měřítkem úspěchu SEO“. Nezapomeňte se zaregistrovat včas.
[1] Dan 23.9.2008, 16:45
Místo videozáznamu Open Monday je dostupná jen 4minutové reklama …
[2] David Špinar 23.9.2008, 16:49
Mrkněte na to znovu, já to vidím v pořádku.
[3] Dan 23.9.2008, 16:51
Je to prohlížečem. V MSIE6 jde jen reklama. Ve FF3 jde záznam bez úvodní reklamy. Za odhalení bugu očekávám pozvání na příští „typický pracovní den v H1“ v čase, kdy ještě budou koblihy;)
[4] Jiří Koutný 23.9.2008, 16:56
Díky za odhalení chybky. Kvůli rozdílnostem Firefox vd. IE se musí do kódu zadávat adresa videa 2×. Samozřejmě při kopírování kódu z jiné stránky se i mistr tesař někdy utne a nahradí jen jednu adresu;)
[5] Jiří Bureš 23.9.2008, 20:01
Dík za velmi pěkný spot.
[6] Karel Fučík 23.9.2008, 20:18
17:35 – „…takže my, až budeme na našem weblogu publikovat tohleto video, tak k tomu titulky přidávat nebudeme, ale budeme k tomu přidávat tuhle prezentaci…“
Jen mi přišlo úsměvné, že ta prezentace je rovněž ve flashi ;)
Ale jinak moc pěkný počin tohle Open Monday, díky.
[7] Petr Brádler 24.9.2008, 02:38
Jedna, dvě věci mě opravdu překvapily, zbytek byl užitečné zopakování.
Takovéto video je bezvadná forma i pro ty, kteří to mají do Prahy daleko.
[8] Rdm 24.9.2008, 07:08
Nebyla by možnost dát video ke stažení? Z technických důvodů nemůžu flash video přehrávat přímo na z netu. Díky
[9] David Špinar 24.9.2008, 08:07
[6] Díky za připomenutí. Přidali jsme odkaz na download prezentace.
[10] Jirka 24.9.2008, 15:53
Je prezentace nahraná celá? Běží mi jen prvních cca 15 minut a pak je uprostřed věty konec.
Pro jistotu dodávám, že používám Operu.
[11] David Špinar 25.9.2008, 09:10
[10] Ano, je celá. Viz například komentář [6], kde Karel Fučík komentuje něco, co je v čase 17:35.
[12] Vašek Purchart 25.9.2008, 10:18
Ahoj, určitě v lecčems přínosná přednáška, díky.
Jen mě při sledování napadla otázka přístupnosti horizontálních vs vertikálních tabulek.
Horizontální uspořádání asi převažuje a jsou mu tedy přizpůsobeny čtečky (výstup z databáze – jméno, příjmení, bydliště) → čteme po řádcích.
Jak bude ale vypadat vertikální tabulka typu postupují, nepostupují (nebo výpis nějakých 2 teamů lidí – stejný počet řádků)…
Varianta č.2 je pak pro hlasové čtečky v celku nepoužitelná, pokud se čte pouze po řádcích…je nějaké použitelné řešení?
[13] http://poslepu.blogspot.com/ 25.9.2008, 21:42
[12] Varianta 2
Použitelných řešení je hned několik.
První možnost je nepoužít tabulku a dát ty údaje do dvou seznamů.
Druhou možností je tabulku o 90 stupňů otočit a pak bude bez problémů dávat smysl čtena po řádcích.
Třetí řešení spočívá v tom, že necháte tabulku tak, jak je a využijete možností screenrederu. Moderní screenreadery (např. JAWS) totiž disponují funkcemi, které umožňují tabulku číst i vertikálně, tzn. při jejím procházení mohu jít po jednotlivých buňkách sloupce a ne řádku. V tomto případě nic nepokazíte, když k takovéto tabulce přidáte atribut summary a v něm strukturu tabulky popíšete. Nevidomý pak nemusí při jejím čtení tápat a bude okamžitě vědět, že má tu tabulku procházet po sloupcích a ne po řádcích.
[14] Vašek Purchart 26.9.2008, 13:54
[13] Super, děkuji za odpověď
ad1) Ano to mě také napadlo, ale samozřejmě to není vhodné vždy…K tomuto řešení mě napadlo ještě (z hlediska kódu ne zrovna pěkné řešení) použít 2 sloupce (a už tabulkou nebo float a pod.) a vložit 2 jednosloupcové tabulky.
ad2) Pokud jde o seznam, tak by se tabulka pravděpodobně do designu na šířku nevešla… :(
ad3) Přesně tímto směrem sem mířil otázku :) protože v tom se tolik neorientuji. A způsob čtení tedy přepíná sám uživatel?
[15] http://poslepu.blogspot.com/ 26.9.2008, 21:03
[14] Ano, uživatel si může určit, jakým způsobem bude tabulkou procházet – JAWS nabízí řadu funkcí, které procházení tabulky usnadňují a vertikální pohyb po bunkách je jen jedna z nich.
Vy uživateli můžete u atypické/složitější tabulky pomoci třeba tím, že k ní přidáte atribut summary a v něm tabulku charakterizujete (není třeba psát, kolik má řádků a sloupců – to obstará screenreader, ale spíš popsat to, jak je obsah tabulky uspořádán a co tabulka obsahuje).
[16] http://dotuctu.blogspot.com/ 26.9.2008, 23:13
Právě jsem to dokoukal, docela se mi to líbilo :), takže děkuji.
[17] Pepa 27.9.2008, 00:32
Poměrně mě v prezentaci překvapil bod 17. týkající se „skip to content“ odkazů a jejich skrývání. I ve videozáznamu se tento bod přešel bez znatelného udivení posluchačů.
Představoval jsem si, že hlasová čtečka standardně pracuje s prohlížečem, který stránku zobrazí bez stylů. (K čemu by byly nevidomému člověku nějaké styly…)
Opravdu tedy v praxi nevidomí „surfují stylově“?
[18] David Špinar 29.9.2008, 08:44
[17] Ano, čtečky některé stylové předpisy aplikují i „pro sebe“.
[19] Pepa 29.9.2008, 10:51
[18] A dá se za dobré, respektive spolehlivé řešení (kromě nabízeného skrývání skip-to-content odkazů pomocí position:absolute a z-index) považovat i vytvoření a přiřazení vlastního CSS souboru pro nevidomé, např. pomocí:
nebo je i zde nějaký zádrhel?
[20] Pepa 29.9.2008, 10:53
(Druhý pokus o vložení tagu:)
<link rel=„stylesheet“ type=„text/css“ href=„css-pro-nevidome.css“ media=„braille,speech“ />
[21] barambuc 6.10.2008, 09:02
Dobry den, prednaska je velmi poucna. Mam otazku, ak cena vytvorenia pristupnej stranky nie je ovela vacsia ako cena nepristupnej stranky, preco nespravite aspon tento prispevok v blogu pristupny? Viete napisat aspon par linkov vacsich webstranok v cechach, pripadne na Slovensku, kde je dobre vyriesena pristupnost?
Zaujimaju ma skor stranky, ktore maju aj nejaku inu funkcnost ako len zobrazenie menu, vyhladavanie a feeedback. Dakujem