Making IT accessible for all!
Presentation recording and transcript
Presentation files and other assets
- Presentation deck - Live version (32.7 MB PPTX)
- Presentation deck - Full version (83.3 MB PPTX)
- View 'Live slide deck' online via SlideShare
- View 'Full slide deck' online via SpeakerDeck
- IT Accessibility Policy Template (39.6 KB DOCX)
- Digital Learning Level 3 Accessibility Test Process
- Example role-based Definition of Done (27.6 KB PDF)
- Example accessibility testing sheet (46.3 KB XLSX)
Presenters
-
Matthew Deeprose
- Senior Learning Designer
- University of Southampton
- @VLEguru
-
Tamsyn Smith
- Senior Learning Designer Team Lead
- University of Southampton
- @TamsynMSmith
-
Dr Fiona Strawbridge
- Director of Digital Education
- University College London
- @fstrawbridge
Synopsis
3 December 2021 - UCISA
Recent experiences have demonstrated that University staff and students expect to use online resources with a variety of devices, making full use of accessibility features such as reflow, captions, and text-to-speech.
Such features benefit everyone, but especially the increasing proportion of university students who self-report a disability.
University Information Technology departments know they must commit to accessibility; indeed, they have a legal obligation to do so, but how can they take this ambition and embed accessibility within their policies and processes?
In this presentation, we will share:
- approaches to building a digital accessibility policy for university IT departments.
- techniques for embedding accessibility within IT development processes by ‘shifting left’.
- examples from within the Higher Education and wider IT sectors.
Acronyms
- WCAG
- The Web Content Accessibility Guidelines are a set of normative standards for assessing the accessibility of web-based content.
- PSBAR
- The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 came into force on 23 September. It aims to ensure public sector websites and mobile apps are accessible to all users, especially those with disabilities.
- W3C
- The World Wide Web Consortium is an international community that develops open standards, such as the Web Content Accessibility Guidelines, to ensure the long-term growth of the Web.
- A11y
- Accessibility. The use of a11y is a numeronym for the word accessibility. There are eleven letters between the "a" and "y".
- CDDO
- The Central Data and Digital Office (CDDO) monitor public sector bodies’ compliance on behalf of the Minister for the Cabinet Office. The CDDO sits alongside the Government Digital Service (GDS) in the Cabinet Office.
- EHRC
- The Equality and Human Rights Commission may be asked by CDDO to investigate Universities who do not meet the standard set by The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.
- VPAT
- A Voluntary Product Accessibility Template is a document that explains how information and communication technology (ICT) products such as software, hardware, electronic content, and support documentation meet accessibility standards, specifically related to the US Section 508 of the Rehabilitation Act.
- ACR
- An Accessibility Conformance Report is a completed VPAT® + all the essential information about the report itself.
- EDI
- Equality, Diversity and Inclusion.
Links referred to during the presentation
- Introduction
- Higher Education (HE) and Further Education (FE) Accessibility Maturity Model, created by AbilityNet and McNaught Consultancy
- Why we should rethink accessibility as customization, by Nicola Yap, Google.
- Diversity wins: How inclusion matters, by Sundiatu Dixon-Fyle, Kevin Dolan, Vivian Hunt, and Sara Prince.
- Planning and Managing Web Accessibility from the W3C Web Accessibility Initiative (WAI)
- Initiate
- Learn the basics
- Accessibility Fundamentals (W3C)
- Dos and don'ts on designing for accessibility (CDDO)
- Quick wins for web accessibility (a11y.coffee)
- Accessibility (MDN)
- Accessibility fundamentals (Microsoft)
- Giving a damn about accessibility (UX Collective)
- Accessibility Maze
- WCAG of the Day
- 10 Days of A11y
- Access Technology Higher Education Network Mailing List
- WebAIM Mailing List
- Digital Accessibility Regulations mailing list
- Web A11y Slack
- JISC Accessibility Community
- Worldwide Accessibility Discord Server
- Accessibility Insights
- Develop the business case
- Understanding Success Criterion 1.4.10: Reflow
- Inclusive Design
- UoS Access and Participation Plan.
- Accessibility isn’t more work, you were just cutting corners before. The work was incomplete.
- Fear is a Poor Motivator for Accessibility
- WebAIM’s Hierarchy for Motivating Accessibility Change
- The Accessible Technology Skills Gap
- More Companies Are Looking to Hire Accessibility Specialists
- The Business Case for Digital Accessibility
- Gather support - this section was removed to save time, a video version is available.
- Learn the basics
- Plan
- Review websites
- A Freedom of Information (FOI) request resulted in CDDO sharing a document that includes their testing procedure.
- W3C Easy checks
- Lexdis Quick Accessibility Checks
- Digital Learning Level 3 Accessibility Test Process
- Website Accessibility Conformance Evaluation Methodology
- Review websites
- Implement
- Integrate goals into processes
- Shift left
- Get more team members involved with accessibility by sharing tools they'll actually use.
- axe Accessibility Linter for Visual Studio Code
- axe Accessibility Linter: introductory webinar
- Automating the accessibility tests of your source code with GitHub Actions
- Automated Accessibility Testing in JavaScript Frameworks, Mark Steadman (Deque).
- Using Gherkin to Write Accessibility Tests
- Fable Tech Labs
- Auditing Design Systems for Accessibility, Anna Cook (Recurly).
- Annotating designs for Accessibility. Sarah Pulis and Claire Webber of Intopia share their accessibility annotation kit for Figma.
- Monitoring Web Accessibility Compliance With Pa11y Dashboard
- Semantic vs non-semantic button example on CodePen.
- Prioritise issues
- Integrate goals into processes
- Sustain
- Conclusion
Further Resources
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.
Getting buy-in
- A11y Myths - Dispelling the myths about accessibility. Very useful for responding to assumptions when building the business case.
- 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
Training
- The University of Minnesota maintain a very comprehensive list of accessibility resources.
- Website Accessibility
- Accessible code
- Web Accessibility Compliance
- Writing accessible content for the web
- Accessibility For UX Designers
- Web accessibility, the basics
- Start Building Accessible Web Applications Today
- Web Accessibility; the business case
- Accessibility: Testing and Screen Reader Use
Books
- The Agile Accessibility Handbook by Dylan Barrell is available both as a physical book you can order from amazon and as a free download.
- The Bootcamper's Guide to Web Accessibility by Lyndsey Kopacz is an excellent resource for those wanting to learn about accessibility who already have a basic knowledge of HTML, CSS, and JavaScript
Legislation
- 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.
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.
-
ASlint
- 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
Commandline tools
- 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
- 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.
Continuous integration
- 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
- Automated Accessibility Testing in JavaScript Frameworks
- Mobile Web Accessibility Testing Using Appium
Frontend development
- 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
Semantic HTML
- 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
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
Atom
Javascript frameworks
- Automated Accessibility Testing in JavaScript Frameworks
- ally.js - small library that can make certain aspects such as keyboard focus easier to manage
Bootstrap
Back 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.
Mobile
- How Do Blind People Use Smartphones?
- Funka Mobile Guidelines
- Guidelines for developing accessible mobile interfaces
- Accessibility Best Practices for Mobile App Development
Design
- Fluent Accessibility Notation: Elements for adding accessibility notation to wireframes and designs using 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
-
Inclusive components
- A library of free inclusive web components explained step by step.
- Accessible UI Component Libraries Roundup
- Accessible UI Components For The Web