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:
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
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!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.