philsherry/eyefund-audit

Accessibility audits for eyefund.info

eyefund-audit's Issues

🎤 🐲 Voice recognition: Windows

Test the service with your voice on Windows

• Test the service with Dragon

Alternative

Use this as a last report if no one is available to meet timescales.

• Test the service with Windows native voice control

🤖 🖥 JAWS: Windows

Test the service with JAWS on Windows.

Note: Use this primarily with IE11, but also Edge if time permits.

🧰 ⚙️ Run Cypress tests

Run Cypress tests, reporting any errors that are flagged.

🤖 🖥 Screen reader: macOS

Test the service with VoiceOver, the native screen reader on macOS.

Important: Use this with Safari.

System Preferences > Accessibility > VoiceOver

✍️ 📚 Report: Executive summary

Write the Executive Summary for the final report.

🎛 🖥 Native display settings: macOS

Test the service with various native settings on a macOS computer.

Invert colours

• System Preferences > Accessibility > Display > Invert colours

High-contrast mode

System Preferences > Accessibility > Display

• Display contrast: drag the slider to at least 50%

Enable Colour Filters > Greyscale

System Preferences > Accessibility > Colour Filters

• Enable color filters > Greyscale

Use the Accessibility Options panel on macOS

The Accessibility Options panel offers shortcuts to quickly turn on or turn off common accessibility features, such as Zoom, VoiceOver and Sticky Keys.

Open Accessibility Options

Press these keys together: Option ⌥+ Command ⌘+F5. On notebook computers with a Touch Bar, you may need to press the Fn key as well. On notebook computers with Touch ID, triple-press Touch ID. (If you press and hold the Command ⌘ key while doing this, VoiceOver turns on or off.)

🦺 🖥 Native display settings: Windows

Test the service with various native settings on a Windows computer.

Tasks

Navigate the service using High Contrast Mode in Windows 10, to ensure nothing relies on colour alone and that no content vanishes or becomes unusable (such as buttons).

Accessibility Options

Test these as a minimum:

• Increase font size 200% (in browser)
• High contrast mode
• Invert colours
• Greyscale

Further information

• Change the size of text in Windows 10
• Use high contrast mode in Windows 10
• Make Windows easier to see
• Guide for people who are blind or low vision

For the rare times we have to test video

• Change closed caption settings

🧭 ⌨️ Keyboard-only

Make sure each page is fully navigable with only the keyboard.

🕵 🖥 Zoomed: Desktop

Test the service at 400% zoom magnification on desktop devices.

Windows

• Use Magnifier to make things on the screen easier to see

• make sure each page works with the native screen magnifier

or

• make sure each page works with the ZoomText screen magnifier

MacOS

• make sure the service works with the native screen magnifier

System Preferences > Accessibility > Zoom

🕵 📱 Zoomed: Mobile

Test the service at 400% zoom magnification on mobile devices.

Android

Test the service with the native screen magnifier on an Android device.

Settings > Accessibility > Magnification Gestures

iOS

Test the service with the native screen magnifier on an iOS device.

Settings > Accessibility > Zoom

✍️ 📚 WCAG 2.1 AA results

Add full WCAG results to the report as Appendix I.

Appendix I: Web Content Accessibility Guidelines (WCAG) 2.1

Classification of Accessibility Issues

The following scoring system was used to indicate the status of the service with regards to each W3C WAI checkpoint, up to and including Level AAA.

Status	Description
🟢 (P) Pass	The service meets the requirements of the checkpoint.
🔴 (H) Fail: High Priority	The service fails to meet the requirements against A criteria measured against WCAG 2.1 and more severe accessibility issues were identified.
🟠 (M) Fail: Medium Priority	The service fails to meet the requirements against AA criteria measured against WCAG 2.1
🟣 (L) Fail: Low Priority	The service almost meets the requirements of the checkpoint. Only a small number of minor problems were identified. The site fails to meet the requirements against AAA criteria measured against WCAG 2.1
⚪️ (N/A) Not Applicable	No content was found on the service to which the checkpoint would relate.

Perceivable

Information and user interface components must be presentable to users in ways they can perceive.

Guideline 1.1 Text Alternatives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Status	Level	Success Criterion
	A	1.1.1 Non-text Content

Guideline 1.2 Time-based Media

Provide alternatives for time-based media.

Status	Level	Success Criterion
	A	1.2.1 Audio-only and Video-only (Prerecorded)
	A	1.2.2 Captions (Prerecorded)
	A	1.2.3 Audio Description or Media Alternative (Prerecorded)
	AA	1.2.4 Captions (Live)
	AA	1.2.5 Audio Description (Prerecorded)
	AAA	1.2.6 Sign Language (Prerecorded)
	AAA	1.2.7 Extended Audio Description (Prerecorded)
	AAA	1.2.8 Media Alternative (Prerecorded)
	AAA	1.2.9 Audio-only (Live)

Guideline 1.3 Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Status	Level	Success Criterion
	A	1.3.1 Info and Relationships
	A	1.3.2 Meaningful Sequence
	A	1.3.3 Sensory Characteristics
	AA	1.3.4 Orientation (Added in 2.1)
	AA	1.3.5 Identify Input Purpose (Added in 2.1)
	AAA	1.3.6 Identify Purpose (Added in 2.1)

Guideline 1.4 Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

Status	Level	Success Criterion
	A	1.4.1 Use of Color
	A	1.4.2 Audio Control
	AA	1.4.3 Contrast (Minimum)
	AA	1.4.4 Resize text
	AA	1.4.5 Images of Text
	AAA	1.4.6 Contrast (Enhanced)
	AAA	1.4.7 Low or No Background Audio
	AAA	1.4.8 Visual Presentation
	AAA	1.4.9 Images of Text (No Exception)
	AA	1.4.10 Reflow (Added in 2.1)
	AA	1.4.11 Non-text Contrast (Added in 2.1)
	AA	1.4.12 Text Spacing (Added in 2.1)
	AA	1.4.13 Content on Hover or Focus (Added in 2.1)

Operable

User interface components and navigation must be operable.

Guideline 2.1 Keyboard Accessible

Make all functionality available from a keyboard.

Status	Level	Success Criterion
	A	2.1.1 Keyboard
	A	2.1.2 No Keyboard Trap
	AAA	2.1.3 Keyboard (No Exception)
	A	2.1.4 Character Key Shortcuts (Added in 2.1)

Guideline 2.2 Enough Time

Provide users enough time to read and use content.

Status	Level	Success Criterion
	A	2.2.1 Timing Adjustable
	A	2.2.2 Pause, Stop, Hide
	AAA	2.2.3 No Timing
	AAA	2.2.4 Interruptions
	AAA	2.2.5 Re-authenticating
	AAA	2.2.6 Timeouts (Added in 2.1)

Guideline 2.3 Seizures and Physical Reactions

Do not design content in a way that is known to cause seizures or physical reactions.

Status	Level	Success Criterion
	A	2.3.1 Three Flashes or Below Threshold
	AAA	2.3.2 Three Flashes
	AAA	2.3.3 Animation from Interactions (Added in 2.1)

Guideline 2.4 Navigable

Provide ways to help users navigate, find content, and determine where they are.

Status	Level	Success Criterion
	A	2.4.1 Bypass Blocks
	A	2.4.2 Page Titled
	A	2.4.3 Focus Order
	A	2.4.4 Link Purpose (In Context)
	AA	2.4.5 Multiple Ways
	AA	2.4.6 Headings and Labels
	AA	2.4.7 Focus Visible
	AAA	2.4.8 Location
	AAA	2.4.9 Link Purpose (Link Only)
	AAA	2.4.10 Section Headings

Guideline 2.5 Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.

Status	Level	Success Criterion
	A	2.5.1 Pointer Gestures (Added in 2.1)
	A	2.5.2 Pointer Cancellation (Added in 2.1)
	A	2.5.3 Label in Name (Added in 2.1)
	A	2.5.4 Motion Actuation (Added in 2.1)
	AAA	2.5.5 Target Size (Added in 2.1)
	AAA	2.5.6 Concurrent Input Mechanisms (Added in 2.1)

Understandable

Information and the operation of user interface must be understandable.

Guideline 3.1 Readable

Make text content readable and understandable.

Status	Level	Success Criterion
	A	3.1.1 Language of Page
	AA	3.1.2 Language of Parts
	AAA	3.1.3 Unusual Words
	AAA	3.1.4 Abbreviations
	AAA	3.1.5 Reading Level
	AAA	3.1.6 Pronunciation

Guideline 3.2 Predictable

Make Web pages appear and operate in predictable ways.

Status	Level	Success Criterion
	A	3.2.1 On Focus
	A	3.2.2 On Input
	AA	3.2.3 Consistent Navigation
	AA	3.2.4 Consistent Identification
	AAA	3.2.5 Change on Request

Guideline 3.3 Input Assistance

Help users avoid and correct mistakes.

Status	Level	Success Criterion
	A	3.3.1 Error Identification
	A	3.3.2 Labels or Instructions
	AA	3.3.3 Error Suggestion
	AA	3.3.4 Error Prevention (Legal, Financial, Data)
	AAA	3.3.5 Help
	AAA	3.3.6 Error Prevention (All)

Robust

Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

Guideline 4.1 Compatible

Maximize compatibility with current and future user agents, including assistive technologies.

Status	Level	Success Criterion
	A	4.1.1 Parsing
	A	4.1.2 Name, Role, Value
	AA	4.1.3 Status Messages (Added in 2.1)

🤖 🖥 NVDA: Windows

Test the service with NVDA on Windows.

Note: Use this primarily with Firefox, but also Chrome if time permits.

🎤 📱 Voice recognition: iOS

Test the service with your voice on iOS with Safari, using Voice Control.

Settings > Accessibility > Voice Control

🎛 📱 Native display settings: iOS

Test the service with various native settings on an iOS device.

Tasks

Large text

Settings > Safari > Page Zoom

• 200%

Invert colours

Settings > Accessibility

• Smart Invert

Greyscale

Settings > Accessibility > Colour Filters

• Greyscale

👩🏽‍🔬 👨🏼‍💻 Check code quality

Check code is valid, peformant and follows design guidelines.

Tasks

• make sure each page contains valid HTML
• make sure each page contains valid CSS
• make sure the JS doesn’t throw errors
• check for any message localisation properties which may have leaked into the rendered view
• check page content against any guidance on publishing
• check design patterns against established patterns

🐕‍🦺 📚 Accessibility Statement

• amend accessibility statement based on the completion of report

📲 📟 Landscape mode

Check the app functions correctly in landscape mode.

• iOS
• Android

🎤 🖥 Voice recognition: macOS

Test the service with your voice on macOS with Safari, using Voice Control.

System Preferences > Accessibility > Voice Control

👩🏽‍🦼💨 Usability and performance

Check page usability and performance.

Potential areas to consider here:

• are third-party items like trackers interfering with the performance?
• is everything still usable without JavaScript?
• does the page load interrupt the screen reader?

✍️ 📚 Report: Technical summary

WCAG violation summary

The following scoring system was used to indicate the status of the service with regards to each W3C WAI checkpoint, up to and including Level AA.

Status	Level	Description
🔴 (H) Fail: High Priority	A	The service fails to meet the requirements against A criteria measured against WCAG 2.1 and more severe accessibility issues were identified.
🟠 (M) Fail: Medium Priority	AA	The service fails to meet the requirements against AA criteria measured against WCAG 2.1

The following violations need fixing in order to comply to a AA standard.

Status	Level	Issue	Success Criterion	Journey / Step	Fix verified
🔴 (H)	A	#[issue]: [title]	[1.3.1 Info and Relationships]	[J1 S1]
🟠 (M)	AA

Other accessibility or usability issues

These have been prioritised in order of most problematic and causing annoyance to recommendations for making a users experience easier. Priority 1 issues must be fixed prior to the [full accessibility audit | retest].

Priority	Issue	Journey / Step	Fix verified
🔴 P1	#[issue]: [title]	[J1 S1]
🟠 P2
🟣 P3

🧑‍🎤 🤦 Cognitive and neurodivergent issues

A lot to consider here, but this needs rewriting into a real Issue. Until then, these are the things that we’re talking about.

Content blatantly borrowed from Gareth FW’s excellent article: UX Principles that include Cognitive Accessibility.

1. Standard Elements

   • Consistency
   • Consistent Labelling

2. Affordances and Signifiers

   • Actionable Elements
   • Colour and Meaning
   • Input Format
   • Labelling Form Controls

3. Simplicity

   • Adjustability
   • Form Layout
   • Grouping Form Elements
   • Instructions

4. Clear Communication

   • Colour and Meaning
   • Colour Contrast
   • Consistent Labelling
   • Descriptive Links
   • Error Messages and Correction
   • Input Format
   • Labelling Form Controls
   • Styling and Readability
   • Visible Focus

5. Redundancies

   • Adjustability
   • Choice
   • Colour and Meaning
   • Links to Alternative Formats

6. Patterns

   • Colour and Meaning
   • Focus Order
   • Form Layout
   • Grouping Form Elements
   • Headings

7. Recognition Rather than Recall

   • Consistency
   • Consistent Labelling
   • Grouping Form Elements
   • Labelling Form Controls
   • Standard Operating System Notifications

8. Variable Stimuli and the Pop-Out Effect

   • Colour and Meaning
   • Error Messages and Correction
   • Flicker

9. Feedback and Notification

   • Instructions
   • Colour and Meaning
   • Error Messages and Correction
   • Feedback and Assistance

10. User Control and Choice

    • Adjustability
    • Autoplay
    • Changing Focus
    • Choice
    • Controlling Media
    • Links to Alternative Formats
    • Timeouts

🖨 📚 Report: Compile the report

Compile the final report from the individual issues and summaries.

🤖 📱 Screen reader: iOS

Test the service with VoiceOver, the native screen reader on iOS.

Important: Use this with Safari.

Settings > Accessibility > VoiceOver

🎤 📱 Voice recognition: Android

Test the service with your voice on Android with Chrome, using Voice Access.

You’ll possibly need to install this app from Google if it’s not already on the handset.

Settings > Smart assistance > Accessibility

Downloaded services

• Voice Access

🎛 📱 Native display settings: Android

Test the service with various native settings on an Android device.

Tasks

Large text in Chrome or Edge

• Settings > Accessibility > Text scaling: drag the slider to 200%

Invert colours

Settings > Smart assistance > Accessibility

• Colour inversion

Greyscale

Settings > System > Developer options > Simulate colour space

• Monochromacy

🤖 📱 Screen reader: Android

Test the service with TalkBack, the native screen reader on Android.

Note: try and use Chrome (then, Firefox).

Settings > Accessibility > TalkBack

✍️ 📚 Report: User journeys

Add user journeys to the report as Appendix II.