Published: 8 August 2023

SVG Bar Graph

A few days ago, I published a blog post about data accessibility. One of the things I wanted to do, following this, was to find out how data visualisations such as graphs and pie charts can be created so that they read well with a screen reader. This prompted a bit of a learning curve for me, which I'm going to share in this post.

Scalable Vector Graphics (SVG)

I decided to try to create the same bar graph that I used as my example in my previous post. It is entirely fictional and shows the occupancy rates of five holiday cottages. It didn't take me long to find out that SVGs would be a possible way forward. However, I've never worked with SVGs before, so I had to learn how to do it.

Scalable container

I assumed that Scalable vector graphics would automatically be scalable, but no. It took me a while to find out about the viewBox attribute. The container below has viewBox="0 0 100 60". This means that the top left corner has the coordinates 0,0 and it is 100 units horizontally and 60 units vertically. I've also added preserveAspectRatio="xMidYMid meet" to ensure that everything inside the container scales with it. Feel free to try it out. If you change the size of the window, the container and the graph scale with it.

Drawing the graph

I will admit that my inner geek loved creating this! I created the axis first, using lines (obviously) and then rectangles to create the bars of the graph. Then I went on to the text and created the cottage names and the numbers on the Y axis. It is only afterwards that I realised I had neglected to label the axes - my bad!

Then I decided to add the percentages onto each bar. I initially thought of making these interactive so that the percentage would appear on hover or keyboard focus, but why? Surely it is better to just make it visible all the time and easy to access without people having to tab around it.

Finally, I decided that it needed some horizontal guidelines to help sighted people see where the different numbers were across the graph.

Accessible Bar Graph

To make the graph screen reader friendly, the code needed some ARIA. I spent quite a while, thinking I'd cracked it, only for none of the text to read, which I wasn't expecting. Then I found out that the svg element needed role="graphics-document" so that it would not treat it all like an image. That solved that.

Then I worked on getting the graphical elements to read. I started out using aria-labelledby and putting it all in the <svg>element, referring to various other bits by their IDs. However, it was getting to the point where it was reading it like alt text that was too long. What I wanted was for the user to be able to go through element by element, so I switched to using aria-label on the actual parts themselves.

I also used aria-hidden="true" on the horizontal guidelines, as I don't think they add anything for a screen reader user.

Holiday Cottage Occupancy

How a screen reader reads it

I used Narrator to read it through, partly because I have to restart my laptop to use JAWS (and I didn't want to close everything) and also just to show that it is quite useable. In the recording, I navigated through using the arrow keys, so that it just read one item at a time. I found this worked well.

Two quick apologies: firstly, there is a black flashing box on the SVG. I don't know why that happens. It only does it when using Narrator. Secondly, the sound quality isn't great. I am having some audio issues when screen recording. At some point, I'll invest in some better kit.

So that shows that a screen reader can read a graph, albeit a very simple one. Next, I hope to investigate some data visualisation applications. If I can get my hands on Microsoft Power BI, that would be awesome! I'll let you know.