Tech Notes
In a world driven by data, access to information empowers people to make informed decisions. Often, this data is organized into complex data visualizations, such as charts, tables, or infographics, to provide structure and enhance engagement. Creators understand that the broader the reach of information, the greater the potential impact. Yet even the most engaging infographics can inadvertently become exclusive artifacts, accessible to only a portion of their intended audience.
So, how does one approach complex data visualization in an inclusive and accessible way?
Accessible Formats:
One quick and effective solution is to provide a text-based version of charts, tables, or infographics in the form of a detailed webpage description or a downloadable text file that captures the visual's full context and key insights. For much smaller elements, it may be beneficial to instead add a brief paragraph below or above them that describe the data at a high level.
For charts or graphical data, consider creating an embedded HTML table below or alongside the visual representation to improve compatibility with screen readers and allow users to interact with the data where it stands. An accordion style format may be implemented to reduce visual clutter when the information is not being accessed.
To support responsive design and the use of smaller screens, use SVGs instead of raster images to improve scalability of visual elements across a wider range of devices. This may create a more immersive experience for users relying on zoom, whether on their phone, tablet, or desktop.
Structure and Layout:
To improve readability, organize the flow of information in a logical and easily digestible manner. For complex infographics, use a clear hierarchy with well-defined sections, headings, and icons to assist users in following along. (Note: icons should have appropriate alt text or be hidden from screen readers if they do not add meaningful content.)
Avoid overcrowding information and clear away clutter. In tables, provide ample spacing between rows and columns. In charts and infographics, label sources directly rather than relying on a legend.
Use descriptive labels for elements and avoid jargon. Headers should be simple and indicative of the content. This is especially true of tables, which rely on row and column headers to accurately convey cell relationships to assistive technologies (AT).
Assistive Technologies (AT):
Offer mindful implementation of captions, tags, and tooltips. Captions create additional context, tags categorize data points, and well-placed tooltips reveal more information to users. Often, the latter two elements are accessed on hover, but it’s better to provide additional insights and organizational tools on key-up events to further enhance their discoverability and navigability.
Use Interactivity:
Most users may struggle to line up a data point with the side axis of a chart or graph, but it’s particularly difficult for those with cognitive and visual differences. To make accessing information easier, use interactivity. For example, when a bar, line, or area is activated, you can program the selected element to become more prominent and everything else to fade into the background, thereby reducing visual background noise. Make certain this is announced to screen readers.
Alternatively, or in conjunction, make the appropriate values known above each data point when focused on. In the case of a bar chart, you may add the value at the top of the bar to improve accessibility and overall usability.
Note: Pre-coded data visualizations from sources such as D3js.org (Data-Driven Documents) can be customized by plugging in your own data and then further tailored to meet accessibility measures.
Text Alternatives:
Concise yet informative alt text is a cornerstone of inclusive design, enabling screen readers to convey key information without overwhelming users. There are many available resources on writing effective alt text under various contexts. For complex data visualizations, remember to provide a link to the full data set because we don’t always know what will be of significance to the end-user. Allowing them the ability to comb through the details could be of immeasurable value.
Use of Color:
As always, use colors that meet WCAG color contrast guidelines. For regular text, aim for a minimum contrast ratio of 4.5:1 (3:1 for larger text). For charts and infographics, ensure all text, lines, and symbols meet at least a 3:1 contrast ratio against their backgrounds, benefiting users with low vision or in low vision contexts. As a baseline, always check foreground text against background colors.
Aspects that may require extra attention can be broken down by the type of visualization:
- Charts: Focus on axis labels, data values, legends and keys, as well as visual elements such as bars, lines, and markers.
- Tables: Make sure headers and data cells meet contrast requirements, and don’t overlook borders and dividers that separate rows, columns, or sections.
- Infographics: Pay attention to graphical annotations, titles, descriptions, symbols, and icons. Remember to attend to tooltips and informational overlays.
During the design process, consider beginning in grayscale to assess how distinguishable various data elements are. Avoid using color alone to convey meaning. Instead, add discernible pattern fills, labels, or symbols. For line graphs, experiment with line styles and widths or different shapes for data points. With tables, make use of borders, shading, or bold headers to differentiate data categories. When approaching infographics, shapes, labels, and icons are handy. For much simpler data sets, consider a monochromatic color scheme to ensure the relative luminance of each element can be cognitively parsed.
Accessible Typography:
Sometimes supporting our users is simple: let users decide what’s best for them. Honor the preferences they’ve already plugged into their browser or OS settings to create a user-made experience.
- Avoid disabling browser zoom, so users can scale fonts (and images), as needed.
- When implementing CSS, use relative units for font sizes (e.g. em, rem, and percentages) rather than fixed unit sizes (e.g. px and pt). This will allow fonts to scale per user preference.
- Include CSS styling for high-contrast and dark modes to accommodate users with both permanent and temporary or situational disabilities.
When designing for those with dyslexia or other reading difficulties, offer font customization options. Provide users with a text size adjustment tool in the form of a slider, a toggle for contrast, controls to adjust line height and letter spacing, and the ability to switch fonts. (Special fonts like OpenDyslexic and Lexend are designed to aid readability for individuals who fall within these demographics, though their effectiveness varies from person to person. This is why font customization is important in creating a truly inclusive and universal design.)
For users working with lower resolution screens, sans-serif fonts may improve readability for users out-of-the-box, since these fonts lack decorative strokes that can clutter the appearance of letters.
In the absence of font customization options, letter and word spacing should also be carefully considered. Letters and words that are too close together can be difficult to read, while excessive spacing disrupts the flow of text.
As a follow-up to your inclusivity initiatives, it is wise to run some basic accessibility tests to make certain your efforts have been effectively executed.
Making data visualization inclusive through structured information, readable fonts, and clearer labels creates a cleaner, more navigable experience that all users can appreciate. By allowing everyone to participate in discussions, analyses, and decision-making processes, we democratize knowledge and offer everyone a seat at the table. Because in the Age of Information, data is the new gold standard, and everyone deserves the opportunity to mine that value.
About the Author
Kristen Reed is a Teach Access Student Ambassador and Student Academy alum, currently interning with AFB’s Talent Lab. A late-diagnosed Autist and psychology student at Western Governors University with a foundation in digital design and web development best practices, Kristen aspires to embed accessibility into the early phases of design and development through inclusive user research. They’re passionate about advocacy and building digital spaces that work for everyone.
About AFB Talent Lab
The AFB Talent Lab aims to meet the accessibility needs of the tech industry – and millions of people living with disabilities – through a unique combination of hands-on training, mentorship, and consulting services, created and developed by our own digital inclusion experts. To learn more about our internship and apprenticeship programs or our client services, please visit our website at www.afb.org/talentlab.
