checklist websites

Checklist usability website

6 min leestijd

Bij het implementeren van websites die je aan het bouwen bent, of bestaande websites, is het goed om aan een aantal spelregels vast te houden. Het volgende overzicht is gemaakt door een collega bij Agapè waar we een hele set aan websites hebben rondom thema’s van Evangelisatie en Discipelschap. Het doel is om de vindbaarheid in zoekmachines te verbeteren, zorgen voor maximale toegankelijkheid en usability. Het is zeker van belang voor mensen met een visuele beperking. Maar ook nieuwe technieken als ‘scraping’ (schrapen) waarbij content (tekst, plaatjes, videos) van wegsites worden gelezen en opnieuw gepresenteerd. Applicaties als Flipboard en Zite (beide voor iPad) maken hier gebruik van. Het is een techniek die meer en meer zal worden gebruikt.

checklist websites

Afbeeldingen:

  • Tekst nooit in een afbeelding plaatsen, tenzij het echt niet anders kan (bij een logo is het bijvoorbeeld voor de herkenbaarheid essentieel dat de tekst met de juiste vormgeving in de afbeelding zelf staat). Tekst zo veel mogelijk met css over een afbeelding heen zetten. Op die manier is de tekst mee te vergroten als een gebruiker de pagina vergroot en worden de woorden beter geïndexeerd door Google.
  • In het alt attribuut van afbeeldingen dient een beschrijving van te staan van de informatie die de afbeelding overbrengt/functie die de afbeelding heeft. Wanneer geen informatie op de afbeelding staat, mag het alt attribuut leeg worden gelaten (alt=””). Een uitzondering is het wanneer een afbeelding als link wordt gebruikt. In dat geval moet er altijd iets staan in het alt attribuut, omdat dit dan de linktekst is die door Google geïndexeerd wordt.
  • Informatieve afbeeldingen altijd in de HTML plaatsen. Lay-out afbeeldingen in css. Zo blijft content en semantiek mooi goed gescheiden van opmaak.

Semantische opmaak:

Voor indexering in Google is het erg belangrijk om semantisch correcte opmaak te gebruiken. Hiermee wordt betekenis gegeven aan de tekst die binnen het element wordt gebruikt. Dat is goed voor de indexering, maar ook voor bijvoorbeeld screenreader gebruikers (willen bijvoorbeeld van kop naar kop kunnen springen).

  • Gebruik een p element voor iedere alinea (alinea is vanaf 1 zin met leesteken). Geen div of span of dubbele <br />.
  • Gebruik h elementen voor headers. Let op dat in de broncode de juiste volgorde wordt gebruikt, dus geen niveau’s overgeslagen; geen strong of b elementen gebruiken voor koppen.
    • Geef in de eerst h1 van de pagina een beschrijving van de pagina (die ook in het title element terug komt). Het is goed voor Google wanneer deze eerste h1 uniek is op de website.
  • Gebruik voor citaten in blokvorm het blockquote element. De bron kan aangegeven worden met het cite element.
  • Gebruik voor ongeordende lijsten het ul element. Voor geordende lijsten (1, 2, 3 etc.) het ol element en voor definitielijsten het dl element
  • Gebruik strong en em (alleen) voor het beklemtonen van enkele woorden binnen een zin (niet voor hele zinnen). Daar is het semantisch voor bedoeld. Gebruik nooit b of i hiervoor. Als je iets gewoon dik wilt maken of schuin (zonder dat je het nadruk wilt geven… bijvoorbeeld bij een inleiding, kun je die opmaak in de css doen.

Toetsenbord:

  • Zorg ervoor dat heel de pagina de bedienen is met het toetsenbord (tab en enter). Dit is niet alleen belangrijk voor blinden, maar ook andere gebruikers als motorisch beperkten of mensen die geen muis tot hun beschikking hebben op dat moment. Denk ook aan mensen met een touchscreen (:hover werkt niet bij hen)
  • Wat dit betreft is het bijvoorbeeld belangrijk a elementen te gebruiken en geen div’s die je vervolgens klikbaar maakt met JavaScript. Deze kunnen namelijk geen toetsenbord focus ontvangen en zijn alleen met de muis klikbaar. Een a element wordt ook nog eens als een link geïndexeerd door Google.
  • Verwijder nooit in css de outline (het stippellijntje) om links heen. Dit is essentieel voor bezoekers die het toetsenbord gebruiken. Zonder de outline weten zij niet waar de focus op dat moment is en kunnen de pagina zeer moeilijk gebruiken.

Valideren:

  • Zorg ervoor dat de pagina’s valideren op HTML 4.01 strict of XHTML 1.0 strict.

Taal:

  • Zorg ervoor dat je altijd in het html element de basistaal van de pagina aangeeft met het lang attribuut (lang=”nl” of lang=”en”). Als er vervolgens op een bepaalde plek een paar woorden in een andere taalworden gebruikt, kun je hiervoor een taalwisseling aangeven door weer het lang attribuut te gebruiken, maar nu in het element dat om de woorden heen staat (eventueel kun je ook een span element om te woorden heen zetten en daar het lang attribuut in).

Links:

  • Nooit alleen door een ander kleurgebruik herkenbaar maken als links maar ook door bijvoorbeeld onderstreping (ook wanneer je er niet op staat met de muis). Belangrijk voor kleurenblinden of als je minder contrast hebt (buiten op een iPhone bijv.)
  • Links nooit in een nieuw venster openen (ook niet als het een externe site is). Belangrijkste argumenten: back-button (meest gebruikte knop in Browser) werkt niet meer waardoor men juist niet meer makkelijk terug kan naar de oorspronkelijke pagina, men verwacht dat de link gewoon opent in hetzelfde venster, je laat de keuze niet aan de bezoeker. Zie voor meer info: http://www.smashingmagazine.com/2008/07/01/should-links-open-in-new-windows/

Video’s:

  • Lever onderschriften en audiodescriptie bij video’s. Belangrijk voor blinden en doven. Onderschriften zijn ook belangrijk voor vindbaarheid in Google (Google kan dan in de video zoeken). Ik zou deze kunnen maken.
  • We kunnen de video’s ter download aanbieden (tenzij we echt youtube video’s aanbieden), wanneer mensen geen Flash of JavaScript hebben. Een goede videoplayer is http://www.longtailvideo.com/players/jw-flv-player/ . Deze is goed met het toetsenbord te bedienen (wel met de juiste instellingen…). Bovendien kunnen onderschriften en audiodescriptie worden toegevoegd voor blinden en slechtzienden.
  • Bieden we ook een xml-sitemap voor de vindbaarheid in Google?

Tabel:

  • Als we een tabel op de site gebruiken, moeten de kopcellen (th elementen) voor een kolom of voor een rij goed zijn aangegeven en door middel van het scope attribuut goed gekoppeld zijn aan de datacellen (td elementen). Ik kan daar wel bij helpen als het aan de orde is.

Beweging:

  • Als er beweging op de pagina is, zorg er dan voor dat deze ook stop gezet kan worden. Ook met het toetsenbord.

Flash:

  • Bied een alternatief voor Flash, voor iPhone etc. gebruikers. Mocht een volledig alternatief niet mogelijk zijn ivm de tijd of om andere redenen, bied dan in ieder geval een afbeelding of tekst oid als alternatief. Dit kan gezet worden binnen de object elementen.

Formulieren:

  • Gebruik label elementen voor de labels van formulier invoervelden. Deze labels kunnen expliciet worden geassocieerd door een id te geven aan het invoerveld en daarnaar te verwijzen met het for attribuut binnen het label element.

Overige:

  • Gebruik de UTF-8 karakterset voor pagina’s.

Waardeer je dit artikel? Overweeg een kleine donatie. Voor een volgend kopje koffie tijdens het schrijven bijvoorbeeld.

PS: zie je een schrijfvoutje? Mail me ff!

Bedrag € -