Accessibility affects all aspects of how we live, work, and play. In a digital context, accessibility means making content and features accessible on users’ preferred platforms and devices and accommodating diversity by enabling all types of physical and language abilities. Designing with accessibility in mind results in better digital products for everyone.

Accessible design

Below you will find a list of some key principles of accessible design. Most accessibility principles can be implemented very easily and will not impact the overall “look and feel” of your web site.

Provide appropriate alternative text

Alternative text provides a textual alternative to non-text content in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.

Provide appropriate document structure

Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.

Provide headers for data tables

Tables are used online to organize and present data and should have appropriate table headers (<th><td>Column heading</td></th>). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.

Ensure users can complete and submit all forms

Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated with the correct form element <label for="inputID">Form label</label>. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.

Ensure links make sense out of context

Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like “click here” and “more” must be avoided.

Caption and/or provide transcripts for media

Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient. Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations, video files (mp4, .wmv, .mov), all online learning modules, and Adobe Flash content.

In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.

Allow users to skip repetitive elements on the page

You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a “Skip to Main Content,” or “Skip Navigation” link at the top of the page which jumps to the main content of the page.

Do not rely on colour alone to convey meaning

The use of colour can enhance comprehension, but do not use colour alone to convey information. That information may not be available to a person who is colourblind and will be unavailable to screen reader users.

Form with buttons left aligned

Do: Use colour to enhance comprehension

Form with buttons right aligned

Don't: Use colour alone to convey information

Make sure content is clearly written and easy to read

There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately.

Make JavaScript accessible

Ensure that JavaScript event handlers are device independent (e.g., they do not require the use of a mouse and function well with screen readers).

Design to standards

HTML compliant and accessible pages are more robust and provide better search engine optimization. Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more flexibility and accessibility of your content.

Consider avoiding on-screen text resizers

Modern browsers have simple text resizing tools and settings that have come a long way since the advent of the on-page text resizer. To meet accessibility requirements, text needs to be resized without assistive technology up to 200 percent without loss of content or functionality. This can be achieved through proper structure without the need for an on-page text resizer.

Always define the language of the document

The HTML lang attribute identifies the language of text content on the web. This information helps search engines return language specific results and is used by screen readers to provide the correct accent and pronunciation. The lang attribute must also be used to identify text in a language that is different from the document’s primary language.

Accessibility testing

City of Winnipeg websites must pass Level AA WCAG Requirements.

For testing colour contrast use a colour contrast checker, such as WebAIM’s colour contrast checker. Another good option for testing accessibility is the Chrome plugin Lighthouse. Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

Although there are many automated tools available for testing website accessibility, none of them can effectively check everything for you. In addition to using an automated tool set, it is recommended to perform manual tests.


Bootstrap and accessibility

Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.

The overall accessibility of any project built with Bootstrap depends in large part on the author’s markup, additional styling, and scripting they’ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill WCAG 2.0 (A/AA/AAA), Section 508 and similar accessibility standards and requirements.

Structural markup

Bootstrap’s styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of Bootstrap itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.

Interactive components

Bootstrap’s interactive components—such as modal dialogs, dropdown menus and custom tooltips—are designed to work for touch, mouse and keyboard users. Through the use of relevant WAI-ARIA roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).

Because Bootstrap’s components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behaviour, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.

Colour contrast

Most colours that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to insufficient colour contrast (below the recommended WCAG 2.0 colour contrast ratio of 4.5:1) when used against a light background. Authors will need to manually modify/extend these default colours to ensure adequate colour contrast ratios.

Colour customization

Confluence uses updated colour system variables to meet City of Winnipeg brand guidelines and recommended Level AA WCAG Colour Contrast Requirements.

Visually hidden content

Visually hidden content should remain accessible to assistive technologies, such as screen readers. These can be styled using the .sr-only class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of colour) need to also be conveyed to non-visual users.

<p class="text-danger">
  <span class="sr-only">Danger: </span>
  This action is not reversible

For visually hidden interactive controls, such as traditional “skip” links, .sr-only can be combined with the .sr-only-focusable class. This will ensure that the control becomes visible once focused (for sighted keyboard users).

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

Reduced motion

Bootstrap includes support for the prefers-reduced-motion media feature. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled.

Additional resources