Pravidla tvorby pístupného webu. Zpracovala Kristýna Knapová. Obrázky. Kaskádové styly CSS. Javascript. Obrázky dekoraní

Transkript

1 Pravidla tvorby pístupného webu Zpracovala Kristýna Knapová V tomto dokumentu bych cht1la popsat pravidla tvorby p3ístupného webu. Pro7 v8bec takové stránky vytvá3et jste se mohli dozv1d1t v minulé kapitole. Te; následují již konkrétní pravidla. Text napsaný kurzívou v uvozovkách je cita3í p3ímo 7eských s pravidel p3ístupného webu. Obrázky Každý obrázek vkládaný tagem <img>, který nese významové sd1lení, musí obsahovat atribut alt, ve kterém bude alternativní text obrázku. <img scr=".." width=".." height=".." alt="alternativní text" /> U ilustra7ních obrázk8 ve zprávách nepopisujeme p3esný obsah, ale píšeme nap3. Ilustraní foto. Obrázky dekoraní Obrázek vkládaný tagem <img>, který nenese významové sd1lení, tedy je pro dekora7ní ú7ely nechává atribut alt prázdný. <img scr= ".." width= ".." height=".." alt="" /> Lepší je však grafiku odd1lit pomocí CSS (background:url(zaobleni.gif)). Obrázky s velkým množstvím informací Sem pat3í nap3íklad grafy statistik. Tag <img> bude krom1 atributu alt obsahovat ješt1 atribut longdesc, kde bude URL s delším popisem obrázku. <img scr= ".." width= ".." height=".." alt="krátký popis obrázku" longdesc= "graf.html" /> Obrázky ve formulái a klikací mapy Obrázek, který je formulá3ovým tla7ítkem, zase musí obsahovat atribut alt <input type="image" scr= ".." alt="textové vyjád(ení tlaítka" /> Aktivní 7ást obrázkové mapy také obsahuje atribut alt <area shape= ".." coords= ".." href=".." alt="textový popis oblasti" /> Kaskádové styly CSS Stránka musí být pln1 funk7ní a ovladatelná bez použití kaskádových styl8 Problémy: Pozicování (v HTML kódu se nesmí projevit) Kombinace barvy pozadí a pop3edí (obojí css, ne jedno v css a druhý html) Kombinace pr8hledného obrázku v pop3edí a konkrétní barva pozadí Javascript Stránka musí být pln1 funk7ní a ovladatelná bez Javascriptu Problémy Rozbalovací menu (aktivní hlavní odkaz, ve kterém jsou rozbalené odkazy) Vypisovaní informace Javascriptem (užití <noscript>) Odkazy 3ešené Javascriptem musí být funk7ní i bez n1j (typicky otvírání obrázku do nového okna) Kristýna Knapová Strana

2 FLASH Stránka musí být pln1 funk7ní a ovladatelná bez flashe. M1 osobn1 p3ijdou stránky ve flashy jako práce navíc. Flashové prvky by m1li mít alternativní obrázek a alternativní text. <objekt type="application/x-shockware-flash" data= "flash.swf" width="" height="" /> <param name="movie" value="flash.swf"> <img scr="alter-obr.jpg" width=".." height=".." alt="alternativní text" /> </objekt> Pokus stránka obsahuje flashové intro, musí být možné ho p3esko7it. Indexová stránka, kde se lze rozhodnou, kterou verzi použijete (FLASH nebo HTML) musí být v HTML. Odkazy na webu Každý odkaz musí být ozna7ený tak, aby bylo jasné kam vede. Ozna7ení je text mezi tady <a> </a>. Je vhodné použít atribut title. Odlišení odkazu od okolního textu nesmí záležet pouze na barv1. Ideální je zachovávat podtržení. Na odkazy s jinými soubory než HTML stránky musí být upozorn1no nap3íklad typem a velikostí souboru. Na stránce by nem1lo být více odkaz8 se stejným ozna7ením, která vedou na r8zná místa. Stejné odkazy odlište atributem title P3. Odkazy na pokra7ování 7lánku nebo zprávy (Read more, Full story, ) Navigace Uživatel musí na pohled rozeznat, které odkazy slouží jako navigace. Musí být odd1lena od obsahu stránek. Musí být srozumitelná, krátká a stejná na všech stránkách. Pokud je navigace rozsáhlá a umíst1ná na za7átku stránky, m1lo by být možn1 ji skrytým odkazem p3esko7it. Pokud je naopak nejd3íve obsah, m1lo by být op1t možné p3esko7it na navigaci. V navigaci by m1l být odkaz na titulní stránku. Pokud je web rozsáhlý, je dobré uvést cestu, kde bude vid1t úroveo stránky Mapa webu Pro rozsáhle weby se stává již nutností. I zkušení uživatelé se pot3ebují rychle zorientovat, ale pro handicapované je mapa nutností. Na mapu umíst1te všechny odkazy na stránky, co jsou pro uživatelé p3ístupné pomocí navigace. Klikací mapa Existují dva typy obrázkových klikacích map na stran1 klienta a serveru. Mapa na stran klienta Obsahuje informace o cílových místech ve zdrojovém kódu, p3ístupná bude p3i použití atributu alt. Mapa na stran serveru Žádné informace o cílovém míst1 neobsahuje, pouze sou3adnice kurzoru. Sama o sob1 být p3ístupná tedy nem8že, proto se ji snažte nahradit mapou na stran1 klienta, pokud to jinak nejde, musíte použít alternativní textové odkazy, která vedou na místa, kam jinak vedou jednotlivé odkazy z klikací mapy. Rámy Pro p3ístupný rám musíte použít atribut name a každý rám pojmenovat. V1tšinou jednoslovné pojmenovaní nesta7í, proto je vhodné použít atribut title pro bližší popis. Osobn1 si ale myslím, že je lepší se vyhnout rám8m úpln1, už jen z hlediska vyhledava78 a indexovacích robot8. Element TITLE Element title je jednou z nejd8ležit1jších v1cí na stránce, a proto by ho m1la každá stránka obsahovat. Mezi zna7kami <Title> je umíst1ný text, který stru7n1 a jasn1 popisuje obsah stránky. Pokud obsahuje pouze název stránky, je to nedosta7ující. Element title je vid1t hlavn1 ve vyhledáva7i, v historii, v záložkách Kristýna Knapová Strana

3 Ovládání stránky Stránku ovládá p3ímo uživatel "Obsah www stránky se m+ní jen, když uživatel aktivuje n+jaký prvek" Proto je dobré vyhnout metazna7ky refresh Formulá&e Každý ovládací prvek formulá3e by m1l obsahovat n1jaký popisek, který informuje uživatele, jak s ním má zacházet. Pro popisek používejte tag <label> a svázání s p3íslušným prvkem atributy for a id. Jestliže popisek formulá3ového prvku nelze na stránku umístit a nebo vyplívá z kontextu, snažte se p3esto popisek do HTML kódu umístit a skrýt ho nap3íklad pomocí CSS nebo pomocí atributu title p3ímo vložit do zna7ky (tagu) ovládacího prvku IP Adresa : <input type= text size= 5 title= První trojíslí >. <input type= text size= 5 title= Druhé trojíslí >. <input type= text size= 5 title= T(etí trojíslí >. <input type= text size= 5 title= 3tvrté trojíslí > Rozsáhlé formulá3e se rozd1lují do menších logických celk8 k sob1 pomocí prvku <fieldset> a popisují pomocí prvku <legend> Dlouhé nep3ehledné výb1rové seznamy (prvek <select> s položkami <option>) se také rozd1lují do menších logických celk8 pomocí prvku <optgroup> a do atributu title tohoto prvku se vkládá nadpis dané 7ásti Tabulky Každá tabulka ur7ená jak pro rozvržení obsahu na stránce tak pro tabulková data musí dávat smysl p3i 7tení po 3ádcích zleva doprava (interpretace hlasových 7te7ek). V tabulkách, které jsou pro rozvržení obsahu na stránce se používají pouze zna7ky <table>, <tr>, <td>, zna7ky <th>, <tbody>, <tfood>, <thead> by tabulce daly nesprávný sémantický význam. Tabulka nesoucí tabulková data musí obsahovat zna7ku <th>. Ve složitých tabulkách, kde je více úrovní záhlaví a význam není dám pouze polohou v 3ádku nebo sloupci, se používají pro ur7ení vazby mezi buokami atributy headers a id. Barvy Informace, které jsou sd1leny barvou musí být dostupné i bez barevného rozlišení (Odlišení nap3. pomocí n1jakých zna7ek). Odkazy by nem1ly být odlišeny od okolního textu pouze barvou (Lepší je zachovat podtržení). Barvy pop3edí a pozadí jsou dostate7n1 kontrastní a na pozadí nejsou vzorky nebo obrázky snižující 7itelnost. Dv hodnoty kontrastu: Rozdíl jasu (0 255, min. 125) Rozdíl barvy (0 765, min. 500) Kristýna Knapová Strana

4 Vysoký konstrast Mnoho uživatel8, co mají problémy se zrakem, používají funkci Vysoký kontrast v nastavení systému Windows Píklad na textovém poli formuláe <input name="text1" type="text" value="n+jaký text" /><br /> <input name="text2" type="text" value="n+jaký text"" style="background: White;" /><br /> <input name="text3" type="text" value="n+jaký text"" style="color: Black;" /><br /> <input name="text4" type="text" value="n+jaký text"" style="background: White; color: Black;" /><br /> Normální zobrazení Zobrazení s vysokým kontrastem Sémantika HTML kódu Sémantické zna7ky v sob1 nesou význam nebo smysl textu. Pokud je na HTML stránce umíst1ný text, co má n1jaký význam, m1l by být v t1chto zna7kách. P3. <h1> <p> <cite> <strong> <blockquote> <dl> <ul> <ol> "Prvky tvo(ící nadpisy a seznamy jsou korektn+ vyznaeny ve zdrojovém kódu. Prvky, které netvo(í nadpisy í seznamy, naopak ve zdrojovém kódu vyznaeny nejsou" <h1> hlavní nadpis všechny prohlíže7e i textové ho odlišují, stejn1 tak i hlasová 7te7ka Defini7ní seznamy seznam definic s popisem (Ne)7íslované seznamy - nesou v sob1 sémantickou informaci a všechny prohlíže7e a 7te7ky ji svým zp8sobem vyzna7ují Kristýna Knapová Strana

5 Zdrojový kód Užití meta informací "V metaznakách je uvedena znaková sada dokumentu" Informace o kódování je nejd8ležit1jší a musí to být v HTML kódu první meta informace. Užití kaskádových styl$ "Pro popis vzhledu webové stránky jsou up(ednostn+ny stylové p(edpisy" Validní HTML kód "Kód webových stránek odpovídá n+jaké zve(ejn+né finální specifikaci jazyka HTML i XHTML. Neobsahuje syntaktické chyby, které je správce webových stránek schopen opravit" Písma Pouze relativní velikost Uživatel webových stránek musí mít možnost zm1nit velikost písma na stránce. "P(edpisy urující velikost písma nepoužívají absolutní jednotky" Nepoužívejte cm, mm, in, pt, pc, px Rodina písma "P(edpisy urující typ písma obsahují obecnou rodinu písma" Patková písma serif Bezpatková sans-serif Neproporciální monospace Uživatelské prost&edí Nezávislost na uživatelském prostedí "Obsah webové stránky nep(edpokládá ani nevyznauje konkrétní zpdsob použití ani konkrétní výstupní i ovládací za(ízení" Nezávislost ovládání Pro nezávislé ovládaní HTML stránky jsou d8ležité tyto v1ci: Všechny aktivní prvky jsou p3ístupné p3es klávesu TAB Všechny odkazy jsou dostupné p3es tabulátor a pomocí klávesy ENTER jdou aktivovat Nežádoucí zmny uživatelského prostedí (Pop-up okna) Webová stránka nemanipuluje bez p(ímého p(íkazu uživatele s uživatelským prost(edím Pokud se odkaz otevírá do nového okna, m1l by na to být uživatel upozorn1n Nezávislost události "V p(ípad+ skriptd a appletd zajist+te, aby ovladae událostí byly nezávislé na vstupním za(ízení" "Vytvá(ejte programové prvky jako skripty nebo applety p(ímo dosažitelné nebo kompatibilní s pomocnými technologiemi" Kristýna Knapová Strana

6 Události JavaScriptu Události závislé pouze na myši onmouseover, onmouseout, onmousedawn, onmouseup, onmousemove, onclick, ondblclick Události závislé pouze na klávesnici onkeypress, onkeydown, onkeyup Nezávislé události tzv. univerzální onfocus, onblur, onsubmit, onreset, onchange Nezávislost události Použití: Univerzální dle libosti Závislé na myši v kombinaci s událostmi klávesnice P3íklad otev3ení odkazu v jiném okn1: <a onclick= window.open(this.href,,okno);return false onkeypress= window.open(this.href,,okno);return false href= pokus.html >Odkaz v jiném okn+</a> Textový obsah webu Jednoduchý srozumitelný obsah "Webové stránky sd+lují informace jednoduchým a srozumitelným zpdsobem" Omezte odborných výraz8, cizích slov, mén1 známé výrazy Užívejte vysv1tlení odborných termín8, krátké odstavce, krátké v1ty, krátká slova Stru7nost a výstižnost je na prvním míst1 Srozumitelnost napí4 webem "Obsah ani kód webové stránky nep(edpokládá, že uživatel již navštívil jinou stránku" Rozmístní informací podle priority "Webová stránka i jednotlivé prvky textového obsahu uvád+jí své hlavní sd+lení na svém zaátku" Nadpis webu, nadpis stránky, hlavní obsah stránky, doplokový obsah stránky, navigace, pati7ka 7lenní obsahu "Rozsáhlé obsahové bloky jsou rozd+leny do menších výstižn+ nadepsaných blokd" Základní informace o webu ''Úvodní webová stránka jasn+ popisuje smysl a uel webu" Oficiální název webu, základní cíl a smysl fungování webu, název organizace 7i instituce, která web provozuje, základní kontakty na provozovatele Prohlášení o pístupnosti "Na samostatné webové stránce je uveden kontakt na technického správce a prohlášení jasn+ vymezující míru p(ístupnosti webu a jeho ástí. Na tuto webovou stránku odkazuje každá webová stránka" Kristýna Knapová Strana

7 Obsah PRAVIDLA TVORBY PÍSTUPNÉHO WEBU Obrázky 1 Obrázky dekora7ní 1 Obrázky s velkým množstvím informací 1 Obrázky ve formulá3i a klikací mapy 1 Kaskádové styly CSS 1 Javascript 1 FLASH 2 Odkazy na webu 2 Navigace 2 Mapa webu 2 Klikací mapa 2 Rámy 2 Element TITLE 2 Ovládání stránky 3 Formuláe 3 Tabulky 3 Barvy 3 Vysoký konstrast 4 Normální zobrazení 4 Zobrazení s vysokým kontrastem 4 Sémantika HTML kódu 4 Zdrojový kód 5 Písma 5 Rodina písma 5 Uživatelské prostedí 5 Události JavaScriptu 6 Nezávislost události 6 Textový obsah webu 6 Kristýna Knapová Strana