See the Pen
Accessible Line Chart by Heidi (@hcone5006)
on CodePen.
Today, we will take a look at some suggestions for how to make your charts more accessible. And I know, you may be asking, Heidi, why do I need to make my chart more accessible? In the 2023 Household Disability Survey, there are an estimated 17% of people living in New Zealand households who identified as being disabled [1]. And while I’ve heard people say that this population is not their target audience for their application, consider that just about everyone will be faced with temporary or situational disability at some point in their life. Imagine your friend has a skiing accident and breaks their arm, has an ear infection that leaves them dizzy, has a slow internet connection, has their arms full with a newborn baby, or your auntie has become hard of hearing, or you’ve hit your 40s and have discovered that you now need reading glasses. Building applications that are more accessible will create a better and more usable experience for everyone.
To start out with, it’s going to be important to use a charting library that allows customization or has built-in options. Some charting libraries won’t have these options available, so you will have to take alternative steps to ensure that the information you are providing with your chart can be accessed in an alternative format, but more about that later! First thing’s first… The three main areas we will be focusing on are design, cognitive load, and technical implementation.
Design
See the Pen
Basic chart demo by Heidi (@hcone5006)
on CodePen.
First of all, we want to make sure our design is clean and as simple as possible. We can achieve this by not using a busy image or patterned background. Instead, use a clean background with an appropriate contrast ratio to your text and graph lines. For user-interface controls and states, thinner lines require a contrast ratio of 4:5:1 and thicker lines require a contrast ratio of 3:1. For fonts, body fonts require a contrast ratio of 4:5:1 and title fonts require a contrast ratio of 3:1. I recommend using a tool such as the WebAIM Contrast Checker or using an extension such as the WCAG Color contrast checker for Chrome to take the guesswork out of meeting minimum contrast ratios.
We also want to make sure we aren’t relying solely on color to convey meaning. We can use some strategies such as having different line styles and different data point shapes so it’s easier for everyone to differentiate the lines at a glance. Consider that this isn’t just useful for people who have color-blindness or low-vision, but is also beneficial for anyone to tell the lines apart at a quick glance.
The third part of the design to remember is to include all the labels. If we have the most beautiful graph in the world, no one will have any idea what it’s about if we don’t include labels, or they will have to guess what it’s about! Make sure to include a title for your chart, x and y-axis labels, and a key.
Cognitive Load
In today’s world, we are constantly bombarded with an overwhelming amount of information, ads, entertaining clips, noises, etc. We are also more aware than ever that many of us live with conditions that affect how we handle taking in information and stimuli, such as Attention Deficit Disorders, Dyslexia, Epilepsy and many more. Due to the amount of both temporary, situational, and permanent conditions that affect our ability to focus and process information, it’s crucial to consider what cognitive load people will be taking on by using your charts. The more we can simplify and make the content clearer for people to understand, the more useful your chart will be for everyone. We can achieve this by providing meaningful titles, writing succinct text, minimizing jargon, and avoiding overly complex content where possible.
While you may be keen to add some flashy animations to your chart, consider people who live with Photosensitive Epilepsy [2] that can trigger seizures or Vestibular Disorders [3] that can cause extreme dizziness. If the animation sweeps across much of the screen, provide a warning or give people the option to disable this animation and view a static chart instead. If the animation is small and subtle, it will be much less triggering.
Technical Implementation
Ok, buckle up, team, here we go for our Front End Devs… I would recommend that you first try using your native Screen Reader while closing your eyes and see if you can understand the objective of the chart you are creating. For Mac users, we have Voice Over, which is what I primarily use. Windows has a SR called Narrator, Linux has a SR called Orca, and NVDA can now be downloaded and used for free on Windows. I find this a very simple method that can help improve our understanding of the challenges that people face everyday who rely on assistive tech to access the digital world around us. How was your experience?? Was it frustrating? Confusing? Great. That will help inform us on what we need to work on!
Let’s remember the basics from the Design section: remember to include your chart title before your chart, include a key, label your x and y-axis and to be extra thorough, you can add a chart summary that is either visible to everyone, or SR-only. If you have any images used throughout your chart or key, remember to add an alt-text if the svg conveys useful meaning, or add alt-text=" " [4] if the image does not convey useful meaning. This will tell the SR not to mention the image as it does not benefit or convey any useful information to the person using Assistive Tech.
If your x and y-axis labels or values are abbreviated or you think they would benefit from a bit more detail, try adding aria-labels. I also recommend adding aria-labels to your data-points as your SR will likely read out only the value, but not provide immediate context. You can see from my example below, I have set each data point to read out: 'In {point.x}, there were {point.y} people employed in', which my SR will read out as: “In 2020, there were 25663 people employed in Sales & Distribution.”
When it comes to tabbing, if you include aria-labels on your data-points, while using SR, you will be able to tab through the data-points and they will be read out loud. Once you’ve turned off your SR, you won’t be able to tab through your data-points anymore. This is perfectly acceptable as we should only be able to tab through to interactive elements, and if we are not using a SR, we wouldn’t be expecting to interact with the data-points unless you have an interactive chart. If we do need to tab to each data-point, you can add tabindex="0".
What if the charting library doesn’t have options to improve Accessibility?
Sometimes we may be stuck using a charting library that does not have any accessibility options, or is very limited. It may be rendered as a canvas or a SVG element. In this case, we can add an aria-labelledby [5] attribute to the canvas or svg which points to either an SR-only section or another page that has written text or a table that contains the same information. We are often working within some limitations, but we always do our best to make the digital world a more accessible place!
TL;DR
In summary:
- Don’t rely on color-alone to convey meaning
- Ensure that your design is as clean and simple as possible
- Check your color contrast
- LABEL EVERYTHING!!
- Avoid animations that sweep across the screen or provide controls
- Add aria-labels where useful
- Check your tabbing for keyboard-only users
- Go forth and make the web a better place, friends! 💪
References
[1] Disability Statistics: 2023. (2025, February, 27). Stats NZ, Tatauranga Aotearoa. https://www.stats.govt.nz/information-releases/disability-statistics-2023/
[2] Photosensitivity and Seizures. (n.d.). Epilepsy Foundation. https://www.epilepsy.com/what-is-epilepsy/seizure-triggers/photosensitivity
[3] Vestibular Disorders. (n.d.). Cleveland Clinic. https://my.clevelandclinic.org/health/diseases/vestibular-disorders
[4] Alternative Text. (n.d.). WebAIM. https://webaim.org/techniques/alttext/
[5] ARIA: aria-labelledby attribute. (n.d.). mdn web docs. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby