ORSIA spol. s r.o. Čs. armády 1181 562 01 Ústí nad Orlicí Petr Gregor, Jaroslav Hošek

ORSIA spol. s r.o.Čs. armády 1181562 01 Ústí nad Orlicí

Petr Gregor, Jaroslav Hošek

Deset let projektu Blind Friendly Web

Zpřístupnění webu s výsledky voleb

www.volby.cz

Zpřístupnění webu s výsledky voleb www.volby.cz

Cíl projektu:• S výsledky voleb se budou moci bez problémů seznámit

i handicapovaní uživatelé webu• Šlo nám o dosažení reálné přístupnosti webu, kdy není kladen

důraz jen na technickou stránku věci, ale jsou brány v potaz i další skutečnosti, které mají na přístupnost konkrétní webové prezentace významný vliv.


Partneři projektu:• Český statistický úřad – provozovatel portálu www.volby.cz

• ORSIA s.r.o. – autor webové prezentace

• TyfloCentrum Brno, o.p.s. – testování reálné přístupnosti

prezentace


Specifika projektu:

• Výsledky voleb jsou prezentovány převážně formou tabulkových dat• Některé z tabulek byly značně rozsáhlé; i více než 1000 buněk

v jedné tabulce (např. 18 sloupců x 63 řádků)• Některé z tabulek měly nepravidelnou strukturu• Prezentace je zatížena jednorázově značným množstvím přístupů,

v mezidobí je provoz minimální• Html kód je generován automaticky za pomocí PL/SQL procedur

uložených v databázi ORACLE


Postup prací na projektu

a) Jednodenní seminář pro programátory v TyfloCentrum Brno, o.p.s

b) Vývoj www prezentace v ORSIA s.r.o. + základní bezpečnostní testy

c) Testy přístupnosti v TyfloCentrum Brno, o.p.s

d) Optimalizace software z hlediska výkonu v ORSIA s.r.o.

e) Testy přístupnosti v TyfloCentrum Brno, o.p.s

f) Finální testy na bezpečnost portálu www.volby .cz

g) Vyhodnocení ekonomiky projektu pro tvůrce řešení

v ORSIA s.r.o. (náklady, zvýšení pracnosti atd…)


Použitá metodika

Blind Friendly Web 2.3


Výchozí stav prezentace

- grafický návrh znesnadňující přístup

Rozsáhlé tabulky s nepřehlednou strukturou

Několik tabulek vnořených do jedné – formátování tabulkou

Chybějící nebo nedostatečná navigace na počátku stránky


Výchozí stav prezentace www.volby.cz – kód generující nepřístupný web

• Nebyly zavedeny značky pro identifikaci záhlaví tabulek• Grafické objekty určené k ovládání stránky neměly definován

alternativní textový popisek• Formátování textu bylo prováděno tabulkou• Nebyly korektně vyznačeny prvky tvořící nadpisy a seznamy • Velikost písma byla definována v absolutních jednotkách (pixel)

http://www.volby.cz/


Příklady řešených problémů s přístupností1. Všechny tabulky musí dávat smysl čtené po řádcích

Původní stav Nový stav

…


Příklady řešených problémů s přístupností

2a. Tabulky jsou zrakově postiženým lépe zpřístupněny

• V kódu jsou důsledně použity značky th, summary, caption

<table summary="Tabulka umožňuje výběr příslušného územního celku na úrovni krajů a okresů. K výběru případných dalších územních celků použijte odkazy označené symbolem X.">

<caption>Výsledky hlasování za územní celky - část Hlavní město Praha</caption> <tr> <th colspan="2" id="t1sa1">Územní úroveň</th> <th rowspan="2" id="t1sa2">Výběr<br>PM</th> <th rowspan="2" id="t1sa3">Výběr<br>obce</th> </tr>

…

<tr> <td headers="t1sa1 t1sb1"><a href="ps311?xjazyk=CZ&xkraj=1">CZ0100</a></td> <td headers="t1sa1 t1sb2">Praha</td> <td class="center" headers="t1sa2"><a

href="ps31?xjazyk=CZ&xkraj=1&xnumnuts=1100">X</a></td> <td class="center" headers="t1sa3"><a

href="ps32?xjazyk=CZ&xkraj=1&xnumnuts=1100">X</a></td> </tr>



2b. Tabulky jsou zrakově postiženým lépe zpřístupněny

• V kódu jsou důsledně použity atributy id, headers

<table summary="Tabulka umožňuje výběr příslušného územního celku na úrovni krajů a okresů. K výběru případných dalších územních celků použijte odkazy označené symbolem X.">

<caption>Výsledky hlasování za územní celky - část Hlavní město Praha</caption> <tr> <th colspan="2" id="t1sa1">Územní úroveň</th> < th rowspan="2" id="t1sa2">Výběr<br>PM</th> < th rowspan="2" id="t1sa3">Výběr<br>obce</th> </tr>

…

<tr> <td headers="t1sa1 t1sb1"><a href="ps311?xjazyk=CZ&xkraj=1">CZ0100</a></td> < td headers ="t1sa1 t1sb2">Praha</td> < td class="center" headers ="t1sa2"><a

href="ps31?xjazyk=CZ&xkraj=1&xnumnuts=1100">X</a></td> < td class="center" headers ="t1sa3"><a

href="ps32?xjazyk=CZ&xkraj=1&xnumnuts=1100">X</a></td> </tr>



3. Informace sdělované barvou nebo typem písmaPůvodní stav Nový stav

<table class="left2" summary="Tabulka zobrazuje výsledky hlasování. Postupující kandidát je označen znakem plus před svým číslem, zvolený kandidát je označen hvězdičkou. Nepostupující kandidáti mají místo počtu a % hlasů znak velké X.">

Do kódu bylo doplněno summary



5. Dostatečně kontrastní barvy popředí a pozadí

• Byla upravena barva písma• Inverzní pozadí aktivního odkazu

Původní stav Nový stav



6. Nepoužívání absolutních jednotek u velikostí písma a objektů

body { font-family: Arial, Helvetica, sans-serif; font-size: 0.7em; background-color: white; color: black; margin: 0em;}

a { text-decoration: underline;}

a:link, a:visited { color: #30AB5E;}

a:hover, a:active, a:focus { background-color:#30AB5E; color: white;}

h1 { font-size: 1.6em; text-align:center; margin: 2em 0 2em 0;}

h2 { font-size: 1.4em; text-align:left; margin: 1em 0 1em 0;}

h3 { font-size: 1.2em; margin: 0.5em 0 0.5em 0;}

h3.kraj { font-size: 1.4em; text-align:center;}

h3.cr { font-size: 1.8em; text-align:center;}



7. Validní kód stránek dle specifikace jazyka HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="cs"> <head>



8a. Definice nadpisů a seznamů pomocí značek

– ukázka nadpisu a seznamu

<h1> Volby do Evropského parlamentu konané na území České republiky<br>ve dnech 05.06. - 06.06.2009

</h1> <div id="tlacitka">

<ul> <li><a href="ep2?xjazyk=CZ">Jmenné seznamy a přehledy</a></li> <li><a href="ep11?xjazyk=CZ">Celkové výsledky hlasování</a></li> <li><a href="ep13?xjazyk=CZ">Výsledky hlasování za územní celky</a></li> <li><a href="ep121?xjazyk=CZ">Územní přehledy o volební účasti</a></li> <li><a href="ep14?xjazyk=CZ">Rozdělení mandátů stranám</a></li> <li><a href="ep4?xjazyk=CZ">Informace o stavu zpracování</a></li> <li><a href="ep3?xjazyk=CZ">Prohlížení číselníků</a></li>

</ul>



8b. Definice nadpisů a seznamů pomocí značek

– ukázka více nadpisů

<h1> Volby do zastupitelstev obcí 15.10. - 16.10.2010 </h1> <h2> Výsledky voleb </h2> <h3> Všechna zastupitelstva </h3>



9. Smysluplné pojmenování stránekPůvodní stav Nový stav



10. Správné označení odkazů na obsah jiného typu (Např.: *.pdf)


Příklady řešených problémů s přístupností11. Drobečková navigace

Původní stav

Nový stav


Příklady řešených problémů s přístupností12. Zjednodušení rozsáhlých tabulek

Původní stav

Nový stav


Ekonomické zhodnocení

• Náklady spojené s přijetím metodiky BFW u prvního projektu:• Seznámení s metodikou a zaškolení pracovníků cca 3% z rozpočtové ceny• Zvýšené náklady na tvorbu webu cca 5%• Dodatečné náklady na testování cca 8%• Celkem cca 16% z rozpočtované ceny projektu

• Náklady spojené s přijetím metodiky BFW u dalších projektů:• Promítnutí aktualizace metodik do pracovních postupů cca 1% z rozpočtové ceny• Zvýšené náklady na tvorbu webu cca 2%• Dodatečné náklady na testování cca 6%• Celkem cca 9% z rozpočtované ceny projektu


Čísla nejsou vše

Jsme rádi, že spolu s našimi partnery z TyfloCentrum o.p.s.

můžeme alespoň malým dílem přispět:

• ke snížení nezaměstnanosti u zrakově postižených občanů• začlenění zrakově postižených občanů do společnosti• ke zvýšení počtu kvalifikované pracovní síly mezi zrakově postiženými občany

Konec prezentace ORSIA s.r.o.

dodavatel projektu www.volby.cz

pro Český statistický úřad

http://www.volby.cz/

Documents

ORSIA spol. s r.o. Čs. armády 1181 562 01 Ústí nad Orlicí Petr Gregor, Jaroslav Hošek