Nous tentons de rendre nos sites Web et notre contenu accessibles à tous.
Ce sujet est en constante évolution. Consultez souvent cette page pour découvrir comment nous rendons nos sites Web toujours plus accessibles.
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 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.
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
Nous travaillons actuellement à l’introduction de formulaires accessibles. Ces formulaires s’adapteront 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. Voir aussi nos principes de rédaction pour les pratiques exemplaires.
<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.