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[]
%YAML 1.2
---
_CONFIG_:
name: {{PAGENAME}}
include:
- http://accessifywiki.appspot.com/*
- https://accessifywiki--1.appspot.com/*
test_urls:
- http://accessifywiki.appspot.com/site/example-1a.html
default_locale: en-GB
.page-heading:
role: heading
aria-level: 1
"#nav":
role: navigation
aria-label: Site menu
form#search:
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[]
/* 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;
}