Accessibility can be defined as ensuring as many people as possible can use, understand and have access to your visualisations. In fact, Data Visualisation itself can be considered to be a form of accessibility technology.
Universal Design is the idea that you design for everyone, that it to say you don't design with either 'normal users' or those who use assistive technology in mind.
Why should we incorporate accessibility??
“Don’t look at this as a requirement, an obligation, another checkbox to tick off. Look at accessibility as an opportunity to hone your skills, to move beyond the ordinary, and to provide an intentional experience for your users.” - Doug SchepersDirector, Fizz Studio
18% of the British working age population have a disability, as this is only as defined by the Equality Act of 2010, it is likely that this figure would be much higher if we extend the parameters to include those who need assistive technology or further considerations when accessing our visualisations. Because of this, not only could it be considered to be our moral responsibility to make such accommodations, but it is increasingly becoming a legal requirement.
General Principles - Web Content Accessibility Guidelines
- Perceivable - This working on the idea of providing text alternatives to non-text content. For example, using 'Alt Text' on images and buttons generates an underlying text object describing the image which is compatible with a screen reader.
- Navigable - Making it as straightforward as possible to navigate your dashboard with or without a mouse. Think about the order in which you drag your items into the dashboard, this sets your focus order, which dictates the order in which a user can tab through the dashboard.
- Adaptable - People will not always be accessing your dashboard from a desktop and therefore it is important to keep in mind alternative layouts and how that might effect your accessibility. For example, a change in orientation can mean the filter that was described as being 'on the left' is not in a completely different location. Tooltips are not compatible with tough screen layouts and therefore information and instruction can be lost. It is also important to remember that touch screens cannot work in as higher level of detail as a curser.
- Distinguishable - Making elements of your chart easy to read and understand, consider contrast and colour blindness when selecting your formatting. Remember, accessibility is a design choice. Whilst removing gridlines, for example, is more aesthetically pleasing and something I myself am guilty of, you immediately limit the accessibility of that visualisation.
Keyboard Navigation
- Mark selection and dashboard actions are not supported in keyboard navigation - think about using standard filters and parameters instead which are compatible.
- Tooltips are also not supported - think about how to incorporate the data elsewhere. A good alternative is to direct users to 'View Underlying Data' where the tooltip information will appear (ctrl + shift + enter)
Screen Readers
This is a a software type used by people with impaired vision, typically used in conjunction with keyboard controls. They take information from the Document Object Model (DOM) and verbalise it for the user. When thinking about Screen Reader compatibility, remember that captions and titles are essential. The Screen Reader will not pick them up if they are hidden. Screen readers cannot interpret charts and so think about how to best use these alongside the View Underlying Data table.
Neurodiversity eg. ADHD and Dyslexia
- Larger text and fewer marks can help retain focus and make the charts easier to read and interpret. In total, you shouldn't be using more than 10 colours and shapes (absolute max).
- Use dynamic fields to include the main takeaway in the title and explain the graph in the caption - this is also great for those using keyboard shortcuts and screen readers.
- Keep it simple - too many colours and charts can trigger a visual overload.
- Include clear, explicit instructions on how to use the dashboard.
Lessons from Today
Today's challenge was to create a dashboard with Accessibility in mind, I tried to create a dashboard that was visually stimulating whilst still easy to navigate via keyboard shortcuts and compatible with a screen reader. In order to do this, I disabled all tool tips and put all my information in Titles, BANs or Captions. Any information that cannot be read from these is accessible via View Underlying Data.
I dragged my sheets into my dashboard in the order they should be interacted with to allow a user to tab through and used filters rather than actions.
Finally I tried to keep the colours bold and the dashboard as clutter-free as possible. I kept the major information as clear as possible so that a conclusion could be drawn within seconds rather than having to work for it.
My first lesson was that you can't accommodate everyone. Although Universal Design is the aim, it is not always possible to accommodate everyone in one single dashboard. For example, the level of detail required for a screen reader could equate to a visual overload for someone with Neurodiversity. In an ideal world, I would replicate my dashboard and make edits depending on the user. For example, I would keep a dashboard that was for use with a screen reader more text heavy.
I also explored the phone layout option, allowing the user to scroll through. The minimal interaction means that this dashboard is also touch screen friendly. I would be interested to see how this translates to a tablet as well.
My biggest challenge was time, ideally I would like my captions to be dynamic and give the basic information without the use of View Underlying Data. I would also love to spend more time exploring the features available, such as a download to excel button and the use of images with a different data set and see how that differs to my initial ideas today.
Additional Resources
• Funkify Chrome extension - Simulates a variety of impairments (e.g. low vision, tremor, colour-blindness) in browser setting
• Colour Palette contrast checker - Compass up to 5 different colours for contrast accessibility and suggests replacements
• Colour Oracle - Colour blindness simulator
