Tilgængelighed

- nu en obligatorisk standard

IT-arkitekturkonferencen 2. april 2008

Morten Gade, Bysted A/S
Peter Houmann, Kompetencecenter it for alle, ITST
Morten Gade
mga@bysted.dk / 24 61 66 35 / www.mortengade.dk
Bysted A/S
www.bysted.dk
Agenda

Hvorfor tilgængelighed?
> Målgrupper, semantik, barrierer

Hvordan tilgængelighed?
> Nogle konkrete eksempler
Hvorfor tilgængelighed?
Jeg starter med at være politisk ukorrekt
 Jeg starter med at være politisk ukorrekt

Foto: http://www.flickr.com/photos/robindude/2369375145/
Men tilgængelighed handler
om mange flere end dem
Hver femte voksne dansker har
svært ved at læse og skrive.
De får også hjælp af tilgængelighed!
Og en bonusgevinst:
Det handler (også) om at
fremtidssikre jeres indhold
”Semantisk web”
The Semantic Web is an evolving extension
of the World Wide Web in which the
meaning of information and services on the
web is defined, making it possible for the
web to understand and satisfy the requests
of people and machines to use the web
content.

/ Wikipedia
Det betyder for eksempel, at man helt
automatisk kan:

Vise indholdet i forskellige sammenhænge

Downloade teksten fra jeres website som

podcast
Det lyder alt sammen
meget smart…
…men det er jo bare fremtids-
musik, og er det ikke enormt dyrt?
To klassiske barrierer for
tilgængelighed
1.
Tilgængelighed = kedeligt design
Nej, kun med en kedelig designer
2.
Tilgængelighed = besværligt og dyrt
Nej, det er faktisk ret enkelt.
1
Det handler først og fremmest om
at kode efter standarder:
XHTML og CSS
1
Det betyder, at man adskiller
form og indhold
1
Og dermed muliggør og forenkler
data-portabilitet
2
Og sekundært handler det om at
bruge sin sunde fornuft, nogle
værktøjer og nogle
tommelfingerregler
Og nu til den lovede case!
Nogle eksempler med udgangspunkt
i Bysteds BTN-løsning
(og nogle andre sites…)
btn07.globalsite.dk
Farver, farveblinde og sort/hvid

www.dreamworld-hundepension.dana9.dk

Vs.

Det er der værktøjer til!

- se f.eks. http://www.visionaustralia.org.au
 Billeder
www.kemin.dk

Vs.

<img alt="" src="/Connie_forside.jpg" <img width="235" height="155"

align="right" border="0" /> class="float" alt="Billede af en ræv"
src="/Menu/Det+g%c3%b8r+WWF/Raev">

Beskriv billedet
 Billeder som navigation!
www.parkeringdanmark.dk

Vs.

<TD style="VERTICAL-ALIGN: top"> <P <div class="banner" style="background-

align=center><A href="default.asp?id=143"
target=_self><IMG height=99 alt=""
src="http://www.parkeringdanmark.dana7.d
k/data/images/klager.jpg" width=150
border=0></A></P></TD>
image:url(/Menu/Frontpage+banner+left+1);"
><a href="/Menu/St%c3%b8t+WWF"
title="Støt WWF"><span>Støt
WWF</span></a></div>

Beskriv billedet
- og hvad hvis det er et link?
Links

Vs.

Klik <a href= <a title="Download WWF-notatet Fremtidens

"http://www.kemin.dk/Nyheder/
Abonner.htm">her</a> for at
abonnere på
natur i Danmark"
href="/Menu/Det+g%c3%b8r+WWF/Undernive
au+1">Download WWF-notatet "Fremtidens
natur i Danmark har brug for national
parker"</a> / PDF</p>

Beskriv linket!
Links
www.parkeringdanmark.dk

Konsistens – og husk farverne

Navigation

De samme ting gør sig gældende

Hvad linker vi til?
Sitemaps, søgning og andre måder at navigere på
Konsistens!
Semantisk opmærkning

www.parkeringdanmark.dk

<SPAN style="FONT-SIZE:
10pt"><STRONG>Klager</STRONG></SPAN> Vs…
Semantisk opmærkning

<h1>Om WWF</h1>

P, H1, H2, H3…

Kontekst for indhold
Beskriv data
Semantisk opmærkning (2): Microformats

Lad os lige tage et eksempel på det!

<div class="vcard">
<a class="url fn" href="http://mortengade.dk">Morten Gade</a>
<span class="tel">
<span class="value">+45 24 61 66 35</span>
<span class="type">cell</span>
</span>
<a class="email 1” href="mailto:mail@mortengade.dk">mail@mortengade.dk</a>
</div>

Der er mikroformater for bl.a. adresser,

navne, anmeldelser, cv’er, relationer…
 danishedge.dk
Editoren

<strong>Ida Marie Nissen</strong><br />

Ida Marie Nissen is a graduate from the Academy of Fine Arts, School of
Architecture. She receives a travel grant as support for a trip to New York.
Her project is about establishing a satellite or network branch of the
company &ldquo;Goodmorning Technology&rdquo; to promote future
exchange and knowledge sharing.<br /><br />&ldquo;There is no doubt that
New York is the place to be if you are looking for personal growth and
inspiration through design-related experiences. And I am!<br /><br />

Kan ødelægge det hele!

Men…

Den, der sidder i den

anden ende af editoren kan
ødelægge endnu mere!
Hvordan?
1. Tænk og tal tilgængelighed
2. Få et ordentligt CMS
3. Tal med din designer
4. Men tal først og fremmest
med din udvikler
Det er ikke så svært ☺
Og nu bliver det endnu nemmere!
Peter fortæller hvordan.