Validatie
Gevalideerd HTML5 (HyperText Markup Language) biedt de meeste kans dat een webpagina in alle typen browsers (Chrome, Firefox, Opera, Safari en Internet Explorer) correct en identiek wordt weergegeven.
Gevalideerd HTML5 zorgt er tevens voor dat een webpagina sneller wordt geladen, dan wanneer de pagina geen DTD-definitie meedraagt of vol zit met fouten in de gebruikte markup language.
Fouten in de markup language van webpagina's kunnen er tevens toe leiden dat een pagina per type browser anders wordt weergegeven. Dat is althans mijn ervaring.
Platform-onafhankelijkheid
De overdracht van informatie dient zo te verlopen dat de content zonder de gebruikte opmaak van de CSS-stylesheet leesbaar en overzichtelijk blijft. Dat is goed te testen met een zogenaamde tekstbrowser zoals Lynx of met de online-tool Web Page Backward Compatibility Viewer.
Gebruik van Lynx of Web Page Backward Compatibility Viewer presenteert de content van de webpagina's van deze site overzichtelijk en gestructureerd, zonder opmaak van de CSS-stylesheet.
Bij een goede en toegankelijke website kan de opmaak afgepeld worden, zonder dat de content qua overzichtelijkheid geweld wordt aangedaan.
In dit verband dient opgemerkt te worden, dat de content in de broncode en in het weergave-scherm van de browser identiek moet zijn. Gebruik van frames en iframes zijn ongewenst, omdat de content uit frames en iframes weliswaar in het weergavescherm wordt weergegeven, maar in de broncode van hetzelfde web-bestand niet aanwezig is en daardoor in een tekstbrowser onzichtbaar blijft, kortom ontoegankelijk door afhankelijkheid van een andere bestandsbron.
Het gebruik van de tekencode-instelling utf-8 zorgt ervoor dat de content 100% leesbaar / toegankelijk is, ongeacht welke standaard-charset de bezoeker op zijn browser ook heeft ingesteld.
Content dient verder in een platform-onafhankelijk format aan te worden aangeboden. HTML en PDF zijn daar bekende voorbeelden van. Ik zelf zou bijvoorbeeld nooit een bestand gemaakt in MS Publisher op het web zetten; niet iedereen beschikt over zo'n Windows-programma. Hiermee komt de toegankelijkheid in het geding. Ook bestanden die alleen in programma's onder Linux of OS 10 zijn volgens dit stramien ontoegankelijk op het web.
HTML structureel / functioneel gebruikt
Een toegankelijke presentatie van een webpagina vergt dat de diverse onderdelen van de content functioneel ingedeeld worden.
In de koptekst, ook wel header genoemd, staan een hoofdtitel en eventueel een subtitel. Die worden in een header-tag, h1 tot en met h6 geplaatst. De leesbaarheid wordt nog verder versterkt als binnen de h-tag ook nog een title wordt geplaatst: title="HOOFDTITEL" cq. title="SUBTITEL". Zie hiervoor de broncode van deze pagina.
In de voettekst, ook wel footer genoemd, kun je aan de start-div-tag bijvoorbeeld title="VOETTEKST" toevoegen. Bij het menu en de feitelijke tekst van de webpagina kan dezelfde procedure worden gevolgd.
HTML5 (de nieuwste versie van HTML) heeft de semantische tags header, footer, nav, article, section en aside ge-introduceerd. Elk van deze tags representeert een eigen functie; header vertegenwoordigt de koptekst, footer de voettekst, nav het menu, article met section de tekst, en aside extra informatie zoals een nieuwsflash. In de huidige HTML- en XHTML-versies beschik je alleen over de div-tag die per content-onderdeel een eigen opmaak via een id (id="header") of class="menu") uit de CSS-stylesheet genereert.
Verder is het wenselijk om bij elk soort content de juiste tags te gebruiken. Gebruik bij gewone tekst de p-tag, bij opsommingen de li-tag, bij numerieke data zoals namenlijsten en dergelijke de table-tag.
De content gepresenteerd - indeling
Het is van belang dat de boodschap van een webpagina in correct en verzorgd Nederlands wordt aangeboden. De aangeboden tekst of teksten dienen overzichtelijk te worden ingedeeld, per alinea en per thema en / of subthema. Deze aandachtspunten garanderen toegankelijkheid op inhoudelijk niveau.
De content gepresenteerd - opmaak
In het verlengde van een overzichtelijke indeling van de content, is een goede opmaak zeker wenselijk. Het schreefloze lettertype Arial vind ik erg prettig in het gebruik.
Een helder contrast tussen de voor- en achtergrondkleur is erg belangrijk. Een gele letter op een witte achtergrond is onwenselijk. Zwart op wit is het meest contrastrijk, maar wat saai. Donkerblauw op wit is vrijwel even contrastrijk maar beslist minder saai.
Kleurdefinities kunnen het beste in hexadecimale waarden zoals #ffffff voor wit, gedefinieerd worden; elke browser begrijpt die hoe dan ook.
Waardes als white of green worden meestal wel begrepen door browsers, maar hebben het nadeel dat ze slechts één kleur uit het spectrum vertegenwoordigen. Met hexadecimale waarden kunnen eindeloos kleurvarianten gekozen worden.
Wat beslist niet vergeten mag worden is, dat ook in de CSS-stylesheet de opmaak- en weergavewaarden correct worden geschreven. Gevalideerd CSS (3 is de modernste versie) zorgt ervoor dat de indeling en opmaak van content in alle type browsers correct en identiek worden weergegeven.
Javascript en andere client side-scripts
Het is raadzaam om alle soorten client side-scripts (javascripts, java applets, vbscripts) zo min mogelijk te gebruiken, omdat de werking van deze scripts in browsers kan worden uitgeschakeld. Daarbij komt dat VBScript alleen in Internet Explorer werkt en daarmee het principe van toegankelijkheid ondermijnt.
Als de javascript-optie in de browser is uitgeschakeld en als dat geen gevolgen voor het functioneren van bepaalde functies in de website heeft, dan is er niets aan de hand.
Voor mijn eigen website is dat principe uitgangspunt.
Links bij accessibility / toegankelijkheid
Hieronder vindt u links naar websites die het thema accessibility / toegankelijkheid behandelen:
Web Accessibility Initiative (WAI).
Web accessibility, Wikipedia.
Web Accessibility Initiative, Wikipedia.
Accessibility and the Web.
Introduction to Web Accessibility.
Web Accessibility Toolbar.
Nederlandse versie Web Accessibility Toolbar.
LowBrowse, an add-on to Mozilla's Firefox browser.
Accessibility.nl.
Accessibility help for you, BBC.
Accessibility - WDG.
Toegankelijkheid - WDG.
Etre.com - Accessibility.
Welcome to WAVE 4.0 beta.
Accessibility Check
Hieronder vindt u een link naar een tool die de accessibility / toegankelijkheid van websites test; de tweede tool test de homepage van deze website:
Accessibility Check van etre.com.
Accessibility-test van de homepage van deze site via WAVE.
Voorlezen
Via Readspeaker.com met z'n webreader kunnen geladen webpagina's (geheel of gedeeltelijk) voorgelezen worden. Ga voor een account naar ReadSpeaker.
Accessibility-test
Hoe toegankelijk is deze pagina? Test hier de kwaliteit qua toegankelijkheid van deze webpagina: WAVE deze pagina!
Joost De WebMaker
2002-2024 © Joost van Meeteren
Laatste update website: dinsdag 3 december 2024
Deze website past cookies toe voor optimaal gebruik van dit platform | bron |