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
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
3. Divy
Každý objekt šablony je zabalen do tagu
Jak na správný HTML dokument
Každá strana webu, má dle mezinárodních standardů obsahovat hlavní nadpis stránky
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.
Související příspěvky
Europoslanci vyzvali k zákazu sociálních sítí pro osoby mladší 16 let (aktualizováno)
Poslanci Evropského parlamentu dnes vyzvali k výraznému zvýšení ochrany nezletilých na internetu, včetně zákazu
Americký výrobce počítačů HP se chystá do roku 2028 propustit až 6 000 lidí
Americký výrobce osobních počítačů HP se kvůli zefektivnění provozu a zavádění umělé inteligence (AI)
Meta jedná o investici miliard dolarů do čipů Googlu
Americká společnost Meta Platforms, která vlastní mimo jiné sociální síť Facebook, jedná s Googlem
ČTÚ začne zřejmě od poloviny příštího roku dohlížet na používání AI v Česku
Český telekomunikační úřad bude pravděpodobně od poloviny příštího roku dohlížet na používání umělé inteligence
Čínský internetový prodejce Alibaba zvýšil čtvrtletní tržby, zisk předčil odhady
Čínský internetový prodejce Alibaba Group Holding zvýšil čtvrtletní tržby meziročně o pět procent na
Amazon plánuje posílit AI infrastrukturu pro vládu USA za 50 miliard dolarů
Technologická společnost Amazon plánuje investovat až 50 miliard USD (více než jeden bilion Kč)
Pojišťovny se snaží stáhnout z krytí rizik spojených s AI
Některé pojišťovny se začínají stahovat z pojišťování rizik spojených s umělou inteligencí (AI). Rostou
AI podle ruského bankéře může poskytnout vliv srovnatelný s jadernými zbraněmi
Země, které si dokážou vybudovat vedoucí pozici v oblasti umělé inteligence (AI), získají díky
Zpráva dne
Neděste se upgradu: Windows 11 Pro na Halloween jen za €20.00 na Goodoffer24
Halloween je tady a s ním i strašidelné ceny za software! Tak neváhejte a...
Neocloudy – nové slovo, prudký růst?
Opět se vše točí kolem GPU a AI. Poskytovatelé cloudových služeb nového typu („neoclouds“) mají v...