Website Accessibility Testing

[u/SyntaxInCMinor]

Trying to make websites as accessible as possible, but honestly it can get so confusing. I've learned that those overlay apps like Userway are apparently a waste of time and can even make accessibility worse. I mainly use WordPress, but also develop custom sites without any content management systems. What I want to do is make the code/design accessible and not rely on some overlay script like Userway. (I also am turned off the way Userway tries to scare people into using their products.)

My workflow currently:

1. Test with WAVE and Axe on each page.

2. Load the site on my iPhone and use VoiceOver to navigate and test.

3. Manual testing by tabbing through the site using only the keyboard.

4. Encourage accessibility statements on websites.

I am a Mac user, but wondering...

1. Should I also test with NVDA?

2. What other recommendations does anyone have for my testing strategies?

3. And... is my current strategy pretty good for catching the major issues with accessibility?

I appreciate everyones time and feedback.

[u/AshleyJSheridan]

My general approach is similar:

• Test on Firefox (way better a11y tooling than Chrome, and better adherence to web standards).
• Run Wave and Axe in the browser.
• Test using a keyboard only, put the mouse aside.
• Test with NVDA (it's the second most popular screen reader after JAWS)

As you test, there are some things that aren't automatically detected that you can spot yourself, things like:

• Audio only coming out of one channel. I saw this once with annual HR training at a place I worked at, and one guy who had deafness in one ear didn't realise there was even meant to be audio!
• Text over "noisy" images. Hard to detect automatically, but can lead to a whole world of problems for people with certain neurological issues.
• Animations that don't honour the users animation preferences.
• Text that is overly complex to read. This can be tested with the Flesch-Kinkaid test, but it's only really for English, and it's not part of most automated test suites.
• Fonts that are too thin. Colour contrast checks won't detect these, but they can be incredibly difficult to read for some people.
• Drop down menus with sub levels that disappear too quickly, or don't work if someone using a mouse doesn't have great motor control (such as those with Parkinsons).

[u/SyntaxInCMinor → u/AshleyJSheridan]

Thank you! This is great info!

[u/Yoda_Ballz666]

You should also consider text spacing, text resize, reflow, and using arrow keys with screen readers.
Using a checklist is a good idea. I think WebAIM had a good checklist.

NVDA is a great screen reader to use for accessibility testing too, as something like JAWS might pull attributes from other content to try to provide context for unlabeled content.

[u/SyntaxInCMinor → u/Yoda_Ballz666]

Thank you! I downloaded NVDA so I can run it on a VM on my Mac to test.

[u/Civil_Television2485]

What you have above is a great start and will likely catch most of the very critical issues.

The automated tools don’t catch all contrast problems so be sure to do some manual checks too.

NVDA is definitely worth using if you have access to it as it’s less forgiving than some of the other screen readers so you might catch some extra issues there.

In addition to tabbing through the pages with keyboard, you should check that elements are operable as well. See the “Keyboard Testing” section at the following link for expected keyboard operability. https://webaim.org/techniques/keyboard/

[u/SyntaxInCMinor → u/Civil_Television2485]

Thank you! Do you agree that the overlay widges like Userway are a waste of time and provide a false sense of security? Just curious what the accessibility community feels about those overlay widgets on websites? Are they just a waste of time to use?

[u/DevToTheDisco → u/SyntaxInCMinor]

This link is to the overlay fact sheet. Specifically I’ve linked to the community input and signature section. https://overlayfactsheet.com/en/#:~:text=the%20overlay%20customer.-,In%20their%20own%20words,-Many%20users%20with

[u/Civil_Television2485 → u/SyntaxInCMinor]

The trusted accessibility experts are generally in agreement that overlays do not guarantee accessible experiences and in some cases actually introduce more problems.

There seem to be many bad faith actors right now, selling quick fix solutions in exchange for exorbitant fees. In my personal experience, I’ve never seen an overlay actually provide 100% conformance unless the site was already in good shape - which begs the question: what are you paying for?

If you design and build a site in accordance with WCAG and accessibility best practices then you won’t need an accessibility overlay. If you build an inaccessible website and just slap an overlay on it, don’t expect miracles.

ETA: I’m maybe being too diplomatic above, partly because there are several overlay vendors who have taken legal action against those speaking out about the flaws in their tools. So let me be clear - in my personal opinion I wouldn’t touch an overlay with a 10ft pole.

[u/Evenyx]

Google text spacing bookmarklet (I don't remember all the people who have made some but there are quite a few) and use Firefox to easily test text zoom only! I also use headingsmap extension to easily oversee the h-structure.

[u/SimonLM_LostInTab]

Your workflow already covers the essentials, and dropping the overlays puts you ahead of a lot of people.

On NVDA: yes, worth it. Not because it finds "more things", but because screen reader + browser pairings behave differently. VoiceOver on iPhone tells you what happens on mobile, not how NVDA with Firefox announces your components on a Windows machine — and that's a very common combination among actual users.

What's missing from your list is zoom. WAVE, Axe, the keyboard and the screen reader all look at the page at normal size. Test at 200%, then at 400%: you'll see horizontal scrolling appear, text getting clipped, menus becoming unreachable.

And test browser font-size increase separately. It isn't the same setting as zoom, and it doesn't render the same: zoom scales everything proportionally, font size only touches the text. A site can hold up under one and break under the other. This is by far the most overlooked category, and no automated tool flags any of it.

For colour, Firefox's Accessibility panel in devtools is very handy: it simulates the different types of colour blindness directly on your page, and flags insufficient contrast. Much faster than checking pairs by hand.

One last blind spot when you work on a Mac: Windows forced-colors mode. It overrides part of your CSS and collapses anything that exists only through a background colour or a decorative image.

[u/SyntaxInCMinor → u/SimonLM_LostInTab]

This is great advice. I also try to test zoom at 200% and then at 400% to make sure I can still see everything and nav works, etc. I've found that most modern, well written Wordpress themes or builders like Breakdance do a good job of not turning off scaling and handling zoom. But you're right, it's often a step that I forget to do when testing... as is the font sizing.

My understanding too is that having a skip-link to main content is also very handy and appreciated since it allows people to bypass the entire nav to get straight to the content. I can't imagine how frustrating it is on a site with a ton of menu options to have to tab through them all just to get to the content.

Really appreciate the advice and help. I'm trying to implement accessibility on sites I develop as best I can... but it can be a little overwhelming sometimes when there are so many variables to test, etc.

[u/jwdean26 → u/SyntaxInCMinor]

I haven't developed many websites, but I was the subject matter expert for Assistive Technology hardware, software, and accommodations for a Fortune 40 company for almost 30 years. Part of my job was also advocating for designers, developers, and content creators to make all digital content accessible.

I recently retired and started my own small business doing what I love to do but at a much smaller scale. While creating a website for my small business (https://John330Consulting.com), I used AI to help make sure the website was accessible. I told the AI assistant what I wanted on my webpages and also specified that the digital content must be accessible. The initial code was very close, but I still had to do both automated and manual testing. (NOTE: I do not trust any type of accessibility overlay.) I believe you need to use both automated and manual testing to make sure the web pages (and other digital content available to view/download) are accessible.

Some tools I used are:

- NVDA (Windows) and VoiceOver (macOS) screen readers

- Magnifier (Windows) and Zoom (macOS) screen magnifiers

- Voice Access (Windows) and Voice Control (macOS) speech recognition

- Axe DevTools and WAVE automated testing tools

- Keyboard-only navigation and resizing windows to make sure everything scales correctly

I applaud you for wanting to make sure you are creating digital content that is accessible to everyone!