Definiční seznamy a přístupnost

Kromě odrážkových a číslovaných seznamů je součástí specifikace značkovacího jazyka HTML seznam nazývaný jako definiční. Jelikož nebývá vždy zřejmé místo jeho správného použití, je často opomíjen, přesto existuje mnoho případů, kde jej lze implementovat. Tím se může obohatit sémantická informace stránky, jež má praktický přínos i pro přístupnost.

Prvotní úvaha nad definičním seznamem končí u poznatku, že jej lze použít pro nejrůznější rejstříky a slovníčky. To potvrzují i techniky pro pravidla přístupnosti WCAG 2.0 v bodě 40 a dále bod 48 vázaný na pravidlo 1.3.1 Informace a vzájemné vztahy. Zde však možnosti definičních seznamů nekončí, což dokládá i příslušná pasáž ve specifikaci HTML, která mluví o tom, že definiční seznamy lze též použít k vyznačení dialogů. Jak takový dialog může vypadat, ukazuje jeden z rozhovorů na webu Školy pro výcvik vodicích psů.

Není nutné však zůstat ani u tohoto rozšíření a použít definiční seznam pro jakékoli informace, jež jsou ve formátu klíč / hodnota. Jinak ještě řečeno, definiční seznam lze bez obav aplikovat v případech, kdy je vysledovatelná závislost mezi informacemi v horizontálním směru, promítneme-li si informace do tabulky. Tabulka je právě tím, s čím se na webových stránkách můžeme setkat na místech, kde použití definičního seznamu je vhodnější a to zejména z hlediska přístupnosti.

Stejně tak, jako tabulkové rozvržení stránky vytvářelo nelogické vztahy mezi informacemi, vytváří tabulka nelogické vztahy u informací, jež nevyžadují pojmenování sloupců a čtení ve vertikálním směru. Definiční seznam reprezentovaný dvousloupcovou tabulkou má sice zachován vztah informací v řádku, ale předpokládá též vztah ve sloupci, jenž je pojmenován řádným záhlavím. Protože taková tabulka záhlaví neobsahuje, stává se jím automaticky první řádek (první položka definičního seznamu). Odečítací programy potom při procházení buněk jako záhlaví mylně oznamují text, který s aktuální buňkou není v žádném vztahu. U většiny odečítačů lze toto pominout, VoiceOver však domnělá záhlaví čte automaticky, což u standardních tabulek přehlednost a srozumitelnost zvyšuje, v tomto případě z pochopitelných důvodů je efekt opačný.

Pro příklad mějme seznam kontaktních údajů našeho projektu Blind Friendly Web:

tel.: 549 211 049
fax: 541 240 419
e-mail: info@blindfriendly.cz
web: www.blindfriendly.cz

Při použití definičního seznamu je vytvářen vztah mezi typem kontaktu a jeho hodnotou, zatímco při reprezentaci tabulkou je navíc nutné sloupce pojmenovat a to nejspíše tak, jak právě bylo učiněno - typ kontaktu a hodnota kontaktu. Jedná se natolik o obecné názvy, že srozumitelnosti prakticky nepomohou a ve vizuální reprezentaci překáží. Je tomu tak, neboť sloupec Hodnota kontaktu nevytváří žádný smysluplný vztah. Ten nabývá jen při současném čtení s prvním sloupcem Typ kontaktu. Navíc jak už bylo řečeno, při reprezentaci tabulkou bez záhlaví VoiceOver v tomto případě vždy u typu kontaktu bude číst z prvního řádku "tel." a u hodnoty kontaktu vždy z prvního řádku "549 211 049", takže např. v buňce s e-mailovou adresou by bylo zmateně přečteno "549 211 049 info@blindfriendly.cz".

Použitím definičního seznamu sice uvedené problémy v přístupnosti odpadnou, avšak vyvstanou nové. První z nich může být fakt, že definiční seznamy jsou specialitou HTML a že použité redakční řešení pro plnění obsahu webu neumožňuje vložit definiční seznam. Například Microsoft Word definiční seznamy nezná vůbec, Wordpress pro tuto funkcionalitu vyžaduje nainstalování příslušného doplňku Definition list.

Druhou komplikací je výchozí vzhled definičních seznamů, jenž je přizpůsoben spíše inkriminovaným slovníčkům, než obvyklým dvousloupcovým přehledům. To lze však lehce zvládnout definicí stylu, který může vypadat například takto:

dl {
float: left;
}
dl dt {
clear: both;
float: left;
width: 25%;
}
dl dd {
margin-left: 0px;
clear: right;
float: right;
width: 75%;
}

To, že definiční seznamy v HTML mají své místo a že je na ně pamatováno také jakožto na náhradu dvousloupcových tabulek bez záhlaví, dokládá jejich zachování v připravovaném standardu HTML5, kde pro větší srozumitelnost svého účelu dostaly název popisové seznamy.

Zdroje

• Definition lists – misused or misunderstood?
• Tables vs. Definition Lists

Autorem článku je Roman Kabelka