Toward amazing accessibility!
Introduction to accessibility testing and 'shifting left' to operationalise amazing accessibility throughout the development life cycle.
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
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
Videos and presentations referred to in the presentation
- Why should we care about Digital Accessibility? Matthew Deeprose (University of Southampton).
- Accessibility Testing Coverage: Automation and Intelligent Guided Testing Glenda Sims (Deque).
- Agile Accessibility Requirements at Scale, Ben Allen, PNC.
- Unblocking Backlog Jams with Multi-DimensionalAccessibility Audits, Dave Rupert (Paravel)
- Beauty is Not Enough: Institutionalizing Accessibility at one of the World's Top 10 Largest Auto Makers, Alison Walden (Publicis Sapient).
- Auditing Design Systems for Accessibility, Anna Cook (Recurly).
- How Designers Forget to Consider Accessibility, Brandy Bora (Verizon).
- From Nothing to Something: How A Team of 2 Kickstarted an Accessibility Program, Alexis Lucio & Simarjeet (Sim) Kaur (Splunk).
- Top four web frustrations relate to accessibility issues.
- Inaccessible accordion on Uni COVID19 page INC1847426.
- UoS Student Data Snapshot - December 2020.
- Higher education and disability: Exploring student experiences.
- Homeworking During the Pandemic Proving a Pain in the Neck.
- Is Working From Home Ruining My Vision?
- This Is What Happens To Your Body When You Work From Home.
- Why Digital Accessibility and Sustainability Go Hand-in-Hand.
- UoS Access and Participation Plan.
- The Business Case for Digital Accessibility.
- Disability facts and figures.
- World Health Organisation: Assistive Technology.
- Accessibility isn't more work, you were just cutting corners before. The work was incomplete.
- iSolutions' strategy
- Digital Accessibility laws around the world.
- ETSI EN 301 549 V3.2.1 (2021-03)
- Teach Access Institutions course list (coded), 2018
- Accessible Technology Skills Gap Report, PEAT, 2018
- Accessibility Situation Report: An intro and update.
- "Nothing about us without us": Disability, the Sustainable Development Goals and the United Nations Convention on the Rights of Persons with Disabilities
Example Accessibility Statements from the University of Kent
- Kent also has a statement written by their DVC Education and Student Experience asking staff and students to "help the University meet accessibility standards"
- Model Accessibility Statements - evolving the approach by JISC.
- 5 key accessibility questions to ask when buying digital tools, sites or apps (POSTER)
My Testing SpreadsheetThis is the testing spreadsheet I built.
Simple, achievable tests
- Run automated tests, verify failures, and report back to developers for resolution.
The above two should cover
- 2.4.2 Page Titled
- 4.1.1 Parsing
- The above two should cover
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 may not appear until a screen is zoomed in. Check that the colours of the focus indicators, and changes to buttons states etc have sufficient contrast.
- Check that the colours of the focus indicators, and changes to buttons states etc have at least 3:1 contrast compared with the unfocussed state. Focus indicators should have 4px thick indicator on the shortest side of the control (but no less than 2px thick).
- You can skip repeated elements such as a navigation menu.
- All user pathways can be navigated using the keyboard without becoming "trapped" within an interface element.
- No specific timings are required for individual keystrokes.
- As you navigate using the keyboard that focusable components receive focus in an order that preserves meaning and operability.
If keyboard shortcuts are implemented that these can either be
- Turned off
- Remapped to different keys
- Are only operable while keyboard focus is upon the relevant component.
- 2.1.1 Keyboard
- 2.1.2 No Keyboard Trap
- 2.1.3 Keyboard (No Exception)
- 2.1.4 Character Key Shortcuts
- 2.4.1 Bypass Blocks
- 2.4.11 Focus Appearance (Minimum)
- 2.4.12 Focus Appearance (Enhanced)
- 2.4.3 Focus Order
- 2.4.7 Focus Visible
Test for reflow, text-resize and text-spacing
- Set the browser window to 1280px wide.
- Zoom in to 400%.
- Check content & functionality is available, and no horizontal scrolling (in LTR languages).
- Check text is at least 200% bigger.
- Turn on text-spacing (e.g. with a bookmarklet).
Un-zoom through each media query, looking for overlaps / missing content.
The above covers
- 1.4.4 Resize text
- 1.4.10 Reflow
- 1.4.12 Text Spacing
- The above covers
Test in greyscale (use Accessibility Insights or Greyscale the web). Ensure the content and interface retain intended contextual meaning, i.e. that colour is not solely used to convey meaning.
- 4.1: Use of Colour
Test with CSS disabled and images turned off. Confirm that content is still in sequence, usable, and understandable. Confirm that alternative text contextually meaningful.
- 1.1.1 Non-text Content
- 1.3.2 Meaningful Sequence
- 1.4.5 Images of Text
Test in high contrast mode
- See Quick Tips for High Contrast Mode for tips on resolving issues.
- Is all necessary content displayed?
- Can you read all links, buttons, and controls?
- Is important information communicated through images still apparent?
- Are forms still understandable?
Test with screen reader. Really listen to ensure that users who are not sighted are being given enough context to understand the experience.
- Using a screen reader
- How A Screen Reader User Surfs The Web
- Screen reader testing guide by Ross Mullen
- How screen readers navigate data tables
- 5 Myths About Screen Readers That Can Hurt Accessibility
- How Sighted and Blind Web Navigation Differs
- How can screen readers be used in accessibility testing?
- Useful keyboard shortcuts
- Testing accessibility using NVDA
- Accessibility Testing with NVDA
Review colours used
- For icons / UI components with no text, must have minimum 3:1 contrast ratio
- For text must have minimum 4.5:1 contrast ratio
- For AAA level aim for 7:1 or higher.
- Check focus / hover states comply with 2.4.11
- If links are not underlined check use the webaim link checker to check contrast meets accessibility guidelines.
- Use button buddy to check button and similar UI
- University brand colours and their accessibility are set out in the colour accessibility matrix.
- How to deal with text over graphics or gradients.
- 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.
The above helps to cover:
- 1.4.11 Non-text Contrast (Level AA)
- 1.4.3 Contrast (Minimum) (Level AA)
- 1.4.6 Contrast (Enhanced) (Level AAA)
- 2.4.11 Focus Appearance (Minimum)
- 2.4.12 Focus Appearance (Enhanced)
Turn on the OS "prefers reduced motion" flag and check there are no animations, flashes, or auto playing videos.
- 3.3 Animation from Interactions
Use some further quick tools:
Use 44x44 Pixel Cursor Bookmarklet to confirm that target size for interactive interface objects like icons, buttons, and links meet the 44x44px minimum. Note that this does not mean the size of the icon itself, it's the size including the icon and any space around it before the next icon is reached.
- 2.5.5: Target Size
- 2.5.8: Pointer Target Spacing
Use headingsMap browser extension to verify heading structure is both in the correct order and not missing headings.
- 2.4.6: Headings and Labels
- Web Disability Simulator to test how the page performs for those with visual impairments and Specific Learning Differences.
- Use 44x44 Pixel Cursor Bookmarklet to confirm that target size for interactive interface objects like icons, buttons, and links meet the 44x44px minimum. Note that this does not mean the size of the icon itself, it's the size including the icon and any space around it before the next icon is reached.
Identify any content that moves, blinks, scrolls, or auto-updates.
- If moving, flashing, or blinking starts automatically, confirm that it last no more than five seconds. If it does confirm that there is a mechanism to pause, stop, or hide this movement.
- If content auto-updates, confirm that there is a mechanism to pause, stop, or hide the auto-updates.
If content flashes or blinks, confirm that this does not occur more than three times in one second.
- 2.2.2: Pause, Stop, Hide
- 2.3.1 Three Flashes or Below Threshold
Check for media content.
- Confirm that media content can be fully controlled with a keyboard, not only with a mouse. It is particularly vital that content does not start automatically
- If any audio (background noise or video) does start automatically then it should stop after 3 seconds or include controls to pause or stop or turn down the audio.
- Confirm that captions are available for pre-recorded and they are accurate and in-sync with the content.
An alternative for the media should be included such as a transcripts or audio descriptions are available these should be accurate, unless the media is an alternative to existing textual content.
- 1.2.2 Captions (Prerecorded)
- 1.2.3 Audio Description or Media Alternative (Prerecorded)
- 2.2.2: Pause, Stop, Hide
- Run a more detailed test using the assessment tool in the Microsoft accessibility insights browser plugin.
More about screen reader issues
- Accessible Form Validation
- How to make inline error messages accessible
- Designing for Screen Reader Compatibility
- Note that screen readers and browsers have varying compatibility with techniques recommended by WCAG.
- Tips & Tricks for Testing Accessibility with Assistive Technologies
- 5 Myths About Screen Readers That Can Hurt Accessibility
- Images and screen reader users
Testing with screen reader
Beginner guides to accessibility testing and development
- Learning about accessibility
- A ‘learn as you do’ accessibility checklist
- Accessibility Testing Tools for Desktop and Mobile Websites
- Tools for Testing Accessibility
- A Workflow for Testing Web Accessibility with Free Tools
- Accessibility Testing Tutorial
- Test accessibility during development, not at the end!
- Evaluating Web Accessibility Overview
- How I do an accessibility check
- How do automated accessibility checkers compare?
- The Importance Of Manual Accessibility Testing
- Accessibility Testing Tutorial: What is, Tools & Examples
- W3C list of WCAG testing tools
- Understanding the DOM's importance for accessibility
- ALLY Coffee (quick wins for developers)
- Ten days of Ally
- WCAG of the Day
More detailed Accessibility Testing guides / plans
- Easy checks* (includes example before/after)
- How to meet WCAG quick reference
- How To Bake Layers Of Accessibility Testing Into Your Process
- ECS Accessibility audit and statement wizard
- Testing Procedures
- Yale Quick Accessibility Tests for Authors
- Accessibility Manual Testing
- Quick Accessibility Checks
- From Lexdis:
- Google Doc example Accessibility test sheet
- WebAIM's WCAG 2 Checklist
- WCAG Checklist
- Webflow Accessibility Checklist
- NHS Accessibility Audit Checklist
- ICT Testing Baseline for Web Accessibility
- Six things you need to audit your site for accessibility
- 18F Accessibility Guide
- WCAG-EM Report Tool
- The issues this checklist prompts you to check for covers a wide range of disability conditions.
- Case study, accessibility audit of the WordPress block editor, known as Gutenberg.
- Ally testing tools comparison spreadsheet
- What does GDS do?
- How GDS tests
- Do a basic accessibility check (GDS)
- 5 things I'm thinking about when I check a Pull Request for accessibility
- Practice testing here
- Text Contrast Issues That Cannot Be Detected with Automated Tools
- Beware False Negatives (from using automated tools).
- Accessibility Testing overview
- A Complete Guide To Accessibility Tooling
- How to Audit Your Library Website for WCAG 2.1 Compliance
- HMRC Live accessibility audit demonstration
- WCAG 2.1 translated into plain language. 103 tests categorised by content type, which removes the ambiguity from understanding success criteria.
Browser Extensions to assist testing
- 44 Browser Extensions to Perform Accessibility Testing Effectively
- Web AXE
- What AXE tests and how critical they are
- Accessibility Insights
- Wave. Here's a great guide on using WAVE for accessibility evaluations.
- Building the most inaccessible site possible with a perfect Lighthouse score
- ARC Toolkit
- IBM Equal Access Accessibility Checker
- Siteimprove accessibility checker
Colour contrast analyser
- Buggy but can be used to check if contrast of text over images or gradients is appropriate.
- This Bookmarklet, includes non-wcag recommendations too.
- Web Developer browser plugin
Bookmarklets to assist testing
- Text spacing bookmarklet
- Sa11y - CMS plugin, also bookmarklet - intended for content authors
- Accessibility Testing bookmarklets
- ANDI: Accessibility Testing Tool
- A11y audit bookmarklets
- BBC Accessibility Standards Checker: This tool runs a set of tests against a set of URLs to verify whether each one meets the BBC accessibility guidelines.
- Axecore CLI
- Axe-cli, pa11y, lighthouse guide
- Pa11y: provides both Command Line and Continuous integration based tools, as well as a dashboard for surveying accessibility across services.
- Accessibility Testing With pa11y
- Using actions in Pa11y
- Accessibility Testing with pa11y
- AxE Core NPM tutorial
- NPM projects using AxE
- Axe vs Pa11y
- The A11y Command-line Tools assist in discovering common web accessibility issues, such as detecting if your page can be read with a screenreader or works well with high-contrast mode enabled.
- A11y-sitechecker is a tool to check a whole site against accessibility criteria. It uses axe-core to check whole sites for accessibility issues. It is crawling the first given Domain and tries to find all links recursively.
- Automated accessibility testing with axe
- ghostjs accessibility helper
- intern accessibility testing
- Domain Accessibility Audit: This web application automatically crawls websites and checks for accessibility violations. It can crawl within subdomains of the initial domain it starts with. It reports statistics of violations for the whole audit, domains and pages.
- Pa11y CI
- Automating the accessibility tests of your source code with GitHub Actions
- Using Pa11y CI and Drone as accessibility testing gatekeepers
- Automated accessibility testing with Travis CI
- Jest with axe
- Unit Testing with AxE
- Setting up Selenium, and AxE for automated testing
- axe-core Selenium (Java) Integration
- Cypress Axe
- Automating Your Accessibility Tests
- Mobile Web Accessibility Testing Using Appium
- Shift left
- Best practices for shifting left
- Web accessibility toolkit
- Becoming an Accessibility Focused Developer
- Using CSS to Enforce Accessibility
- 5 Ideas on How to Incorporate Web Accessibility into your Dev Workflow
- The Developer's Guide to Web Accessibility Auditing and Tooling
- Accessible Code Reviews
- Styling buttons, the right way
- Resources For Building Accessible Tables
- Hey, It's Still OK to Use Tables
- The practical value of semantic HTML
- Semantic HTML5 Elements Explained
- What On Earth Is Semantic Markup? (And Why Should You Learn To Write It)
- The right tag for the job: why you should use semantic HTML
- Element diversity
- Semantic HTML Guide - 10 Alternatives to Using divs
- Automated accessibility testing: Leveraging GitHub Actions and pa11y-ci with axe
- AccessLint GitHub App that finds accessibility issues in your pull requests.
- Automating the accessibility tests of your source code with GitHub Actions.
LintersBack to top.
React / JSBack to top.
AngularBack to top.
For Visual Studio Code
- Web Accessibility Linter for VS Code
- Web Accessibility Checker by Mads Kristensen
- axe Accessibility Linter
- axe Accessibility Linter: introductory webinar
- 5 hour course from Smashing Magazine and Deque on using axe Accessibility Linter. Workshop Materials: Day 1 / Day 2. Slides and collaborative document.
- Bri11iant is a VSCode language extension for supporting web developers improve the accessibility of their websites.
- Using Tenon Accessibility Checker in VS Code
- WebHint - Accessibility testing + plugin for Visual Studio Code
AtomBack to top.
- ally.js - small library that can make certain aspects such as keyboard focus easier to manage
BootstrapBack to top.
Integration with testing frameworks
- Automating Your Accessibility Tests
- WCAGify is a simple function for people who need to reference the Web Content Accessibility Guidelines frequently and are tired of copying and pasting.
CypressBack to top.
SeleniumBack to top.
Jasmine / QUnitBack to top.
- Fluent Accessibility Notation: Elements for adding accessibility notation to wireframes and designs using Figma.
- Annotating designs for AccessibilitySarah Pulis and Claire Webber of Intopia share their accessibility annotation kit for Figma.
- Accessibility Bluelines: a set of accessibility bluelines from Jeremy Elder to help annotate design files for handoff to dev and QA, or just to include in docs. Sketch, Figma, Adobe XD, and InVision Studio versions.
- A journey towards sustainable accessibility. Alternative link on archive.is.
- Five ways to include d/Deaf users in your designs
- Accessible Design Systems: Look Good While Doing Good
- Design Before Code: Thinking About Accessibility from the Ground Up: Part 1
- Design Before Code: Thinking About Accessibility from the Ground Up: Part 2
- Modern CSS Upgrades To Improve Accessibility
- Auditing Design Systems for Accessibility
- Reviewing a design for accessibility
- Many examples are on gov.uk
- WAI-ARIA Authoring Practices (Explains how UI patterns should behave)
- Repository of above.
- ARIA HTML Tutorial - What is ARIA & Why it's Important to Use!
- Why and How to Start Using ARIA Tags
- ARIA Spec for the Uninitiated: Part 1
- ARIA Spec for the Uninitiated: Part 2
- ARIA Spec for the Uninitiated: Part 3
- 4 ARIA-mistakes worth solving
- Accessible Native Web Components
- A library of free inclusive web components explained step by step.
- Accessible UI Component Libraries Roundup
- Accessible UI Components For The Web
- How Do Blind People Use Smartphones?
- Funka Mobile Guidelines
- Guidelines for developing accessible mobile interfaces
- Accessibility Best Practices for Mobile App Development
- 5 Key accessibility questions to ask when buying digital tools, sites or apps (PDF)
- Webinar about above infographic.
- Accessibility Strategy for Procurement (TPGi)
- Collaborative planning, the forgotten step of accessible development
Definition of Done
- Example Definition of Done for accessibility (28KB PDF).
- Monitoring Web Accessibility Compliance With Pa11y Dashboard
- Setting up An Accessibility Dashboard from Scratch with Pa11y
- A11ygato - accessibility dashboard for website monitoring
- The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.
- Directive (EU) 2016/2102 of the European Parliament and of the Council of 26 October 2016 on the accessibility of the websites and mobile applications of public sector bodies (Text with EEA relevance).
- Accessibility Statement template provided by CDDO.
- How accessibility benefits your business
- The Business Case for Digital Accessibility
- Change agents: How can C-Suite and IT leaders build a culture of digital accessibility?
- Hassel Inclusion Webinar: How do I get my boss to buy into investing in accessibility?
- Nomensa Webinar: Accessibility Capability, from the trenches to the boardroom
- Nomensa Webinar: The Commercial Impact of Accessibility
- 4 Digital Accessibility Features That Benefit Everyone
- How to secure a budget for digital accessibility
- Cost-Benefit Model for Accessibility Projects
- Disability in tech: A checklist to get your sh*t together
- Advocacy for Web Accessibility: Building Equality and Sensitivity in the Digital Landscape
Pathways to implementing accessibility
- ISO/IEC 30071-1:2019 Information technology — Development of user interface accessibility — Part 1: Code of practice for creating accessible ICT products and services.
- The 8-Step Process for Leading Change.
- Shifting digital accessibility practice through use of the 8-Step Process for Leading Change.
- Recorded Webinar: Delivering ISO 30071-1 for all Organisations
- Planning and Managing Web Accessibility from W3C.
- Website Accessibility
- Accessible code
- Web Accessibility Compliance
- Writing accessible content for the web
- Accessibility For UX Designers
- Web accessibility, the basics
- Web accessibility, the basics
- Web Accessibility; the business case
- Accessibility: Testing and Screen Reader Use
- The Agile Accessibility Handbook by Dylan Barrell is available both as a physical book you can order from amazon and as a free download.
Communities and mailing lists
- JISC Accessibility Mailing List.
- JISC Accessibility Community.
- Access Technology Higher Education Network Mailing List.
- WebAim Mailing List.
- Sign up to recieve a "WCAG of the Day" to your inbox
- 10 Days of a11y by Lindsey Kopacz.
- HTML Hell newsletter. Weekly quick advice on writing semantic HTML.
- Accessibility Weekly. Receive an email every week with the latest accessibility news.
- Diversify tech, weekly email "highlighting underrepresented folks in tech".
- Accessibility with Lindsey.
- Laura L. Carlson's weekly newsletter with selected links to new Accessibility and CSS content from around the web.
- Microsoft Inclusive Design Toolkit.
- Web Accessibility checklist.
- Accessibility section of the Mozilla Developer Network.