Featured image shows a stylised picture of a person standing. Their shadow shows the universal symbol for disabled people – a person in a wheelchair. Text underneath reads “not every disability is visible”
If you missed my talk on designing dashboards that are accessible for folks with disabilities, not to worry. Here is a quick summary of the key things to remember when designing accessible dashboards.
Note: My Tiny Tableau Talk is also available on YouTube! Check it out at: https://youtu.be/1ieSb_-hW7s
1) There are many benefits to designing inclusively – including financial benefits
The social benefits are (hopefully) obvious to most people – peoples’ bodies are shaped differently, this leads to challenges for folks who are not conventionally able-bodied, let’s therefore strive to remove those barriers or at least kick them down a notch. In addition, there are financial benefits to designing inclusively that are often overlooked.
For example, websites that are designed for maximum accessibility tend to be picked up by search engines more efficiently. This is because they have a simpler construction and emphasize text rather than dynamic media. Search engine optimization can therefore position your content to a wider audience platform that includes people who have both conventional and unconventional needs.
In addition, it is easier to maintain accessible design in the long run because it is less sensitive to shifts in technology. You can therefore significantly decrease maintenance costs without the need to completely restructure your design to align with every new change in web design or UX technology.
2) There are many kinds of accessibility needs to consider when designing dashboards
Because data visualisation is, well, visual, designing dashboards that address the needs of blind and partially sighted folks seems obvious. But there are other needs to consider, such as:
- Motor/mobility needs – people with limited mobility may also use screen readers
- Auditory – If you include audio or video media in your dashboard, make sure to include a text resource
- Seizures – If you include video media, be careful with flashing images
- Cognitive/Intellectual – This can be a bit tricky because of the wide range of needs presented. However, there are still things we can do as dashboard designers such as keeping language clear and simple, and reducing visual clutter. For a more thorough explanation of possible choices that can be made to minimise cognitive/intellectual barriers, visit: http://ncdae.org/resources/articles/cognitive/
Although visual needs may be the most pertinent to address as data visualisation designers, it’s important to bear in mind that other accessibility may come up.
3) Consider Layout
Image shows a person using a screen reader that translates text into Braille.
Blind and partially sighted folks do access internet resources, most often by using screen readers that will either read text out loud or translate it into Braille. In order for these tools to work efficiently, its important to structure your layout in a way that makes it easy for these devices to pick up your content. For example, many dashboard designers will use images of text in their vizzes to get around font discrepancies between Tableu public and their local computer. Avoid doing this – in order for screen readers to pick up your content, text must be written as text.
Partially sighted and elderly folks also find it easier to consume text online by using screen magnifiers to enlarge fonts. Layout is therefore important to bear in mind. More specifically, make sure to use fixed containers in Tableau rather than floating containers and text. This ensures that everything stays in the same place if folks need to enlarge the text on their screen.
4) Use Descriptive Text and Tables
People often bristle at the suggestion of descriptive text because it sounds like it’s a lot more extra work, but it’s really not. If you’ve noticed, throughout this post I’ve tried to give brief descriptions of the images included so that if a blind person were using a screen reader, they would still be able to have some context. Descriptive text doesn’t need to be wordy, it just needs to summarise the main points of the information presented.
A good example of descriptive text and data can be seen with Penn State’s accessibility guide, which can be accessed here: http://accessibility.psu.edu/images/charts/
The bar chart above is summarised in the text below. It is used as an example of how descriptive text can be used for data visualisations
Summary of Trends
The numbers show that /r/ dropping becomes more common in lower classes (lower percentages of final /r/), but that women consistently preserve more /r/’s then men across social classes.
That is, women are more likely then men to approach standard English across social classes.
Ultimately, when deciding what to write in your text descriptions, what do you want your audience to take away from the data you have presented? What is your message? All good data designers should know the answer to these questions, regardless of whose needs they are designing for.
5) Consider Colour
If you’ve ever wondered why orange and blue are the default colour options in Tableau, it’s because approximately 8% of men are colour blind, mostly for the colours red and green. Therefore you want to avoid using the conventional red=bad and green=good because these colours would just show up as brown for someone who is red-green colour blind.
Image is split into two sections. The first shows red and green apples the way a colour sighted person would perceive them. The second section shows the same apples the way a colour blind person would see them in shades of yellow.
If you’re really set on using red and green signifiers in your dashboard, consider adding other cues for colour blind folks to pick up on, such as size and shape.
This image is also split in two sections. The first shows traffic lights the way a colour sighted person would perceive them. The second shows the same traffic lights the way a colour blind person would see them as shades of yellow, but with the addition of a cross on the stop light to indicate that the driver must stop.
6) Make conscious font choices
In the UK, approximately 10% of the population (regardless of gender) is dyslexic. What this means is that when reading text, letters will often be perceived as flipped or mirrored. A “p” and a “b” might therefore be perceived as the same letter, which makes it difficult to read text efficiently. In his talk discussing the benefits of fonts designed for dyslexic people, Christian Boer gives a striking example of how dyslexic people might perceive text:
A screenshot from Christian Boer’s Ted Talk that has text written with letters squished together and spelled incorrectly to depict how a dyslexic person might read text.
In order to resolve this, fonts like Dyslexie have been designed that create unique identifiers for each letter, thus reducing the possibility of flipping or mirroring text. Many are open source such as:
- Open Dyslexic, which can be found at this link: http://opendyslexic.org
- Dyslexie, which can be found at this link: https://www.dyslexiefont.com/en/dyslexia-font/
If you are still hesitant to use these founds, it is best to avoid fonts with serifs (so, NOT what I use in my blog design!).This includes fonts like Arial, Calibri, and yes, even the frequently shunned Comic Sans 🙂
Numbers to Narratives 