Přeskoč navigaci

Zde hledá Jyxo.

Jyxo

Weblog pro webmastery a webdesignéry

10. 03. 2003

Vnitřní navigace dokumentu

Ač se to nezdá, jsou případy, kdy vlastní obsah stránky překáží jejímu snadnému používání. Tradičně se to vztahuje zejména na nevidomé uživatele, kterým čtečka předčítá sáhodlouhá záhlaví s navigací dřív, než je pustí k hlavnímu obsahu. Poslední dobou však přibývá i uživatelů miniaturních displejů (palmtopy, mobilní telefony), kteří zažívají na mnoha stránkách podobné potíže, když musí pracně přeroloval přes mnoho obrazovek záhlaví, než se dostanou k tomu, co si chtějí přečíst.

Nejlepším řešením je umístit hlavní obsah hned na začátek stránky, jak nás učí W4DMark Pilgrim v desátém dni svého slavného Dive Into Accessibility (Presenting your main content first). Jako náhrada, a současně i vhodný doplněk, však poslouží ještě něco jiného: promyšlená vnitřní navigace dokumentu. Diskuse s Medvídkem Pů (viz související odkazy k mému včerejšímu příspěvku Má mít web textovou verzi? Ne!) mne přesvědčila, že to je technika u nás málo známá a že ani já ji nepoužívám právě nejlépe. Jak by tedy měla vypadat?

  1. Pokud stránka nezačína přímo hlavním obsahem (tj. tím, kvůli čemu si ji lidé především čtou), vložte hned na začátek odkaz, kterým lze na hlavní obsah přeskočit. Pomocí kaskádových stylů pak tento odkaz ukryjte před běžnými prohlížeči. Podrobně popisuje tuto techniku Mark Pilgrim ve Skipping over navigation links.

  2. Dovnitř stránky vložte několik dalších vhodných kotev (pomocí <a name="…">) a na jiných vhodných místech dokumentu se na ně odkazujte. Vycházejte přitom z toho, že cílem je usnadnit pohyb po dokumentu někomu, kdo vidí (nebo slyší, nahmatává) celý obsah stránky jako jeden úzký sloupec v pořadí dle zdrojového kódu, bez ohledu na rozmístění provedené tabulkami či CSS.

  3. Dejte svému obsahu jasnou a logickou strukturu pomocí nadpisů <h1><h6>. Některá zařízení pro nevidomé totiž umějí nabídnout uživateli jako navigační pomůcku osnovu vytvořenou z těchto nadpisů. Pokud jsou některé podnadpisy sice logické, ale nepasují vám do vzhledu stránky, klidně je (i s odkazy na ně) opět ukryjte pomocí CSS. Nevidomým to vadit nebude.

Když k této technice přidáte ještě pár dalších zásad, např. že žádný obrázek, který nenese význam, nepatří do zdrojového HTML kódu (patří do stylového předpisu jako obrázek na pozadí), dostanete skoro zadarmo stránky velmi dobře použitelné nejen pro nevidomé, ale i v moderních miniaturních zařízeních.

A ještě jedna poznámka na závěr: kdyby vám snad přeskakování navigace připadalo jako zbytečná hloupost, zkuste si v Googlu vyhledat skip navigation. Dostanete bezmála 5 milionů výsledků.

Marek Prokop, 10. 03. 2003 11:03, Trvalý odkaz, Pošli komentář

WThRemix: soutěžní návrhy zveřejněny

Vzpomínáte si, jak jsem vás v lednu vyzýval, ať ukážete W3C, že jste lepší v soutěži WThRemix? Teď se již můžete podívat na všechny přihlášené soutěžní návrhy. Popravdě řečeno, mně se nelíbí žádný. O to větší škoda, že v přihlášených nevidím žádné české jméno. Mnoho z vás by mělo jasné šance na vítězství a tím i pootevřenou cestu k zahraničním zakázkám.

Ohlasy a souvislosti k tomuto příspěvku

Marek Prokop, 10. 03. 2003 4:14, Trvalý odkaz, Pošli komentář

Nejlepší definice písma v CSS

Ačkoli je Petr Staníček autorem všeobecně respektovaného návodu k nastavení českých rodin písma kaskádovými styly, pojal pochybnosti, zda je tento návod opravdu ideální, a rozhodl se vyhlásit soutěž o nejlepší definici písma. Vítěz soutěže obdrží Petrovu knihu o CSS, případně alkoholické nápoje stejné ceny.

Marek Prokop, 10. 03. 2003 4:14, Trvalý odkaz, Pošli komentář

Roogle

Nový vyhledavač Roogle se specializuje na RSS kanály, kterých indexuje zatím něco přes tisíc. (via WebDot.cz)

Marek Prokop, 10. 03. 2003 4:14, Trvalý odkaz, Pošli komentář

Další příspěvky weblogu

Tato stránka je přístupná libovolným prohlížečem, nejlépe však vypadá v prohlížeči, který podporuje HTML 4.0 a CSS 2 (Internet Explorer od verze 5, Mozilla, Opera a další). Pokud čtete tuto zprávu, váš prohlížeč zřejmě dostatečně nepodporuje CSS. Stránku sice vidíte bez pokročilejšího formátování, avšak veškerý obsah je plně přístupný i pro vás.