QA & Testing
When performing QA testing, it is most helpful to use the assistive technology to gain insights on the experience. While there is a bit of a learning curve, you do not need to be an expert user. This is especially important because people may find themselves in situational or temporary conditions that forces them to pivot to using different methods of web navigation. So we must ensure that after some basic understanding of the assistive technology, the experience is logical and intuitive.
Manual Testing
In Manual QA, we can perform this in one of four ways:
Using a Keyboard
Using a Screen-Reader
Using Microsoft’s Accessibility Insights Guided Review
Running automated testing tools
Common Keyboard Controls
The navigation and interaction keys you will need for this exercise are:
Tab: Moves through all elements on the page.
Shift + Tab Goes backwards through the elements on the page
Enter / Return This is the “go” key to follow a link, a-la- clicking a button via mouse
Spacebar Can be used toggle checkbox values
Arrow Keys: Use to go up and down a page, select a radio button or move between interactive menus, or tab panels
There are “power users” of keyboard-only interactions utilizing multiple keystroke shortcuts to improve their experience. This is not always possible without applying accessibility best practices.
Keyboard Settings
You may have to go into your computer’s settings to ensure maximum accessibility using the keyboard:
MacOS
System Preferences > Keyboard
Select Shortcuts from the top utility menu
Check off, “Use keyboard navigation to move focus…”
Windows
Additional Checks for Browser Configuration
See Scott Vinkle’s screen-shots and visual walk-through of configuring browser settings for keyboard navigation. https://www.a11yproject.com/posts/2017-12-29-macos-browser-keyboard-navigation/
Performing Manual Testing (Keyboard)
Extracted from (https://web.dev/keyboard-access/)
Many different users rely on the keyboard to navigate applications—from users with temporary and permanent motor impairments to users who use keyboard shortcuts to be more efficient and productive.
Focus and the tab order
At a given moment, focus refers to what element in your application (such as a field, checkbox, button, or link) currently receives input from the keyboard.
[screenshot examples]
To move the focus on a page, use TAB key to navigate "forward" and SHIFT + TAB to navigate "backward."
The currently focused element is often indicated by a focus ring, and various browsers style their focus rings differently.
[Screenshot example]
The order in which focus proceeds forward and backward through interactive elements is called the tab order.
[WebDAV examples]
Interactive HTML elements like text fields, buttons, and select lists are implicitly focusable: they are automatically inserted into the tab order based on their position in the DOM. These interactive elements also have built-in keyboard event handling. Elements such as paragraphs and divs are not implicitly focusable because users typically do not need to interact with them.
Implementing a logical tab order is an important part of providing your users with a smooth keyboard navigation experience.
Content in Logical Order
To check if your application's tab order is logical, try tabbing through your page. In general, focus should follow reading order, moving from left to right, from the top to the bottom of your page.
Sample Test Cases with Keyboard
Open and Collapse Menu Items
Context: Are you aware of drop-down menu items?
Select Buttons
Select Checkboxes
Select Radio Buttons
Interact with Form Fields
Including Drop-Down Fields
Interact with Sliders or Carousels
Control Multimedia
Pause, Play, Stop, Forward, Back, Volume
View and navigate Links
Interact with a Map
Verifying logical order, top to bottom, left to right
Performing Manual Testing with a Screen-Reader
Getting Started with VoiceOver on MacOS
https://www.a11yproject.com/posts/2020-11-23-getting-started-with-voiceover-ios/
Deeper Dive:
See Matt Marquis’ Detailed Guide to VoiceOver
How to start testing your Website Using Voice Over
https://yakim.nl/articles/voiceover-testing/
Testing Considerations using VoiceOver
Do links make sense on their own?
Are you able to understand and identify buttons?
Performing Testing with Automated Testing Tools & Guided Manual Steps:
Lighthouse (Chrome & Firefox)
The Lighthouse tool is developed by Google. There are one of two ways you can access this free tool:
Via the Inspector (Chrome)
If you want to ‘save’ reports, you can save them as a GIST if you have a Github account. Then you can save the URLs in a spreadsheet or tracker of your choosing.
Do the Open Broadcast Studio Recording Here
Viewing the Report
Within the Lighthouse Report, there are sections that display the issues. When you expand each section, you will see the code snippet of the issue and information on how to fix it, typically to the WebDev Documentation.
Also included in this report structure are “manual” testing guidelines and recommendations. Similar to the automated testing results, there is a link with further information about how to perform the text and why it’s important.
Microsoft Accessibility Insights
Another free guided tool is Microsoft Accessibility Insights. Two key differentiators from the Lighthouse Report Tool are:
The “why” it matters to users, and
Showing the issue(s) on the web page to increase context
The details include links to the comprehensive World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) documentation. Developers, Product Managers, and QA analysts should be able to get the information they need to remediate and validate.
When using this tool, you can see a red outline with an exclamation mark to indicate an issue. Be sure to have “Visual help” on. When you toggle “expand all” you will also see all the issues, and suggestions for remediation;
Similar to the Lighthouse app, there is a guided section for the manual testing steps, called “Assessment”
Last updated
