Nous tentons de rendre nos sites Web et notre contenu accessibles à tous.
Accessibilité pour tous
L’accessibilité est la clé de l’accès. Que ce soit en réduisant le nombre de clics ou en présentant le contenu d’une manière adaptée au comportement ou à l’environnement de l’utilisateur, notre grand objectif est d’offrir un contenu accessible aussi rapidement que possible.
Les plus récentes données de Statistique Canada indiquent que 22 % des Canadiens âgés de 15 ans et plus ont au moins un handicap. Les handicaps peuvent limiter :
- la dextérité
- la vue
- l’audition
- la parole
- la mobilité
- la concentration
- la capacité d’apprendre et de retenir de l’information
Pour prendre en compte ce facteur, nous appliquons les Règles pour l’accessibilité des contenus Web (WCAG) 2.1 du W3C et nous tentons de satisfaire les exigences en matière d’accessibilité de niveau AA. À cette fin, nous utilisons divers outils :
- WAVE Web Accessibility Evaluation Tool (dans le site ou à l’aide de l’extension Chrome, en anglais seulement);
- Lighthouse (offert parmi les outils pour développeurs de Chrome, en anglais seulement);
- Tota11y Accessibility Visualization Toolkit (en anglais seulement).
Voir aussi nos principes de rédaction.
Normes d’accessibilité des composantes
Pour permettre l’utilisation d’une grande variété de technologies d’assistance, nous créons nos composantes à l’aide du langage HTML5 afin de mettre profit sa structure sémantique. Nous nous servons des attributs des applications Internet riches et accessibles, mieux connus sous le nom anglais de « Accessible Rich Internet Applications » (ARIA) lorsque nous ne parvenons pas au résultat souhaité avec les éléments du HTML5 seulement. Pour assurer que nos normes sont respectées, nous incluons la mise à l’essai de l’accessibilité à toutes les nouvelles composantes.
Conception de sites Web réactifs
Notre contenu s’adapte automatiquement à l’appareil de l’utilisateur ainsi qu’à la taille et à l’orientation de son écran sans effet négatif sur la convivialité et la performance. Pour ce faire, nous créons une présentation souple basée sur le cadre Bootstrap qui s’intègre de façon transparente à notre système de gestion du contenu. Nous avons conçu une bibliothèque d’éléments standard et pleinement réutilisables à appliquer au contenu.
Notre système de gestion du contenu nous permet de séparer des éléments en rangées et en colonnes afin de permettre à nos concepteurs de contenu et à nos développeurs de collaborer sans interférer dans le travail des autres.
Redimensionnez
ces encadrés
<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">
Redimensionner
</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">
cet encadré
</div>
</div>
</div>
</div>
Courriel
Le code « Email » rend une adresse de courriel cliquable pour permettre un accès rapide avec tous les appareils tout en mettant les adresses à l’abri des robots pourrielleurs.
<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
Le code « Phone number » rend un numéro de téléphone cliquable pour permettre un accès rapide avec les appareils mobiles.
<a href="tel:18005551212" title="Contact's name" class="phone-tel ">1 800 555-1212</a>
Formulaires
Nos formulaires s’adaptent automatiquement en fonction de l’appareil de l’utilisateur. Par exemple, lorsqu’il faudra ajouter un numéro de téléphone :
- avec un ordinateur : l’utilisateur inscrira le numéro dans un champ texte à l’aide du clavier;
- avec un téléphone mobile : le clavier du téléphone affichera automatiquement le pavé numérique, permettant ainsi une entrée rapide et intuitive;
- avec l’aide d’un lecteur d’écran : l’utilisateur entendra un message lui indiquant qu’un numéro de téléphone doit être inscrit dans le formulaire.
Balises
Nous ajoutons des balises aux formulaires et aux éléments d’entrée de données ainsi qu’à tous les éléments pouvant être difficiles à interpréter par les outils d’assistance. Si la fonction de l’élément est claire visuellement, il est possible de choisir d’omettre ces balises. Dans ces cas, des balises cachées seront intégrées pour permettre la lecture par les lecteurs d’écran.
<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>
Texte de remplacement
Pour aider les utilisateurs d’outils d’assistance, nous incluons des descriptions et du texte de remplacement spécifique pour les images importantes dans le contenu.
Pour les pratiques exemplaires pour le texte pour les images, consultez nos principes de rédaction.
<img src="https://design.bankofcanada.ca/wp-content/uploads/2019/04/AndrewGeraghty.jpg" alt="Un Canadien moyen." title="Andrew Geraghty">
<img src="https://design.bankofcanada.ca/wp-content/uploads/2019/04/AdamCunning.jpg" alt="L’homme responsable de la présentation." title="Adam Cunning">
<img src="https://design.bankofcanada.ca/wp-content/uploads/2020/07/Brule_Natalie.jpg" alt="La conceptrice de contenu la plus brillante des trois." title="Natalie Brûlé">
Structure des pages
La structure sémantique et l’organisation du contenu sont conçues pour permettre une balayabilité et une lisibilité optimales.
Le respect de la structure sémantique assure l’accessibilité du contenu à l’aide :
- de la souris
- du clavier
- d’un appareil mobile
- d’outils d’assistance, p. ex., un lecteur d’écran
Navigation
Dans les pages présentant beaucoup de contenu, nous ajoutons des marqueurs d’emplacement comme un fil d’Ariane, une table des matières et des balises pour faciliter la navigation.
<nav aria-label="breadcrumbs" class="breadcrumb">
<a title="Accueil" href="https://www.banqueducanada.ca">Accueil</a>
<a title="Marchés" href="https://www.banqueducanada.ca/marches/" class="post post-page">Marchés</a>
<a title="Avis aux marchés" href="https://www.banqueducanada.ca/marches/avis-relatifs-aux-marches/" aria-current="location">Avis aux marchés</a>
</nav>
Texte
Nos principes de rédaction respectent les pratiques exemplaires de l’industrie en matière de rédaction Web et de structure du contenu. Nous déterminons le style et le ton ainsi que les niveaux de lecture cibles en fonction de nos divers auditoires.