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 12 November 2020

Watch the recording:

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: What would you say is the best standard width of the page we should design for? To assure reflow would it be 1200px?

A: WCAG 2.1 states under Success Criterion 1.4.10: Reflow, that content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: Vertical scrolling content at a width equivalent to 320 CSS pixels; Horizontal scrolling content at a height equivalent to 256 CSS pixels. 320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom. See the W3C WAI website - Understanding Success Criterion 1.4.10: Reflow for more information.

Q: Do you have any evidence that white texts on the dark solid background is bad for accessibility? If not, what colour contrast ratio is advisable for the dark theme design?

A: The colour contrast will need to be the same for any design or background colour. You can read more about providing sufficient contrast between foreground and background on the W3C WAI website. There are some considerations when using dark mode themes. A dark mode may be more or less accessible. There are additional considerations you will need to take into account when implementing a dark theme. As with any design consideration there is no loss of accessibility as long as all aspects are taken into account.

Q: What size of px is considered a 'normal text'?

A: When considering WCAG 1.4.3: Contrast (Minimum), 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio of 3:1. Otherwise the text requires a higher contrast ratio of at least 4.5:1. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. See information and notes about large scale, and for a rough and ready conversion from pixels to points visit the ReedDesign website.

Q: Would you recommend carousels? Would they be problematic to users?

A: Carousels can present a number of accessibility issues if not implemented correctly. If you chose to implement one, make sure that it is fully accessible. The W3C WAI website has some good tutorials on making carousels accessible

Q: When meaning scolling content is this for auto scroll?

A: 'Moving, blinking and scrolling' refers to content in which the visible content conveys a sense of motion. Common examples include motion pictures, synchronized media presentations, animations, real-time games, and scrolling stock tickers. Read advice on the W3C WAI website about moving, blinking or scrolling information.

Q: What makes a video 'fully accessible'?

A: The W3C WAI website has an excellent guide on making video and audio accessible. You may also be interested in our 'How to produce accessible videos' training.

Q: How do you make text links distinguishable?

A: The WebAIM website provides useful information about making links and hypertext accessible.

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?