“When we design for accessibility, we are designing for the disabled, for our parents and grandparents, and for those we may have never met or considered. Ultimately, we are designing for ourselves, as we define the level of accessibility that we will eventually come to experience as our lives change in unexpected ways.” (Access Ability: A Practical Handbook on Accessible Graphic Design).
Design is everywhere. Next time you go for a drive, look around you. You will notice signage alongside the roads, store-front logos, billboards, etc. Technology is being used more than ever before – especially with the current situation we are living in. Designing a web platform that is accessible to all is crucial. Here is a great starting point checklist to go by:
1) Consider those with sensory and cognitive disabilities
Consider all disabilities when designing your website or any type of digital media – including those that are color blind, who have diminished vision or hearing, those who may be blind or deaf, and any other multi-modality disability.
2) Be strategic with the language you are using
Design is important – but make sure the content on your website makes sense – meaning that it is hierarchically and semantically structured and can be read by any machine or assistive device.
3) Use high contrast colors
Those who are visually impaired have a hard time seeing the difference between two hues. Hues are typically described as red, green, blue and yellow. Complimentary colors – colors that are on the opposite sides of one another on the color wheel – are used by designers often, but if the tonal value and saturation of the colors are too similar to one another, it can cause eyestrain to the visually impaired. Make sure that there is enough tonal contrast so that it is softer on the human eye.
Check out this great resource that calculates the contrast ratio of text and background colors.
4) Consider your typeface selection and size for readability
The most common and widely used typefaces in web design are Arial, Calibri, Helvetica, Times New Roman and Verdana. These typefaces are considered the most readable and preferred. They are also specialized typefaces for those who are dyslectic, some including Sylexiad, Dyslexie, and OpenDyslexic – these could be alternative options for an accessible website. Also make sure that users can easily increase the size of the text on their screens without any issues or confusion. Text input sizes should be at least 16px or higher.
5) Design like you are the user viewing the website for the first time
There are many assistive devices and technologies including screen readers and braille displays. Mac users have quick access to “Accessibility” in “System Preferences” where they can use voiceovers. We suggest using it as you navigate through your site to ensure that it makes sense to someone using assistive technology.
6) Consider your line length, paragraphs, and spacing
The space between lines of text are identified as “leading.” As a default, most software’s have leading set to 120% – which is two points above the font size. If the leading is below 120%, it is hard to read. It’s suggested that for accessibility and those who has visual impairments to have leading between 125% to 150%. Also ensure that your line lengths are between 45 to 90 characters and that there is space between each paragraph.
7) Consider that display sizes are different
When laying out a digital design, make sure you are designing for both desktop and mobile devices. You can view any website on your desktop as a different device (Android, iPhone, tablet, etc.) by right clicking on the site and going to inspect – toggle device toolbar.
8) Ensure that non-text content has an ALT Text tag for accessibility
Any image or non-text content on your website should have embedded/alternative text. Alternative text lets those who are impaired click on the content and have an assistive device read to them what it is. Make sure it is descriptive, relevant, and functional.
9) Make sure that your navigations and buttons are easily distinguished between other content
Your navigation bar should be in an order that makes sense to users navigating with the keyboard shortcuts and divided from the rest of the website – usually at the top of the screen. Any type of interactive or linked buttons should be large enough to read and larger than other text on the page.
Source: AccessAbility 2: A Practical Handbook on Accessible Graphic Design; Revised + Supersized Second Edition
Accessibility levels and requirements are always changing and improving. Make sure you stay up to date on the local laws and regulations in your area surrounding website accessibility. Here is a great free resource for checking to see how compliant your site is, https://www.equalweb.com/.
Blog written by: Julia Lasak
