presentatie webrichtlijnen
DESCRIPTION
Een presentatie over webrichtlijnen door Bas Rozema. Deze presentatie vond plaats op een FAS (Friday Afternoon Session) bij mediaCT.TRANSCRIPT
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'.
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?
Toegankelijk = boooringgg!
Hoe maak je een website dan nog interessant? Ik mag geen javascript gebruiken, geen flash,
geen $nextbigthing, [...]
Lagen
HTML: voor je documentstructuurCSS: voor de vormgeving
Javascript: introduceert gedrag
plugins: geven een rijkere ervaring
Documenstructuur (HTML)
Structureer je document op volgorde van belangrijkheid. Gebruik semantische HTML.
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>
Inhoud
<!-- tekst structureren -->
<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>
<!-- Een division. Gebruik om elementen logisch te groeperen -->
<div id="inhoud">
Hoe dan niet?
<!-- introduceert vormgeving -->
<p style="color:red">Deze paragraaf is rood!</p>
<!-- introduceert gedrag -->
<a onclick="followLink(this)">Klik hier!</a>
<!-- zegt iets over weergave -->
<sup>Mooi klein tekstje</sup>
Werkwijze
Begin met bepalen van belangrijkheid, voeg betekenis aan je inhoud toe en groepeer
als laatste.
Zichtbaar?
Houd alle informatie beschikbaar als de bezoeker geen ondersteuning voor scripting
heeft.
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="[]" 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){
showSlide(this) });
})
/* klasse */
.slide {position:absolute;top:0;left:0;
}
$nextbigthing?
HTML/CSSBouw een formulier met een file input.
Ondersteuning voor scriptingZorg met javascript dat de gebruiker meerdere
files kan toevoegen.
Deze werkwijze?
Voldoe aan standaarden, gebruik progressive enhancement en je voldoet voor 90% aan
webrichtlijnen.