Accessibility

Why it matters

Government of New Brunswick websites and digital services must be accessible to all New Brunswickers. This means websites and applications are usable for everyone, on any device, including assistive technology for persons with disabilities.

Design system components were created with accessibility in mind and meet best practices, however you should always test your final products to ensure there are no accessibility issues.

Web Content Accessibility Guidelines (WCAG)

The WCAG standard is organized around four principles for accessibility:

1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
2. Operable: User interface components and navigation must be operable.
3. Understandable: Information and the operation of the user interface must be understandable.
4. Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

Government of New Brunswick strives to meet WCAG 2.2 Level AA.

• GNB Design system - Accessibility toolkit (Sharepoint)
• Web Content Accessibility Guidelines (WCAG) 2.2
• How to meet WCAG (quick reference)

Colour contrast

Users perceive colour differently (due to colour blindness, low vision and other factors) so colour alone should never be used to convey meaning. WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text.

There are several contrast checker tools online that you can use:

• WebAIM contrast checker
• Tanaguru contrast finder
• APCA contrast calculator

Alternative text

Alternative text, often abbreviated as "alt" text, is an HTML attribute used to provide a text description of images. It is typically used for accessibility reasons, allowing screen readers to describe images to users. Alt text can also improve search engine optimization (SEO).

When to use alt text

• Images carrying information: Use alt text when the image carries relevant content, meaning, or information.
• Functional images: Use alt text for images that are used as links or buttons.
• Images depicting text: If an image displays text, use alt text to contain that text.
• Complex images: Use alt text for complex images like graphs or diagrams.

When not to use alt text

• Purely decorative images: If an image doesn't provide any information and is just for aesthetics, it should have an empty alt attribute (alt="").
• Redundant images: If the information provided by the image is already conveyed through text nearby, use an empty alt attribute to avoid repetition.
• Background images: Images that are purely for decoration and are implemented via CSS do not need alt text.

<img src="../img/your-image.jpg" alt="Describe the image" />

Audio and video

Provide closed captioning on videos and provide transcripts for audio and video elements.

Data visualizations

For charts and graphs, writing a long description will help users understand the data you are presenting. It is also helpful to also provide the data in a table for users who prefer to consume information in a simpler format.

Writing

Using plain language makes content more accessible for everyone. If the language used is difficult to understand, it can hinder people's ability to make informed decisions. It can prevent them from fully understanding the information, accessing services, or getting the help they need.

Canada.ca's Content Style Guide outlines best practices for creating web content that can be easily found, understood, and used. They are based on writing principles and techniques that help make web content clear and adapted to the needs of all people.