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:
Colour Safe colour contrast analyser
Tanaguru colour contrast-finder
About accessible autoplaying carousel
Colour Contrast Analyser - Win/macOS application
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:
Arc Toolkit (Chrome)
Chrome Dev Tools and FireFox Dev Tools
Examples of well designed websites:
Looking for more accessibility training?
- View details of other upcoming training courses
- Find out about our free webinars that cover a variety of topics
- Contact us about our range of Digital Accessibility Services
- Join our mailing list for future training session announcements
