Accessibility
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.
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.
Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.
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 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.
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.
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.
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.
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.
Do: Use colour to enhance comprehension
Don't: Use colour alone to convey information
There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately.
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).
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.
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.
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.
Tools
- Tenon.io Accessibility Checker
- Colour Contrast Analyser (CCA)
- “HTML Codesniffer” bookmarklet for identifying accessibility issues
- WAVE Chrome plugin - free accessibility checker
- WebAIM Colour Contrast Checker
- ChromeVox screen reader plugin for Chrome
- JAWS screen reader for Windows
- NVDA screen reader for Windows - Free
- Lighthouse - Chrome plugin for web testing
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
</p>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.