Accessify Wiki
Register
Advertisement

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:


You may also find the following useful:


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:

  1. Familiarity with the syntax of HTML, including the idea of opening and closing tags and attributes,
  2. A little knowledge of the syntax of CSS,
  3. A little knowledge of the concepts of accessibility,
  4. A little knowledge of the WAI-ARIA standard, including the idea of roles, states and properties,
  5. Google skills and a willingness to experiment and learn!


Useful links[]


First steps[]

  1. Check the pre-requisites above. Install stuff. Grab a coffee.
  2. 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.
  3. 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.)
  4. 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.


Screen shot 1

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++".


Screen shot 2. - example YAML fix template-file being opened in Notepad++ on Windows.


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, "

  1. search" (hash or "number" then an ID) refers to an element's id 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 searcharia-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

Advertisement