Přístupnost webu II: Jak na správnou strukturu HTML

Vladimír Kašpar , 19. prosinec 2011 10:02 2 komentářů
Přístupnost webu II: Jak na správnou strukturu HTML

V prvním článku "Jak správně na přístupnost webu" našeho seriálu jsem vám popsal základní informace o tom, co byste měli při návrhu webu pro nevidomé a další hendikepované skupiny vědět. V dnešním článku Vám ukáži rozdělení HTML layoutů, jejich specifika a jak správně HTML dokument strukturovat.

HTML šablony

HTML data webu ve zdrojovém kódu zpravidla obsahují ze shora definici DTD (Doctype), poté HTML hlavičku

<head> a ve spodní části tělo HTML dokumentu <body >, my se zaměříme zejména na část dokumentu, kde jsou obsažena zobrazovaná data tj. tělo HTML dokumentu a dnes na její specifickou část HTML šablonu (angl. layout) bez ohledu na to, jaká data web obsahuje.

HTML šablona každého webu obsahuje zejména rozdělení objektů jako je menu, datový obsah či boční panely a patička. Aby bylo čtení co nejjednodušší pro naší cílovou skupinu, je potřeba dostat v HTML kódu důležité, základní informace o stránce, co nejvýše.

HTML šablony si můžeme pro naše potřeby rozdělit do 3 typů:

1. Rámy

Každý objekt šablony je zobrazován v tagu a pomocí atributu „src“ je načítán z externího HTML souboru. Rámy, jsou již dávnou historií a dnes pro neaktuálnost této technologie se běžně nepoužívají. Načítání externích souborů tak, abychom nemuseli např. hlavičku, a hlavní menu na každé stránce, ručně vypisovat, doporučuji spíše řešit na straně serveru, kde k tomu jsou k dispozici mnohem lepší nástroje, např. skriptovací jazyk PHP a jeho funkce „include()“ a „require()“.

2. Tabulka

Objekty jsou ve stránce rozděleny skrytou tabulkou tagem

<table>, jeho řádky <tr> a jednotlivými buňkami v řádku . Tabulka nám jednoduše zajistí správné pozice a roztažnost bez použití CSS stylů. Tento způsob se zdá být velice jednoduchý pro nováčka v oboru, ale je velice nepraktický v případě, kdy chceme objekty po HTML kódu posouvat či přehazovat bez poškození grafiky webu.

3. Divy

Každý objekt šablony je zabalen do tagu

<div> a CSS styly jsou objekty umisťovány do grafiky. Divy jsou dnes nečastěji používané pro rozdělení objektů po grafice webu. V CSS stylech si můžeme „hrát“ a jednoduše prohazovat objekty v grafice tak, že například to, co vidíme v HTML kódu úplně dole, zobrazíme v grafice úplně nahoře apod. Prohazování objektů nám zjednoduší práci s rozdělením důležitého objektu pro zdravého uživatele a pro nevidomého. Budeme tento typ brát jako dnešní standard a budeme se jím zabývat i nadále.

Jak na správný HTML dokument

Každá strana webu, má dle mezinárodních standardů obsahovat hlavní nadpis stránky

<h1>, ten má být na každé stránce webu unikátní a použit právě jednou. Tag h1 nesmíme použít ve stránce vícekrát. Hlavní nadpis bychom pro nevidomé měli dát hned pod tag <body> a to tak, aby byla hendikepovanému návštěvníkovi ihned na začátku čtení dokumentu sdělena informace na jaké stránce, se která informace nachází. Pod Hlavním nadpisem by měly být hlavní data, které chceme uživateli přednést (např. když zobrazujeme článek na webu, tak text článku by měl mít v HTML kódu hned po hlavním nadpisem). Pod hlavními daty by se měla nacházet navigace (menu), které umožní uživateli další postup po webu. Až teprve po zobrazení těchto důležitých informací by měly následovat boční panely zobrazující reklamní bannery, nedůležité informace apod.

Jak správně usazovat objekty po grafice webu

Obrázek 1 - Grafické schéma ukázky

Naším dnešním cílem v ukázce bude vytvořit základní šablonu dle schématu. HTML dokument tedy bude obsahovat v horní části menu (horizontální menu). Po levé straně budeme mít Hlavní data (text) stránky, tento objekt musí být roztažitelný směrem dolů, dle objemu dat v objektu. Po pravé straně budeme mít Boční panel, pro umístění např. reklamních bannerů či nedůležitých informací. Každý web by měl mít také patičku, do které se vkládá např. definování autorských práv.

Pomocí CSS stylů „Float“

Obrázek 2 – Klasické využití Float

Ve zdrojovém kódu na obrázku 2 vidíme dnes běžný zdrojový kód HTML dokumentu, který je dle standardu W3C správně, ale pro nevidomého předkládáme Menu s Reklamním bannerem před daty, které ve skutečnosti chtěl vědět. Musí tedy zbytečně čekat, až mu hlasový syntezátor přečte informace výše uvedené, než se dostane k informaci, kterou chtěl a pak doufat, že čekání nebylo zbytečné a dostal důležitou informaci.

Absolutní pozicování a přehození pořadí objektů

Obrázek 3 - Absolutní pozicování

Na obrázku 3 vidíme HTML dokument s využitím absolutního pozicování. Tímto stylem zápisu můžeme upřednostnit v pořadí náš hlavní nadpis stránky s hlavním textem stránky před ostatními objekty, přitom v grafice pro zdravého uživatele zobrazujeme Menu stále v horní části stránky. Pokud objektu nastavíme v CSS stylech position:absolute; říkáme tím, že objekt bude nastaven v pozici od horního levého rohu prohlížeče a můžeme poté využít styly top a left.

Pokud jeden z rozměrů nenastavíme, tak se bere z aktuální pozice objektu, můžeme této funkcionality využít v případě, kdy chceme jako v tomto případě dostat v grafice objekt úplně nahoru nastavením position:absolute;top:0;

Pro objekty hlavní text stránky a boční panel, musíme poté nastavit odsazení shora dle výšky menu pomocí margin-top. Pro zachování roztažnosti objektu s hlavním textem je potřeba patičce opět nastavit vyčištění float CSS stylem clear:both. Nevidomému hlasový syntezátor začne ze shora číst hlavní nadpis a hned poté hlavní text stránky, uživatel tedy není trápen pro něj nedůležitými informacemi.

A co SEO?

Pokud použijeme absolutní pozicování a do hlavního nadpisu stránky (html tag "h1") vložíme klíčové slovo, na které chceme optimalizovat stránku pro vyhledávače, připravíme si vhodně strukturovaný a optimalizovaný text do objektu pro hlavní text stránky. Tak jsme vyhráli dvakrát, protože jsme připravili stránku pro jednoduché čtení hendikepovanými uživateli a ještě jsme si pomohli u marketingové záležitosti jako optimalizace pro vyhledávače.

Na další díly seriálu se můžete těšit po Novém roce.

Vladimír Kašpar

Vladimír Kašpar

Autor pracuje na pozici senior software developer ve firmě Effectix.com.


Komentáře

Jan Elznic #1
Jan Elznic 30. prosinec 2011 08:53

Myslel jsem, že se z článku dozvím něco o přístupnosti webových stránek (aplikací) pro nevidomé či slabozraké, ale článek spíše pojednává o teoretických základech kódování v HTML. Jaká část z toho článku tedy vlastně má něco konkrétně společného s přístupností?

Patrik Kaspar 31. leden 2012 10:04

Jde o základní kódování, to je jasný, nicméně proč pro manažery, markeťáky a IT manažery psát o stránkách pro nevidomé?
Jde o autora z firmy SEO, čili je jasné, jaká přístupnost by to asi měla být ;-)

RSS 

Komentujeme

Bezpečnost IT a tygří logika

Pavel Houser , 14. únor 2017 11:00
Pavel Houser

Jak praví známý vtip, běží-li za vámi tygr, netřeba se pohybovat rychleji než šelma – stačí předběhn...

Více






Kalendář

22. 02. IT mezi paragrafy
20. 03.

24. 03.
CeBIT 2017
25. 03. INSPO 2017
RSS 

Zprávičky

Majitel Snapchatu jde na burzu s nižší hodnotou, než se čekalo

ČTK , 18. únor 2017 09:00

Americká společnost Snap, která provozuje populární mobilní aplikaci Snapchat pro sdílení fotografií...

Více 0 komentářů

Rozšířená realita pro marketing a výdaje na bezpečnost IT kvůli požadavkům EU

Pavel Houser , 18. únor 2017 08:35

Co vlastně obnáší pojem "digitální transformace podniků"? A co z toho vyplývá dle prognóz IDC?...

Více 0 komentářů

Do roku 2020 vznikne v ČR 1200 stanic pro elektromobily

ČTK , 17. únor 2017 09:00

Do roku 2020 by mělo v Česku vzniknout celkem 1200 napájecích stanic pro elektromobily. Po setkání s...

Více 1 komentářů

Starší zprávičky

ČTÚ: Zákaz individuálních cen volání zakonzervuje odvětví

ČTK , 17. únor 2017 07:00

Zákaz individuálních cen volání pro spotřebitele, který obsahuje návrh novely telekomunikačního záko...

Více 0 komentářů

Ústečan platil falešnými eury, objednal si je na internetu

ČTK , 16. únor 2017 16:30

Případ padělaných bankovek nakoupených přes internet objasnili kriminalisté v Ústeckém kraji. Falešn...

Více 3 komentářů

Buffetova investiční firma prudce zvýšila svůj podíl v Applu

ČTK , 16. únor 2017 14:00

Investiční společnost Berkshire Hathaway amerického miliardáře Warrena Buffetta v posledním čtvrtlet...

Více 0 komentářů

Čistý zisk výrobce počítačů Lenovo klesl o 67 procent

ČTK , 16. únor 2017 11:00

Čistý zisk největšího světového výrobce osobních počítačů Lenovo Group ve třetím fiskální čtvrtletí ...

Více 1 komentářů