Toward amazing accessibility!

Introduction to accessibility testing and 'shifting left' to operationalise amazing accessibility throughout the development life cycle.

Synopsis

IT departments in the Higher Education sector and elsewhere know they must commit to accessibility, but how can we take this ambition and embed it within our operations?

Within the University of Southampton IT department (which is named iSolutions) senior leadership committed to delivering "amazing accessibility" but has not yet set out how this might happen.

In this internal presentation within the department, held on Global Accessibility Awareness Day on 20 May 2021, I attempt to show how we could start that journey. This was joint session of both the Digital Accessibility Community of Practice and the Testing Community of Practice. The event was open to all iSolutions staff.

Whilst some of the language and examples are specific to our department I believe many should find this information of interest and use.

Watch the presentation

Introduction: 0:00
What accessibility barriers might users experience?: 3:09
Examples from University of Southampton iSolutions services: 5:58
Introducing shift left and accessibility gatekeeping 8:56
Accessibility testing: 9:18
Automated tests: 11:52
Simple manual accessibility tests you can use now: 16:00
Gherkin tests: 26:44
Prioritising accessibility defects: 29:14
Accessibility in the build process: 30:16
Accessibility in the design process: 31:04
Accessibility in the requirements process: 35:04
Accessibility and UK law: 35:37
Accessibility statements: 37:41
Accessibility and procurement: 39:29
Accessibility in the release process: 41:18
So what now?: 43:52
A wave of momentum toward accessibility: 46:24

Slide deck

Videos and presentations referred to in the presentation

Back to top.

Other references

Back to top.

Testing

My Testing Spreadsheet

This is the testing spreadsheet I built.

Simple, achievable tests

  1. Run automated tests, verify failures, and report back to developers for resolution.
  2. Validate pages
    1. The above two should cover 4.1.1 Parsing
  3. Test the website is operable using a keyboard, do make sure to test at increased zoom, some interface details that are shown at increased zoom such as hamburger menu
    1. Covers:
      1. 2.1.1 Keyboard
      2. 2.1.2 No Keyboard Trap
      3. 2.1.3 Keyboard (No Exception)
      4. 2.1.4 Character Key Shortcuts
      5. 2.4.1 Bypass Blocks
      6. 2.4.11 Focus Appearance (Minimum)
      7. 2.4.12 Focus Appearance (Enhanced)
      8. 2.4.3 Focus Order
      9. 2.4.7 Focus Visible
  4. Test for reflow, text-resize and text-spacing
    1. Set the browser window to 1280px wide.
    2. Zoom in to 400%.
    3. Check content & functionality is available, and no horizontal scrolling (in LTR languages).
    4. Check text is at least 200% bigger.
    5. Turn on text-spacing (e.g. with a bookmarklet).
    6. Un-zoom through each media query, looking for overlaps / missing content.
      1. The above covers
        1. 4.4 Resize text
        2. 4.10 Reflow
        3. 4.12 Text Spacing
  5. Test in greyscale (use Accessibility Insights or Greyscale the web)
    1. 4.1: Use of Colour
  6. Test with CSS disabled and images turned off.
    1. 1.1 Non-text Content
    2. 3.2 Meaningful Sequence
    3. 4.5 Images of Text
  7. Test in high contrast mode
    1. See Quick Tips for High Contrast Mode for tips on resolving issues.
  8. Test with screen reader
    1. How A Screen Reader User Surfs The Web
      1. Short excerpt
    2. How screen readers navigate data tables
    3. 5 Myths About Screen Readers That Can Hurt Accessibility
    4. NVDA
      1. Useful keyboard shortcuts
      2. Testing accessibility using NVDA
      3. Accessibility Testing with NVDA
        1. How screenreader usage differs from keyboard usage
        2. 3 Quick Tasks to Get Familiar with Screen Readers (VoiceOver on Mac)
        3. Accessibility testing as a screen reader user
        4. Learn NVDA: Using the Internet, Part 1
  9. Review colours used
    1. For icons / UI components with no text, must have minimum 3:1 contrast ratio
    2. For text must have minimum 4.5:1 contrast ratio
    3. For AAA level aim for 7:1 or higher.
    4. Check focus / hover states comply with 2.4.11
    5. If links are not underlined check use the webaim link checker to check contrast meets accessibility guidelines.
    6. Use button buddy to check button and similar UI
    7. University brand colours and their accessibility are set out in the colour accessibility matrix.
    8. How to deal with text over graphics or gradients.
    9. Evaluating Color and Contrast—How hard can it be? This is an important article that will demonstrate how many aspects of testing for colour contrast could be missed.
    10. The above helps to cover:
      1. 1.4.11 Non-text Contrast (Level AA)
      2. 1.4.3 Contrast (Minimum) (Level AA)
      3. 1.4.6 Contrast (Enhanced) (Level AAA)
      4. 2.4.11 Focus Appearance (Minimum)
      5. 2.4.12 Focus Appearance (Enhanced)
  10. Turn on the OS “prefers reduced motion” flag and check there are no animations, flashes, or auto playing videos.
    1. 3.3 Animation from Interactions
  11. Use some further quick tools:
    1. Use 44x44 Pixel Cursor Bookmarklet to test:
      1. 2.5.5: Target Size
      2. 2.5.8: Target size (minimum)
    2. Use headingsMap browser extension to verify heading structure to test:
      1. 2.4.6: Headings and Labels
    3. Web Disability Simulator to test how the page performs for those with visual impairments and Specific Learning Differences.
  12. Run a more detailed test using the assessment tool in the Microsoft accessibility insights browser plugin.
Back to top.

More about screen reader issues

Back to top.

Testing with screen reader

Note: Accessibility tests could result in a site that passes with flying colours, but only testing with users who have impairments will prove if it is a good experience.

Beginner guides to accessibility testing and development

Back to top.

More detailed Accessibility Testing guides / plans

Back to top.

Browser Extensions to assist testing

Back to top.

Bookmarklets to assist testing

Back to top.

Commandline tools

Back to top.

Continuous integration

Back to top.

Build

Frontend development

Back to top.

GitHub

Back to top.

Linters

Back to top.

React / JS

Back to top.

Angular

Back to top.

For Visual Studio Code

Back to top.

Atom

Back to top.

Javascript frameworks

Back to top.

Bootstrap

Back to top.

Integration with testing frameworks

Back to top.

Cypress

Back to top.

Selenium

Back to top.

Jasmine / QUnit

Back to top.

Design

Back to top.

Mobile

Back to top.

Requirements

Release

Dashboards

Back to top.

Legislation

Getting buy-in

Back to top.

Books

Back to top.

Communities and mailing lists

Back to top.

Learn more

Back to top.