Accessibility

How this site is built to be usable by everybody, what has been done, what standard it aims for, and what is not yet perfect.

This site is built so that it can be used by everybody, including people using a screen reader, people navigating by keyboard, people with low vision and people with limited dexterity. Accessibility was designed in rather than added afterwards.

What has been done

Structure and semantics

  • Every page uses proper heading levels in order, so screen reader users can navigate by heading
  • Landmarks are used correctly: header, nav, main and footer
  • A skip to content link is the first focusable element on every page
  • Every page has a descriptive, unique title
  • Lists, tables and definition lists are marked up as such rather than styled to look like them

Keyboard access

  • Every interactive element can be reached and operated with the keyboard alone
  • Quiz options respond to Enter and Space as well as to a click
  • Focus is always visible, with a clear high contrast outline
  • The search dialog can be opened with the forward slash key and closed with Escape
  • Nothing traps keyboard focus

Visual design

  • Body text and interface text meet or exceed the WCAG AA contrast requirement in both light and dark themes
  • A dark theme is available and the site also respects your operating system preference automatically
  • Text uses relative units and reflows correctly when zoomed to 200 per cent
  • Colour is never the only way information is conveyed. Correct and incorrect quiz answers are marked with a symbol and text as well as a colour
  • Line length is limited to around 68 characters, and line height is generous, both of which materially help readers with dyslexia
  • The typeface is chosen for legibility rather than for style

Motion

  • Animation is decorative only and never conveys information. The one exception is the Pixel Run game, where every event is also written out in text
  • All animation, including the mascot, is disabled automatically if your system is set to prefer reduced motion
  • Nothing flashes, blinks or moves unexpectedly

Content

  • Language is kept as plain as the subject allows, and technical terms are defined when first used
  • Explanations are broken into short sections with clear headings
  • Code blocks scroll horizontally within their own container rather than forcing the whole page to scroll
  • Tables scroll within their own container on narrow screens

The Pixel Run game

  • The scene is drawn on a canvas, so each event in it (reaching an obstacle, clearing it, failing it, finishing a level) is also written out and announced to screen readers
  • It is played entirely from the keyboard. Tab indents inside the code box, and Esc followed by Tab leaves it, so focus is never trapped
  • Calm mode removes the scrolling and the jumps, and switches on by itself if your system prefers reduced motion
  • Nothing is against the clock
  • Passing and failing are shown in words as well as colour, and quiz mode replaces typing code with choosing an answer

Without JavaScript

Every explanation, key term, quiz question and exam question is present in the HTML and fully readable with JavaScript disabled. JavaScript adds interactivity such as instant marking, the theme switch and the search dialog, but nothing that is needed to read and learn from the content.

Known limitations

Being honest about what is not perfect is more useful than claiming everything is.

  • Some tables of technical comparison are wide by nature. They scroll horizontally on a narrow screen, which is a compromise rather than an ideal solution.
  • Diagrams are currently described in text rather than presented visually. This is better for screen reader users but means some concepts that would benefit from an illustration do not yet have one.
  • The exam answer marker requires typing. There is currently no alternative input method for students who would find that difficult, and voice input from the operating system is the only workaround.
  • The Pixel Run scene is a picture on a canvas with no description beyond the text announcements, and its coding challenges need typing unless quiz mode is chosen.

Standards

The site aims to meet WCAG 2.2 level AA. If you find something that does not, that is a fault to be fixed rather than a limitation to be explained away.

Reporting a problem

If any part of this site is difficult or impossible for you to use, please say so through the about page. Accessibility problems are treated as bugs and are prioritised as such.