Odstraňte bariéry svého webu – struktura dokumentu a jednotky

21. května 2002

•

Jak zpřístupnit svůj web lidem i technice? Co dělat s rámy? Jak upravovat strukturu dokumentu a jak nakládat s barvami? Jsou lepší relativní nebo absolutní jednotky? A jakým jazykem vlastně mluvíte? Odpověď najdete v dalším pokračování o webu bez bariér.

Rámy aneb frames

Rámy byste dnes již téměř neměli používat, a to z několika důvodů. Rámy W3C nezahrnulo do specifikace XHTML 1.1, používání rámů má různé nevýhody (nemožnost odkazovat na jiný soubor než soubor s definicí rámů, možnost zmatení uživatele, špatná přístupnost pro handicapované uživatele a vyhledávače…), ale hlavně již dnes existují metody, jak rámy nahradit:

Element object zde načte do stránky další stránku s navigací a nabízí i alternativu pro prohlížeče, které tento element neumí nebo nemohou interpretovat. Tento element byste měli zařadit v logické struktuře dokumentu někam ke konci, aby navigace následovala až po obsahu stránky. Potom ji můžete pomocí CSS přemístit na určité místo na stránce, kde by se měla vyskytovat ve vizuálních prohlížečích. Je možné využít i zápis position: fixed, který zajistí pevnou pozici elementu na stránce i při posouvání dokumentu.

Pokud se i přes argumenty zmíněné výše rozhodnete klasické rámy použít (například kvůli starším prohlížečům), měli byste dodržovat následující pravidla:

Rámy jsou z hlediska přístupnosti značně problematické, protože handicapovaný uživatel může lehce ztratit orientaci v tom, k čemu jednotlivé rámy slouží a co se do nich načítá. Proto byste měli ke každému rámu (element frame) poskytovat popis pomocí atributu title a nejlépe i odkaz na delší popis pomocí atributu longdesc.
K definici velikosti rámů využívejte relativní hodnoty.
Nezapomínejte na element title ve všech stránkách, které se normálně načítají do rámů.
Poskytněte alternativní verzi bez rámů. Na tu byste měli odkazovat v sekci noframes a nejlépe i někde na stránkách s rámy. Mnoho uživatelů používajících běžný prohlížeč tuto možnost uvítá a navíc se na vaše stránky dostanou i vyhledávače. Tato alternativní verze nemusí být vedena zvlášť, mohou to být i vhodně provázané stránky, které se normálně načítají do rámů.

Příklad:

<!DOCTYPE html PUBLIC „-//W3C//DTD HTML 4.01 Frameset//EN“>
<html>
<head>
  <title>Stránka s rámy</title>
  <meta http-equiv=“content-type“ content=“text/html; charset=iso-8859-2″>
</head>
<frameset cols=“20%, 90%“>
  <frame src=“navigace.html“ title=“Navigace“ longdesc=“popis_ramu.html#navigace“>
  <frame src=“uvod.html“ title=“Obsah“ longdesc=“popis_ramu.html#obsah“>
  <noframes>
    <a href=“navigace.html“>Navigace naším webem</a>
  </noframes>
</frameset>
</html>
Sobor popis_ramu.html by potom obsahoval přibližně tento text:
<p>V tomto souboru se nachází popis jednotlivých rámů.</p>
<h2><a name=“navigace“ id=“navigace“></a>Navigační rám</h2>
<p>Tento rám obsahuje odkazy na hlavní části webu a v průběhu prohlížení se nemění.</p>
<h2><a name=“obsah“ id=“obsah“></a>Rám s obsahem</h2>
<p>Do tohoto rámu se načítají jednotlivé stránky, které tvoří obsah vašeho webu.</p>

Barvy

Veškeré informace z vašich stránek by měly být srozumitelné i pro uživatele, kteří mají poruchu vnímání barev, používají nevizuální prohlížeče nebo platformu s omezeným zobrazováním barev (například různé PDA). Nepředávejte jakoukoli informaci uživateli pouze pomocí barvy! Také byste měli využívat dostatečně kontrastní barvy tam, kde je to potřeba, což platí hlavně pro barvu pozadí a popředí (textu), odlišení odkazů od běžného textu a odlišení navigace a obsahu stránky.

Logická struktura dokumentu

V dnešní době byste již v žádném případě neměli používat HTML elementy k definování vzhledu stránky, tuto úlohu byste již měli nechat pouze na CSS a pomocí HTML definovat pouze správnou strukturu dokumentu (význam, důležitost, vzájemné vazby informací, jejich pořadí). Tuto problematiku jsem již obšírněji rozebíral v článku Logické strukturování HTML dokumentu, který zde nebudu opisovat a který vám vřele doporučuji k přečtení.

Platí, že byste měli dělit obsah stránky do logických celků pomocí elementů, o kterých jsem psal ve výše zmiňovaném článku, především elementů pro odstavce a nadpisy. Uživatelé používající prohlížeč s nevizuálním výstupem často čtou nejprve jen nadpisy a začátky odstavců, aby zjistili, kde se nachází informace, kterou hledají, nebo získali představu o uspořádání stránky. O odstavcích také platí pravidlo 1 odstavec = 1 myšlenka, čehož vám doporučuji se v rámci možností držet, jinak se ve vašem textu uživatel snadno ztratí.

Pokud již existuje jazyk pro zápis určitého specifického jevu (například MathML pro zápis matematických rovnic), měli byste používat ke vkládání tohoto jevu do stránky raději tento jazyk než obrázek nebo jiný multimediální prvek. Toto platí i pro zápis textu a tabulkových dat. Strukturovaná textová informace je vždy přístupnější než informace vizuální!

Relativní versus absolutní

Při tvorbě stránek byste také měli využívat raději jednotky relativní než absolutní. Vyplývá to již ze samé podstaty HTML, který je jazykem interpretovaným, a proto vždy záleží na prohlížeči, jakým způsobem HTML stránku zobrazí. Při tom musí respektovat specifické požadavky uživatele i možnosti dané platformy. Tyto okolnosti mohou být pokaždé jiné, v některých případech i značně neobvyklé, a proto by měl autor umožnit prohlížeči maximální přizpůsobení stránky.

Toto pravidlo je zvláště důležité pro uživatele s vadou zraku, kteří často využívají běžné prohlížeče, v nichž mají nastavené velké písmo. A toto nastavení se může do stránky promítnout jen pokud používáte relativní jednotky pro definici velikosti písma. Toto hledisko bych ale nepodceňoval ani ve vztahu k běžným uživatelům, kteří mají často po delším sezení u počítače unavené oči a také si někdy v prohlížeči nastaví větší písmo.

Poskytování informací o jazyku dokumentu

U každého dokumentu byste měli specifikovat jazyk, který se v dokumentu používá. Je to důležité hlavně kvůli braillovskému (může určit znakovou sadu) a hlasovému (může určit výslovnost) výstupu, ale pomůže i vyhledávačům (může stránku správně zařadit) a běžným prohlížečům (může použít správnou kódovou sadu pro zobrazení písma). Nejprve byste měli určit hlavní jazyk dokumentu, a to pomocí:

HTTP hlavičky content-language – tuto hlavičku můžete specifikovat i pomocí elementu meta v hlavičce dokumentu,
atributu lang elementu html.

Pokud se jazyk v dokumentu změní, měli byste opět použít atribut lang k tomu, abyste o této změně dali vědět klientovi. Tento atribut můžete použít u všech elementů ze specifikace HTML 4, kromě applet, base, basefont, br, frame, frameset, hr, iframe, param a script. Vhodné je jeho použití s elementy p, span, q a podobně.

Poznámka: Pokud píšete stránky v XHTML 1.0, měli byste vždy, když použijete atribut lang, použít i atribut xml:lang se stejnou hodnotou. Pokud již používáte novější standard XHTML 1.1, měli byste místo atributu lang uvádět pouze atribut xml:lang.

Ještě se sluší zmínit, jaký by měl být obsah atributů lang, xml:lang a HTTP hlavičky content-language. Tímto obsahem by měl být kód jazyka podle RFC 1766 (alternativní zdroj). Pro češtinu je tento kód cs, pro slovenštinu sk, pro angličtinu en, pro němčinu de atd. Tento kód je u evropských jazyků často shodný s kódem země, ale jak dokládá čeština, není to pravidlem.

Příklad, ve kterém jsem shrnul pravidla o poskytování informací o jazyku dokumentu:

<!DOCTYPE html PUBLIC „-//W3C//DTD HTML 4.0//EN“ „http://www.w3.org/TR/REC-html40/strict.dtd“>
<html lang=“cs“>
<head>
  <title>Dokument</title>
  <meta http-equiv=“content-language“ content=“cs“>
  <meta http-equiv=“content-type“ content=“text/html; charset=iso-8859-2″>
</head>
<body>
  <p>Tom řekl: „<q lang=“en“>We are going to London.</q>“. Neubránil jsem se lehkému zasmání, ale naštěstí si toho nikdo nevšiml..</p>
</body>
</html>

V příštím díle se budeme zabývat zpřístupněním tabulek.