Accessibilité web
L’accessibilité web désigne un ensemble de normes qui permettent aux personnes handicapées de percevoir et de comprendre le web, d’y naviguer et d’interagir avec lui. Ces normes profitent également aux personnes âgées qui vivent des changements quant à leurs capacités physiques. Au Canada en 2012, 13,7 % de la population (3,8 millions de Canadiens) a déclaré souffrir d’un handicap.
L’accessibilité web permet d’offrir un accès sans discrimination aux utilisateurs, peu importe les technologies utilisées pour accéder à une information. Par exemple, les personnes non voyantes doivent pouvoir naviguer sur un site web sur lequel les logiciels de synthèse vocale peuvent interpréter le contenu informationnel, et les personnes malentendantes doivent pouvoir accéder au contenu d’une vidéo à l’aide de sous-titrage.
Le World Wide Web Consortium (W3C), une organisation à but non lucratif permettant de définir des standards pour les technologies liées aux web, supervise un ensemble de standards, dont l’accessibilité (WCAG 2.0 et UAAG 2.0), qui compte trois niveaux (A, AA et AAA). Le travail d’évaluation et d’optimisation quant à l’accessibilité du site web de Radio‑Canada a commencé en mai 2014. Le standard que nous visons est l’AA.
Nous avons constitué un groupe-conseil composé de membres de chacune des professions concernées (intégrateurs, programmeurs, designers et contributeurs éditoriaux). Celui-ci analyse les meilleures pratiques suggérées, les techniques utilisées du WCAG 2.0 et les tests associés de l’UAAG 2.0. Le groupe-conseil a rédigé un référentiel de base pour tout projet. L’optimisation de nos sites quant à l’accessibilité est donc un processus évolutif.
Afin d’améliorer l’accès à nos contenus, certaines normes d’accessibilité sont en vigueur, telles que :
Applications mobiles
Info (iOS)
- Amélioration du mode de voix hors champ « VoiceOver » pour les conducteurs de nouvelles
- Ajout de descriptions vocales pour les boutons de l’application
- Contrôles du lecteur vidéo tous fonctionnels
- Ajout des descriptions visuelles des photos et des vidéos autant dans les conducteurs de nouvelles que dans les articles
ICI Musique (iOS)
- Identification adéquate des éléments d’interface
- Amélioration de la navigation
- Aide pour les contenus et les boutons d’interaction
ICI Radio‑Canada Première (Android)
Mise en valeur des émissions diffusées en direct sur ICI Radio‑Canada Première. Nous avons également apporté d’autres modifications, notamment à l’accessibilité du contenu lors de la navigation.
- Démarrage de l’écoute du direct
- Contrôle de l’audio (marche, arrêt, suivant, précédent, etc.)
- Navigation dans les sections de l’application
- Amélioration de l’exploration du contenu
Sites web
Radio‑Canada.ca
Plusieurs améliorations dans les fils en continu :
- Navigation entre les éléments
- Bouton « afficher plus »
- Nouveaux contenus offerts
Le nouveau Radio‑Canada.ca
Grâce à notre nouveau site, nous testons des fonctionnalités pour évaluer la suite de leur développement. Les visites sur cette nouvelle page d’accueil et tous vos commentaires permettront d’optimiser l’expérience utilisateur sur le site de Radio‑Canada.
- Navigation principale accessible sans souris et lien d’évitement à la fin du menu qui retourne au début de celui-ci
- Possibilité de fermer les sous-menus avec le raccourci-clavier « Échapper »
- Amélioration de la navigation sans souris, en n’ayant qu’un seul lien par nouvelle
- Révision des couleurs de marque pour avoir un meilleur contraste
- Optimisation du formulaire de commentaire pour la version bêta pour une utilisation avec les lecteurs d’écran et la navigation sans souris
- Augmentation de l’espace cliquable des liens
- Ajout d’une icône dans les liens textuels sortants permettant d’illustrer le fait qu’il s’agit d’un lien externe
- Navigation par tabulation fonctionnelle et uniforme à travers le site; les éléments sélectionnés ont un aspect différent des autres
- Nom de l’article et mention « écouter la vidéo » affichés dans le titre lorsqu’on clique sur une carte vidéo; en cliquant sur le lien, on peut lire l’article, et la vidéo se lance automatiquement
- Suppression des doublons d’identification pour les publicités
- Possibilité de navigation par tabulation dans les portails thématiques
Console audio-vidéo
- Accentuation de l’état survolé (hover) et de l’état cliqué (focus) sur tous les boutons
- Navigation par clavier fonctionnelle pour le positionnement, le volume et le changement de résolution; le lecteur indique la position courante sur la barre de recherche, et la valeur du volume et de la résolution choisis
- Mise à niveau globale du design de la console pour une meilleure accessibilité
Radio‑Canada.ca
- Plus de 55 applications widgets en cours d’analyse en accessibilité afin de faire des recommandations d’utilisation
- Lorsqu’un formulaire est soumis et qu’il y a des champs non remplis, l’ancrage de la page se déplace vers le premier champ non rempli
Info (site)
- Correction de la mention entre parenthèses (écouter la vidéo)
- Ajout d’une indication lorsqu’une page s’ouvre dans un nouvel onglet
Info (application iOS)
Amélioration de la lecture du contenu d’une nouvelle à l’aide de la voix hors champ « VoiceOver »
ICI Radio‑Canada Première (site web)
- Nous sommes en train de renouveler notre technologie émission par émission dans le site d’ICI Radio-Canada Première. Ceci occasionne des changements dans les pages contenant les balados; celles-ci ne seront plus entièrement à jour jusqu’à ce que la nouvelle technologie soit complètement implantée.
- Entre-temps, voici les indications pour accéder à un balado à partir d’une émission :
- Point de départ : https://ici.radio-canada.ca/premiere/emissions#Toutes
- Faire simultanément « Inser+F7 »
- Rechercher le nom de l’émission
- Appuyer sur « Entée »
- Faire simultanément « Inser+F7 »
- Rechercher le lien « Écouter et accéder au téléchargement en MP3 » (nouvelle fiche émission) ou « Écouter le MP3 » (ancienne fiche émission)
- Appuyer sur « Tab »
- Choisir « Se déplacer au lien »
- Ouvrir le menu contextuel (MAJ+F10 sur clavier PC) et choisir :
Avec Internet Explorer : « Enregistrer la cible sous »;
Avec Chrome : « Enregistrer le lien sous »;
Avec Firefox : « Enregistrer la cible du lien sous ».
ICI Radio‑Canada Première (Android)
Amélioration de l’accessibilité de l’écoute en direct
Tou.tv (site web)
- Vérification et correction de la logique de tabulation
- Ajout des attributs Title et Aria-label sur tous les boutons « Écouter la vidéo » dans les émissions
- Changement des balises de liens afin d’améliorer la navigation par tabulation et la recherche de liens dans les pages
- Ajout de la langue du site dans le HTML
- Ajout d’une étiquette et d’un Aria-live dans « Recherche »
- Correction de la hiérarchie des titres (H1)
- Possibilité de se rendre à « Ma Liste » au moyen de la touche de tabulation
- Bouton « Connexion » lu par le lecteur d’écran
- Vignettes d’émissions améliorées (vignettes traitées comme un bouton, dates, hiérarchie des titres, titres explicites et traités comme des liens, répétition de termes éliminée)
- Libellé corrigé pour « Catégorie de classement des films au Québec »
- Harmonisation de l’état de Focus et du survol de souris
- Présentation des renseignements sur les émissions sous forme de listes
- Ajout d’étiquettes sur la publicité dans la page émisode
- Vérification et correction du choix d’un lien versus un bouton
ICI Tou.tv (iOS et Android)
- Amélioration de la navigation avec l’application iOS, des différents conducteurs ainsi que des sections de l’application, dans lesquelles on peut maintenant naviguer à l’aide des services d’accessibilité
- Lecteur vidéo de l’application désormais accessible (iOS seulement)
- Ajout de l’état de Focus sur le premier élément après le démarrage de l’application
- Ajout des descriptions pour les boutons « Favoris », « Info », « Menu », « Navigation arrière », « Partager », « Réglages » et « Fermer »
- Accessibilité à la page d’authentification, à la page de réglages et à la liste des vidéos
Console audio-vidéo
- Mise en ligne d’une nouvelle version de la console audio-vidéo (l’interface sur ordinateur passera de Flash à HTML5, ce qui permettra à terme de se libérer complètement de Flash)
- Navigation par clavier fonctionnelle pour les boutons « Info » et « Partage »
- Affichage des contrôles du bas de la console lors d’un changement de l’état de Focus
- Ajout de la description des boutons
- Lecture du titre de la vidéo désormais possible
- Démarrage de la vidéo au moyen de la touche « Entrée »
- Suspension de la vidéo quand les fenêtres Partage ou Info sont ouvertes
- Affichage de la description des boutons « Écouter la vidéo » et « Pause » au survol de la souris
- Mettre en place le bouton d’arrêt du rafraîchissement de la page d’accueil accessible par la navigation au clavier
- Afficher un message lorsque JavaScript est désactivé
- Ajouter un message d’avertissement pour les jeux en Flash
- Implanter graduellement le Fil d’Ariane
- Spécifier la langue et la direction du texte par défaut
- Permettre le zoom du site sur mobile (en cours)
- Offrir sur les carrousels un contrôle de pause et de reprise
- Nouveau document pour les articles, permettant de :
- Redimensionner la page
- Fournir un titre précis sur chaque page
- Signaler l’ouverture des nouvelles fenêtres
- Baliser les listes à puces en utilisant <ul> et <li>
- Baliser des listes numérotées en utilisant <ol> et <li>
- Baliser les blocs de citation en utilisant <blockquote>
- Garantir la lisibilité des contenus même lorsque la taille du texte est doublée
- Utiliser uniquement des tailles relatives pour les polices de caractères
- Garantir la lisibilité des contenus lorsque les images ne sont pas affichées
- Le contenu vidéo préalablement diffusé à la télévision et accessible par la suite sur le web comprend des sous-titres
- L’élément courant des menus se distingue des autres éléments des menus
- Les polices de caractères utilisées sont des Google Fonts ou des polices web sur l’ensemble du site
- L’interlignage des textes respecte les standards d’accessibilité AA
- Les textes sont généralement alignés à gauche; les courts textes sont parfois centrés
- Les contrastes respectent les standards d’accessibilité AA sur la majorité des pages
- Les liens ont tous des intitulés clairs
- Une police de caractères a été spécialement créée pour l’usage des icônes
- L’usage de textes sur les visuels photo n’est plus permis sans que le texte de remplacement (alt. text) créé soit clairement écrit au préalable
- Un titre précède toute illustration de données
- Un titre précède tout formulaire
- Les intitulés des formulaires sont clairs et situés à proximité du champ auquel ils renvoient
- Les champs des formulaires proposent la valeur requise
Afin de mieux naviguer sur Radio‑Canada.ca, voici quelques informations :
- Banque d’icônes de Radio‑Canada https://ici.radio-canada.ca/tele/signaletique (nouvelle fenêtre)
- La page où sont consignées nos normes d’accessibilité : reperes.ici.ca (nouvelle fenêtre)
- Nous nous efforçons de fournir les meilleurs services en accessibilité. Il est, par contre, de la responsabilité des utilisateurs de bien comprendre le fonctionnement de leurs appareils informatiques, de leurs navigateurs et de leurs logiciels. Les compagnies qui offrent ces produits et services fournissent également les explications quant à leur utilisation.
Pour tout commentaire ou suggestion, ou si vous souhaitez faire partie de notre groupe témoin pour tester l’accessibilité de nos produits, merci de nous écrire à accessibilite@Radio-Canada.ca.