Page optimalisatie usability

  • Development
  • Cas Bukkems
  • 29-05-2021
  • Lab

Aanleiding
Opdrachtgever Matthijs Goense van Novum heeft mij het advies gegeven om een POC te bouwen waar ik de focus leg op het 100% in orde maken van de usability. Als je alle ins and outs van goed usability coderen doorhebt kunn je namelijk perfect je ontwerpen optimaliseren zodat deze de trucjes goed ondersteunen.

Aanpak
Ik had eerder al een basis code prototype opgesteld voor mijn WAI-ARIA prototype. Dit is een basis codeer omgeving met: een basis html5 opzet, javascript bestand en CSS/SASS code.
Door een Google page optimalisation tool gebruiken genaamd Google Lighthouse, kon ik perfect stapsgewijs mijn code verbeteren. Lighthouse geeft namelijk procent gewijs de prestaties van je website weer. Ook biedt Google de mogelijkheid om een rapport in te zien hoe je de website kan verbeteren op gebied van code. Dit is een interessant proces waar je code stap voor stap een beetje beter wordt.

Resultaten
De resultaten kun je het beste stapsgewijs bekijken. Ik heb in het proces namelijk een screenshot genomen na iedere code verbetering. Zo is het proces perfect in kaart gebracht en zie je wat de veranderingen hebben opgeleverd.


Fase 1

Toevoegen van WAI-ARIA tags in bijvoorbeeld het menu, de logo’s en de tekstkopjes.

<ul class="menubar_navigation" role="menubar" aria-label="Centraal Machtigingen Register">


Fase 2

Linkjes juist indelen met  _about blank en indexeerbaar maken.

<a target="_blank" rel="noopener" href="https://machtigen.digid.nl/">Machtigen</a>

Alt tags & title tags

<img class="banner_top_logo" src="img/cmr_logo.svg" alt="Centraal Machtigingen Register logo" />

Javascript code om uitgaande links te beveiligen

$('a').each(function(){
if ( $(this).attr('target') == '_blank'){
$(this).attr('rel','noopener noreferrer');
}
})


Fase 3

Meta description en tags

<meta charset="utf-8">
<title>Centrale machtigingen systeem</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5.0, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta name="description" content="Het centrale machtigings plattform van Nederland"/>


Fase 4

Ik ben trots met het resultaat wat ik bereikt heb, het is niet vanzelfsprekend dat je binnen Google Lighthouse op alles 100% scoort.

Mocht je de code willen inzien, is dat mogelijk via GIT.
https://github.com/Casie150/CMR-prototype.git

Bronnen
W3. (2021) Accessible Rich Internet Applications.
Geraadpleegd op 15 mei 2021,
https://www.w3.org/TR/wai-aria-1.2/