Skip to content

Accessibility Test Guideline

Jump to bottom Edit New page
Nini edited this page Oct 7, 2024 · 38 revisions

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:

  1. Go to Google sheet
  2. Pick a page that does not have a test report
  3. Follow the tutorial to generate report
  4. Follow the template to add the test result into the Google sheet
  5. 🚧 Follow the tutorial to manually verify some detailed test that automated test tool may not notice
  6. 🚧 Follow the UX guideline to check the web page behavior does not jam with perception
  7. 🚧 Follow sth to create issues on issue page

Issues

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

Test with Automated Accessibility Tool

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

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:

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 template 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:

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 template add the issue to the spreadsheet
  4. 🎉 Thank you!

template for test result

  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. In the Google sheet, add the nature of the issue under the "Issue title" column.
  4. 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.
  5. Use the remediation guidance to describe the issue details under the Comments column.
  6. Select from the drop-down the "source" of the test.
  7. Enter the name of the affected component under the "Affected element" column.
  8. Lastly, enter your name under the "Identified by" column.

screen reader / keyboard navi tool

UX

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

Resources

Auto test first, check with WCAG

Final verification

  • screen reader (different result from different screen readers... is there a standard for all?, Web Content Accessibility Guidelines (WCAG) standard gives wide compatibility for different screen readers)

Online resources

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