Webdesign

Webontwerp - toegankelijk bouwen

Veelal wordt bij "toegankelijk bouwen" oftewel "accessibility" gedacht dat het alleen maar iets te maken heeft met het toegankelijk maken van een website voor gehandicapten. Niets is echter minder waar.

Vanzelfsprekend hoort een website ook voor gehandicapten toegankelijk te zijn, maar zeer zeker ook voor u, ook al heeft u geen handicap.

Tot een toegankelijk webontwerp behoren zaken als:

1. Valide codering

   • valide HTML
   • valide CSS

   Het is zaak zoveel mogelijk gebruik te maken van valide codering, hierdoor is de inhoud van een website in een zeer groot aantal browsers bereikbaar. Daarnaast dient per browser bekeken te worden wat haar specifieke eisen zijn. Niet iedere browser maakt gebruik van, of houdt zich aan de standaard, waardoor de weergave van een document er in een bepaalde browser wel eens anders uit kan zien dan gewenst.

   Naast het gebruiken van valide codering, is het dus wenselijk uw website te testen in zoveel mogelijk browsers.

2. Gescheiden opmaak en HTML - slankere code

   Een gescheiden opmaak zorgt ervoor dat de website snel laadt en daarmee toegankelijk is voor mensen met een wat langzamere verbinding en heeft samen met een goed semantiek het voordeel dat een bezoeker die aangewezen is op een screenreader geen, of zo min mogelijk 'rommel en ruis' te verwerken krijgt in het door een spraakgestuurde browser weergegeven webontwerp.

3. Semantisch gebruik van de elementen

   Een semantische opmaak zorgt er bijvoorbeeld voor dat door de heldere structuur en groepering van elementen een andere website bouwer sneller thuis raakt in de code van de website en deze dus ook beter kan onderhouden.

4. Menu en inhoud niet in javascript

   Javascript is een prima middel om gebeurtenissen vast te leggen, op te roepen en zaken aan te sturen, maar niet om een menu in te stoppen. Door een menu geheel in javascript op te bouwen maak je het menu voor gebruikers die géén javascript kunnen of willen gebruiken ontoegankelijk en daarmee de website onbruikbaar. Een belangrijke bezoeker is natuurlijk ook de zoekrobot en laat deze nou geen gebruik maken van javascript! ;)

5. Geen inhoud of essentiële delen in flash verstoppen

   Flash, is net als javascript een hulpmiddel, een toevoeging om zaken duidelijk in te maken. In dit geval dus optisch, een flash-presentatie is in wezen een interactief filmpje. Helaas heeft niet iedereen flash, of de beschikking daarover, ook hiervoor geldt dat een zoekrobot flash niet compleet kan doorgronden. Het is dus zaak niet uw gehele presentatie vorm te geven in flash mits u uw webontwerp toegankelijk wilt houden.

6. Visuele aspecten

   Voldoende contrast in achtergrondkleur tov. tekst

   Meer en meer mensen ondervinden problemen met het zicht. Er zijn zeer veel verschillende beperkingen, kleuren die moeilijk te herkennen zijn of helemaal ontbreken, contrasten, die wij als 'normaal' zienden wel kunnen herkennen, die totaal ontbreken of zeer moeilijk te onderscheiden zijn.

   Een medium als bijvoorbeeld het beeldscherm, kan deze effecten nog versterken. Het is dus zaak voor de kleuren en het contrast tussen achtergrond en tekst een weloverwogen beslissing te nemen om ook de bezoeker met een visuele-beperking van uw website gebruik te kunnen laten maken.

   Geen vaste fontgrootte opgeven in px

   Ook voor de lettergrootte geldt dat deze niet voor iedereen als plezierig ervaren hoeft te worden. Indien u deze in een vast formaat, pixels (px), opgeeft is het moeilijker voor een bezoeker die gebruik maakt van IE deze op zijn / haar gewenste grootte te schalen.

   Tip voor gebruikers van IE (Internet Explorer)!

   Indien u op een website aanbelandt waar de fontgrootte niet middels Ctrl en + simpel te wijzigen is, kunt u deze in het menu middels de keuze 'beeld' -> 'tekengrootte' wijzigen. De mogelijkheden daarbij zijn:

   • Zeer groot
   • Groot
   • Middel
   • Kleiner
   • Zeer klein

   Alternatieve tekst voor plaatjes

   Het HTML-element <img> heeft een attribuut 'alt'. Zoals de afkorting al doet vermoeden, is dit een Alternative - alternatief voor het plaatje. De tekst opgenomen in dit attribuut wordt weergegeven als, om welke reden dan ook, het plaatje niet kan worden getoond. Zeer behulpzaam voor 'blinden' als de tekst ook daadwerkelijk een korte omschrijving van het plaatje bevat.

7. Duidelijke structuur website en teksten

   Een onderdeel van semantisch bouwen is het gebruik maken van de juiste elementen om uw pagina in te delen. Middels de elementen kan de inhoud opgemaakt worden en kan worden aangegeven wat bij elkaar hoort en welk gewicht eraan wordt toegekent.

   Een klomp tekst tussenruimte die aangeeft wat de paragrafen zijn, de bijbehorende titels, subtitels en kopjes weergegeven middels de headers h1 t/m h6 om aan te geven wat belangrijk is, maken de inhoud, mits op de juiste wijze toegepast, voor een bezoeker goed toegankelijk.

   Ook het groeperen van links in een menu middels een lijst, een doordachte structuur daarvan en het juiste gebruik van attributen als 'title' geven een bezoeker de mogelijkheid snel te vinden wat hij zoekt.

8. Duidelijke naamgeving van documenten en directory's

   Een naam voor een document of directory als 'fdeb8911a88.html' zegt totaal niets over de mogelijke inhoud daarvan. Beter is het een sprekende naam te gebruiken zoals in onderstaand voorbeeld is weergegeven. Hierdoor ziet een bezoeker direct wat er 'mogelijk' in het document staat.

   • Map: tuinaanleg
     • tuinontwerp.html
     • beplantingsplan.html
     • terrasaanleg.html
     • etc.

Afsluiting:

Bovenstaande geeft slechts een beknopt overzicht van zaken die bij een toegankelijk webontwerp aandacht moeten krijgen.

Om uw pagina te testen op toegankelijkheid hebben we alvast een aantal links voor u verzameld op de pagina webontwerp tools.

Een toegankelijk webontwerp is meer dan rekening houden met onze gehandicapte medemens!

---

Goed webdesign begint bij:

• Functioneel ontwerp
  Het functioneel ontwerp geeft inzicht in de structuur en opbouw van de te bouwen website. Het is een schematisch overzicht dat de antwoorden van de vragen; "Welke informatie moet erop komen? Welke informatie moet er niet op komen? Voor wie is de informatie bedoeld? Hoe wordt informatie ontsloten en beschikbaar gesteld? Welke techniek wordt gebruikt?" etc. bevat.
  • Het functioneel webdesign is onderdeel van een goed functioneel ontwerp.
• Webdesign tools
  Links naar handige programma's en tools voor het maken van een goed webontwerp.
• Webontwerp - toegankelijk bouwen
  Toegankelijk bouwen, ook wel accessibility, wat is dat en waartoe dient het?
• Webdesign - Inhoud
  Mensen zoeken naar informatie, uitleg over hoe bepaalde zaken werken, wat er gebeurde op een bepaalde datum of simpelweg vermaak in de vorm van verhalen en anekdotes. Als u daarbij in acht neemt dat we in een informatietijdperk leven, begrijpt u waarom inhoud het hart van uw webontwerp is!
• Webdesign - Tips
  Hoe en waarmee maak je een goed webontwerp en waar moet je op letten bij het bouwen van je website?
• Webdesign missers
  Miskleunen, missers en doodzonden in webontwerp.
• Webdesign - Font kiezen
  Welk lettertype - font gebruikt u voor uw website en hoe wordt deze opgegeven.
  • Webdesign - Font-family
    Welke lettertypes - fonts behoren tot welke font-family?