ACCESSIBILITY, DATA VISUALIZATION, UX
Part 2 — Practical Tips for Creating Accessible Data Visualizations
“Data Without Barriers” — A Series
“Certain things catch your eye, but pursue only those that capture the heart.” — Ancient Indian Proverb
As I hit my stride during this morning’s 5K 🏃♂️, the above quote sneakily played on my mind amidst my Bollywood “run” playlist.
The synergy of the quote with the rhythmic strides made me reflect — in the world of data, we often chase after striking visuals, but what truly matters is designing with heart and purpose.
In our previous leg, Part 1 — Why Accessibility Matters in Data Visualization, we looked at the profound “why” of the mission to create visualizations that are understood by everyone.
For the next lap, we’ll go over the “how” — exploring hands-on ways to accomplish the goal of data speaking to everyone, without exceptions!
Recognizing Common Accessibility Barriers
Imagine stepping into your favorite café, where the aroma of freshly brewed coffee mingles with the soft hum of conversations.
At one table, there’s a woman savoring a spicy chai latte, while a gentleman nearby carefully stirs almond milk into his espresso. A group at the corner opts for herbal teas, discussing their varied flavors with enthusiasm. Each person’s choice, as unique as their stories, reflects the spectrum of tastes and preferences.
Just as this café scene celebrates diverse palates, our digital creations should honor and cater to the myriad ways in which our audience experiences the world.
There are moments when all of us, regardless of our permanent challenges, face temporary barriers influenced by our surroundings or circumstances. Here’s a deeper look:
a. Visual Impairments
Think of those whose world isn’t as colorful or defined as ours. For them, contrasting shades and clear visuals make all the difference. An infographic awash in pastels might be aesthetically pleasing but could be a blur for someone with color blindness.
This condition need not even be permanent — consider the times you tried to view a screen under the blinding midday sun or with tired eyes after a long day.
- Permanent condition — This includes individuals who are blind, have low vision, or are color blind.
- Temporary condition — Short-term blindness or blurred vision, perhaps due to an injury, surgery, or a condition like conjunctivitis.
Accessible visuals aren’t just for those with permanent visual challenges; they ensure clarity in diverse settings for everyone.
b. Hearing Impairments
Imagine sitting by a radio, the volume turned down low, straining to catch the murmurs of a song. Videos and animations with vital audio cues can feel just like that for our friends with hearing challenges. Subtitles and visual cues are more than just features; they’re bridges to comprehension.
Going beyond the permanent, think of the moments when you’ve tried to catch a video in a noisy airport lounge or while in a hushed library without headphones.
- Permanent condition— Those who are deaf or have hard of hearing.
- Temporary condition — Short-term hearing loss because of infections, blockages, or exposure to loud noises.
Subtitles and clear visual indicators become lifesavers, making content comprehensible amidst environmental noise.
c. Motor Impairments
Ever tried using your non-dominant hand for an entire day? It’s not easy. Now, consider this when designing interactions in visualizations. For those with limited mobility, easy navigation is not a luxury; it’s a necessity.
Not everyone has a permanent physical disability. But have you experienced a similar sentiment navigating a touch screen with freezing fingers in winter? Or clicking on minuscule buttons while juggling groceries in one hand?
- Permanent condition — Individuals with conditions such as paralysis, cerebral palsy, or permanent limb differences.
- Temporary condition — Short-term disabilities like a broken arm, sprained wrist, or post-surgery limitations.
Designing for smooth and straightforward interactions helps not just those with lasting motor challenges, but all of us during those fleeting, clumsy moments.
d. Cognitive Impairments
We’ve all had days when even the simplest tasks felt overwhelmingly complex. While some individuals grapple with cognitive challenges daily, haven’t we all faced brain fog after a sleepless night or overwhelming stress? A complex data visualization can become a labyrinth.
- Permanent condition — cognitive disabilities might include developmental disabilities, traumatic brain injuries, or conditions like dementia.
- Temporary condition — Short-term cognitive impairments might arise from stress, lack of sleep, temporary brain injuries, or side effects of medications.
Keeping things clear and intuitive ensures that our data remains accessible, even when our minds are momentarily clouded.
By recognizing and understanding these barriers, both permanent and temporary, we create a digital realm that’s truly inclusive.
Whether it’s a lifelong challenge or a fleeting situational hurdle, accessible design ensures our content resonates, no matter the circumstance.
Principles of Accessible Design for Data Visualization
Drawing from everyday experiences, it’s easy to build a connection with the core values that guide us in the creation of visuals — that can resonate with one and all.
a. Clarity
We all have been through the experience of assembling a piece of furniture, relying solely on a confusing manual — spending hours and making mistakes!
How about going through cryptic instructions of a brand new board game!?
👉 Key takeaway: Avoid ambiguity. A well-labeled axis, a comprehensive legend, or a straightforward title can make all the difference in how your visualization is received.
Expanding on the takeaways:
- Labels and Legends: Often, these are the first elements a viewer’s eyes gravitate toward. Ensure they are succinct yet informative.
- Narrative Structure: Lead your audience through the visualization. Much like chapters in a book, the flow should be logical and guide comprehension.
- Jargon-free Language: Technical terms might alienate some viewers. Where possible, use plain language.
b. Simplicity
I recently attended a Chinese dance performance. The beauty lay not in its complexity but in the simple, harmonious choreography and music that evoked profound emotions. This reiterated that sometimes, less truly is more.
Another example of simplicity that immediately comes to mind is my Mom’s recipes — few quality ingredients, basic process, and easy alternatives.
👉 Key takeaway: While it might be tempting to showcase every data point or use flashy animations, the true essence of your visualization should shine through its simplicity. Let the data take center stage.
Expanding on the takeaways:
- Prioritize Data Points: It’s not necessary to display every piece of information. Highlight the most significant data to ensure clarity.
- Minimalistic Design: Avoid ornate elements or flashy animations. They might distract from the main message.
- Intuitive Layouts: Organize data in a manner that feels natural to interpret.
c. Consistency
There’s comfort in familiarity. Whether it’s my morning run at a known location or track, or a favorite song on repeat, consistency breeds a sense of trust.
Similarly, when presenting a series of charts or reports, maintaining consistent design elements enhances user experience.
👉 Key takeaway: Decide on a set of design standards. Whether it’s the color scheme, typography, or chart type, keeping them consistent aids in better comprehension.
Expanding on the takeaways:
- Unified Color Scheme: If red indicates a decline in one chart, it should consistently do so in others.
- Standard Typography: Using the same set of fonts across visuals ensures readability and avoids confusion.
- Common Chart Types: If possible, maintain consistency in chart types when presenting a series of data to aid in rapid consumption.
d. Flexibility
Recalling my half-marathons over the years across different terrains and seasons, I appreciated the need for adaptable gear, those that could suit various environments.
Similarly, our data visualizations should be versatile, adaptable to the diverse needs of our audience.
👉 Key takeaway: Whether it’s accommodating those who rely on screen readers or ensuring that your visuals render well on different devices, we must be prepared for varied user interactions.
Expanding on the takeaways:
- Device Adaptability: Ensure your visuals are responsive and look good on desktops, tablets, and smartphones alike.
- Multi-modal Interactions: Design for touch, mouse, and keyboard inputs, ensuring all users can navigate with ease.
- Alternative Views: For complex data, provide users options to view data in various formats, like graphs, tables, or auditory cues.
Life, with its myriad lessons, serves as a rich source of inspiration. Drawing parallels from these, we can craft data visualizations that not only inform but also empathize, ensuring our stories are told and heard across the vast spectrum of human experience.
Practical Techniques for Enhanced Accessibility
Recall a cinematic masterpiece “The Shawshank Redemption”. Its intricate plot, memorable characters, and breathtaking cinematography combined to deliver a universally resonant message about hope and perseverance.
Every scene, every line, and every frame was meticulously curated to captivate diverse audiences.
In a similar vein, when constructing our data visualizations, each graph, hue, and datum should come together in a harmonious ensemble, ensuring that the story it tells is not just seen, but felt by all.
Part 3 of our series promises plenty of visual examples, but until then.. here’s a list of essential techniques:
a. Color choices (Intentional)
Think of how filmmakers masterfully use color grading to set the mood and atmosphere. Just as the blue tint in “The Matrix” accentuates its virtual reality theme, in data visualization, the precise hue can amplify clarity and comprehension.
While Hollywood has its cinematic palette, we too have our shades of data that need to be chosen with intention and insight.
- High Contrast Colors: Ensure that text or data points stand out against their background and against other data visuals. This helps in readability and reduces eye strain.
- Color Blindness Compatibility: Use color blindness simulators that demonstrate how visuals appear to those with color blindness — for creating color palettes that are inclusive.
🛠️ Tools and resources — Color Oracle, Coblis, Color Brewer, Contrast Checker, Coolors
b. Alternative Text for Visuals
Thinking back to the bedtime stories my mom would tell, she would describe scenes in such vivid detail that I could picture them with closed eyes. Another childhood memory I fondly remember is the narration my dad gave for each photo in our family album — painting a story I could visualize beyond the image.
Similarly, alt texts play the role of the storyteller, ensuring that even those who can’t see a visual can imagine and understand it.
- Descriptive Alt Text: Go beyond the obvious — if there’s a bar graph, describe not just its presence but also its core message, trends, or outliers.
- Consistent Formatting: Provide alt text for every visual using a uniform framework, maintaining a consistent level of detail and format.
🛠️ Tools and resources — ALT Text Tester, ALT Text Generator, AI ALT Text Generator, WebAIM
c. Keyboard Navigation
If you are like me, you have tried your hand learning a musical instrument — each key or string giving out a unique sound, defining a clear purpose. Or think about the old TV remote control buttons, each mapped to a specific function — each press generating an intentional command to the TV.
Similarly, keyboard navigation in a digital world empowers our users with unbiased control to navigate intentionally without barriers.
- Interactive Elements: Make every clickable or interactive component accessible via keyboard strokes.
- Logical Tab Order: Navigating should be intuitive, keeping the tab order logical, typically left-to-right, top-to-bottom.
🛠️ Tools and resources — Common interactions and standard keystrokes, Keyboard Navigation Accessibility Testing, Keyboard Testing, Manual Accessibility Testing
d. Screen Reader Compatibility
Almost a decade ago when I was assisting a research scholar from VIT, Pune with an initiative to bring technology closer to visually impaired people — I had an eye-opening experience!
At a digital accessibility workshop, I observed a visually impaired demonstrator interacting with a shopping site, using a screen reader.
That moment solidified the impact of mindful design on real lives.
- Optimize Descriptions: As trivial as it may sound, our content should be ordered and described in a manner that’s intuitive when vocalized.
- Testing: An iterative tool-based testing should help inform how our digital world communicates audibly.
🛠️ Tools and resources — JAWS, NVDA, Popular list of screen readers
e. Simple Language & Tooltips
As a father of two kids and as someone who loves interacting with younger generation, I have become an advocate of clear, direct, and uncluttered language.
During my early blogging days, I remember assuming that my published work needs to sound sophisticated — falling prey to using vocabulary that only looks good in a dictionary.
Soon enough, I learnt to use simpler language and provide clear examples and analogies to explain complex ideas— thanks to some guidance by my professors at USF.
In the intricate realm of data, tooltips act as our translators, converting the obscure into the understandable.
- Plain Language: Simplify complex terms. If you’re discussing a ‘demographic transition’, maybe explain it as ‘how populations change over time’.
- Tooltips: These are the lifelines for many users. Offer clear, concise explanations for icons, abbreviations, or complex terms. It’s like having a guidebook in a foreign land.
🛠️ Tools and resources — Hemmingway App, Tippy.JS
What’s the point of telling a story if half the world can’t hear it?
The above techniques, when merged with our visual designs, not only elevate the quality of our work but also open the doors to a more inclusive world of data comprehension.
Final Words..
“The goal of visualization is insight, not pictures.” — Ben Shneiderman
In our diverse, interconnected world, every individual brings a unique perspective to the table. By making our visualizations accessible, we aren’t just ticking off a checklist; we’re opening doors and breaking barriers.
It’s more than just shades and lines; it’s an art of telling stories that everyone can relate to, feel, and understand.
Imagine being at a concert. While some might enjoy the rhapsody of instruments, others may be swaying to the lyrical narrative.
Data visualization is that concert, and making it accessible ensures everyone has a song they can hum along to.
💪🦋 Stay tuned for Part 3, where we go deeper into actual case studies and real-world narratives of accessible data visualization. I am excited to go on this enlightening voyage with you, full of insights and lessons.
🌈 Web Resources
- Web Content Accessibility Guidelines (WCAG) 2.1: Covers a wide range of recommendations to make web content more accessible.
- The Data Visualization Society: Offer numerous resources on best practices, including considerations for accessibility in data visualization.
- ColorBrewer 2.0: An online tool designed to help people select good color schemes for maps and other graphics.
- Highcharts: A charting library that focuses on providing visually accessible charts and graphs. Their website has documentation on how to make your charts more accessible.
- A11y Project: A community-driven effort to make web accessibility easier. They offer a checklist and numerous resources to improve website accessibility.
Copyright © 2023 Vishal Mehta. All Rights Reserved.
