Accessibility for designers - Recording

An introduction to the key aspects of web accessibility and inclusive design, relevant to web designers

Get 10% off any upcoming 2021 AbilityNet online training courses using discount code AbilityNetTraining10

 

Page last updated following training on 28 January 2021

Watch the recording:

Polite request:

Although you may wish to share this resource with your team, please don’t share this recording publicly or anywhere where it can be accessed easily by a wider group. As a charity, the money we receive from delivering paid training goes towards our free services and charitable operations. We are likely to run the training again in the future and so want it to still hold value for people who haven’t yet attended.
 

Download the presentation:

Accessibility for designers presentation slides 

Download the transcript:

Accessibility for designers transcript

Q&A:

We were pleased to be able to answer so many of your questions on the live training, which you can revisit by watching the recording. For those we ran out of time to answer a typed response follows and you can find details of other upcoming training on our website. 

Q: Why should we aim for AA not AAA?

A: Some organisations, such as public sector organisations, are required to meet AA standards, and WCAG 2.1 AA is the most commonly used international accessibility standard. It would be great if companies strived for AAA, but this is often not practical. Most companies aim to meet AA standard, as achieving AAA standard often requires significantly more consideration, time and work to implement. One example of this would be link purpose success criteria 2.4.4 - Link Purpose (In Context) [Level A], or 2.4.9 - Link Purpose (Link Only) [Level AAA]. The difference is in the text: "The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context" vs "A mechanism is available to allow the purpose of each link to be identified from link text alone".

Q: I've been trying to get all AAA colour contrast levels, but would AA contrast be ok?

A: That's the difference between success criteria 1.4.3 and 1.4.6 and we acknowledge that you end up with a different colour palette when you try to meet AAA. Most companies already have their colour palettes ready when designing so for them it's more so about meeting requirements when they consider what combinations of existing colours they should use.

Q: Some research shows using underline on hyperlinks can cause issues for website users that have dyslexia. What is your advice?

A: Without seeing the research, we think this could be because the underline can cut across the descenders. Most browsers now ‘skip’ them, but as a designer you could go further, for example you could provide more space between the text and the underline. The positive side of underlines is that they are inherently recognisable as links, and other focus styling could risk losing this.

Q: Should the state/colour on hover meet contrast requirements?

A: The minimum contrast success criterion (1.4.3) applies to text in the page, including placeholder text and text that is shown when a cursor is hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast.

Q: If we use A- A and A+ as an option for users to zoom, how should we label these for screen readers?

A: If you are using functional icons you should add alt text that describes what the button does e.g. "increase zoom by X percent". You can find information about the alt decision tree on the W3 website. If instead you are using text that reads A+ and you want added information to be communicated to screen reader users you should consider having hidden text with CSS or using ARIA.

Q: Would you recommend simplifying a design e.g. not using a gradient colour for background of a website header?

A: A challenge is that you can't control how your users are viewing your design (depending on their individual browser settings). It would be very hard to guarantee that the gradient and the font overlay will display as you intended in your design, even if you selected the gradient colours very carefully. We would recommend exercising caution.

Useful links:

WCAG 2.1 Guidelines

Colour Safe colour contrast analyser

Tanaguru colour contrast-finder

W3C's alt decision tree

About accessible autoplaying carousel

Colour Contrast Analyser - Win/macOS application

Stark - Sketch / XD Plugin

Photoshop Colour Blindness Filter - Proof Setup

Accessible Colour Palette Builder

NoCoffee Vision Simulator - Chrome Extension

A11y Focus Orderer – Figma Plugin

W3C's Recommended Web Accessibility Tools

Tools for accessibility testing:

NVDA Screen Reader

Colour Contrast Analyser

Web Developer Extension

Accessibility bookmarklets

Arc Toolkit (Chrome)

Chrome Dev Tools and FireFox Dev Tools

aXe automated scanning tool

Examples of well designed websites:

www.bbc.co.uk

www.gov.uk

Looking for more accessibility training?