Accessibility

Overview

Designing accessible products means they can be used effectively by as many people as possible, providing an inclusive experience for people with impairments and different needs.

Accessible design improves the product for everyone, as well as creating a better user experience for users with disabilities. In addition, most countries support accessibility with laws and regulations on both public and private sector organizations.

There is no single universal standard, so we recommend that you always check what policies are relevant for you. However, the W3C's Web Content Accessibility Guidelines 2.1 are most often referenced as an acceptable standard.

Compliance

KronoGraph is not a complete application by itself, it is a toolkit that you integrate into your own product. This means that accessibility should be considered at the level of the end product to give your application users the best user experience possible.

KronoGraph as a visual medium is often exempt from compliance requirements because the functionality cannot always be fully reproduced in an accessible way. To help you with your accessibility audits, we have prepared a table that summarizes the guidelines of WCAG 2.1 and how they relate to KronoGraph:

We are always working on implementing features that make KronoGraph more accessible and easier to use. Some tips using various KronoGraph features are listed below.

Keyboard Controls

timeline.on('key-down', keydownHandler);

function keydownHandler(e) {
  if (e.keyCode === 37) {
    timeline.pan('left');
  } else if (e.keyCode === 39) {
    timeline.pan('right');
  } else if (e.keyCode === 73) {
    timeline.zoom('in');
  } else if (e.keyCode === 79) {
    timeline.zoom('out');
  }
}

const timelineRef = useRef(null);
const handleKeyDown = (e) => {
  if (e.keyCode === 37) {
    timelineRef.current.pan('left');
  } else if (e.keyCode === 39) {
    timelineRef.current.pan('right');
  } else if (e.keyCode === 73) {
    timelineRef.current.zoom('in');
  } else if (e.keyCode === 79) {
    timelineRef.current.zoom('out');
  }
}
<Timeline
entities={entities}
events={events}
onTimelineKeyDown={handleKeyDown}
/>

Some browsers support some keyboard navigation by default, e.g. using the Tab key to iterate through form controls. When planning keyboard shortcuts, you should avoid overriding native browser and operating system shortcuts that affect the browser behavior.

Accessible Styling

Accessibility Styling

Log in to view live examples

Text

We recommend using simple sans-serif fonts as they are generally easier to read for most users. Alongside text, you should also convey the meaning in another way that doesn't require reading or understanding the language, such as font icons or glyphs.

Color

The colors you use should always have a sufficient contrast ratio. Online tools such as this WebAIM Contrast checker can help you check your color combinations for accessibility. Special attention should be paid to contrast if users can switch between dark and light modes.

Show meaning in multiple ways

You should not rely on a single method, such as color, to convey a meaning. Add as many markers for context or tooltips for extra information as needed. On entities you can use glyphs and font icons, while on events you can use font icons.

Arrange Entities

Entities can be arranged into types and groups to help users understand how they are related to each other.

ARIA Support

ARIA (Accessible Rich Internet Applications), is a set of roles and attributes that can supplement HTML elements or attributes that don't have built-in accessible semantics or behavior.

KronoGraph lets you set ARIA properties, such as aria-label, on the DOM element.

const labelAria = document.getElementById('KronoGraph-timeline');
const entityCount = Object.keys(timelineData.entities).length;
if (labelAria) {
  labelAria.setAttribute(
    'aria-label',
    `KronoGraph timeline showing ${entityCount} entities.`,
  );
}

Audio

Seeing the timeline is essential for spotting and understanding the patterns and connections revealed in the data, which makes it challenging to make timelines accessible e.g. for screen readers. As an alternative, you can hide the timeline's div from screen readers using the aria-hidden property, and instead supply a text in the aria-description that summarizes the timeline to the extent needed in your context, for example:

The element here is a timeline made of entities and events, where entities represent employees and events represent their communications.

You can also use audio as an additional channel to written information or as an extra method of alerting or highlighting, but remember to never rely on audio alone:

function clickHandler(event) {
  const msg = new SpeechSynthesisUtterance();
  if (event.targetType === 'entity') {
    msg.text = event.label;
  } else if (event.targetType === 'event') {
    msg.text = event.time;
  }
  if (msg) {
    window.speechSynthesis.speak(msg);
  }
}

const timeline = createTimeline('accessibilityAudio');
timeline.set(timelineData);
timeline.fit();
timeline.markers([{ label: 'Company announcement.', time: new Date(2025, 7, 14, 8, 56, 2) }]);
timeline.options({ scales: { showAtBottom: false } });
timeline.on('click', clickHandler);

const clickHandler = ({targetType, label, time}) => {
  const msg = new SpeechSynthesisUtterance();
  if (targetType === 'entity') {
    msg.text = label;
  } else if (targetType === 'event') {
    msg.text = time;
  }
  if (msg) {
    window.speechSynthesis.speak(msg);
  }
}

<Timeline
  entities={entities}
  events={events}
  markers={ [{ label: 'Company announcement.', time: new Date(2025, 7, 14, 8, 56, 2) }]}
  options={{scales: {showAtBottom: false}}}
  onTimelineClick={clickHandler}
/>