My Authors
Read all threads
Today we released @HashiCorp #Nomad v0.12.2 which includes a new scaling events timeline. I wanted to talk about some of the small #a11y details that went into its design and implementation.

✨ thread ✨ The scaling timeline in Nomad v0.12.2. A green area chart wi
Line charts are designed for visual consumption, but that doesn't mean we can't provide some screen reader support. Plus a11y covers more than just sight.

The thesis here will be that making accessible interfaces isn't typically hard work but it takes paying constant attention.
To start, consider the ticks on the axes of a line chart. These are SVG text elements which will be read by a screen reader by default. Since the line itself won't be read out loud, the ticks are reference material without the context. The fix here is to make the axes hidden. Two svg g elements with aria-hidden="true".
But simply hiding the chart isn't so good. It has useful information! We started adding programmatic descriptions of the range and domain of the data using SVG title and description elements combined with aria-labelledby and aria-describedby. A snippet of an svg containing role="img" and aria
That covers the basics of a line chart pretty well, but the scaling events timeline also has annotations. How can we make those accessible?
First, we can Use The Platform™. Instead of using SVG shapes with click events we use HTML buttons. This gets us things like tabbing and keyboard activation with enter and space keys. HTML is more limited than SVG in many ways, but horizontal positioning can be done just fine. A loop over all annotation objects rendering them as HTML bu
Note that annotations are just positioned icons. We can visually derive meaning from the iconography and position as it relates to the labeled x-axis, but this isn't helpful for screen readers. The title for the button needs to include the event type and x value. A JavaScript object for an annotation. It contains the style
Another subtle issue with annotations is order. Annotations are naturally ordered visually based on their x-value, but that doesn't necessarily mean they are ordered in the DOM.
Again, this is an easy fix but it's also easy to overlook. We also sort annotations from right-to-left for timeseries charts. Why? Because if the same information was presented as a list, you'd expect the most recent events to be shown first.
The last detail has to do with click area. There are two components to this.

First, annotations left to their own devices can overlap. Overlapping annotations mean a reduced surface area for the bottom annotation. We use a common trick here and stagger annotations. An annotated line chart with staggered annotations. When two
Second, WCAG Target Size requires a truly large clickable area. So large it may mess with your visual design, causing things to have more visual weight than you wanted. Targets don't have to be visible! My favorite use is here where the target area is 3x the visual height. A thin distribution bar chart with a red outline showing how
This might seem less like a11y and more like general UX but that's kind of the point. A11y *is* general UX. This feature is just as useful if you're able-bodied using a laptop trackpad in your lap or if you have reduced motor function.
There you have it! A bunch of little details, none of which were particularly tricky to implement, that add up to a much more inclusive experience even for a feature that is very visual.

Thank you for coming to my thread talk 🙇‍♂️
Missing some Tweet in this thread? You can try to force a refresh.

Keep Current with Michael Lange

Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Follow Us on Twitter!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!