Below are accessibility and usability fixes for this example page. The page contains deliberate accessibility bugs, and together with the fixes are used in the tutorial.

Fixes Edit

%YAML 1.2
    name: {{PAGENAME}}
    default_locale: en-GB

    role: heading
    aria-level: 1
    role: navigation
    aria-label: Site menu
    role: search

input[name = 'q']:
    type: search
    aria-labelledby: label[for = 'missing-id']
    placeholder: Enter a search term
    required: ""
form#search button:
    aria-label: Search
    title: Search
form#search a:
    role: button
    title: Help with search
    aria-haspopup: true

Style Edit

/* Be cautious when using the 'style' attribute!
body {
  background: #fcfcfc;
  color: #333;
  font: 1em sans-serif;
  margin: 1em 3em;
form#search a {
  cursor: help;
[role = heading][aria-level = '1'], h1 {
  font-size: 1.7em;
  margin: 1em 0;