Why?

Some people have disabilities which influence how they use and interact with computers. Unfortunately, many open source projects do not take this into account. Fortunately, tools exist which can help them take the first steps towards accessibility.

In this task, we'll be using the Web Accessibility Evaluation Tool to identify changes that projects can make to improve accessibility. You will report issues to the project. You can also fix them, if you're comfortable doing so. Many accessibility changes are bite-sized and good first tasks for you to take on.

Ready? Let's get started.

The Steps

• Step 1: Get Out Your Notes
• Step 2: Test Projects
• Step 3: Make a List of Changes to Make
• Step 4: Submit Issue
• Step 5: Fixing the Issues
• Step 6: Submit Your Changes

Step 1: Get Out Your Notes

Open up a document in your favorite text editor. Starting now, you're going to write down everything. You may not end up using all your notes but it's better to write too much than forget something important.

Step 2: Test Projects

You'll need to start with a project or list of projects you're interested in. If you don't know of any, try this exercise.

For each project, identify the main website or websites associated with the project. Enter those URLS into the Web Accessibility Evaluation Tool where it says "Web page address...", and take look at the results.

Are there items labelled as "errors" or "contrast errors"? If so, you can proceed to the next step. If not, try another project (or another page or site of the same project).

Step 3: Make a List of Changes to Make

Using the results of the evaluation tool, make a list of changes to be made. If there are multiple errors of the same kind, you don't need to list them all individually. For instance, you might write, "Page A.html has five images with no alt-text and page B.html has ten images with no alt-text. Page B.html also has a contrast error in div with id 'banner'."

Step 4: Submit Issue

Take your notes and add them to the project's issue tracker as an issue. If you plan on trying to make the changes yourself, say so in the issue.

If you don't plan on trying to make changes to the issue, you can skip to the last slide.

Step 5: Fixing the Issues

Fixing the issues will depend on the project structure and the type of project. You may need to set up a development environment, and you will definitely need to learn how to submit changes back to the project. Please ask a mentor if you run into any difficulties!

We'll now go over some of the most common accessibility issues the evaluation tool reports, and how to fix them. The set of issues to fix in a given project will likely be different. Information on how to fix issues is also available on the evaluation tool itself, by clicking the links labelled "More Information".

Issue #1: No Alternative Image Text

"Alternative text is text associated with an image that serves the same purpose and conveys the same essential information as the image. In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost. Absent or unhelpful alternative text can be a source of frustration for visually impaired users of the Web." - Wikipedia

How to fix it

For each image that is missing alternative text, try to summarize the image as briefly as possible. If you don't recognize the image, you can ask others what they think the picture represents. For logos, diagrams, or screenshots it may be especially valuable to ask members of the project's community. Tin Eye may also be useful for identifying images.

Add your summary to the image using the "alt" attribute. If you are unfamiliar with HTML, these three pages should get you up to speed: Getting Started, Tags, Images. As always, feel free to ask a mentor for help!

Issue #2: Empty/Missing/Too Many Form Labels

Form labels are required by assistive technology to help site users interact with forms. A missing or empty label may make it impossible for some users to correctly use the form, whereas multiple labels may be confusing.

To fix this issue, add text that describes what the associated form control does. ("Form controls" are the interactive elements of a form. Not all form controls need labels - for instance, image, submit, reset, button, or hidden form controls do not.) This should be added to the "label" attribute, which you may need to create.

Issue #3: Lack of High Contrast

Text that does not have high contrast to its background can be difficult for people with visual impairments to read.

To fix this issue, you will likely need to edit the css files that control the coloring of one or more pages. Before submitting your changes, it may be helpful to experiment with the colors and send screenshots to community members to see what they think.

More issues

In addition to the warnings and alerts the evaluation tool will give, you can also give feedback and/or make changes about:

• Make sure that text contained in images is duplicated outside of images.
• Use percentages rather than absolute units to control page layout.
• Using "scope", "id", and "headers" to help read tables.

Step 6: Submit Your Changes

Submit your changes as patches or pull requests to the project. Reference the issue that you added in the submission (Github makes this fairly easy). Depending on how many changes you made and the size of the project, you may want to put different types of changes into different pull requests. If you can, ask a maintainer how they'd prefer you to submit changes.

All Done?

Make sure to record your contribution. You can do this by submitting a merge story. (Don't want to make it public? Just say so anywhere on the submission form.)

You can repeat this task with a new project, or move on to a different task.