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.

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

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

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

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

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

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…)

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

Použitá metodika

Blind Friendly Web 2.3

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

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

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

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)

Zpřístupnění webu s výsledky voleb 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

…

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

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&amp;xkraj=1">CZ0100</a></td> <td headers="t1sa1 t1sb2">Praha</td> <td class="center" headers="t1sa2"><a

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

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

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

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

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&amp;xkraj=1">CZ0100</a></td> < td headers ="t1sa1 t1sb2">Praha</td> < td class="center" headers ="t1sa2"><a

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

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

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

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

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

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

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

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

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

Původní stav Nový stav

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

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

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;}

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

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

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>

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

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

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>

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

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

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>

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

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

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

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

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

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

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

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

Původní stav

Nový stav

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

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

Původní stav

Nový stav

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

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

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

Čí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