Website Accessibility Testing Workshop

WordCamp U.S. 2022

Amber Hinds and Alex Stine

About the Speakers

Amber Hinds is a white woman in her 30's with brown hair and a friendly smile.

Amber Hinds

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Alex Stine is a white male in his 20's.

Alex Stine

Alex Stine is a Cloud Platform Engineer at Waystar and an independent accessibility consultant. He is part of the core accessibility team, regularly contributing to WordPress accessibility, and is an organizer for WP Accessibility Day.

Slides & Questions

Slides can be viewed on GitHub pages. Go to EqualizeDigital.com/WCUSslides to be redirected.

Livestream questions: Tag @heyamberhinds #WCUSa11yTesting on Twitter

Agenda

  • Testing process
  • Automated accessibility testing
  • Keyboard testing
  • Screen reader testing
  • Independent testing time
  • Q&A and discussion

Testing Process

  1. Run an automated scanning tool to check for obvious accessibility problems.
  2. Manually test a representative page of every type (home, archives + singles, and any pages with special features):
    • with a keyboard only
    • with the website zoomed to at least 200% (400% is better)
    • with a screen reader
  3. Resolve all issues from scan and manual testing.
  4. Bonus: bring in screen reader users or other users with disabilities for user testing to confirm accessibility.

Automated Accessibility Testing

Why start with automated scans?

Speed up identification of many problems in bulk and rapidly provide a full site assessment.

Don’t waste auditor or user tester time identifying and reporting on problems that can be identified automatically. Saved time = saved cost.

Side note: many lawsuits list WAVE errors in complaint.

Single Page Accessibility Scanners

Websites or browser extensions that allow you to test one page at a time.

Bulk Accessibility Scanners

Plugins or SaaS solutions that will scan your entire website at once. These provide high level overviews of problems existing sitewide and can provide historical data.

Limitations of Automated Scanners

Automated testing tools only catch 30-50% of issues (depending upon who you ask).

Many accessibility problems require human judgement - either to find the problem in the first place or to assess the issue and decide on a proper solution.

Don't rely on automated testing tools alone. Manual testing is required to achieve true accessibility.

Web Content Accessibility Guidelines (WCAG)

  • Measurable criteria you can use to assess the accessibility of websites, software, or documents.
  • Generally you want to meet WCAG 2.1 AA as a minimum standard, but try for AAA where possible.
  • WCAG Quick Reference (Google Sheet)
  • WCAG conformance is helpful, but utimately it's about usability.

Keyboard Testing

Why Keyboard Test Before Screen Reader Testing

Not all keyboard-only users are screen reader users. People who are sighted but have mobility challenges (limb diferences, severe arthritus, paraplegia, etc.) may use only a keyboard to navigate the web.

Screen readers add accessibility features (such as focus outlines) you may not realize are missing if you only test with a screen reader.

Keyboard-only testing allows you to focus on functionality, then you can screen reader test and focus on what you hear and how things are announced.

How to Keyboard Test

Open a Chrome or Firefox browser. Using the tab key and arrow keys to move through the website. Press return to follow links. Use the return key or space bar to trigger buttons.

Do everything that you would want website users to do: engage with sliders or carousels, add products to carts and check out, fillout and submit forms, etc.

If you run into a problem, inspecting the code can help to pinpoint the problem.

What We're Looking For: Focus

  • An obvious focus outline is present on all focusable elements (2px, with an offset and sufficient color contrast).
  • Focus order follows the order of the page (left to right, top to bottom).
  • Hidden elements are not focusable.
  • Jump or anchor links shift keyboard focus in addition to scrolling.
  • Popups receive focus when opened and cannot be tabbed out of without closing it with a button.

Pro Tips for Tracking Focus

If there isn't a focus outline at all:

  1. Check styles in the inspector for CSS disabling the outline and uncheck the box so that code is ignored by your browser.
    Chrome dev tools screenshot showing CSS styles for various elements with :focus selectors and outline: none !important;
  2. Add your own styles to the inspector stylesheet.
    :focus {
								    outline: 2px solid;
								    outline-offset: 2px;
								    outline-color: -webkit-focus-ring-color;
									}

If hidden elements get focus:

  1. Open the console in dev tools.
  2. Click the Create Live Expression button. eye icon used by Chrome dev tools to open the live expression toolbar.
  3. Type document.activeElement
  4. Click outside of the Live Expression UI to save.
Chrome dev console showing the focused elememt under a heading of document.activeElement

What We're Looking For: Usability

  • No Functionality requires a mouse and everything can be reached with a keyboard only.
  • Skip links exist and jump to the correct section on the page.
  • Links in body content are underlined/don't rely on color alone.
  • Any content that autoplays for more than 5 seconds has a pause button.
  • Form fields have visible labels with an obvious required indicator (“required” is better than *).
  • No changes of content or context without warning or user action.

What We're Looking For: Content

  • Only links are underlined - no underlines for emphasis.
  • If the language of a section changes the new language is declared with an HTML lang attribute
  • Videos have accurate captions.
  • Videos and audio files have a transcript immediately after the media.
  • Nothing is written in all caps.
  • Manually check color contrast, especially for text over images.
  • No images are added of text.

Popup Accessibility

  • Do you really need a popup?
  • Avoid popups that open based on some condition other than a user triggered condition such as a button click/selection. Changes in context with no warning can be confusing.
  • When popup opens, focus is shifted to the open popup and screen readers announce that a popup has opened.
  • Popup contains a heading and accessible content.
  • Focus when hitting the tab key is locked so user cannot leave the popup without closing it.
  • Close button is appropriately labeled and works with keyboard only. Escape should also close the popup.
  • When popup is closed user’s focus returns to where they were on the page when it opened.

Keyboard Testing Demo

Demo time! Follow along as Amber keyboard tests two websites.

Screen Reader Testing

Recommended Screen Readers

Getting Started with a Screen Reader

  • NVDA keyboard shortcuts
  • VoiceOver keyboard shortcuts
  • Use the tab and arrow keys to move through elements.
  • To make a screen reader stop reading hit CTRL in NVDA or Caps Lock in VoiceOver.
  • Turn on speech viewer in NVDA: Preferences > Tools > Speech Viewer

What to Listen For

  • Link anchor text is meaningful without surrounding content.
  • Image alternative text accurately describes the purpose of the image on the page.
  • There are no empty links or unlabeled buttons.
  • Form error and success messages are announced by the screen reader.
  • If you don't hear labels for expected icons like search, mobile nav menus, etc.

Screen Reader Testing Demo

Demo time! Follow along as Alex shows screen reader testing with NVDA.

Independent Testing Time

15 minutes for testing your own website.

Take note of things that surprised you and things you're not sure about for Q&A and discussion.

User Testing

Including people with disibilities in your testing process is highly recommended.

Users test differently than you do as the website builder or owner. Typically they test specific functionality or user journeys.

Users testing will also alert you to broader UX issues.

Where to find users for user testing

  • For-profit companies or consultants
  • Nonprofit organizations
  • Schools or group homes for people with disabilities.
  • Ask your customers - you may already have someone in your network.
  • Go beyond screen reader users. Include people who have mobility challenges or cognitive impairments.

Q&A and Discussion

Keep Learning

WordPress Accessibility Meetup

Meets twice per month on the first Thursday at 10 AM central and third Monday at 7 PM central via Zoom. All meetups are live captioned and pre-approved for continuning ed credits with the IAAP.

WordPress Accessibility Day

Free 24 hour conference November 2-3 held via Zoom. Live captioned and sign language interpretation.

Contact Us

Amber Hinds

Alex Stine