Tutorial: how to write fixes[]
So you want to start improving and writing fixes on Accessify Wiki. Great, thank you! This should help you get started.
Note, as this tutorial was designed originally for a group we write fixes in a text or code editor, not directly in the Wiki.
Also, this tutorial is a work-in-progress. Please help us improve it by commenting on the talk page!
Pre-requisites -- software[]
In order to start writing accessibility fixes you will need the following software and add-ons. Note, I've put the software on memory stick(s) - a11yLDN. Also, it's all free/ open source:
- Firefox browser;
- Greasemonkey add-on for Firefox;
- Firebug add-on for Firefox;
- A code editor, for example, Notepad++ editor for Windows.
You may also find the following useful:
- Juicy Studio Accessibility Toolbar for Firefox;
- Web Developer add-on for Firefox;
- NVDA screen reader, for Windows - free/open source;
Pre-requisites -- ability[]
At several points the tutorial assumes you can see the screen. I haven't yet found a way around this limitation, yet - sorry! :(
Pre-requisites -- knowledge[]
The aim of Accessify Wiki is to lower the barrier to entry for improving and writing accessibility fixes. However, we're currently developing the authoring environment, so until we've improved the tools for authors, you'll probably need a bit more knowledge. We suggest:
- Familiarity with the syntax of HTML, including the idea of opening and closing tags and attributes,
- A little knowledge of the syntax of CSS,
- A little knowledge of the concepts of accessibility,
- A little knowledge of the WAI-ARIA standard, including the idea of roles, states and properties,
- Google skills and a willingness to experiment and learn!
Useful links[]
- YAML checker: http://yaml-online-parser.appspot.com/
- WAI-ARIA roles: http://w3.org/TR/wai-aria/roles
- WAI-ARIA states/props: http://w3.org/TR/wai-aria/states_and_properties
- An online accessibility checker, for example, http://achecker.ca/checker/
First steps[]
- Check the pre-requisites above. Install stuff. Grab a coffee.
- Open the following URL in the Firefox browser - this is a simple plage, with some typical accessibility bugs, http://accessifywiki--1.appspot.com/site/example-1a.html.
- Right-click on the help/ question-mark icon in the page in Firefox. Choose the menu option "Inspect Element with Firebug". (It will be at the bottom of the right-click context menu.)
- You should see something like the screenshot below. In the top half of the Firefox window is the regular browser view. In the bottom half is a tool called the element or <span HTML inspector.
5. Select the "<a onclick ...>
" element in the HTML inspector as shown. Right-click and press the item "Copy CSS Path". (The fourth option from the top of this right-click menu.)
6. Open the template "example-fixes-1.yaml" in your favourite text or code editor, as shown below (I suggest Notepad++ on Windows) - "Edit with Notepad++".
7. Paste the CSS path into Notepad++, as shown in the first screenshot.
8. Note, in the CSS selector syntax ".header
" (dot class-name) refers to a HTML element's class
attribute, "
search
" (hash or "number" then an ID) refers to an element'sid
attribute. You will find that you can reduce the CSS selector or path from "html body div.header form#search p a
" to simply "form#search a
" (this is specific enough to identify this particular <a> anchor or hyper-link).
9. In Notepad++, add a colon after the CSS path or selector, then a newline (Enter or return), then four spaces.
10. We're ready for our first HTML attribute, and our first fix. Let's start with a WAI-ARIA role. Type "role
" then ":
" colon, a space, then "button
". The result is shown in the following screenshot.
[ IMAGE 3 ]
11. We can add further attribute-value pairs, each indented by four spaces. For example, title: Help with search
, aria-haspopup: true
and .. The attribute and value are always separated by a colon, and those familiar with JSON will notice that in YAML we mostly don't need quote characters.
12. Now that we've written some fixes in YAML format, we should probably check the syntax. Select all the text in Notepad++ (Control + A) and copy (Control + C).
%YAML 1.2
---
# I'm a comment!
# 1. Select the element in Firefox, Inspect with Firebug
# 2. "Copy the element's CSS path to the clipboard"
form#search a:
role: button
title: Help with search
aria-haspopup: true
...
13. Visit an online YAML parser (http://yaml-online-parser.appspot.com/) and paste your code. Hopefully you'll see valid JSON output on the right.
13. Wash and repeat. And press "Save" as you go.
14. Finally you need a "_CONFIG_
" block, with a minimum of "include
" and "test_urls
" lists. Note the "*" (asterisk), which is used as a wild-card
%YAML 1.2
---
# I'm a comment!
_CONFIG_:
include:
- http://accessifywiki--1.appspot.com/*
test_urls:
- http://accessifywiki--1.appspot.com/site/example-1a.html
form#search a:
role: button
# ...
...
15. Re-check in the online YAML parser.
16. Register and log-in to the Wiki.
SOURCE: Google Docs