Århus Kommunes nye hjemmeside - en ny side af Århus Kommune!
Århus Kommunes nye hjemmeside - en ny side af Århus Kommune!
Århus Kommunes nye hjemmeside - en ny side af Århus Kommune!
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>Århus</strong> <strong>Århus</strong> <strong>Kommune</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
<strong>Århus</strong> <strong><strong>Kommune</strong>s</strong><br />
<strong><strong>ny</strong>e</strong> <strong>hjemme<strong>side</strong></strong><br />
- <strong>en</strong> <strong>ny</strong> <strong>side</strong> <strong>af</strong><br />
<strong>Århus</strong> <strong>Kommune</strong>!
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Projektplan<br />
• Opstart<br />
• Konceptudvikling<br />
• Kravspecifikation<br />
• Valg <strong>af</strong> leverandør<br />
• Arkitektur og design<br />
• Teknisk implem<strong>en</strong>tering<br />
• Organisatorisk implem<strong>en</strong>tering<br />
• Off<strong>en</strong>tliggørelse (1. marts 2010)<br />
01.03.2010<br />
HER ER VI NU
<strong>Århus</strong> <strong>Århus</strong> <strong>Kommune</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
<strong>Århus</strong> – <strong>en</strong> god by for alle<br />
Adgang for alle!
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
<strong>Århus</strong> <strong><strong>Kommune</strong>s</strong> <strong><strong>ny</strong>e</strong><br />
<strong>hjemme<strong>side</strong></strong> skal som<br />
minimum leve op til de<br />
obligatoriske standarder<br />
for off<strong>en</strong>tlige <strong>hjemme<strong>side</strong></strong>rs<br />
tilgængelighed.<br />
<strong>Århus</strong> <strong><strong>Kommune</strong>s</strong> handicappolitik
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong><br />
Borgmester<strong>en</strong>s Afdeling
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Opstart: Hvordan gør vi?<br />
• Udgangspunkt: Vi ved intet!<br />
• Kan vi stole på, at leverandørerne gør<br />
det?<br />
• Vi har brug for eksperter!
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Opstart: Tilk<strong>ny</strong>tning <strong>af</strong> ekspertvid<strong>en</strong><br />
Kvalitetssikring<br />
Styregruppe<br />
Projektledelse<br />
Leverance
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Tilgængelighed i alle faser<br />
Konceptudvikling<br />
Ekspertvurdering …<br />
Kravspecifikation<br />
Kvalitetssikring <strong>af</strong> kravspecifikation ...<br />
Valg <strong>af</strong> leverandør<br />
Ekspertvurdering <strong>af</strong> tilbud …<br />
Arkitektur og design<br />
Workshop …<br />
Teknisk implem<strong>en</strong>tering<br />
Validering og brugertest …<br />
Organisatorisk implem<strong>en</strong>tering<br />
Uddannelse og vejledning …
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Fase: Konceptudvikling<br />
Politisk<br />
Basis<br />
Værdi<br />
Kontakt<br />
Bredde<br />
Dialog<br />
Personalisering<br />
Dybde<br />
Involvering<br />
Deling<br />
Datauniformitet<br />
Brugerv<strong>en</strong>lighed Opfølgning<br />
Vækstbehov<br />
Åb<strong>en</strong>hed<br />
Selvbetj<strong>en</strong>ing Dataredelighed<br />
Tilgængelighed Service<br />
”D<strong>en</strong> digitale Maslow”<br />
Information<br />
Mangelbehov
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Fase: Konceptudvikling<br />
• Id<strong>en</strong>tifikation <strong>af</strong> pot<strong>en</strong>tielle faldgruber,<br />
eksempelvis kortløsning …
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Fase: Konceptudvikling<br />
…og kommun<strong>en</strong>s skabeloner
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Fase: Kravspecifikation<br />
• Hjemme<strong>side</strong> skal overholde<br />
retningslinier for tilgængeligt webdesign<br />
på niveau AA (kontrolpunkter med<br />
prioritet 1 og 2), jf. WCAG 1.0 (Web<br />
Cont<strong>en</strong>t Accessibility Guidelines)<br />
• <strong>Århus</strong> <strong>Kommune</strong> ønsker, at<br />
<strong>hjemme<strong>side</strong></strong>n og CMS-systemet skal<br />
leve op til krav<strong>en</strong>e i ATAG 1.0<br />
(Authoring Tool Accessibility Guidelines)
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Fase: Kravspecifikation
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Fase: Valg <strong>af</strong> leverandør<br />
• Vurderingskriterier og vægte<br />
– Pris: 35%<br />
– Funktionalitet: 35%<br />
– Implem<strong>en</strong>teringskompet<strong>en</strong>ce: 15%<br />
– Tilgængelighed: 15%<br />
• Der findes ikke utilgængelige, eller<br />
tilgængelige CMS-systemer, kun<br />
utilgængelig og tilgængelige<br />
leverandører …
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Fase: Arkitektur og design<br />
• Workshop for leverandør<strong>en</strong>:<br />
Hvad kræves <strong>af</strong> et tilgængeligt netsted?<br />
• Uvildig ekspertvurdering <strong>af</strong> design,<br />
navigationsstruktur og systemarkitektur<br />
• Ved udgang<strong>en</strong> <strong>af</strong> <strong>af</strong>klaringsfas<strong>en</strong> bliver<br />
ÅK og leverandør <strong>en</strong>ige om et sæt<br />
godk<strong>en</strong>delseskriterier for bl.a.<br />
tilgængelighed<strong>en</strong>
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Fase: Teknisk udvikling<br />
Test <strong>af</strong> tilgængelighed før overtagelse:<br />
• ekspertvurdering<br />
• automatisk validering<br />
• brugertest<br />
– baseret på godk<strong>en</strong>delseskriterier
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Uvildig test <strong>af</strong> tilgængelighed<br />
Test<br />
Styregruppe<br />
Projektledelse<br />
Leverance
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Fase: Organisatorisk implem<strong>en</strong>tering<br />
• Uddannelse <strong>af</strong> indholdsleverandører<br />
– tekniske færdigheder<br />
– ”skriv-til-nettet”<br />
• Udarbejdelse <strong>af</strong> vejledning<br />
• Organisering - arbejdsgange og roller<br />
- skal understøtte tilgængelighed<strong>en</strong>
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Når <strong>hjemme<strong>side</strong></strong>n er i drift …<br />
• Løb<strong>en</strong>de kvalitetssikring <strong>af</strong> indholdet<br />
• Evt. justering <strong>af</strong> arbejdsgange<br />
• Løb<strong>en</strong>de uddannelse <strong>af</strong> <strong><strong>ny</strong>e</strong><br />
indholdsleverandører<br />
• Uvildig test <strong>af</strong> tilgængelighed i takt<br />
med, at <strong>hjemme<strong>side</strong></strong>n udvikles<br />
yderligere
<strong>Århus</strong> <strong>Kommune</strong> Projekt Ny Hjemme<strong>side</strong> Borgmester<strong>en</strong>s Afdeling<br />
Erfaring<br />
• En overordnet, kommunal<br />
tilgængelighedspolitik ville være rar<br />
at have …
Tilgængelighed i praksis<br />
i Erhvervs- og Byggestyrels<strong>en</strong>
Om i dag<br />
Organisation<strong>en</strong><br />
Process<strong>en</strong><br />
Problemer<br />
Løsninger
Designleverandør<br />
og kodehus<br />
EBSTs web-organisation<br />
Udvikling <strong>af</strong> IA og design<br />
Webbureauer med<br />
kompet<strong>en</strong>cer ind<strong>en</strong><br />
for IA, design og<br />
opkodning<br />
EBSTs web<strong>af</strong>deling<br />
Udvikling og drift <strong>af</strong> tre<br />
store sites, intranet +<br />
diverse subsites<br />
Ca. 15<br />
sites og<br />
værktøjer<br />
Drift og udvikling i CMS, W2L<br />
It-konsul<strong>en</strong>ter og udviklere <strong>af</strong><br />
eget CMS W2L<br />
Teknisk leverandør
ARBEJDSMODEL i ERHVERVS- OG BYGGESTRELSEN<br />
Fase 1<br />
Projektopstart<br />
Fase 2<br />
Specifikation<br />
Fase 3<br />
Design<br />
Fase 4<br />
Opkodning<br />
Fase 5<br />
Implem<strong>en</strong>tering<br />
Fase 6<br />
Idrift…
Fase 1<br />
Fase 2<br />
Fase 3<br />
Fase 4<br />
Fase 5<br />
Checkpunkter i arbejdet med tilgængelighed<br />
PROJEKTOPSTART<br />
IA /WIREFRAME<br />
DESIGN<br />
HTML<br />
IMPLEMENTERING<br />
Levering fra<br />
design<br />
leverandør<br />
Levering fra<br />
design<br />
leverandør<br />
Levering fra<br />
HTML<br />
leverandør<br />
EBST<br />
Implem<strong>en</strong>terer<br />
TJEKPUNKTER<br />
Møder<br />
Kravspecifikation med HTML-krav<br />
Tidsplan med tid til test og itterationer<br />
Fungerer IA’<strong>en</strong><br />
Er flowet konsist<strong>en</strong>t?<br />
Kontrastkrav tjekkes<br />
Er designet konsist<strong>en</strong>t<br />
Tjek <strong>af</strong> at designet stemmer<br />
over<strong>en</strong>s med d<strong>en</strong> <strong>af</strong>talte<br />
wireframe / IA<br />
Test <strong>af</strong> HTML på forskellige<br />
platforme og browsere<br />
Test <strong>af</strong> leveret HTML i forhold til<br />
W3C’s prioritet 1 og 2<br />
Test <strong>af</strong> navigation, søgning,<br />
kvalitetstjek, links o.s.v<br />
W3 scanning <strong>af</strong> web<strong>side</strong>r.<br />
OBR til<br />
leverandør<br />
OBR til<br />
leverandør<br />
OBR til<br />
leverandør<br />
EBST<br />
Implem<strong>en</strong>terer<br />
LEVERANDØR<br />
Designbureau retter IA /<br />
Wireframe<br />
Der laves design udfra<br />
wirefram<strong>en</strong><br />
Designbureau retter design<br />
og s<strong>en</strong>der videre til HTML<br />
leverandør<br />
HTML-leverandør retter HTML<br />
EBST retter HTML efter<br />
implem<strong>en</strong>tering
Proces<br />
Resultat<br />
Proces<br />
Resultat<br />
FASE 1<br />
Projektopstart<br />
Mødeaktivitet og<br />
kravspecifikation<br />
(Alle)<br />
HTML-krav<br />
Procesmodel<br />
Tilbud fra<br />
designleverandør<br />
med<br />
opgavebeskrivelse<br />
, tidsplan og<br />
budget<br />
Tidsplan<br />
Et typisk projektforløb<br />
FASE 2<br />
Specifikation<br />
Specifikationsfas<br />
e, fx workshop,<br />
fokusgrupper,<br />
møder osv.<br />
IA/Wireframes<br />
G<strong>en</strong>nemgang <strong>af</strong><br />
IA/Wireframes<br />
(EBST)<br />
Godk<strong>en</strong>dt<br />
IA/Wireframes<br />
FASE 3<br />
Design<br />
Fra IA til Design<br />
(Designleverandør)<br />
Design i Photoshop<br />
G<strong>en</strong>nemgang <strong>af</strong><br />
design ift.<br />
wireframes (EBST)<br />
Godk<strong>en</strong>dt design<br />
FASE 4<br />
Opkodning<br />
Opkodning <strong>af</strong><br />
design i XHTML<br />
(HTMLleverandør)<br />
XHTML<br />
Validering<br />
(EBST)<br />
OBR<br />
Godk<strong>en</strong>dt<br />
XHTML<br />
FASE 5<br />
Implem<strong>en</strong>tering<br />
Implem<strong>en</strong>tering <strong>af</strong><br />
XHTML i CMS<br />
(Teknisk<br />
leverandør)<br />
Løsning til test<br />
Test og<br />
fejlrapportering<br />
(EBST)<br />
Fejlrettelser<br />
(HTML-leverandør<br />
og Teknisk<br />
leverandør) evt.<br />
flere gange<br />
Godk<strong>en</strong>dt løsning<br />
FASE 6<br />
Idriftsættelse<br />
Idriftsættelse<br />
(Teknisk<br />
leverandør)<br />
Publiceret løsning<br />
Tilgængelig<br />
webløsning ….
I drift og top tunet … m<strong>en</strong><br />
Vores tekniske tilgængelighed bliver vurderet til 68% i BPN
Hvorfor?<br />
Forkert placering <strong>af</strong> labels<br />
Ikke sig<strong>en</strong>de alt-tekster<br />
Ikke sig<strong>en</strong>de links
Labels?<br />
Sitet er testet ud<strong>en</strong> fejl i labels med<br />
W3C XHTML test<br />
AIS toolbar<br />
SiteImproves Sitecheck
Sitecheck viser ing<strong>en</strong> fejl i labels<br />
Html validerer i W3C<br />
AIS toolbar viser ing<strong>en</strong> fejl i labels
Web Cont<strong>en</strong>t Accessibility Report fra HiSoftware viser<br />
<strong>en</strong> fejl
Når det tilgængelige site skal driftes…<br />
+ 25<br />
redaktører<br />
Alle regioner
Vi laver <strong>en</strong> manual …
M<strong>en</strong> der går ikke mange redaktørtimer før…<br />
Det går galt med:<br />
Sig<strong>en</strong>de alt-tekster
Det går galt med:<br />
Sig<strong>en</strong>de links
Det går galt med:<br />
Tabellerne
Det går galt med:<br />
H1, H2, H3 osv
Det går galt med:<br />
Title til links
Hvad kan automatiseres?<br />
Alt- tekst og title<br />
Information i title om ”eksternt websted”<br />
Information i title om ”åbner i <strong>ny</strong>t vindue”<br />
Tagging <strong>af</strong> sprog<br />
Markering <strong>af</strong> citater<br />
Link til Wai-test<br />
Link til W3C-test
Eftercheck før publicering<br />
Politiprogram ..
Implem<strong>en</strong>tering <strong>af</strong> test i CMS
Tilgængelighedsrapport
Der er stadig udestå<strong>en</strong>der<br />
Vi kommer ikke ud<strong>en</strong> om fortsat at informere om at:<br />
Imagemap skal overholde visse krav<br />
Video/flash skal have alt-tekst som beskriver at det<br />
visuelle spor.<br />
Undgå at anv<strong>en</strong>de images til at g<strong>en</strong>give tekst.<br />
Husk markering <strong>af</strong> overskrift-kollonner i datatabeller<br />
Brug fornuftige linktekster (ikke ”Klik her” mfl.)
Change language