Skip to content
BoKSA

Usability, Accessibility & Web Performance Fundamentals

Usability, Accessibility & Web Performance Fundamentals

Use this page to revise the concepts and terminology behind evaluating an existing web application — how usable it is, how accessible it is, and how fast it feels.

Usability heuristics

Nielsen's 10 heuristics are a checklist for spotting usability problems without needing a full user study, covering things like consistency (similar things should look and behave similarly), visibility of system status, and error prevention. Related concepts:

  • Cognitive load — how much mental effort a user needs to use the interface; lower is generally better.
  • Minimalistic design — showing only what's relevant to the task at hand.
  • Expert review vs. user testing — a review is you (or another expert) judging the interface against known heuristics; user testing is watching real users try to complete real tasks. A review is faster and cheaper; user testing catches problems a heuristic checklist won't.

Accessibility (WCAG)

The Web Content Accessibility Guidelines (WCAG) define concrete, testable accessibility criteria, including:

  • Contrast — enough difference between text and background colour to be readable.
  • Alt text — a text alternative for images, for users who can't see them.
  • Keyboard navigation — every interactive element must be reachable and operable without a mouse.
  • Focus order — tabbing through a page should follow a logical, predictable order.
  • Labels/forms — every form field needs a programmatically associated label.

The Dutch Wet digitale toegankelijkheid (Digital Accessibility Act) requires (semi-)public sector websites and apps to meet WCAG criteria; knowing that it exists, and roughly who it applies to, is part of the baseline knowledge here.

Core Web Vitals

Three metrics Google uses to describe real-world user experience:

  • LCP (Largest Contentful Paint) — how long until the largest visible element has rendered.
  • CLS (Cumulative Layout Shift) — how much the layout unexpectedly shifts while loading.
  • INP (Interaction to Next Paint) — how responsive the page feels when a user interacts with it.

Diagnosing performance and compatibility

Browser DevTools let you profile a page load and see exactly where time goes: network requests, render-blocking assets, and slow JavaScript are the three most common bottleneck categories. Because browsers and devices don't all render the same way, cross-browser and device compatibility testing — checking layout, CSS, and JS behaviour across at least a couple of browsers and viewport sizes — is what catches the problems a single developer's machine will never show.

Starting Points

Key Points

  • You can name and briefly explain several of Nielsen's usability heuristics.
  • You can explain the difference between an expert review and user testing.
  • You can list common WCAG criteria (contrast, alt text, keyboard navigation, focus order, labels).
  • You know what the Wet digitale toegankelijkheid requires, and roughly who it applies to.
  • You can explain what LCP, CLS, and INP measure.
  • You can name the three common categories of performance bottleneck (network, render, JavaScript).
  • You can explain why cross-browser and cross-device testing is necessary.