We strive to make our websites and their content accessible to all users.
This content is always evolving. Check on it frequently for the latest on what we are doing to make our websites more accessible.
Accessibility for all
Accessibility at its core is about access. Whether it is decreasing the number of clicks or providing content in a way that responds to the user’s behavior and environment, our main goal is to deliver accessible content as quickly as possible.
The latest Statistics Canada data indicates that 22% of Canadians have a least one disability. Disabilities may limit a person's:
- dexterity;
- eyesight;
- hearing;
- speech;
- mobility;
- concentration; or
- ability to learn and retain information.
Taking this into account, we defer to the WCAG 2.1 guidelines and aim to meet the Level AA accessibility requirements. For this, we use a variety of tools including:
- WAVE Web Accessibility Evaluation Tool site or Chrome extension
- Lighthouse (available in Chrome developer tools)
See also our guiding principles for content.
Component accessibility standards
To support a wide range of assistive technologies, our components are built using HTML5 to utilize its semantic structure. We apply Accessible Rich Internet Applications (ARIA) attributes when the desired results cannot be achieved with HTML5 elements alone. To ensure our standards are met, we build in accessibility testing for each new component.
Responsive design
Our content automatically adjusts to the user’s screen size, orientation and device with no negative effect on usability and performance. We achieve this by implementing a flexible layout from the Bootstrap Framework that seamlessly integrates with our content management system.
Resize
Me!
<div class="row cfct_row_2col">
<div class="col-sm-6 cfct-block">
<div class="cfct-module cfct-widget-module-bochtml boc-row-display">
<div class="cfct-mod-content">
Resize
</div>
</div>
</div>
<div class="col-sm-6 cfct-block">
<div class="cfct-module cfct-widget-module-bochtml boc-row-display">
<div class="cfct-mod-content">
Me!
</div>
</div>
</div>
</div>
Our Email component renders email addresses clickable for quick access on all devices, while hiding the addresses from spambots.
<script>
function getMailLink(user, domain, class_id, content) {
var addr = user + "@" + domain;
if (class_id) {
class_id = ' class="' + class_id + '"';
}
document.write(
'<a href="mailto:' + addr + '"' + class_id + '>' + content + '</a>'
);
}
getMailLink("Loremipsum","Loremipsum.ca","","Lorem ipsum");
</script>
<a href="mailto:Loremipsum@Loremipsum.ca">Lorem ipsum</a>
Phone number
Our Phone number component renders phone numbers clickable for quick access on mobile devices.
<a href="tel:18005551212" title="Contact's name" class="phone-tel ">1-800-555-1212</a>
Forms
We are currently implementing a set of accessible forms. These forms will adapt automatically based on the user’s device. For example, when being asked to enter a phone number, using a:
- Computer: the user will need to type in a plain text field using their keyboard.
- Mobile phone: the phone’s keyboard will automatically use the number keyboard, allowing for quicker more intuitive entry
- Screen reader: the form will audibly notify the user that the field is asking for a phone number.
Labelling
We label our forms and inputs, and any elements that would otherwise be unclear when using assistive technologies. Where the element’s purpose is obvious visually, the label may be omitted as a design choice. In these cases, hidden labels are added for assistive technologies to read.
<div class="bocss-input__group ">
<input type="tel" name="text input with phone keyboard" id="accessible-input" class="bocss-input__text" aria-labelledby="accessible-input-label">
<label id="accessible-input-label" for="accessible-input" class="bocss-label">Try this with your mobile or assistive device</label>
</div>
Alt text
To aid users’ relying on assistive technology, we apply descriptive and specific alt text to images that are important to the content. See guiding principles for best practices.
<img src="https://design.bankofcanada.ca/wp-content/uploads/2019/04/AndrewGeraghty.jpg" alt="Just another polite Canadian." title="Andrew Geraghty">
<img src="https://design.bankofcanada.ca/wp-content/uploads/2019/04/AdamCunning.jpg" alt="The guy who did all the work for this presentation." title="Adam Cunning">
<img src="https://design.bankofcanada.ca/wp-content/uploads/2020/07/Brule_Natalie.jpg" alt="The Content Designer who's smarter than them both." title="Natalie Brûlé">
Page structure
Both semantic structure and content layout are considered for optimal scannability and legibility. Respecting semantic structure ensures our content is accessible whether using a:
- mouse;
- keyboard;
- mobile device; or
- assistive technologies such as a screen reader.
Navigation
On content-heavy pages, location markers such as breadcrumbs, a table of contents or tags are added to help with navigation.
<nav aria-label="breadcrumbs" class="breadcrumb">
<a title="Home" href="https://www.bankofcanada.ca">Home</a>
<a title="Markets" href="https://www.bankofcanada.ca/markets/" class="post post-page">Markets</a>
<a title="Market Notices" href="https://www.bankofcanada.ca/markets/market-notices/" aria-current="location">Market Notices</a>
</nav>
Text
Our guiding principles follow industry best practices for web writing and content structure. Our voice and tone, and targeted reading levels are based on content types for our varied audience.