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

1. Deset let projektu Blind Friendly Web Zpřístupnění webu s výsledky voleb www.volby.cz ORSIA spol. s r.o. Čs. armády 1181 562 01 Ústí nad Orlicí Petr Gregor, Jaroslav Hošek

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

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

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

5. Zpřístupnění webu s výsledky volebwww.volby.cz Postup prací na projektu • Jednodenní seminář pro programátory v TyfloCentrum Brno, o.p.s • Vývoj www prezentace v ORSIA s.r.o. + základní bezpečnostní testy • Testy přístupnosti v TyfloCentrum Brno, o.p.s • Optimalizace software z hlediska výkonu v ORSIA s.r.o. • Testy přístupnosti v TyfloCentrum Brno, o.p.s • Finální testy na bezpečnost portálu www.volby .cz • Vyhodnocení ekonomiky projektu pro tvůrce řešení v ORSIA s.r.o. (náklady, zvýšení pracnosti atd…)

6. Zpřístupnění webu s výsledky volebwww.volby.cz Použitá metodika Blind Friendly Web 2.3

7. Zpřístupnění webu s výsledky volebwww.volby.cz Rozsáhlé tabulky s nepřehlednou strukturou Výchozí stav prezentace - grafický návrh znesnadňující přístup Několik tabulek vnořených do jedné – formátování tabulkou Chybějící nebo nedostatečná navigace na počátku stránky

8. Zpřístupnění webu s výsledky volebwww.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)

9. Zpřístupnění webu s výsledky volebwww.volby.cz Příklady řešených problémů s přístupností 1. Všechny tabulky musí dávat smysl čtené po řádcích Nový stav Původní stav …

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

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

12. Zpřístupnění webu s výsledky volebwww.volby.cz Příklady řešených problémů s přístupností 3. Informace sdělované barvou nebo typem písma Nový stav Původní stav Do kódu bylo doplněno summary <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.">

13. Zpřístupnění webu s výsledky volebwww.volby.cz Příklady řešených problémů s přístupností 5. Dostatečně kontrastní barvy popředí a pozadí Nový stav Původní stav • Byla upravena barva písma • Inverzní pozadí aktivního odkazu

14. Zpřístupnění webu s výsledky volebwww.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;}

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

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

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

18. Zpřístupnění webu s výsledky volebwww.volby.cz Příklady řešených problémů s přístupností 9. Smysluplné pojmenování stránek Nový stav Původní stav

19. Zpřístupnění webu s výsledky volebwww.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)

20. Zpřístupnění webu s výsledky volebwww.volby.cz Příklady řešených problémů s přístupností 11. Drobečková navigace Původní stav Nový stav

21. Zpřístupnění webu s výsledky volebwww.volby.cz Příklady řešených problémů s přístupností 12. Zjednodušení rozsáhlých tabulek Původní stav Nový stav

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

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

24. Konec prezentace ORSIA s.r.o. dodavatel projektu www.volby.cz pro Český statistický úřad