�ݺ�ߣ

Inhoud

Wat zijn webrichtlijnen, waarom zouden we
daar iets mee moeten en hoe doe je dat dan?

Webrichtlijnen?

30 juni 2006: de Tweede kamer neemt het
'Besluit Kwaliteit Rijksoverheidswebsites' Alle
nieuw te maken websites van de rijksoverheid
dienen te voldoen aan de 'Richtlijnen voor de
toegankelijkheid en duurzaamheid van
overheidswebsites'.

Webrichtlijnen?

125 regels en een set van toetsen

(slide 1 of 125)

Wat zijn webrichtlijnen?

Richtlijnen om een duurzaam
toegankelijke website te bouwen

Duurzaamheid

Informatie is voor langere tijd vindbaar en
doorzoekbaar: informatie is archiveerbaar.

Toegankelijkheid

Iedereen moet toegang hebben tot de
informatie en diensten die je aanbiedt

Wie is iedereen?

Gehandicapten?

Mensen met een functiebeperking

Blind (slechtziend?), spastisch (parkinson?,
reuma?), kleurenblind, oud(er), laaggeletterd,
[…]

Mensen met een functiebeperking

Blind (slechtziend?), spastisch (parkinson?,
reuma?), kleurenblind, oud(er), laaggeletterd,
[…]

Tritanopia (ongevoelig voor blauw)

Technologische beperkingen

CSS, Javascript, andere browser, telefoon,
PDA,Spelconsole, Java, Flash (ipad/iphone),
Sliverlight, $nextbigthing?

Wat doen webrichtlijnen?

Webrichtlijnen garanderen kwaliteit.

Kwaliteit?

Kwaliteit = voldoen aan een algemeen
geaccepteerde norm

Kwaliteit?

Kwaliteit = meetbaar

Toegankelijk = boooringgg!

Hoe maak je een website dan nog interessant?
Ik mag geen javascript gebruiken, geen flash,
geen $nextbigthing, [...]

Interessant maken

Geen excuus om dan maar een
slechte website te bouwen.

Gelaagd bouwen

Oplossing: bouw in lagen, het principe van
"progressive enhancement"

Lagen

HTML: voor je documentstructuur
CSS: voor de vormgeving
Javascript: introduceert gedrag

plugins: geven een rijkere ervaring

Documenstructuur (HTML)

Structureer je document op volgorde van
belangrijkheid. Gebruik semantische HTML.

Volgorde?
kop

menu inhoud

voet

Volgorde?
<html>
<head>[...]</head>
<body>
<div id="main">
<div id="kop">
[...]
<div>
<div id="menu">
[...]
<div>
<div id="inhoud">
[...]
<div>
<div id="voet">
[...]
<div>
<div>
</body>
</html>

Volgorde?
<html>
<head>[...]</head>
<body>
<div id="main">
<div id="inhoud">
[...]
<div>
<div id="menu">
[...]
<div>
<div id="kop">
[...]
<div>
<div id="voet">
[...]
<div>
<div>
</body>
</html>

Semantische HTML

Semantiek = betekenis

Betekenis

HTML tags vertellen iets over de inhoud van
het element.

Inhoud



<h1>Dit is de belangrijkste kop</h1>
<p class="introductie">
Dit is een paragraaf met een <strong>stukje nadruk</strong>
</p>
<address>hier kan ik een adres kwijt</address>



<div id="inhoud">

Hoe dan niet?


<p style="color:red">Deze paragraaf is rood!</p>



<a onclick="followLink(this)">Klik hier!</a>



<sup>Mooi klein tekstje</sup>

Werkwijze

Begin met bepalen van belangrijkheid,
voeg betekenis aan je inhoud toe en groepeer
als laatste.

De volgende laag: css

Zorg dat alles opgemaakt en zichtbaar is.

Zichtbaar?

Houd alle informatie beschikbaar als de
bezoeker geen ondersteuning voor scripting
heeft.

Scripting

Gebruik event-based scripting om gedrag te
introduceren en vormgeving aan te passen

Event-based scripting

De browser geeft een seintje als er iets
gebeurd. Haak daarop in.

Inhaken op events

Browser heeft document geladen: zet
vormgeving, voeg ander gedrag toe.

Events, vormgeving en gedrag
<h2 class="extra">Diashow navigatie</h2>
<ul id="dianavigatie">
<li><h3><a href="#dia1">Dia 1</a></h3></li>
[...]
</ul>

<h2 class="extra">Diashow afbeeldingen</h2>
<ul id="diashow">
<li id="dia1">
<img src=/slideshow/presentatie-webrichtlijnen/4718841/"[]" alt="mooi plaatje" />
</li>
[...]
</ul>

Events, vormgeving en gedrag
// Met behulp van jQuery

$(document).ready(function(){

$('#diashow li').addClass('slide');
$('#dianavigatie h3 a').click(function(event){
show�ݺ�ߣ(this)
});

})

/* klasse */

.slide {
position:absolute;
top:0;
left:0;
}

$nextbigthing?

HTML/CSS
Bouw een formulier met een file input.

Ondersteuning voor scripting
Zorg met javascript dat de gebruiker meerdere
files kan toevoegen.

$nextbigthing?

Ondersteuning voor plugin?
Gebruik de flash/java plugin om de dialoog te
openen.

Deze werkwijze?

Voldoe aan standaarden, gebruik progressive
enhancement en je voldoet voor 90% aan
webrichtlijnen.

�ݺ�ߣ

Presentatie webrichtlijnen

Recommended

More Related Content

Similar to Presentatie webrichtlijnen (20)

More from Tjitte Folkertsma (9)

Presentatie webrichtlijnen