On Wednesday 1st September we had a special event on accessibility.
We didn’t cover things like WCAG (Web Content Accessibility Guidelines), because it’s not the most engaging way to talk about accessibility. WCAG is about compliance, and compliance is important but not enough. Instead we tried to give a few things to think about which hopefully made sense and will be easy to apply in a lot of situations.
Speakers:
- Lizzie Cass-Maran: Twitter | LinkedIn | Blog
- Neil Scott: Twitter
- Stéphanie Krus: Twitter | LinkedIn | Blog
We talked about
- What is accessibility?
- Permanent, temporary, situational
- Terminology can be confusing
- Assistive technologies
- Colours
- Images and other media
- General recommendations
- Accessible content
- The ‘wow’ factor
- Testing and fixing your website
- Where to learn more
Accessing the slides of the event
We are sharing the slides we used. Feel free to use them, copy, change, make your own presentation, spread the knowledge and tell us if something is not right or not clear so we can improve! The slides are in view and comment mode so you can add comments if you want.
Two videos if you prefer to the slides
We didn’t record the event on the day, but we have 2 videos done after the event if you prefer this to looking at slides.
Neil did a live demo of various testing tools and simulations tools, so no video for that part.
You can also access a full transcript of Lizzie’s video in her blog post.
Links to Resources
We have a lot to share! a lot of them are in the slides, but we also added some of the links shared in the slides on the evening.
General
- Microsoft Inclusive Design toolkit (will download a PDF)
- Source for the digital inclusion in Scotland: Scottish household survey 2018 – internet
- Data Poverty in Scotland and Wales – Nesta Ylab – PDF (thanks Arooj!)
- video of the racist soap dispenser
- W3C How People with Disabilities Use the Web
- TPGi events
- Hassel inclusion resource hub
- Deque – Accessibility Resources and Code Examples
- Is my website accessible? (Blog post)
Assistives technologies
- How a screen reader user (Leonie Watson) surf the web – video
- How a girl uses braille and an ipad at school – video
- Assistive technologies testing (DWP Accessiblity manual)
- How to start testing screen reader support using VoiceOver
- Assistive Technology on Twitter: Who to follow? Where to go?
- Videos of people with disabilities using tech by AxessLab
Colours
- From a colourblind designer to the world: Please stop using red and green together
- How to use color blind friendly palettes to make your charts accessible
- Contrast checkers with suggestions: Accessible colours
- Contrast checkers for text, object and page by GOVUK
- Supporting users who change colours on GOV.UK
- Supporting users who change colours of websites – presentation by Oliver Byford (Google slides)
Images and medias
- Alt text by WebAim
- Axess Lab guidance about alt text
- Alt text vs captions
- How to subtitle your online content
- Audio Content and Video Content – W3C
- Captions and Transcripts and Audio Descriptions – TPGi
- Very good TED talk, full of advice by Svetlana Kouznetsova
- Tweet to illustrate the problem with “cute fonts”
Accessible content
- SCULPT for accessibility (Worcestershire council)
- Affect the verb – images of disability
- Emotion matters in alt text – Jake Archibald/
- Buttons v links – Web Axe
- UX principles that include cognitive accessibility
- Overlay Fact Sheet
- Accessibyebye
- Haben Girma – A blind person thought I was white
The ‘wow’ factor
On the day, we explained that sometimes, designers want people to say “Wow! this is very different from other websites”. So they add different ways to navigate and add motion, but by doing so, they exclude a lot of people. The website Castor and Pollux is also a great example of a website which scores 100% for accessibility with an automatic checker, but which is in fact not accessible.
On Motion
- You Make My Head Spin – Reducing the Motion on Web
- prefers-reduced-motion: Taking a no-motion-first approach to animations
- Accessible design: How much motion is too much motion?
- Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective
Tools for testing
- Web Disability Simulator – Chrome extension
- WAVE Tools – browser extensions
- IBM Equal Access Toolkit – browser extensions and guides
- AXE DevTools – Chrome extension
- Colour Contrast Check – tool
Resources on testing
- Why accessibility testing with real users is so important – GOVUK
- Quick accessibility tests – short videos
- Accessibility testing: tips to succeed | Alistair Duggin
- Accessibility Testing by People with Disabilities
- Overlay fact cheat
Where to learn more
- If you’re on twitter or LinkedIn, follow disabled people or accessibility advocates
- Subscribe to A11Y weekly (Newsletter)
- Join accessibility meetups
- Check this accessibility reading list (GOVUK blog post)
- Follow this W3C course on introduction to digital accessibility (free at the moment)
For coders
The event was for designers, but we had some questions for coders, so here are a few things:
Mobile guidelines
Testing your website – your code
- W3C – Test and evaluate
- Accessibility support – Will your code work with assistive technologies?
- 18F Accessibility Guide – Checklist
- Basic screen reader commands for accessibility testing (Paciello Group)
- Accessibility testing tools (Paciello Group)
- GOVUK – Testing with assistive technologies
Material created for Code Your Future
Stéphanie volunteers for Code Your Future and created some material for them. Feel free to copy, re-used.