Keyboard Accessibility QA Test Plan

Owned by Justin Obara
Last updated: Jun 24, 2021
2 min read

Keyboard Accessibility QA Test Plan

Environments

BrowserVersion
ChromeLatest Stable Release
FirefoxLatest Stable Release
MS EdgeLatest Stable Release
Safari [fluid:1]Latest Stable Release

[fluid:1] keyboard a11y can be slightly improved if you select the "all controls" option from "Keyboard Shortcuts" under the "Keyboard & Mouse" settings. May also need to use "option + tab" for tab navigation.

General QA Guidelines

General Use

  • Does the tool behave the way that you would expect
  • Are you surprised by anything
  • Does something take longer than you would expect
  • When the tool does something unexpected or takes too long to do something, does the tool provide appropriate feedback
On This Page



QA Tests

Protocol
Perform the following tests using each browser/system environment

Report issues at: http://issues.fluidproject.org/secure/Dashboard.jspa

Please search for issues before reporting them, so as to limit the number of duplicate entries.

Keyboard Accessibility Jira Filter


Unit Test

Protocol
Launch the following website to execute unit tests.

Site
http://build.fluidproject.org/infusion/tests/framework-tests/core/html/Keyboard-a11y-test.html

State Tests

________________________________________________________

Description
Ensures that the component properly traverses through the various states. 

Protocol
Perform these tasks on the following site, perform the tests 1-6 in order.

Site
Demo

Keyboard 

Test 1: Keyboard, Focus Images

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the keyboard, tap the 'tab' key until one of the images has focus
  • Expected Results
    • The styling of the element should change to indicate that the image has focus

Test 2: Keyboard, Navigate Images

  • Procedure
    1. Complete Test 1
    2. Using the keyboard, tap the 'left' or 'right' arrow
  • Expected Results
    • The keyboard focus styling should move to the other element

Test 3: Keyboard, Select an Image

  • Procedure
    1. Complete Test 2
    2. Using the keyboard, tap the 'enter' key
  • Expected Results
    • The select image should be shown in the viewer

Test 4: Keyboard, Focus Ranks

  • Procedure
    1. Complete Test 3
    2. Using the keyboard, tap the 'tab' key until the rank has focus
  • Expected Results
    • The styling of the element should change to indicate that it has focus

Test 5: Keyboard, Navigate Ranks

  • Procedure
    1. Complete Test 4
    2. Using the keyboard, tap the 'left' or 'right' arrow
  • Expected Results
    • The keyboard focus styling should move to the other rank element

Test 6: Keyboard, Select a Rank

  • Procedure
    1. Complete Test 5
    2. Using the keyboard, tap the 'enter' key
  • Expected Results
    • The starts should highlight to the selected ranking

Assistive Technology (AT)

Description
Tests to ensure compatibility with Assistive Technologies.

Protocol
Perform these tasks on the following site.

Site
Demo

Test 1: AT Tests

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the state tests as a guide, attempt to navigate through each state of the system
      1. Example ATs
        1. Screen Readers: JAWS, NVDA, VoiceOver, Orca
        2. Built in AT features: Windows, Mac, Linux, iOS, Android
        3. Others ATs: Speech Recognition, Screen Magnifiers, switch access, etc.
  • Expected Results
    • All states of the system should be reachable and usable while using the AT

Task Oriented Functional Tests

Description
Ensures that the component is able to handle expected input.

Protocol
Perform these tasks on the following site.

Site
Demo


*no tests yet*

Boundary Tests

Description
Ensures proper functionality at the input limits 

Protocol
Perform these tasks on the following site.

Site
Demo

*no tests yet*

Test-to-Fail

Description
Tests which should cause errors or not be accepted as input 

Protocol
Perform these tasks on the following site.

Site
Demo

*no tests yet*

Validation

Description
Tests to ensure that specifications are being met

Protocol
Perform these tasks on the following site.

Site
Demo

Test 1: HTML Validation

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. For each state of the system, validate the HTML markup
      1. Tools for validation
        1. Nu HTML Checker Bookmarklet
        2. Validity Chrome Extension
        3. Lighthouse Dev Tool
  • Expected Results
    • All of the HTML markup should properly validate in all states.
  • Stop Test
    • Refresh the browser to return the page to its initial state
    • Quit the tool you are using to validate

Test 2: WCAG Validation

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. For each state of the system (see: State Tests), ensure that the WCAG guidelines are being met to at least AA level
      1. Tools for validation (Note: Automated tools are not yet capable of catching all issues. It is important to go through the checklist, making use of automated tools where possible, and manual processes otherwise).
        1. WCAG AODA accessibility audit checklist
        2. tota11y Bookmarklet
        3. Lighthouse Dev Tool
  • Expected Results
    • Passes WCAG 2.0 AA requirements
  • Stop Test
    • Refresh the browser to return the page to its initial state
    • Quit the tool you are using to validate

Ad-hoc

Description
Improvised tests for quickly discovering critical issues, and uncovering ones that may be outside of formalized testing.

Protocol
Attempt to use the tool in various situations, using your imagination and freedom to explore the interface and interactions.

Site
Demo