Accessibility Test Guideline

Get started

For team member:

1. Read the task list
2. Find something is not assigned to anyone
3. Click on title to read the detail instructions
4. Set Assignees to yourself and change Status to Todo
5. Change Status to In Progress and start working on it
6. Finish or Pending
   1. Finished working on it, change the Status to Done
      1. Share things you have done with us on Tuesday Hacknight
   2. Or run into issue and change the Status to Pending
      1. Raise the issue on Tuesday meeting

For tester:

Page need to be tested are:

• home page
• open participation page
• closed participation page
• report page
• sign in page

Three phase of testing will be carry out during the test:

1. Test using automated devtool
2. Test manually using screen reader and keyboard navigator and try to find the behavior that does not meet Web Content Accessibility Guidelines (WCAG) standard
3. Browse and review the user experience

Phase 1 Test:

1. Go to Google sheet
2. Find a page that does not have a test report (In testing phases we also list pages need to be tested in task list so people can assign themselves)
3. Follow the tutorial to generate test result
4. Follow the tutorial to add the test result into the Google sheet

Phase 2 Test:

1. Go to Google sheet
2. Find a page that does not have a test report (In testing phases we also list pages need to be tested in task list so people can assign themselves)
3. 🚧 Follow the tutorial to manually verify some detailed test that automated test tool may not notice
4. Follow the tutorial to add the test result into the Google sheet

Phase 3 Test:

1. Go to Google sheet
2. Find a page that does not have a test report (In testing phases we also list pages need to be tested in task list so people can assign themselves)
3. 🚧 Follow the UX guideline to check the web page behavior does not jam with perception
4. Follow the tutorial to add the test result into the Google sheet

Phase 4:

1. Go to Google sheet
2. 🚧 Follow sth to convert all issues recorded into GitHub issues on issue page so developers can follow up

Troubleshoot

Mistake in this Guideline

If you can find the edit button on this page

• Refine the guideline for performing Accessibility Testing

If you cannot edit the page

• Create a new issue about Documentation
• Tell us where and what to change

Run into trouble

1. You are working on a task
2. Things does not happen as expected
3. You are confused, looking for help
4. Raise the problem you met in Slack or create GitHub issue

Test with Automated Accessibility Tool

Axe DevTools and WAVE are two browser extension tools we use for free automated accessibility testing.

• 🪓 Jump to how to test with Axe DevTools
• 👋 Jump to how to test with WAVE

Axe DevTools

Axe highlights issues (broken down by categories) that do not meet WCAG guidelines, and for each issue, has a link to a standalone article dedicated to the specific issue.

Installation

To install, visit the respective link for the browser of your choice:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge

To run a Test

To test the home page of pol.is for example

1. Open browser and go to pol.is
2. Open your browser's developer tools (Press ctrl + shift + i).
3. Navigate to the axe DevTools tab from the more tools (>>) drop-down.
4. Fill out the necessary details to get started.
5. From the extension start screen, click Full Page Scan to run an automated scan of the entire page.
6. 🕙 Wait

Results

The issues overview contains the total number of issues found along with a breakdown, which act as "filters" to view specific issue types or categories:

• "Automatic Issues": Issues found during the automated scan
• "Needs Review": Potential issues in which axe-core was not able to determine with absolute certainty were true issues. This can often occur with color contrast calculations for text over background images or complex gradients.
• "Best Practices": Issues that do not necessarily conform to WCAG success criterion but are industry accepted practices that improve the user experience

Issues are grouped by the rules that have been "violated". Each violated rule is expandable, and contains:

• the rule description
• a "Highlight" button (that toggles a highlight around the affected element)
• a "more information" link (link to the dedicated help page for the given rule)
• "Element location" (the generated CSS selector for the element with the accessibility issue)
• Remediation guidance (information on how to fix the issue)

To report a problem

1. Go to Access issue log Google spreadsheet
2. See if the problem already exist
3. In case problem is not recorded, refer to the guide to add the issue to the spreadsheet
4. 🎉 Thank you!

WAVE

The WAVE browser extension is a free accessibility tool by WebAIM. WAVE provides visual feedback about accessibility by injecting icons onto the page. WAVE facilitates human evaluation and educates about accessibility issues.

Installation

To install, visit the respective link for the browser of your choice:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge

To run a Test

To test the home page of pol.is for example

1. Open browser and go to pol.is
2. Click on the WAVE icon to the right of your browser address bar, or select "WAVE this page" from the context menu.
3. 🕙 Wait

Results

WAVE evaluates a page by 6 categories:

• errors (failures to meet WCAG that will impact certain users with disabilities)
• contrast errors (text that does not meet WCAG contrast requirements)
• alerts (potential accessibility issues that requires further human evaluation)
• features (elements that improve accessibility when implemented correctly)
• structural elements (identified elements on the page that give it its structure)
• ARIA (use of ARIA on the page: ensure that labels are used correctly)

The Details tab gives a further breakdown of each category, allowing you to toggle the appearance of the icon types on the page. Each icon type has a reference link (i button) that provides useful context about the rule/guideline and recommended ways to comply. Greyed-out icons refer to elements that are in the HTML but are hidden by CSS.

To report a problem

1. Go to Access issue log Google spreadsheet
2. See if the problem already exist
3. In case problem is not recorded, refer to guide to add the issue to the spreadsheet
4. 🎉 Thank you!

A Guide to add test results

Axe

1. In the extension, click on the Highlight button, it will toggle a highlight around the affected element(s).
2. Browse through the affected elements using the > icon button.
3. Go to Google sheet
4. Add the nature of the issue under the "Issue title" column.
5. Under the "Component/Area" section, add title of the affected area. This will depend on the nature of scan you perform- Full page or Partial Scan.
6. Use the remediation guidance to describe the issue details under the Comments column.
7. Select from the drop-down the "source" of the test.
8. Enter the name of the affected component under the "Affected element" column.
9. Lastly, enter your name under the "Identified by" column.
10. And wait to get credited 🎉

screen reader / keyboard navi tool

UX

all content should be easy to understand (UX) also a part of Accessibility

Resources

This section provides links to valuable resources for web accessibility:

• WebAIM Tutorial and Examples: https://webaim.org/resources/quickref/ - Examples and tutorials on web accessibility best practices.
• Chartability: https://chartability.github.io/POUR-CAF/ - A workflow and framework for evaluating the accessibility of data visualizations, systems, and interfaces.
• WCAG Success Criteria (AA/AAA): https://www.w3.org/TR/WCAG21/ - The Web Content Accessibility Guidelines; defines success criteria for accessible web content.
• Mozilla Developer Network (MDN) - Web Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility - Comprehensive documentation on web accessibility from Mozilla.
• Highcharts: http://highcharts.com - A charting library with built-in accessibility features, including keyboard navigation, screen reader support, and options for high contrast themes.