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:
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
