Web Accessibility Auditing

Using inspection methods and a screen reader for accessibility auditing

Jennifer Mankoff

University of Washington

2025-03-05

Announcements

Learning Goals

• Announcements

• Contents of an Audit

• How to do the audit

Quick Reminder

Link to these slides:

• Turn on captioning
• Turn on recording

Reminders

• As you move toward implementing any part of your project, your code must go in your team gitlab repository
• We’re going through the process you’ll use on Wednesday in class today.

Contents of an Audit

Learning Goals

• Announcements

• Contents of an Audit

• How to do the audit

Audit “Problem Reports”

• Name/Brief Description - Brief and Specific (Unique)
• Testing Method - What tools found this problem (screen reader? manual? etc)
• Evidence - WCAG guideline violated; screenshot with evidence of the violation.
• Explanation - Explain the issue and possible causes.
• Severity & Justification (next slide)
• Possible solution

Severity

Severity - Rank severity 1-4

1. Cosmetic
2. Minor: Low Priority
3. Major: High Priority
4. Catastrophe

Severity Justification

Justify your ranking in terms of frequency, impact and persistence.

• Frequency - Is the problem common or rare?
• Impact - Is it hard or easy to overcome this?
• Persistence - Is there a way to work around this problem?
• Possible Solution - Explain a potential solution to improving the accessibility.

Example

Header (bad)

• Description: Color Contrast Issue
• Testing Method: WebAim Contrast Checker
• Evidence: Violated Guideline

Header (good)

• Description: Very Low Color Contrast for Text
• Testing Method: WebAim Contrast Checker
• Evidence: Guideline violated: 1.4.3 Contrast (Minimum)

Provides specific guideline

Example Explanation (bad)

Explanation: There is bad contrast between the elements in the text for the given application. This will make it hard for people to use the app.

This doesn’t specify what has bad contrast. It doesn’t explain how it will be hard or who might be impacted or

Example Explanation (good)

Explanation: This accessibility issue violates success criterion 1.4.3 Contrast as the color contrast between the text and color of the buttons does not meet the required contrast ratio making the text not easily distinguishable.

This could create a challenge for users with low vision or other vision impairments because of the inadequate contrast of colors in the application. As a result, some users may not be able to fully engage with the functionalities of this application and this could even cause users to experience additional negative consequences while trying to navigate this issue.

Example Severity (bad)

Severity Rating: 3

Justification: The application will make it hard for users who do not have good vision since they will not be able to see the text on the buttons. Which will make it hard for the person to use the app.

Does not explain the frequency of the issue. Does not talk about the impact of this violation or if it could be avoided.

Example Severity (good)

Severity Rating: 3

Justification: Frequency is high on this app because there is more than one color contrast error on this page. Impact is high since this is an issue that disrupts the main functionality of the app, making it hard to overcome.

This in return impacts the user’s ability to interact with the rest of the content on this app. Persistence is high as this accessibility issue cannot be avoided due to it being one of the main features of the app.

Example Solution (bad)

Possible Solution: Change the buttons colors to something that makes the contrast better

Not specific enough

Example Solution (good)

Possible Solution: To improve this, the developer should increase the contrast ratio by either

1. making the color of the text darker (e.g., black text against the light gray button) or
2. making the color of the buttons darker (e.g., dark gray button against with white text).

How to do the audit

Learning Goals

• Announcements

• Contents of an Audit

• How to do the audit

Scenario (for today): Load it up on any device!

• Accessible University (not accessible)
• Accessible University (accessible)
• Accessible University Source
• Information about Accessible University

Originally developed at UW by AccessComputing

Break into pairs

• One person load it on your laptop (use the Safari browser on os x)
• One person load it on your phone
• Start a google document to keep track of your findings. Break it into sections (one per problem or group of similar problems).

Load Accessible University

Follow the guide

• Check for videos (no)
• Check rotation (what do you notice?)
• Check if the form is visually understandable (labels)

What to do with that?

Check the WCAG beginner’s guide to make sure it’s a problem. In this case, it’s bad UX but doesn’t rise to “access problem”

Text Resizing

• Does text resize
• Is it legible?

What to do with that?

Fill out all the parts of the problem report using our form

• Name/Brief Description (Unique)
• Testing Method: Visual Inspection
• Evidence: Take a photo; add in the success criterion (1.4.4)

Explanation

• Explanation: This app issues violates success criterion 1.4.4 Resize Text, because text doesn’t resize properly on an iPhone. This is challenging for user who cannot read small fonts easily.
• Severity 3

Severity Justification

• Justification: Frequency is high because it affects all text. Impact is medium because the reader can zoom in and out (they have to scroll a lot then though). Persistence is high because there isn’t an easy work around

Discuss difference between impact and persistence here

Solution

This one is actually quite hard to solve, but Craig Hockenberry’s blog post on dynamic type is both a demonstration of a working solution and an explanation of how to solve it.

Color Contrast

One easy way to check one the web is using WebAim’s Wave

This is much easier on a laptop! The link above loads our sample bad web page. Look at “contrast errors”

Note: You can group these all into one problem report

Screen Reader: Textual Alternatives

Simplist to check with Wave. Click on “details” and check them all. You’ll see

• 3 x missing alt text
• 6 x linked image missing alt text
• 2 x suspicious alt text (much further down)

Screen Reader: Order of Elements

Order of elements can be checked two ways

1. Tab through things (laptop only)
2. Click on “Order” in WAVE

This can also be checked on a phone with an actual screen reader – it will be your “swipe order”

Turning on your screen reader

iPhone: Can be done in settings -> accessibility -> voiceover

OSX: Settings -> search for voiceover

ALT-Tab to safari

• Try it: Read the title; use VO (control-option) to move around
• iPhone users try swiping (swipe up slowly until you hear 3 beeps to switch apps from settings)

As you move around

• Check ALT text
• Check roles (“navigation”; “button”; etc)
• Check headings
• Try to operate the app (fill in the form)

Some things I noticed

• “required fields in blue” (not visible to screen reader user)
• I couldn’t complete the form. It didn’t tell me where the error was
• form labels read twice on laptop

Other issues - Missing “skip link” - Heading level not consistent with semantics - Carousel not accessible

All 18 problems

Any questions?

Time for questions

Try it again (Accessible version)

First, turn off voicover

Follow the guide

• Check for videos (no)
• Check rotation (what do you notice?)
• Check if the form is visually understandable (labels)

Text Resizing

• Does text resize
• Is it legible?

Color Contrast

One easy way to check one the web is using WebAim’s Wave

This is much easier on a laptop! The link above loads our sample bad web page. Look at “contrast errors”

Note: You can group these all into one problem report

Screen Reader: Textual Alternatives

Simplist to check with Wave. Click on “details” and check them all. You’ll see

• 3 x missing alt text
• 6 x linked image missing alt text
• 2 x suspicious alt text (much further down)

Screen Reader: Order of Elements

Order of elements can be checked two ways

1. Tab through things (laptop only)
2. Click on “Order” in WAVE

Now turn on your screen reader

As you move around

• Check ALT text
• Check roles (“navigation”; “button”; etc)
• Check headings
• Try to operate the app (fill in the form)

Any questions?

Time for questions