Upload
nova
View
27
Download
1
Embed Size (px)
DESCRIPTION
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. Zpřístupnění webu s výsledky voleb www.volby.cz. Cíl projektu: - PowerPoint PPT Presentation
Citation preview
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&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>
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&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>
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