Skip to content

Accessibility Test Guideline

Jump to bottom Edit New page
Thomas E Fleming edited this page Nov 4, 2024 · 38 revisions

Get started

For team member:

  1. Read the task list
  2. Find something that is not assigned to anyone
  3. Click on title to read the detailed 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 A. If you've finished the task, change the Status to Done 1. Share things you have done with us on Tuesday Hacknight B. Or, if you've run into issues, change the Status to Pending 1. Raise the issue at the Tuesday meeting

For tester:

Pages requiring testing are:

The testing is completed in three phrases:

  1. Test using the 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 that need to be tested in task list so people can assign themselves)
  3. Follow the tutorial to generate test results
  4. Follow the tutorial to add the test results 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 that need to be tested in task list so people can assign themselves)
  3. 🚧 Follow the tutorial to manually verify some detailed tests that the 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 that 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

Run into trouble

  1. You are working on a task
  2. Things do not happen as expected
  3. You are confused, looking for help
  4. Raise the problem 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.

Axe DevTools

The 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.

The detailed run sheet.

Installation

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

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 what 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 exists
  3. In case a 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.

The detailed run sheet.

Installation

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

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 exists
  3. In case the problem is not recorded, refer to guide to add the issue to the spreadsheet
  4. 🎉 Thank you!

Accessibility Insights

🚧 To be added

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 the title of the affected area. This will depend on the nature of the 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:

Add a custom footer
Add a custom sidebar
Clone this wiki locally