Cette ressource doit être utilisée en complément du RGAA 3, notamment son référentiel technique, sans lequel la prise en compte de l'accessibilité ne peut pas être mesurée.
Cette liste reprend les formulations du RGAA 3, elle a été élaborée en respectant les mêmes règles d'écriture et propose le même fonctionnement de validation par l'utilisation des 5 statuts du RGAA 3 :
- conforme ;
- non-conforme ;
- non-applicable ;
- non-testé ;
- dérogé.
La liste des critères spécifiques aux plateformes mobiles/tactiles est pensée comme une extension du RGAA 3, indépendante du reste du référentiel technique et non obligatoire.
Nous numéroterons les critères de cette thématique en commençant par 14 pour maintenir la cohérence avec le RGAA 3.
Principes : Perceptible, Utilisable, Compréhensible, Robuste.
S'assurer que les zones sensibles ont une taille suffisante, que le zoom n'est pas interdit, simplifier les interactions gestuelles ou leur donner une alternative, s'assurer que le contenu reste lisible quelle que soit l'orientation de l'écran, grouper les éléments interactifs adjacents ayant la même fonction et optimiser la saisie via des types de saisie pertinents.
14.1 Chaque zone sensible a-t-elle une taille suffisante ?
- Test 14.1.1 : Chaque zone sensible respecte-elle ces conditions ?
- la largeur de la zone sensible fait 9 mm au moins ;
- la hauteur de la zone sensible fait 9 mm au moins ;
- la zone sensible a une marge extérieure suffisante.
- W3C Mobile Accessibility : 3.2 Touch Target Size and Spacing.
La [note W3C/WAI (en anglais)](http://www.w3.org/TR/mobile-accessibility-mapping/) sur laquelle s'appuie ce référentiel n'associe pas de niveau à ce critère. À titre indicatif, selon la note "Comprendre les niveaux de conformité", nous estimons qu'il s'agit d'un **critère de niveau A**.
14.2 [AA] La fonctionnalité de zoom du navigateur ne doit pas être supprimée ou limitée, cette règle est-elle respectée ?
-
Test 14.2.1 : les valeurs utilisées par la métadonnée
viewport
, respectent-elles ces conditions ?- la valeur de l'attribut
maximum-scale
est égale à 2.0 ou à 200 %, au moins ; - la valeur de l'attribut
user-scale
est égale àyes
, si elle est présente.
- la valeur de l'attribut
-
Test 14.2.2 : les valeurs utilisées par la règle CSS
@viewport
, respectent-elles ces conditions ?- la valeur de la propriété
max-zoom
est supérieure ou égale à 2.0 ou à 200 %, au moins ; - la valeur de la propriété
user-zoom
est égale àzoom
, si elle est présente.
- la valeur de la propriété
- W3C Mobile Accessibility : 2.2 Zoom/Magnification ;
- Critère de succès WCAG 2.0 : 1.4.4.
14.3 Pour chaque interaction gestuelle déclenchant une action, l'action est-elle déclenchée de manière appropriée ?
- Test 14.3.1 : Chaque interaction gestuelle déclenchant une action respecte-t-elle ces conditions ?
- l'action est déclenchée uniquement à la fin de l'interaction gestuelle ;
- l'action n'est pas déclenchée si l'élément déclencheur perd le focus.
Consulter la proposition de technique Activating elements via the mouseup or touchend event.
- W3C Mobile Accessibility : 3.3 Touchscreen Gestures.
La [note W3C/WAI (en anglais)](http://www.w3.org/TR/mobile-accessibility-mapping/) sur laquelle s'appuie ce référentiel n'associe pas de niveau à ce critère. À titre indicatif, selon la note "Comprendre les niveaux de conformité", nous estimons qu'il s'agit d'un **critère de niveau A**.
14.4 Chaque interaction gestuelle complexe a-t-elle une alternative ?
- Test 14.4.1 : chaque interaction gestuelle complexe respecte-t-elle une de ces conditions ?
- l'interaction gestuelle possède une alternative non-gestuelle ;
- un paramètre permet à l'utilisateur d'utiliser des interactions gestuelles simplifiées.
- W3C Mobile Accessibility : 3.3 Touchscreen Gestures.
La [note W3C/WAI (en anglais)](http://www.w3.org/TR/mobile-accessibility-mapping/) sur laquelle s'appuie ce référentiel n'associe pas de niveau à ce critère. À titre indicatif, selon la note "Comprendre les niveaux de conformité", nous estimons qu'il s'agit d'un **critère de niveau A**.
14.5 [AAA] Les interactions gestuelles doivent être décrites au moyen d'une aide en ligne, cette règle est-elle respectée ?
- Test 14.5.1 : Les interactions gestuelles respectent-elles une de ces conditions ?
- l'interaction gestuelle est décrite avant son déclenchement ;
- l'interaction gestuelle est décrite via une aide en ligne.
- W3C Mobile Accessibility : 4.6 Provide instructions for custom touchscreen and device manipulation gestures ;
- Critère de succès WCAG 2.0 : 3.3.5.
14.6 Les interactions gestuelles impliquant un changement d'orientation de l'écran (basculement, rotation, secouement...) ont-elles une alternative (hors cas particulier) ?
- Test 14.6.1 : Les interactions gestuelles impliquant un changement d'orientation de l'écran (basculement, rotation, secouement...) respectent-elles ces conditions ?
- une action gestuelle alternative utilise le tap (touch en anglais) ;
- une action alternative au clavier permettant d'accéder aux mêmes contenus et fonctionnalités est présente.
- W3C Mobile Accessibility :
La [note W3C/WAI (en anglais)](http://www.w3.org/TR/mobile-accessibility-mapping/) sur laquelle s'appuie ce référentiel n'associe pas de niveau à ce critère. À titre indicatif, selon la note "Comprendre les niveaux de conformité", nous estimons qu'il s'agit d'un **critère de niveau A**.
14.7 L'accès au contenu ne doit pas dépendre d'une orientation de l'écran (portrait ou paysage), cette règle est-elle respectée ?
- Test 14.7.1 : L'accès au contenu respecte-t-il une de ces conditions ?
- un paramètre permettant à l'utilisateur de choisir l'orientation de l'affichage du contenu, portrait ou paysage, est présent ;
- le contenu est consultable dans les deux orientations, portrait et paysage.
- W3C Mobile Accessibility : 4.1 Changing Screen Orientation (Portrait/Landscape).
La [note W3C/WAI (en anglais)](http://www.w3.org/TR/mobile-accessibility-mapping/) sur laquelle s'appuie ce référentiel n'associe pas de niveau à ce critère. À titre indicatif, selon la note "Comprendre les niveaux de conformité", nous estimons qu'il s'agit d'un **critère de niveau A**.
14.8 Pour chaque champ de saisie, le format de saisie attendu est-il, si possible, associé à un type de saisie pertinent ?
- Test 14.8.1 : Pour chaque champ de saisie, le format de saisie attendu est-il associé à un type de saisie pertinent ?
Consulter la note technique au sujet des nouveaux types de formulaire.
- W3C Mobile Accessibility : 5.1 Set the virtual keyboard to the type of data entry required.
La [note W3C/WAI (en anglais)](http://www.w3.org/TR/mobile-accessibility-mapping/) sur laquelle s'appuie ce référentiel n'associe pas de niveau à ce critère. À titre indicatif, selon la note "Comprendre les niveaux de conformité", nous estimons qu'il s'agit d'un **critère de niveau A**.
14.9 [A] Les éléments interactifs adjacents, déclenchant la même action, doivent être groupés en un seul élément, cette règle est-elle respectée ?
- Test 14.9.1 : Les éléments interactifs adjacents, déclenchant la même action, doivent être groupés en un seul élément, cette règle est-elle respectée ?
Consulter la technique H2 : Combining adjacent image and text links for the same resource.
Note : cette recommandation référence une technique WCAG, actuellement non prise en charge dans le référentiel technique du RGAA 3. Cette exigence devrait être introduite dans RGAA 3 à la prochaine mise à jour. Ce critère 14.9 sera alors supprimé pour éviter les doublons.
- W3C Mobile Accessibility : 4.4 Grouping operable elements that perform the same action.
- Critères de succès WCAG 2.0 :
Ces recommandations devraient également, dans la mesure du possible, être prises en compte pour optimiser l'expérience des utilisateurs en situation de handicap, notamment.
Il est à noter néanmoins que certaines d'entre elles peuvent poser des problèmes ou être complexes à respecter pour un contenu commun aux deux plateformes (ordinateur de bureau et plateformes mobiles/tactiles).
Dans ce cadre, nous avons mis en place une numérotation dédiée à ces critéres et les avons préfixé par le mot clé "RecoMT-".
RecoMT-14.1 Chaque image porteuse d'information utilisée en propriété de fond d'élément a-t-elle une alternative visible ?
- Test RecoMT-14.1.1 : Chaque image porteuse d'information utilisée en propriété de fond d'élément via CSS, respecte-t-elle une de ces conditions ?
- l'image est accompagnée d'un texte visible ;
- un mécanisme permet de remplacer l'image par un texte visible.
- BBC Mobile Accessibility Guidelines : Background images.
La référence sur laquelle s'appuie cette recommandation n'associe pas de niveau à ce critère. À titre indicatif, selon la note "Comprendre les niveaux de conformité", nous estimons qu'il s'agit d'un **critère de niveau A**.
RecoMT-14.2 Chaque alternative visible associée à une image en propriété de fond est-elle pertinente. ?
- Test RecoMT-14.2.1 : Chaque alternative visible associée à une image en propriété de fond est-elle pertinente ?
- BBC Mobile Accessibility Guidelines : Background images.
La référence sur laquelle s'appuie cette recommandation n'associe pas de niveau à ce critère. À titre indicatif, selon la note "Comprendre les niveaux de conformité", nous estimons qu'il s'agit d'un **critère de niveau A**.
- Test RecoMT-14.3.1 : Chaque image respecte-t-elle une de ces conditions ?
- l'image est optimisée pour la taille et la résolution de l'écran ;
- un mécanisme permet de remplacer l'image par une image optimisée pour la taille et la résolution de l'écran.
- W3C Mobile Web Best Practices 1.0 : 5.3.5 Graphics.
La référence sur laquelle s'appuie cette recommandation n'associe pas de niveau à ce critère. À titre indicatif, selon la note "Comprendre les niveaux de conformité", nous estimons qu'il s'agit d'un **critère de niveau AA**.
RecoMT-14.4 L'ordre des contenus de la page est-il optimisé pour une consultation sur un écran de périphérique mobile/tactile ?
- Test RecoMT-14.4.1 : Les contenus les plus importants de la page sont-ils présentés en premier sans nécessiter de balayage ?
- W3C Mobile Accessibility : 4.3 Positioning important page elements before the page scroll.
La référence sur laquelle s'appuie cette recommandation n'associe pas de niveau à ce critère. À titre indicatif, selon la note "Comprendre les niveaux de conformité", nous estimons qu'il s'agit d'un **critère de niveau AA**.
Tous les éléments interactifs tels que des liens, des boutons etc., qui sont adjacents et qui réalisent une même action ou affichent une même ressource.
Toute interaction effectuée au moyen de gestes déclenchant une action, notamment via une surface tactile. Par exemple, les interactions de type tap (touché rapide équivalent d'un clic à la souris), touché (touch en anglais, touché plus long qu'un tap), balayage (swipe) ou pincement (pinch) sont des interactions gestuelles.
Les interactions gestuelles complexes impliquent plusieurs mouvements successifs ou synchronisés. Par exemple, un balayage suivi de plusieurs taps. Ces interactions peuvent présenter des difficultés insurmontables pour certains utilisateurs.
Note : Le terme "synchronisé" comprend à la fois les gestes simultanés et les gestes enchaînés sans pause.
Lorsque des contrôles, comme des boutons ou des textes activables, sont adjacents, il peut être difficile pour un utilisateur de les activer individuellement si leur taille n'est pas suffisante, notamment lorsque cette taille est proche du minimum requis (9mm X 9mm).
L'implémentation d'une marge permet de diminuer les erreurs d'activation d'éléments adjacents. Il n'y a pas de valeur fixe à cette marge car elle peut dépendre de la résolution et de la taille physique de l'écran.
Elle doit être suffisante néanmoins pour permettre, quelles que soient la résolution et la taille physique de l'écran, d'activer sans erreur chaque composant interactif.
À titre indicatif, voici quelques références de recommandation de marge :
-
Les BBC mobile accessibility guidelines recommandent une marge de 1 pixel, au moins.
-
Google recommande une marge de 8dp
-
D'autres références peuvent être consultées sur le blog de Luke Wroblewski.
Les éléments interactifs comme les boutons et les zones de texte activables peuvent être difficiles à manipuler s'ils ont une taille insuffisante sur des écrans de périphériques de petite taille, ou en haute résolution.
La taille de ces zones n'est pas définie en pixel mais en millimètre afin de tenir compte des tailles physiques réelles des périphériques d'affichage et de la densité en pixels qu'ils utilisent.
Il appartient aux développeurs de s'assurer, quelle que soit la taille en pixels utilisée, que les composants interactifs ont une taille restituée de 9mm x 9mm au moins pour être utilisés sur les écrans en haute résolution notamment.
HTML5 propose des types de saisie spécifiques qui, lorsque le périphérique le supporte, permettent d'optimiser la saisie. Par exemple, le type "tel"
provoquera l'apparition du clavier numérique.
Les types de saisie sont :
text
;search
;tel
;url
;email
;password
;date
;time
;number
;range
;color
;checkbox
;radio
;file
.
Zone interactive de l'écran associée à une interaction gestuelle. Les zones sensibles recouvrent les boutons, les liens, les contrôles de formulaire ou tout autre élément interactif ou rendu interactif via JavaScript notamment.
Il existe une gestion de cas particuliers lorsque la rotation, le basculement ou le secouement est inhérent à la fonctionnalité proposée et ne trouverait pas d'équivalent dans un autre mode d'interaction.
Dans ce cas, le critère est non-applicable.
Pour que l'accessibilité "fonctionne", les différents éléments HTML notamment doivent avoir été intégrés sur les différentes plateformes. Or, il peut exister des différences de support importantes entre la prise en charge des nouveaux types de formulaire sur les ordinateurs de bureau et les plateformes mobiles/tactiles.
Pour certains types, par exemple le type "date"
ou "heure"
, il n'est pas possible actuellement de les utiliser de manière homogène. Cela nécessite généralement le recours à l'utilisation de composants développés via JavaScript et WAI-ARIA.
Dans d'autres cas, par exemple le type "number"
, la dégradation dans les navigateurs de bureau ne le supportant pas est acceptable, ce qui permet de les utiliser dans un contexte mobile/tactile.
Il appartient aux auteurs de contenus et à l'auditeur de déterminer, au cas par cas, l'applicabilité du critère.
Dans le cas où un type de formulaire ne pourrait pas être utilisé en contexte mobile/tactile, du fait de son manque de support sur un navigateur de bureau notamment, il est acceptable de considérer le critère comme non-applicable.
- Mobile Accessibility : How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
- BBC Standards and Guidelines for Mobile Accessibility
- Mobile Web Best Practices 1.0
- Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG)
- Barriers Common to Mobile Device Users and People with Disabilities
- W3C mobileOK Basic Tests 1.0
- Funka Mobile Navigation Guidelines
- Opquast Web Mobile
- Mobile accessibility checklist.
Ce document est la propriété du Secrétariat général à la modernisation de l'action publique français (SGMAP). Il est placé sous la licence ouverte 1.0 ou ultérieure, équivalente à une licence Creative Commons BY. Pour indiquer la paternité, ajouter un lien vers la version originale du document disponible sur le compte Github de la DInSIC.