Page Comparison

1.Recommandations (iOS et Android) 

Le lecteur trouvera dans cette section un ensemble de recommandations tirées des recommandations générales émises par Google pour Android et par Apple pour iOS.

1.1 Navigation 

Recommandations visant à améliorer l’accessibilité de différents patrons de navigation dans les applications mobiles.

Il est important de comprendre que les services d’accessibilité d’iOS et d’Android offriront la possibilité aux utilisateurs qui les activeront d’effectuer une navigation séquentielle dans les pages de l’application, contrairement à une navigation sélective, qui est utilisée par la plupart des internautes.

1.1.1 Menu latéral (burger) 

Recommandations visant à améliorer l’accessibilité du menu latéral (voir captures d’écran 1 et 2).

LIBELLÉS DES ÉLÉMENTS
Le bouton qui sert à ouvrir et à fermer le menu latéral doit être nommé comme suit :

1. « Ouvrir le menu » lorsque le menu est fermé

2. « Fermer le menu » lorsque le menu est ouvert

VISIBILITÉ DES ÉLÉMENTS

• Le bouton qui sert à fermer le menu latéral doit être visible lorsque le menu latéral est ouvert.

CONTRÔLE DU FOCUS

• Le focus doit être mis sur le premier élément du menu à l’ouverture de ce dernier.

• Lors de la sélection d’un élément du menu, le focus doit être mis sur l’élément principal de la section choisie, par exemple le premier élément du sous-menu.

NAVIGATION

• Le bouton de fermeture du menu latéral doit être sélectionné lorsque l’utilisateur navigue au-delà du dernier élément du menu.

• Sur Android, l’utilisateur doit être ramené au premier élément du menu lorsqu’il navigue au-delà du dernier élément du menu.

• Sur iOS, la navigation peut s’arrêter sur le dernier élément du menu.

ANNONCES

• L’annonce « Menu ouvert » doit être faite lors de l’animation d’ouverture du menu latéral.

• L’annonce « Menu fermé » doit être faite lors de l’animation de fermeture du menu latéral.

• L’annonce « Fin du menu » doit être faite après la lecture de l’intitulé du dernier élément du menu.

CAPTURES D'ÉCRAN

Capture d’écran 1 : Le bouton d’ouverture du menu latéral (burger)

Capture d’écran 2 : Le menu latéral (burger) ouvert

1.1.2 Barre de navigation 

Recommandations pour améliorer l’accessibilité des barres de navigation dans le haut de l’écran (voir capture d’écran 1).

LIBELLÉS DES ÉLÉMENTS

• Un champ de texte qui indique le titre de la page courante doit être présent dans la barre de navigation si ce dernier n’est pas visible à l’écran, par exemple lorsque l’utilisateur fait défiler le contenu de la page vers le bas et que le titre est situé tout en haut de l’écran.

• Le bouton « Retour » (Back) doit être nommé « Retour à l’écran {parent} », ou {parent} représente le titre de la page parent.

VISIBILITÉ DES ÉLÉMENTS

Rien à mentionner

CONTRÔLE DU FOCUS

• En fonction du contenu de la page vers laquelle l’utilisateur a navigué, le focus doit être mis :

1. sur le premier élément de la page si cette dernière est une page qui contient une liste de plusieurs éléments, par exemple une page qui affiche un conducteur;

2. sur le titre de la page si cette dernière est une page du niveau de détails d’un élément, par exemple une nouvelle;

3. sur le bouton permettant d’exécuter l’action principale, par exemple celui pour lancer l’écoute, si cette dernière est une page du niveau de détails d’un élément, par exemple une liste d’écoute ou une émission.

• Si la barre de navigation contient des boutons ou autres contrôles (p. ex. bouton de recherche), l’utilisateur doit être en mesure de sélectionner ces derniers par ce qui est mis en évidence lorsqu’il explore le contenu de la page.

• Les boutons dans la barre de navigation doivent être les derniers à être mis en évidence lorsque l’utilisateur explore le contenu de la page.

• Le bouton « Retour » (Back) doit être le dernier élément à être mis en évidence lorsque l’utilisateur explore le contenu de la page.

NAVIGATION

• Sans objet

ANNONCES

• Le titre de la page vers laquelle l’utilisateur navigue en faisant un retour (back) doit être annoncé.

Voici quelques critères que doit respecter une barre de navigation qui se répète dans plusieurs pages de la même application (ce qui est le cas la plupart du temps) :

1. Les mécanismes de navigation qui sont répétés dans plusieurs pages doivent se produire dans le même ordre relatif chaque fois qu’ils sont répétés, à moins qu’un changement soit initié par l’utilisateur. (WCAG AA 3.2.3 en anglais)

CAPTURES D'ÉCRAN

Capture d’écran 1 : La barre de navigation

RESSOURCES

• Normes WCAG 3.2.3 - Consistent Navigation

1.1.3 Barre de tabulation

Des recommandations pour améliorer l’accessibilité de la navigation parmi les sous-sections à l’aide d’une barre de tabulation qui peut se trouver en bas ou en haut de l’écran (voir capture d’écran 1).

LIBELLÉS DES ÉLÉMENTS

• Le contrôle servant à identifier chacun des onglets de la barre de tabulation doit avoir un libellé qui décrit le contenu de la sous-section correspondante.

• Le libellé d’un onglet sélectionné  (c’est-à-dire correspondant à la sous-section présentement chargée dans la page) doit contenir une mention qui précise que l’onglet en question est celui qui est actif. Exemple : « À la une (sélectionné) » ou « (sélectionné) À la une »

VISIBILITÉ DES ÉLÉMENTS

• Un indicateur visuel doit être présent pour distinguer les onglets non actifs de celui qui est présentement sélectionné.

CONTRÔLE DU FOCUS

• Le focus doit être fait sur le premier onglet lorsque la page qui contient la barre de tabulation est chargée ou lorsque le contenu de la page est rechargé.

• Lors de la sélection d’un onglet de la barre de tabulation, le focus doit être fait sur le premier élément de la sous-section correspondante.

NAVIGATION

• Sur Android, l’utilisateur doit être ramené au premier onglet lorsque l’utilisateur navigue au-delà du dernier onglet.

• Sur iOS, la navigation peut s’arrêter sur le dernier onglet.

ANNONCES

• L’annonce « Fin du sous-menu » doit être faite après la lecture de l’intitulé du dernier onglet de la barre de tabulation.

CAPTURES D'ÉCRAN

Capture d’écran 1: La barre de tabulation (en bas)

1.1.4 Changement de page

Recommandations pour améliorer l’accessibilité de la navigation lors d’un changement de page.

LIBELLÉS DES ÉLÉMENTS

• Si un indicateur de chargement est visible durant le chargement du contenu de la page, celui-ci doit être intitulé « En chargement ».

VISIBILITÉ DES ÉLÉMENTS

• Si le contenu de la page prend du temps à se charger, un indicateur de chargement doit être visible durant le chargement, et caché quand le chargement est terminé.

CONTRÔLE DU FOCUS

• Si un indicateur de chargement est visible durant le chargement du contenu de la page, le focus doit être mis sur ce dernier afin qu’il soit énoncé par son libellé. Une fois le chargement terminé, le focus doit être changé selon la directive sur le contrôle du focus faite à la section Barre de navigation de ces recommandations.

NAVIGATION

• Non applicable

ANNONCES

• Le titre de la page vers laquelle l’utilisateur navigue en faisant un retour (back) doit être annoncé.

1.1.5 Rafraîchissement de la page

Des recommandations pour améliorer l’accessibilité d’une page dont le contenu peut être complètement ou partiellement rafraîchi.

LIBELLÉS DES ÉLÉMENTS

• Non applicable

VISIBILITÉ DES ÉLÉMENTS

• Si le contenu de la page prend du temps à se rafraîchir, un indicateur de chargement doit être visible durant le rafraîchissement et caché quand ce dernier est terminé.

CONTRÔLE DU FOCUS

• Un rafraîchissement automatique ne doit jamais provoquer un changement de focus.

NAVIGATION

• Non applicable

ANNONCES

• Non applicable

1.2 Focus

Des recommandations pour une bonne gestion du focus sur les contrôles à l’écran par divers moyens supportés par les appareils (manette, stylo mains libres, autres types de contrôles , etc.)

Voici quelques particularités que doivent absolument posséder les éléments visuels apparaissant dans les pages de l’application mobile :

1. Ils ne doivent jamais cacher ou altérer le rendu visuel du focus ajouté par les services d’accessibilité.  (WCAG AA 2.4.7 en anglais)

2. Ils doivent avoir un libellé descriptif de :

   • fonction (ex. : bouton)

   • contenu (ex. : description de l’image)

   • état (ex. : activé, désactivé, etc.)

3. L’utilisateur doit être en mesure d’interagir avec ces éléments, c’est-à-dire qu’il ne faut pas qu’un élément puisse recevoir le focus, mais qu’il ne soit pas possible de le sélectionner, par exemple, lorsqu’un bouton se trouve derrière un autre élément visuel, ou lorsqu’un élément a une opacité de 0.

REMARQUES

Idéalement, les éléments visuels interactifs mais désactivés ne devraient pas pour recevoir le focus.

RESSOURCES

• Normes WCAG 2.4.7 Focus Visible (en anglais)

• Alternative drive controls (en anglais)

1.2.1 Premier focus

Des recommandations pour choisir le contrôle qui doit recevoir le focus lors du chargement de la page.

La personne chargée de la conception de l’expérience utilisateur a la responsabilité d’identifier dans les spécifications le premier élément à recevoir le focus chaque fois que le contenu d’une page de l’application change.

Le focus doit être automatiquement mis sur l’élément décrit plus haut à la suite des actions suivantes faites par l’utilisateur :

• Navigation vers une nouvelle page de l’application

• Retour vers la page précédente de l’application

• Rafraîchissement complet de la page

• Rafraîchissement partiel de la page si la zone rafraîchie contient l’élément en question

• Mise en avant-plan de l’application

1.2.2 Ordre du changement de focus

Des recommandations pour choisir dans quel ordre les contrôles devraient recevoir ou perdre le focus.

Voici quelques particularités que doivent absolument présenter les éléments apparaissant dans les pages de l’application mobile :

1. Si une page peut être parcourue séquentiellement et que les séquences de navigation changent la signification ou l’opération, les composants focalisables doivent avoir une focalisation dans un ordre qui préserve la signification et l’opérabilité.  (WCAG AA 2.4.3 en anglais)

2. Sur Android, la séquence de navigation parmi tous les éléments d’une page doit reprendre au premier élément visible à l’écran après avoir atteint le dernier élément visible de la page. Sur iOS, la séquence de navigation se termine au dernier élément visible de la page.

Le lecteur peut se référer aux sections suivantes pour plus d’information sur la gestion de l’ordre de changement du focus pour les composantes ou dans les situations suivantes :

• Menu latéral (voir 1.1.1)

• Barre de navigation navigation (voir 1.1.2)

• Barre de tabulation (voir 1.1.3)

• Changement de page (voir 1.1.4)

• Rafraîchissement de la page (voir 1.1.5)

RESSOURCES

• Normes WCAG 3.2.3 - Focus order

• Alternative drive controls (en anglais)

1.2.3 Focus inutile

Des recommandations pour décider quels contrôles ne devraient jamais pouvoir recevoir le focus.

Afin d’accélérer la sélection d’un élément dans une page à l’aide du focus, il peut être judicieux d’exclure certains objets visuels de la séquence de navigation, c’est-à-dire d’empêcher les services d’accessibilité de la plateforme iOS ou Android de mettre le focus sur ces objets visuels.

Le choix de ces éléments non focusables appartient à la personne chargée de la conception de l’expérience utilisateur. Toutefois, voici quelques recommandations.

Liste d’éléments (ex. conducteur)

Pour accélérer la navigation parmi les éléments d’une liste, il est recommandé pour chaque élément :

• d’éviter de mettre le focus sur deux ou plusieurs items d’un même élément qui véhiculent la même information et permettent à l’utilisateur d’effectuer la même action.

• de regrouper plusieurs items d’un même élément en forçant les services d’accessibilité de la plateforme à mettre le focus sur le parent hiérarchique des éléments regroupés. Il sera important ensuite de donner au parent un libellé descriptif de tous les items ainsi regroupés. Voir Capture d’écran 1 dans la section Captures d’écran.

ANDROÏD

Exemple de manière d'éviter le focus inutile: Natural Grouping (anglais)

CAPTURES D'ÉCRAN

Capture d’écran 1 1 : Focus sur le parent des items représentant un élément d’une liste

1.3 Collections d'éléments

Recommandations pour rendre accessibles différents types de collections d’éléments (liste, grille, etc.).

LIBELLÉS DES ÉLÉMENTS

• Les libellés doivent être déterminés de manière à véhiculer l’information la plus pertinente pour l’utilisateur le plus rapidement possible. Par exemple, on éviterait d’avoir une liste d’éléments libellés comme suit : “Écouter l’épisode 01″, “Écouter l’épisode 02″, … mais on aurait plutôt “Épisode 01 – Écouter la vidéo”

• Si la collection d’éléments est groupée, les en-têtes des groupes d’éléments doivent être étiquetés.

• Si une action est rattachée à un en-tête de groupe, le libellé de ce dernier devrait l’indiquer. Par exemple: “Films – Afficher la liste complète”.

• Si une liste doit être défilée horizontalement, cela doit être indiqué à l’utilisateur.

• Si un élément d’une collection se trouve dans un état comme par exemple en cours de lecture ou en cours d’édition, le libellé devrait l’indiquer à l’utilisateur.

VISIBILITÉ DES ÉLÉMENTS

• La collection d’éléments doit automatiquement défiler pour rendre visible l’élément sélectionné par l’utilisateur.

CONTRÔLE DU FOCUS

• À l’affichage de la collection d’éléments (premier affichage ou rafraîchissement), le focus doit être mis sur l’élément visuel principal représentant le premier élément de la collection si la page contient uniquement cette collection.

• À la navigation vers la page précédente qui contient la collection d’éléments, le focus doit être remis sur l’item visuel principal de l’élément qui avait été activé par l’utilisateur.

• Dans une grille, lors du défilement vertical, le focus doit être changé automatiquement d’un en-tête à l’autre.

NAVIGATION

• Il doit être possible de naviguer d’un élément de la collection à l’autre, du premier élément jusqu’au dernier.

• Sur la plateforme iOS d’Apple, dans les collections d’éléments groupés, il est possible de changer le niveau de sensibilité pour la manipulation (voir capture d’écran no 3) afin de pouvoir naviguer soit d’un élément à l’autre, soit d’un en-tête de groupe à l’autre. La capture d’écran no 4 montre que le focus est sur l’en-tête, et la capture d’écran no 5, sur l’élément.

• Sur Android, il est également possible de changer le niveau de sélection de la navigation séquentielle: Par défaut, Caractères, Mots, Lignes, Paragraphes, En-têtes, Liens, Commandes. Il devrait être possible de passer d’une entête de groupe à l’autre lorsque la sensibilité de la navigation est configurée à En-têtes et Liens si les en-têtes ont une action de navigation rattachée.

ANNONCES

• Une annonce doit indiquer le nombre d’éléments visibles et le nombre total d’éléments de la collection lorsque la liste est affichée. Dans l’exemple illustré par la capture d’écran no 1, l’annonce est « Affichage de 2 éléments parmi 61 ».

• Une annonce doit être faite lorsque l’utilisateur navigue hors de la collection d’éléments. Dans l’exemple illustré par la capture d’écran no 2, l’annonce faite lorsque l’utilisateur sélectionne le premier élément venant hiérarchiquement après le dernier élément de la liste est « En direct, Montréal, Gravel le matin, hors de la liste ».

• Le filtrage ou l’ordonnancement des éléments de la liste doit faire partie de l’annonce du contenu de la liste.

ASTUCES

• Consulter la rubrique Focus inutile (1.2.3)  pour accélérer la navigation parmi les éléments d'une collection.

• Lorsque l'utilisateur sélectionne un élément de la liste qui comprend une image, il est possible de raccourcir le libellé en omettant le texte alternatif de l'image.

ASTUCES - BONIFICATION

• Les éléments des listes devraient avoir un libellé qui décrit bien leur nature. Par défaut, on a  'Affichage des articles 1 à N sur X" alors qu'on pourrait avoir "Affichage des documentaires 1 à N sur X" par exemple.

ATTENTION

• De manière générale, il n'est pas souhaitable d'imbriquer des collections d'éléments, par ex., une liste horizontale comme cellule d'une liste verticale. Cependant, si cela est vraiment nécessaire, il sera important d'appliquer les recommandations faites plus haut pour chacune des collections d'éléments.

CAPTURES D'ÉCRAN

Capture d’écran no 1 : Affichage d’une collection d’éléments (liste verticale)

Capture d’écran no 2 : Sélection d’un élément hors de la collection

Capture d’écran no 3 : Changement du niveau de sensibilité pour la manipulation en posant deux doigts sur l’écran et en faisant un geste de rotation

Capture d’écran no 4 : Focus sur l’en-tête d’un groupe d’éléments dans une collection

Capture d’écran no 5 : Focus sur un élément dans une collection

Capture d’écran no 6 : Sélection d’un élément dans la collection, le libellé est seulement composé du titre de l’article et de la date, le texte alternatif de l’image et la catégorie ne sont pas énoncés.

1.3.1 Liste

Recommandations pour améliorer l’accessibilité des listes (horizontales ou verticales).

Pour l’instant, nous n’avons aucune recommandation en plus de celles faites dans la section Collections section Collections d’éléments (1.3)

1.3.2 Grille

Recommandations pour rendre accessibles les grilles d’éléments.

Pour l’instant, nous n’avons aucune recommandation en plus de celles faites dans la section Collections d’élémentssection Collections d’éléments (1.3).

1.4 Multimédia

Des recommandations pour rendre le plus accessible possible les expériences multimédias (audio, vidéo, galeries photo, etc.).

1.4.1 Images

MAGE D’ARRIÈRE-PLAN

Lorsque l’arrière-plan d’une page de contenu a un aspect éditorial (par exemple une image d’arrière plan ou d’entête), la description de l’image devrait être lue par les services d’accessibilité lorsque l’utilise navigue sur la page en question.

IMAGE CONTENANT DU TEXTE

Les images contenant uniquement du texte devraient être évitées.

1.4.2 Audio

Cette section contient une série de recommandations visant à améliorer l’accessibilité pour la consultation avec une application mobile d’un média de type audio.

LIBELLÉ DES ÉLÉMENTS

• Le libellé du bouton qui sert à démarrer l’écoute d’un média de type audio doit être de la forme : « {Intitulé du contenu audio} (écouter l’audio) ».

• Le libellé du bouton qui sert à suspendre l’écoute d’un média de type audio doit être de la forme : « {Intitulé du contenu audio} (mettre l’audio en pause) ».

• Le libellé du bouton qui sert à passer à l’élément suivant dans une liste de médias devrait être : « élément suivant {intitulé du contenu audio suivant} ».

• Le libellé du bouton qui sert à passer à l’élément précédent dans une liste de médias devrait être : « élément précédent {intitulé du contenu audio précédent} ».

• Le libellé du bouton qui sert à avancer la position de lecture durant l’écoute d’un média devrait être : « (avance rapide) ».

• Le libellé du bouton qui sert à reculer la position de lecture durant l’écoute d’un média devrait être : « (recul rapide) ».

• Si un élément visuel indique la position courante de la lecture ou la durée restante de la piste audio, son libellé doit être ajusté de manière à ce que les services d’accessibilité de la plateforme en fassent une lecture adéquate, exemple: « 1 heure 3 minutes » au lieu de « 1 h 3 m ».

VISIBILITÉ DES ÉLÉMENTS

• Un bouton permettant de mettre l’écoute de l’audio en pause doit être visible en tout temps sur tous les écrans durant l’écoute de l’audio afin de permettre à l’utilisateur d’interrompre rapidement l’écoute.

Dans le contrôleur audio principal, en plus des éléments visuels indispensables comme les boutons de lancement ou d’arrêt de l’écoute, les éléments suivants doivent être présents.

• Un élément visuel doit indiquer la position courante de lecture si la piste audio est à durée prédéterminée.

• Un élément visuel doit indiquer la durée totale de la piste audio si la piste audio est à durée prédéterminée.

• Un élément visuel doit permettre le changement de la position de lecture si la piste audio est à durée prédéterminée.

CONTRÔLE DU FOCUS

• Dès que l’écoute est lancée, le focus doit être mis sur le bouton permettant de mettre en pause l’audio.

• Le focus doit être mis sur le bouton permettant de lancer ou suspendre l’écoute lorsque l’utilisateur ouvre l’écran du contrôleur.

NAVIGATION

L’ordre dans lequel les éléments visuels reçoivent le focus lorsque l’utilisateur navigue dans le contrôleur audio principal est le suivant :

1. Bouton servant à lancer ou suspendre l’écoute

2. L’élément visuel indiquant la position courante de lecture si applicable

3. L’élément visuel indiquant le temps restant de l’écoute si applicable

4. L’élément visuel servant à aller à la piste audio précédente si applicable

5. L’élément visuel servant à reculer la position de lecture de la piste si applicable

6. L’élément visuel servant à obtenir plus d’information sur la piste courante si applicable

7. L’élément visuel servant à avancer la position de lecture de la piste si applicable

8. L’élément visuel servant à aller à la piste audio suivante si applicable

9. L’élément visuel servant à ajuster le volume

10. Les éléments visuels permettant d’effectuer des fonctions autres que contrôler l’écoute, exemple : partager

11. Le bouton de fermeture du contrôleur

NOTE : Les éléments visuels permettant le contrôle de l’écoute peuvent recevoir le focus même lorsqu’ils sont désactivés. Cependant, le libellé de ces boutons devrait indiquer qu’ils sont désactivés.

ANNONCES

• Si, lors du lancement de l’écoute, l’utilisateur n’est pas informé sur le média audio qui est démarré, une annonce avec les informations sur le média doit être faite.

• Une annonce doit être faite lorsque toutes les pistes (ou l’unique piste audio) ont été jouées : « Fin de la liste d’écoute ».

REMARQUES

• Si disponible, l'utilisateur devrait pouvoir activer l'affichage des transcriptions ou celle de la vidéo avec l'interprétation en langue des signes, du contenu audio si cela s'applique.

ASTUCES - BONIFICATION

• Lors de l'écoute d'une liste de médias audio, une amélioration considérable serait l'annonce des informations de la piste audio lors de la transition d'un élément à l'autre.

ATTENTION

• L'écoute du contenu audio ne devrait jamais démarrer sans que l'utilisateur n'est explicitement lancer le contenu en effectuant l'action appropriée (ex: appuyer sur le bouton PLAY).

• Si le lancement de l'écoute audio doit absolument être fait automatiquement, l'idéal serait que l'utilisateur en soit au préalable informé au travers d'une annonce par exemple. Sinon, il faudrait que le focus soit mis sur le bouton STOP ou MUTE si ce dernier est offert dans l'interface.

• Le son du contenu audio ne devrait jamais entrer en conflit avec celui des services d'accessibilité (TalkBack ou Voice Over). L'utilisateur doit être capable d'ajuster le volume de contenu audio indépendamment de celui des services d'accessibilité.

1.4.3 Vidéo

Cette section contient une série de recommandations visant à améliorer l’accessibilité pour l’écoute avec une application mobile d’un média de type vidéo.

LIBELLÉ DES ÉLÉMENTS

• Le libellé du bouton qui sert à démarrer la lecture d’un média de type vidéo doit être de la forme : « {Intitulé du contenu vidéo} (écouter la vidéo) ».

• Le libellé du bouton qui sert à suspendre la lecture d’un média de type vidéo doit être de la forme : « {Intitulé du contenu vidéo} (mettre la vidéo en pause) ».

• Le libellé du bouton qui sert à passer à l’élément suivant dans le cas de la lecture d’une liste de médias devrait être : « segment suivant {intitulé du contenu vidéo suivant} ».

• Le libellé du bouton qui sert à passer à l’élément précédent dans le cas de la lecture d’une liste de médias devrait être : « segment précédent {intitulé du contenu épisode précédent} ».

• Le libellé du bouton qui sert à avancer la position de lecture durant le visionnement d’un média devrait être : « (avance rapide) ».

• Le libellé du bouton qui sert à reculer la position de lecture durant le visionnement d’un média devrait être : « (recul rapide) ».

• Si un élément visuel indique la position courante de la lecture ou la durée restante de la piste vidéo, leur libellé doit être ajusté de manière à ce que les services d’accessibilité de la plateforme en fassent une lecture adéquate, exemple : « 1 heure 3 minutes » au lieu de « 1 h 3 m ».

• Si un élément visuel permet de passer en mode plein-écran, leur libellé devrait être  « Mode plein écran »

VISIBILITÉ DES ÉLÉMENTS

L’utilisateur doit avoir la possibilité de paramétrer le comportement du conteneur des éléments visuels permettant le contrôle du visionnement.

1. Mode visible en tout temps

2. Mode visible sur demande

• Le conteneur des éléments visuels permettant le contrôle de la lecture de la vidéo doit être visible lorsque l’utilisateur tape avec un doigt sur l’écran.

• S’il est déjà visible, le conteneur des éléments visuels permettant le contrôle de la lecture de la vidéo doit devenir invisible lorsque l’utilisateur tape avec un doigt sur l’écran.

• Le conteneur des éléments visuels permettant le contrôle de la lecture de la vidéo doit automatiquement devenir invisible après un certain temps.

Dans le contrôleur principal, en plus des éléments visuels indispensables comme les boutons de lancement d’écoute ou d’arrêt, les éléments suivants doivent être présents :

• Un bouton servant à activer ou désactiver les sous-titres.

• Un élément visuel doit indiquer la position courante de lecture si la vidéo est à durée prédéterminée.

• Un élément visuel doit indiquer la durée totale de la vidéo si la vidéo est à durée prédéterminée.

• Un élément visuel doit permettre le changement de la position de lecture si la vidéo est à durée prédéterminée.

CONTRÔLE DU FOCUS

• Dès que la vidéo est lancée, le focus doit être mis sur le bouton permettant de mettre en pause la vidéo.

• Le focus doit être mis sur le bouton permettant de lancer ou suspendre la lecture lorsque l’utilisateur fait apparaître le conteneur des éléments visuels permettant le contrôle de la lecture.

NAVIGATION

L’ordre dans lequel les éléments visuels reçoivent le focus lorsque l’utilisateur navigue parmi les éléments visuels permettant le contrôle de l’écoute est le suivant :

1. Bouton servant à lancer ou suspendre la lecture

2. L’élément visuel indiquant la position courante de lecture si applicable

3. L’élément visuel indiquant le temps restant de la vidéo si applicable

4. L’élément visuel servant au segment précédent si applicable

5. L’élément visuel servant à reculer la position de lecture de la piste si applicable

6. L’élément visuel servant à obtenir plus d’information sur la piste courante si applicable

7. L’élément visuel servant à avancer la position de lecture de la piste si applicable

8. L’élément visuel servant à aller au segment suivant si applicable

9. L’élément visuel servant à ajuster le volume

10. L’élément visuel servant à activer ou désactiver les sous-titres

11. Les éléments visuels permettant d’effectuer des actions autres que celles pour le contrôle de l’écoute, exemple : partager

12. Le bouton de fermeture de l’écran du lecteur vidéo

NOTE : Les éléments visuels permettant le contrôle de l’écoute peuvent recevoir le focus même lorsqu’ils sont désactivés. Cependant, le libellé de ces boutons devrait indiquer qu’ils sont désactivés.

ANNONCES

• Une annonce doit être faite à la fin du contenu vidéo : « Fin de la vidéo »

IOS 

• À partir d'iOS 9, il est possible d'utiliser l'interaction appelée « touche magique » pour reprendre ou suspendre la lecture de la vidéo. L'utilisateur doit taper deux fois sur l'écran avec deux doigts pour suspendre l'écoute et taper deux fois sur l'écran avec deux doigts pour reprendre la lecture.

REMARQUES

• Si disponible, l'utilisateur devrait pouvoir activer les sous-titres ou celle de la vidéo avec l'interprétation en langue des signes, du contenu vidéo si cela s'applique.Un contr

ATTENTION

• L'écoute du contenu vidéo ne devrait jamais démarrer sans que l'utilisateur n'est explicitement lancer le contenu en effectuant l'action appropriée (ex: appuyer sur le bouton PLAY).

• Si le lancement de l'écoute vidéo doit absolument être fait automatiquement, l'idéal serait que l'utilisateur en soit au préalable informé au travers d'une annonce par exemple. Sinon, il faudrait que le focus soit mis sur le bouton STOP ou MUTE si ce dernier est offert dans l'interface.

• Le son du contenu vidéo ne devrait jamais entrer en conflit avec celui des services d'accessibilité (TalkBack ou Voice Over).  L'utilisateur doit être capable d'ajuster le volume de contenu vidéo indépendamment de celui des services d'accessibilité.

1.4.4 Galerie photo

Cette section contient une série de recommandations visant à améliorer l’expérience utilisateur en matière d’accessibilité dans les galeries photo avec une application mobile.

LIBELLÉS DES ÉLÉMENTS

Les photos de la galerie doivent toutes contenir les informations ci-dessous dans leur libellé, dans l’ordre suivant :

1. La position de la photo dans la collection d’images ainsi que le nombre total de photos

2. Le texte alternatif

3. La légende de l’image

4. Les mentions de source de la photo

VISIBILITÉ DES ÉLÉMENTS

Un élément visuel contenant le texte narratif accompagnant la photo doit être visible à la demande de l’utilisateur.

CONTRÔLE DU FOCUS

• Au lancement de la galerie photo, le focus doit être mis sur la première photo.

NAVIGATION

• L’utilisateur doit être conduit à la photo suivante lorsqu’il navigue dans la page de galerie photo.

ANNONCES

• Une annonce doit être faite au lancement de la galerie photo pour indiquer le nombre total de photos qu’elle contient et comment passer d’une photo à l’autre : « Galerie de {N} photos, défilez pour passer au prochain élément »

• Ajouter une annonce lorsque l’utilisateur arrive à la dernière photo de la galerie : « Fin de la galerie photo »

1.5. Publicité

Recommandations pour s’assurer que les publicités n’entravent pas l’accessibilité du contenu, tout en demeurant accessibles.

1.5.1 Bannières

Cette section contient une série de recommandations visant à améliorer l’accessibilité des bannières publicitaires.

LIBELLÉS DES ÉLÉMENTS

• Les bannières publicitaires de type autopromotions doivent avoir un libellé qui contient la description du bien ou du service qui est promu.

VISIBILITÉ DES ÉLÉMENTS

• Un élément visuel indiquant le mot « publicité » doit apparaître avant la bannière afin de préciser à l’utilisateur que cette dernière n’est pas du contenu. Voir la capture d’écran 1.

CONTRÔLE DU FOCUS

• L’utilisateur doit être en mesure de mettre le focus sur les bannières publicitaires.

• Le focus courant (incluant celui sur la bannière) de l’utilisateur ne doit pas être perdu lorsque la bannière est rafraîchie.

NAVIGATION

• L’utilisateur doit être en mesure de sélectionner la bannière comme n’importe quel autre élément du contenu.

ANNONCES

Non applicable

CAPTURES D'ÉCRAN

Capture d’écran no 1 : Présentation d’une bannière publicitaire dans une liste

1.5.2 Vidéo

Recommandations visant à améliorer l’accessibilité des vidéos publicitaires.

LIBELLÉS DES ÉLÉMENTS

• La durée et le nombre de publicités doivent être bien indiqués dans le libellé. Par exemple, « Publicité 1 de 3 ».

VISIBILITÉ DES ÉLÉMENTS

• L’intitulé « PUBLICITÉ » doit apparaître à l’écran lors de la lecture des contenus publicitaires.

CONTRÔLE DU FOCUS

• L’utilisateur doit être en mesure de sélectionner tous les éléments visuels qui l’informent sur le nombre de publicités et leur durée.

NAVIGATION

Non applicable

ANNONCES

• L’annonce « Début des publicités » doit être effectuée au début de la première publicité, et l’annonce « Fin des publicités », à la fin de la dernière.

1.6 Formulaires

Remarques pour améliorer l’accessibilité des pages contenant des formulaires.

LIBELLÉ DES ÉLÉMENTS

• Tous les champs du formulaires doivent avoir un libellé décrivant la valeur que ce dernier est destiné à recevoir.

VISIBILITÉ DES ÉLÉMENTS

• Le libellé dans un champ de texte doit se trouver proche du champ du formulaire qu’il renseigne.

CONTRÔLE DU FOCUS

• Le focus ne devrait pas changer automatiquement durant l’édition d’un champ du formulaire.

• Le format de la valeur qui doit être entrée dans le champ doit être indiqué (ex: “Date”, “Adresse courriel”, etc…). Et si le libellé du champ n’est pas assez explicite pour indiquer le format du champ, il faudrait que le format soit annoncé à la prise de focus du champ (ex: Depuis quand fréquentez-vous cet établissement? Format: “Date”).

NAVIGATION

• La navigation parmi les éléments d’un formulaire doit suivre la même logique que celle de la disposition des champs du formulaire.

ANNONCES

• Non applicable

REMARQUES

• Il peut également être nécessaire de fournir un indice (watermark en anglais) dans le champ afin d'informer encore mieux l'utilisateur sur la valeur attendue.

1.7 Commandes

Une commande est un élément visuel qui permet à l’utilisateur d’effectuer une opération qui peut altérer l’état de l’application. Par exemple, une lien de navigation vers une section ou une sous-section car sa sélection conduit l’utilisateur vers une autre section qui contiendra un ou plusieurs contenus en relation avec le lien sélectionné.

NOTE: Il ne faut pas confondre une action de navigation avec une action de sélection de contenu car dans le second cas c’est le niveau de détail du contenu sélectionné qui s’affiche, avec ou sans navigation.

LIBELLÉS DES ÉLÉMENTS

• L’action associée à un élément visuel servant à déclencher une commande qui change l’état de l’application  doit être indiquée dans le libellé de l’élément. Voici quelques exemples de commande majeures:

1. Diffuser sur la Chromecast car les médias jouent sur la télé désormais jusqu’à ce que l’utilisateur interrompe la session. Ainsi le libellé devrait contenir le verbe “Diffuser”.

2. le lancement d’un média car de l’audio et/ou de la vidéo démarrent et continuent jusqu’à leur interruption. Le libellé devrait contenir le verbe “Démarrer”.

3. L’action d’effectuer une recherche peut également qualifier comme une commande car le contenu présenté suite à l’activation de la commande sera différent.

• Le libellé d’un élément visuel associé à une commande doit indiquer si ce dernier est désactivé, ex: “Bouton Lancer l’écoute – Désactivé”

VISIBILITÉ DES ÉLÉMENTS

• Les commandes doivent être visibles même lorsqu’elles sont désactivées.

CONTRÔLE DU FOCUS

• Les éléments visuels servant à exécuter des commandes doivent pouvoir recevoir le focus.

NAVIGATION

• Les actions de sélection de contenu ne doivent pas être traitées comme des commandes.

ANNONCES

• Une annonce devrait être faite lorsqu’une commande importante devient disponible pour l’utilisateur.

ANDROÏD

• Les éléments visuels servant à exécuter des commandes doivent pouvoir recevoir le focus lorsque l'utilisateur a réglé la navigation en mode commandes dans TalkBack.

1.8 Champ de texte

Recommandations pour rendre accessibles différents types de champs de texte.

LIBELLÉS DES ÉLÉMENTS

• Le texte contenu dans le champ fait office de libellé.

VISIBILITÉ DES ÉLÉMENTS

• Un champ de texte non-vide doit être visible et un champ de texte modifiable visible doit être annoncé comme tel.

CONTRÔLE DU FOCUS

• Lorsqu’un champ de texte modifiable reçoit le focus, le clavier virtuel doit devenir visible.

NAVIGATION

• Non applicable

ANNONCES

• Non applicable

ANDROÏD

• Pour les EditText et TextView modifiables il ne faut pas utiliser la propriété

  
  

  
  

  
  

    mais plutôt la propriété

  
  

  
  

  
  

1.9 Modal

Recommandations pour rendre accessibles différents types d’éléments visuels modaux.

LIBELLÉS DES ÉLÉMENTS

• Non applicable.

VISIBILITÉ DES ÉLÉMENTS

• Un bouton permettant de fermer le modal doit être visible et sélectionnable.

CONTRÔLE DU FOCUS

• Le focus doit être mis sur le premier élément du contenu de l’élément modal.

NAVIGATION

• Il doit être possible de naviguer d’un élément  à l’autre, du premier élément jusqu’au dernier.

ANNONCES

• Une annonce doit indiquer qu’un élément modal vient d’apparaître à l’écran, ex: ‘Ouverture du menu des filtres’.