Naar aanleiding van een artikel over accesskeys op nono.
Net zoals je informatie toegankelijk kunt maken voor computers met eRDF, mag je de mensen zélf niet vergeten (voor wie de informatie eigenlijk bestemd is).
Hoe begin je hieraan?
Toegankelijkheid voor mensen is minstens even belangrijk als voor zoekmachines.
Je zal ook merken dat toegankelijkheid en zoekmachine optimalisatie enkele raakvlakken hebben, want Google en co zijn tenslotte belangrijke blinde gebruikers.
Let wel, toegankelijkheid geldt niet alleen voor (kleuren)blinde mensen 
.
Lijstjeswaarschuwing : Er volgt nu een relatief lange lijst over hoe je een website leesbaar/toegankelijk kan maken voor iedereen.
- Foutloze (x)Html schrijven.
- Structuur en opmaak scheiden, zorg ervoor dat gebruikers zonder javascript de website ook kunnen gebruiken én dat je website logisch ingedeeld is (Informatie Architectuur).
- Zorg voor nuttige/betekenisvolle linktekst (geen klik hier dus), leg relaties tussen je html documenten met het rel en rev attribuut, gebruik zinvolle classnames (gebruik eventueel microformats om informatie aan te duiden).
- Maak dat je gebruikers altijd weten waar ze zich precies op je website bevinden.
- Gebruik het alt attribuut om aan te duiden wat er precies wordt getoond in een afbeelding (beschrijving), indien je wil duidelijk maken wat de afbeelding daar doet in je document gebruik je het title attribuut.
- Duid in je documenten duidelijk het verschil aan tussen inhoud en navigatie (gebruik hiervoor eventueel skiplinks, in combinatie met één van de volgende:
- <div>isions (id) die je met mate gebruikt.
- een link (id en name) in combinatie met een horizontale lijn <hr />.
- Vermijd tabellen voor opmaak, maak gebruik van zinvolle elementen om je data aan te duiden.
- Bij steeds weerkerende elementen in je website, kan je overwegen om numerieke accesskeys te gebruiken om het gebruiksgemak te verhogen indien deze duidelijk worden aangeduid in je design.
- Liefst niet alleen kleuren gebruiken om veranderingen op een pagina aan te duiden (bijvoorbeeld bij :hover)
- Alleen linktekst mag onderstreept zijn, je wil toch niet dat mensen op je gewone onderstreepte tekst beginnen klikken?
- Zorg minstens voor een minimum lettergrootte van 11 punten, bij voorkeur 12 punten.
- Tekst mag niet te breed worden (geen 60~70 woorden op één rij), zorg voor voldoende witruimte zowel horizontaal als verticaal én gebruik een leesbaar lettertype met niet al teveel krulletjes (bij voorkeur een schreefloos lettertype zoals Verdana of Arial).
- Wanneer je veel met Flash werkt, zorg er dan voor dat je een tekstuele versie in (x)Html klaar hebt voor de plug-in loze mensen.
- Gebruik liefst geen bewegende afbeeldingen, of als deze informatie bevat liefst ééntje per pagina.
- Een formulier bevat het liefst <fieldset>s in de plaats van <div>isions mét een passende <legend>, input velden kan je voorzien van een standaardwaarde, een title attribuut en een beschrijvend label waar eventueel het invoermasker in wordt vermeld. Bij eventuele fouten zorg je dat er duidelijk vermeld wordt wat er waar verkeerd ging, en zorg je dat de gegevens geen 2e keer moeten ingevoerd worden. Een reset knop is nergens goed voor dus laat je best weg uit je formulieren.
- Zorg dat de andere (algemenere) foutmeldingen op je website ook in duidelijke mensentaal worden opgesteld.
- Vermijd dat links in een nieuw venster openen, en zorg ervoor dat ze gemakkelijk terug kunnen naar waar ze vandaan kwamen met de back knop.
- Bij het afdrukken van een pagina zorg je ervoor dat alleen de informatie wordt afgedrukt, en niet de advertenties/navigatie/irrelevante zaken. De usability hiervan is iets anders.
- .. toegankelijkheid is nooit af
Wat doen jullie om het web een zo aangename, toegankelijk mogelijke plaats te maken?
Wat betreft je één-na-laatste punt:
“Bij het afdrukken van een pagina zorg je ervoor dat alleen de informatie wordt afgedrukt, en niet de advertenties/navigatie/irrelevante zaken. De usability hiervan is iets anders.”
Hoe zorg je daar precies voor? Ik wist niet dat je dit kon beinvloeden.
@ Vincent
Je kunt bij het gebruik van stijlbladen (dus CSS) meegeven voor welk type media de stijl bedoeld is. Een goed (Engelstalig) artikel hierover op A List Apart.
En voor de rest ben ik blij dat ik al die puntjes al wist
@ Vincent: Een goed Nederlandstalig artikel hierover kan je ook op Nono terugvinden.
@ Michael: Ben zo vrij geweest de link in je comment te fiksen, hope you don’t mind
?
Merci iedereen. Het werkt ook nog in vrijwel alle browsers lees ik. Verrassend
Als het allemaal een beetje lang duurt kan je nog altijd een tussenpaginatje maken hé
http://c2bsoft.wordpress.com/2007/01/04/upgrade-redemption-website/
Heb net eens de tijd gehad om uw post eens volledig door te nemen. Ooit had ik het ingenieuze plan om ook ‘webdesigner’ te worden. Ik kocht toen enkele (nu ja, enkele…) boeken, maar sindsdien herken ik er bijna niets meer van. divisions en fieldsets en what ever, dat lijkt me toch allemaal redelijk nieuw.
Wat ik niet begrijp is volgend puntje :
>Vermijd dat links in een nieuw venster openen, en zorg ervoor dat ze >gemakkelijk terug kunnen naar waar ze vandaan kwamen met de back >knop.
Waarom dan? Ze zijn dan opeens, floep, weg van uw website en velen zullen uw site niet onmiddellijk terug vinden toch? Even testen? Bezoek hier mijn muziekblog : http://www.c2bmusic.wordpress.com . Dus als een bezoeker van uw blog op deze link geklikt heeft is de kans groot dat hij uw blog niet meer terugvindt. Of heb ik het verkeerd op?
Wel, dat het slecht is voor je pageviews is een feit (verdoken reclame voor een blog, iemand?
). En sommige bezoekers zullen inderdaad niet meer terugkeren omdat ze zodanig zullen opgaan in de inhoud van je muziekblog.
Maar toegankelijk is het wel, want nadat de bezoekers bijvoorbeeld op een link in een artikel geklikt heeft om iets te verduidelijken, kan deze zonder veel problemen naar je artikel terugkeren zonder zich te moeten afvragen waarom de back knop opeens niet meer werkt (lees: link in een nieuw venster geopend).
Het spreekt voor zich dat minder visueel ingestelde mensen hier meer moeite mee zullen hebben dan de dagelijkse internetgebruikers. Hoe interessanter je artikel is, des te groter is de kans ook dat ze zullen terugkeren om het verder te lezen
.
Btw, een <div>ision is een tag om je inhoud structureel in te delen, met als minpunt dat deze structurele tag op zich geen inhoudelijke betekenis heeft voor je document.
Een <fieldset> is een element dat soortgelijke formuliervelden groepeert, waarbij de ‘categorie’ waaronder ze vallen in een <legend> tag verduidelijkt wordt.
Bijvoorbeeld:
<form ...><fieldset><legend>Contactgegevens</legend>
Hier komt dan een input veld voor bvb je naam, email adres en dergelijke
</fieldset></form>
Een verborgen link naar mijn muziekblogje zou ik het zeker niet willen noemen. Ik vroeg me dus werkelijk gewoon af waarom een hey hier sta ik niet meer goed zou zijn. Weet je zelfs dat in .net (dot net) de tag <a> geen attribuut meer heeft die target noemt. Nu weet ik dus waarom.
En toch vind ik het geen goed idee dat een pagina steeds in dezelfde pagina geopend wordt. Waarom komen al die browsers tegenwoordig dan met tabs? Ik open de meeste linken dus in een nieuwe tab door rechts te klikken op de link en te kiezen voor – openen in een nieuwe tab. Zo weet ik nog altijd waar ik gestart ben. Want geeft toe, een zoekopdracht kan je soms ver van je uiteindelijke zoekopdracht brengen – of niet?
Tag gefixt
, als je hier geen erg in hebt tenminste?
De kracht van het internet schuilt juist in de verwijzingen naar andere (gerelateerde) webpagina’s, waardoor het belangrijk is dat bezoekers zelf kunnen bepalen hoe ze deze documenten willen openen in hun browser.
Niemand wil toch dat een website voor jou bepaalt als een link wél of niet in een nieuw venster geopend wordt, dat kies jij (De
klantbezoeker is koning enzo).En tabs zijn inderdaad een handige feature, op m’n schootcomputer gebruik ik hiervoor ctrl + klik, en wanneer er een volwaardige computermuis voorhanden is de middenste muisknop. Want waar eindigt zo’n zoekopdracht he
Nee, zeker niet. Niemand die zelfs weet dat er ooit een fout stond in mijn post
.
en tot morgen op één of andere gezellig medium.
Maar daar gaat het niet over natuurlijk. Ik wil ook niet bepalen waar een surfer naartoe gaat, die surft toch mee met de wind. Maar de standaarden veranderen altijd maar en ik kan gerust nog volgen (omdat ik dat wil) – maar neem van mij aan dat ouderen het echt wel moeilijk hebben met de steeds veranderende standaarden. Zouden ze zelfs weten wat een back button in hun browser is? Maar ja, van zo een bezoekers (senioren) moet een website het niet hebben zeker? ‘t Is maar een eigen interpretatie nietwaar. Goede nacht nog
Aiaiai, Christophe – ik ga je eens moeten meenemen op een echte user testing.
Bijna alles wat je opnoemt zijn typische developer fouten.
- Waar de doorsnee gebruiker het meest mee sukkelt tijdens user testen: om het even wat in een nieuw scherm opent. Consequent, altijd, voortdurend.
- Back button niet gekend? Als je klikpatronen analyseert, zie je dat minimum 50% van de kliks bij ie-de-re gebruiker op de back button is.
- Senioren niet belangrijk voor een website? De silver surfers zijn één van de belangrijkste doelgroepen op het web (ze hebben tijd + geld). En voor hen is usability en toegankelijkheid NOG belangrijker.
Oké, ik ben overtuigd
Maar ik hou Bart er aan om eens een user testing te mogen meemaken.