Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Web accessibility is a topic that's not often brought up when planning to build an experience on the web. It is however crucial to acknowledge the importance of ensuring that all users are able to access the content you create as it helps to eliminate barriers to access valuable information and proactively creates an inclusive environment for people regardless of their visual, cognitive, physical, or auditory disabilities.
You can read more about Qlik’s commitment to making products and services available to everyone here. Qlik Sense comes with features and improvements aimed at accessibility compliance with WCAG 2.0 standards.
Accessibility in Qlik Sense
The product features in Qlik Sense include:
- Default color schemes with high contrast
- Support for keyboard navigation
- Keyboard shortcuts
- Screen reader support (A screen reader - NVDA is supported - can be used to interact with apps built-in Qlik Sense)
Note: Navigation through the hub, app sheets, toolbar, and data visualizations can be done using a keyboard only for screen reader users. All key shortcuts can be found on this handy help page.
Recommendations when building apps and visualizations
- Overall app best practices:
- Aim for a simplified design and decluttered apps
- Aim for a simple/flat structure instead of a complicated grid when building sheets (This makes it easier for users with keyboard-only navigation to find their way around the page)
- Build sheets so that the content provides a general overview first, then goes into details later on
- Include descriptive titles that make it easier for users navigating with a screen reader to understand the context of the current object
- Accessible visualizations best practices:
- Color accessibility: since the spectrum of colors is narrower for people who have certain visual impairments, they may interpret visualizations differently than intended.
- For instance: a red and green KPI can be confusing if users see those colors as more yellow and brown. In this case, including shapes with colors can help make it more accessible.
- Stick to standard colors or safe palettes and test for sufficient color contrast ratio to allow better readability.
- Using charts that include the accessible built-in Data View
- Providing context whenever possible through labels and clear text descriptions (titles, subtitles, and footers)
- Limiting values in dimensions to a minimum when possible
- Make use of separation and space, for instance, adjusting the spacing between bars and segments in a bar chart can help users distinguish sections of a chart
- Color accessibility: since the spectrum of colors is narrower for people who have certain visual impairments, they may interpret visualizations differently than intended.
Example:
(Source - https://accessibility.psu.edu/images/charts/)
Inaccessible Bar Chart: Information is conveyed only by color
Accessible version of the Bar Chart: labels for each category added to the bottom
Accessibility in Mashups
When it comes to building web apps or mashups that integrate with Qlik Sense, developers should plan for creating an accessible experience.
It is true that there are challenges in doing so especially when relying on direct iframe embeds or certain libraries that have limited support for accessibility features or are still in the works. But leveraging the available methods, enforcing best practices stated above, and making fallbacks available for users can be a good start.
If using the Capability API, you can make use of the Visualization API's toggleDataView method as described here to change between a visualization and a data view.
Otherwise, a screen-reader only text description can be added to explain this feature which will be hidden to users of the site via CSS.
<h3>Nebula.js Rendered Line Chart</h3>
<p>A description of the chart that explains in detail the chart for screen readers</p>
<div className="sr-only">[This text is hidden for screen readers only] Explain here how to toggle between the chart view and the data table view by clicking on the Enter key and the Escape key and navigating the rows with Up/Down arrows.</div>
<div id="barViz" ref={elementRef} style={{ height: 500}} onKeyDown={handleKeyDown}></div>
If working with a third party library such as D3.js, you can use attributes to add descriptive text to your charts.
// append the svg object to the body of the page
var svg = d3.select("#" + id)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("role", "img")
.attr("aria-label", "Include a clear description here including the type of the chart, the data represente, and the overall trend")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
I have put together a basic example in this github repo where you can explore the code.
I hope you found this post helpful and it helped motivate you to introduce accessibility into your development workflow. If you have techniques or ideas that you already use, please do not hesitate to share them below!