Skip to content
BoKSA

Usability, Accessibility & Web Performance Fundamentals

Usability, Accessibility & Web Performance Fundamentals

Have these topics been introduced in the propedeuse? 'revise' seems to indicate it has been introduced.

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:

  • Largest Contentful Paint (LCP) — how long until the largest visible element has rendered.
  • Cumulative Layout Shift (CLS) — how much the layout unexpectedly shifts while loading.
  • Interaction to Next Paint (INP) — 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.