top of page

Accessibility

It's the quality of being easily understood or appreciated.

 

With respect to websites, it’s vital that information, navigation and interactions are articulated in such a way that complements every person's experience, regardless of their limitations or disabilities.

 

To achieve this, our design system strives for a AA level in the

Perceivable

Intuitive websites require people to perceive it first. With that in mind, our design system presents information, navigation, components, and interactions in such a way that more people can perceive it.

Visual Indication

Components should use more than one visual indication to provide understanding or action.

 

Best practices

  • Use more than one visual indication (i.e. text, shape, color, size, location or orientation) on all interactive components.

Components should use more than one visual indication to provide understanding or action.

 

Best practices

  • Use more than one visual indication (i.e. text, shape, color, size, location or orientation) on all interactive components.

Color Choice

The use of color in information, components, and interactions should strive for legibility and inclusion.

 

Best practices

  • Color should never be used as the only indication for understanding or action.

  • Color contrast should make text legible and non-text elements distinct.

Image & Icon Alternatives

All images and icons have an alternative text option. 

​

Best practices

  • Images should have a meaningful and contextual alternate, which provides a clear and concise description of the image (e.g. alt tags or title tags)

  • Images should be permitted to be hidden from the interface (e.g. role=“presentation”)

Operable

All interactions should be presented in such a way that users of screen readers, keyboards or mice can operate on any task.

Mouse and Keyboard Interactions

All interactive elements are made operable from a mouse or a keyboard.

 

Best practices

  • Anything a mouse can do in an interface, a keyboard should be able to do as well.

  • No keyboard traps. Keyboard only users should have a way of exiting any component or modal.

Skip Links

Similar to landmarks, there is a need for people using a keyboard only to skip to the main content of a page. Since keyboard only users may not have a screen reader, landmarks may not work. In this case, a skip link to the main content is recommended. 

 

Best practices

  • Skip links should be visible on the screen.

  • Skip link should jump directly to the main content.

Tab Order

Like reading an English authored book, our page content uses a standard of reading left-to-right and top-to-bottom.

 

Best practices

  • Tab will move forward in tab order, and Shift + Tab will move in reverse tab order.

  • Only actionable elements should be navigable when tabbing.

  • A visual indicator showing which element is in focus should be present.

Landmarks

In some cases, skipping to the main content of a page is necessary. For users of screen readers, ARIA landmarks are the most common way of doing that.

 

ARIA landmarks are attributes you can add to elements in your page to define areas like the main content or navigation.

 

Best practices

  • The 'role' attribute should not be placed on elements with semantic meaning, like a <ul>.

  • The 'role' attribute should be placed on elements with no semantic meaning, like <div> and <span>.

  • Use ARIA attributes in HTML 5, even when the HTML 5 element could potentially convey the same thing.

Element Identification

All page elements should be defined in a non-visual manner.

 

Best practices

  • All headers and labels are identified appropriately and describe the content accurately.

  • Form controls are labeled using a label tag, title tag, aria-label, aria-labelledby, aria-describedby or aria-required.

  • The purpose of a page is clearly described using a title tag.

  • The purpose of each region, table (with caption) or diagram is clearly labelled

Understandable

A person's interpretation of a website is key to its intuitiveness. We built our design system to provide easily learned behaviors, that improve efficiency and retention, by making our navigation, components, and interactions consistent and contextual.

Visual Indication

It can be confusing to any person when an element that appears to be the same as another element, yet they act the different. This can be a challenging task with complex interfaces, but we strive to make any component that looks the same, act the same.

 

Best practices

  • Use the same component throughout the tool, where possible.

  • New components built with other components within them, should re-use established components, where possible.

Predictable Navigation

Navigational components repeated through the tool should be displayed in a constant and consistent manner.

 

Best practices

  • Navigational components should only change when provoked by an action taken by the user.

  • Navigational components should be contextually relevant using data gathered by the system.

Identifiable & Preventable Messaging

Creating a website that is forgiving to the user is crucial to their proficiency and efficiency. In cases where a message is necessary to advise the user of information, we should identify what caused it, why it happened, and how to resolve it.

 

Best practices

  • Message content should be concise and contextual to the event that triggered it.

  • In an error message scenario, the item in error should be identified and a description should be provided.

  • Interactions that require submission should be reversible, verifiable or confirmable prior to submission.

bottom of page