Accessibilité web

Applications mobiles

Sports et Info (iOS)

• Les applications offrent une nouvelle expérience utilisateur (incluant la navigation par en-têtes)
• Un nouveau module électoral avec résultats en direct fait maintenant partie des applications
• Une nouvelle zone audio-vidéo a été ajoutée
• Le lecteur vidéo affiche les sous-titres (s’il y a lieu)

Sports et Info (Android)

• Les applications offrent une nouvelle expérience utilisateur
• Un nouveau module électoral avec résultats en direct fait maintenant partie des applications
• Une nouvelle zone audio-vidéo a été ajoutée

ICI Première (iOS)

• L’accès au menu principal (le menu « burger ») et à la flèche retour via un lecteur d’écran sont offerts
• Le lecteur donne le bon terme pour le bouton « Jouer »
• Des titres ont été ajoutés sur l’ensemble des boutons
• Le lecteur ne lit plus la barre de défilement après avoir lu les onglets
• Un message indique que le contrôleur audio peut être mis en mode plein écran
• L’état de Focus demeure sur le bouton « Jouer » de la une lorsque ce dernier est activé
• La sélection d’un élément dans la fenêtre « Options » est possible

ICI Tou.tv (iOS)

• L’application offre une nouvelle expérience utilisateur conçue pour être accessible
  • Contraste des couleurs en fonction des standards d’accessibilité AA
  • Meilleure navigation avec VoiceOver
  • Accès rapide au menu à partir de chaque section de l’application
  • Navigation des contenus simplifiée par en-têtes et conteneurs
• Le lecteur d’écran peut lire les commandes du lecteur vidéo


ICI Tou.tv (Android)

• L’application offre une nouvelle expérience utilisateur conçue pour être accessible
  • Contraste des couleurs en fonction des standards d’accessibilité AA
  • Meilleure navigation avec TalkBack
  • Accès rapide au menu à partir de chaque section de l’application
• Le lecteur d’écran peut lire les commandes du lecteur vidéo

Sites web

Radio-Canada.ca

• L’information fournie à l’utilisateur lorsqu’il ouvre ou ferme le menu principal en naviguant à l’aide du lecteur d’écran a été améliorée
• Les liens externes menant à de l’information connexe lors de la navigation à l’aide du lecteur d’écran ont été ajustés
• L’état de Focus a été amélioré et uniformisé dans l’ensemble du site pour qu’il soit visible peu importe l’arrière-plan, aussi bien sur fond clair que sur fond foncé
• L’état de Focus a été ajouté sur les écrans d’autopromotion
• L’attribut « lang » dans les liens externes est pris en charge
• La recherche des articles (nouvelles) de type information (termes recherchés dans les titres ou amorces) est fonctionnelle
• La recherche des émissions d’ICI Télé, d’ICI Première et d’ICI Musique (par nom d’émission ou par nom d’animateur) est fonctionnelle
• Le tri des résultats d’une recherche par ordre du plus récent au plus ancien, du plus ancien au plus récent ou par pertinence est possible

Régions

• Les cartes des sites régionaux qui utilisent des liens vers les réseaux sociaux ont été améliorées

Info

• Les liens « Afficher plus » ont été remplacés par de la pagination dans la page « Dossiers »
• Le contenu des balises dans les cartes des pages de sous-thème n’inclut maintenant que le titre de l’article
• Fil en continu : La date du jour figure en haut de la page, et les heures sont ajoutées aux titres des articles et masquées pour les lecteurs d’écran
• Les informations nécessaires et existantes ont été ajoutées au texte de remplacement du titre dans les cartes vidéo
• Un texte de remplacement pour les lecteurs d’écran a été ajouté sous les widgets et les images complexes
• Le module de résultats électoraux a été amélioré
  • Le tableau des résultats électoraux a été mis à jour pour respecter la règle des 48 pixels pour un bouton sur mobile et des 36 pixels sur ordinateur
  • Le visuel de l’état de Focus est maintenant cohérent avec celui du site Radio-Canada.ca
  • Le contraste entre les couleurs des logos des différents partis est suffisant

Sports

• Les titres des articles sont maintenant de niveau H3 sur la une de « Podium »
• Les logos des partenaires sont mis en contexte
• L’état de Focus sur les images lors de la navigation par tabulation a été ajouté
• Les dates sont maintenant de niveau H3 dans la section « Horaire de diffusion »

ICI Première

• Le contraste de l’icône proposant l’ouverture d’une nouvelle fenêtre a été amélioré
• L’élément actif a été identifié pour les lecteurs d’écran
• La lecture de la durée des contenus est en minutes (au lieu d’être en heures)
• Les cartes de contenus ont été améliorées sur tout le site
• Un texte de remplacement pour les réseaux sociaux dans le bloc « Suivez-nous » des pages d’émissions a été ajouté
• L’état de Focus pour les boutons « Haut de page » et « Afficher plus » a été corrigé
• Le nombre de résultats trouvés lors d’une recherche dans la page « Liste des émissions » est annoncé
• Les liens qui s’ouvrent dans une nouvelle fenêtre dans le pied de page sont signalés

ICI Télé

• Les cartes de contenus ont été améliorées sur tout le site
• Les balises HTML dans les titres des liens sont prises en charge
• Le titre du bouton « Regarder » n’est plus lu deux fois
• Les images décoratives de la page « Liste des émissions » ont été retirées pour les lecteurs d’écran
• Le nombre de résultats trouvés lors d’une recherche dans la page « Liste des émissions » est annoncé
• Un titre de niveau H1 a été ajouté dans la page « Liste des émissions »

Tou.tv

• Le site offre une nouvelle expérience utilisateur conçue pour être accessible
  • Navigation par tabulation rapide et simple
  • Compatibilité avec les lecteurs d’écran
  • Contraste des couleurs en fonction des standards d’accessibilité AA
• La vidéodescription a été ajoutée au lecteur vidéo (s’il y a lieu)

ICI Musique

• Les liens en images n’ont pas de texte de remplacement, car ce sont des images décoratives dans le pied de page
• Le lien d’évitement en haut de page pour aller au contenu principal a été mis en français

Console audio-vidéo

• La position des sous-titres superposés à la vidéo est maintenant configurable en fonction du contenu proposé

RAD

• Un menu d’options d’accessibilité a été ajouté
  • Intégration du mode 200 %
  • Intégration du style haut contraste inversé
  • Activation forcée par défaut des sous-titres des vidéos
  • Ajout d’un point vert lorsqu’une option du menu est activée
• Le menu se ferme au moyen de la barre d'espacement
• La navigation sur les curseurs se fait par les flèches du clavier
• La navigation sur le menu se fait par les flèches du clavier
• La visibilité de l’état de Focus est minimisée sur les éléments, sauf lors d’une navigation par tabulation
• Les couleurs des dossiers respectent le bon rapport de contraste
• La couleur de l’état de Focus a été modifiée pour en améliorer la visibilité, peu importe l’arrière-plan (utilisation d’un contour blanc et d’un contour noir)
• Le domaine Radio-Canada.ca est exclu du script des liens externes
• Le site est accessible par Internet Explorer 11
• La balise « og:image:alt » a été ajoutée
• Les balises schema org suivantes ont été intégrées :
  • Organisation
  • NewsArticle
  • VideoObject
  • BreadcrumbList

Applications mobiles

Sports et Info (iOS)

• Les applications acceptent maintenant la taille de caractères choisie par l’utilisateur dans les options d’accessibilité d’iOS
• La disposition des cartes s’adapte aux différentes tailles de caractères
• Le fonctionnement du mode de voix hors champ « VoiceOver » a été revu, incluant l’ordre des éléments à lire, l’ajout d’astuces pour son activation et le groupement de vignettes de nouvelles

Sports et Info (Android)

• Les sous-menus du menu principal sont maintenant clairement définis pour l’utilisateur
• L’utilisateur est en mesure de savoir sur quel onglet il se trouve
• La lecture d’une carte commence par le surtitre et le titre, et se poursuit avec les détails liés à l’image
• L’ordre de lecture des éléments a été revu pour faciliter la navigation
• La taille des polices s’ajuste dans les articles et dans les listes de nouvelles
• La section « Résultats » comprend des étiquettes formatées qui fournissent le nom de l’équipe ainsi que la ville lors d’une lecture vocale

Sites web

Radio-Canada.ca

• Il y a une synthèse des éléments lus par le lecteur d’écran sur les cartes de nouvelles
• L’utilisateur est informé de l’ouverture et de la fermeture des éléments de la navigation principale
• Les liens d’évitement prennent en considération le menu et le pied de page
• Le lecteur d’écran lit la barre d’outils du haut de la page (« En direct », « Connexion »)
• Les types de contenu et les progressions du tiroir « En direct » sont clairement énoncés
• Les alertes sont annoncées une fois la lecture terminée par le lecteur d’écran
• Le pied de page ne fait plus partie de la navigation principale afin d’améliorer la lecture du menu
• Les changements de pages vers la nouvelle ou l’ancienne version du site sont clairement énoncés
• Les contrôles du volume du lecteur audio sont accessibles – l’utilisateur peut maintenant régler le volume et mettre le lecteur en sourdine à l’aide du clavier
• Les liens externes sont maintenant énoncés

Régions - Bloc Services

• Un module d’extension (plug-in) a été développé afin de permettre à l’utilisateur de basculer aisément d’un onglet à l’autre – il informe l’utilisateur sur quel onglet il se trouve et l’avise au moment du changement
• Du texte caché a été ajouté
• Le focus est maintenant placé sur les bons éléments de contenu

Info

• Fil en continu : La date actuelle est présente en haut de la page (avant le premier article)
• Fil en continu : Les heures sont masquées pour le lecteur d’écran et elles sont ajoutées aux titres des articles
• Fil en continu : Un bouton pour afficher plus de contenu place maintenant le focus sur le titre du premier article de la nouvelle liste d’articles
• Pagination (dossiers, archives, thèmes, etc.) : Le numéro est maintenant placé dans le titre de la page

Sports

• L’intitulé des contenus publicitaires a été amélioré dans la section « Podium »

ICI Première

• Tous les titres des textes sont en H3
• Le lien permettant d’accéder à un article de la section « À la une » est simplifié car le texte d’introduction n’est pas lu par le lecteur d’écran
• Le lien pour changer de région a été modifié
• Dans la section « Questions et commentaires » dans le bas de l’article, l’ouverture d’un nouvelle fenêtre est annoncée
• Un ratio a été ajouté sur le zoom des zones de textes pour Firefox et les anciens fureteurs
• Lecteur audio
  • Le bouton de contrôle du volume audio est plus accessible
  • La tabulation sur les boutons « Précédent » et « Suivant » n’est pas permise lorsqu’ils sont inactifs
  • Le lecteur audio est traité comme une fenêtre modale lors de l’écoute en direct afin que l’utilisateur reste dans cette zone

ICI Télé

• Un ratio a été ajouté sur le zoom des zones de textes pour Firefox et les anciens fureteurs

ICI Tou.tv

• La nouvelle version bêta du site web est actuellement en chantier pour accroître son accessibilité d’ici les prochaines semaines
• L’amélioration de l’accessibilité des applications mobiles est en cours
• La vidéodescription est disponible au sein de la console vidéo sur la version bêta. À l’aide d’un bouton dans la barre de contrôle, l’utilisateur peut activer ou non cette fonction. Par défaut, la vidéodescription est désactivée
• La vidéodescription est active et synchronisée avec le contenu vidéo dès le début de la lecture

Console audio-vidéo

• Des raccourcis claviers ont été ajoutés sur la console audio-vidéo. Le raccourci CTRL + Y permet de voir la liste des raccourcis disponibles
• La section « Information » est maintenant accessible en naviguant avec le clavier
• Les intitulés des boutons ont été renommés plus clairement – par exemple, le bouton « Extraire » a été renommé « Ouvrir » dans une nouvelle fenêtre
• En mode plein écran, la navigation se fait au sein de la console audio-vidéo
• Le lecteur d’écran indique à l’utilisateur s’il entre ou s’il quitte le mode plein écran
• Lorsque l’utilisateur sélectionne un des boutons de partage, le lecteur d’écran l’avertit qu’une nouvelle fenêtre s’ouvrira
• Lorsque l’utilisateur clique sur un des boutons de partage et qu’il quitte la liste sans faire de choix, le focus est ensuite placé sur l’icône de partage et non pas sur la croix pour fermer
• Une fois le partage terminé, le focus est placé sur le bouton « Écouter » pour que la reprise de la lecture se fasse aisément
• Lorsque la vidéo joue, seul le son de la vidéo peut être entendu
• L’utilisateur est informé lorsque les éléments visibles ne sont pas actifs – par exemple, lorsque le bouton « Résolution » de la vidéo affiche la résolution courante, mais qu’il est inactif parce que la résolution est fixe
• Un plus grand nombre d’éléments sont accessibles par la navigation, par tabulation et par flèches

Outil de gestion de contenu

• Les édimestres peuvent mettre un style dans un encadré ainsi que d’utiliser les balises H5 et H6 en plus des autres balises de titres et sous-titres dans notre outil Scoop ! (v4)
• Les images informatives complexes peuvent être enrichies dans notre outil Scoop ! (v4) grâce à l’ajout d’information en format textuel compatible avec les lecteurs d’écrans
• Il est aussi possible de renseigner les mots dans des langues étrangères en utilisant l’attribut « lang » dans les balises <span>
• Avant la publication de nouvelles fonctionnalités sur le site web, l’outil Pa11y détectera dans la majorité des cas, les codes de programmation qui sont non conformes à nos normes d’accessibilité

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