Skip to main content

Design

The Design blog is all about product and Qlik solutions, such as scripting, data modeling, visual design, extensions, best practices, and more!

Announcements
QlikWorld 2023, a live, in-person thrill ride. Save $300 before February 6: REGISTER NOW!
Ouadie
Employee
Employee

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.

Animation-Keyboard.gif

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

Example:
(Source - https://accessibility.psu.edu/images/charts/)

chartbarcolor-bad.jpg   
Inaccessible Bar Chart: Information is conveyed only by color     

chartbarcolor-good.jpg
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.

If working with nebula.js, you can use the convertTo method which allows to convert a visualization to a different chart type which in this case would be a Table supernova

 

// Show table view with pressing the Enter key, revert back to the visualization when pressing the Escape key
const handleKeyDown = (e) => {
 if (e.which === 13) {
  vizRef.current.convertTo('table');        
 }
 if(e.which === 27) {
  vizRef.current.convertTo('line');
 }
}

 

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!

1 Comment