Salut à tous ! Dans la vidéo de cette semaine, j’ai abordé le modèle de conception « UI adjustable ». J’ai récemment fait une présentation sur ce modèle lors du Bay Area Accessibility Camp organisé par LinkedIn et Microsoft. Ce fut une expérience vraiment formidable et j’ai pu faire une démonstration de ce modèle de conception très intéressant, mais je n’ai pas eu l’occasion d’expliquer comment et quand il devait être mis en œuvre. C’est ce que je vais aborder en détail dans la vidéo ci-dessous.
Si vous le souhaitez, vous pouvez suivre mon tutoriel enregistré ici :
Comment utiliser l'Inspecteur d'accessibilité pour simuler VoiceOver
Pour commencer, ouvrez l’inspecteur d’accessibilité ainsi que l’application que vous souhaitez présenter. Dans cette démonstration et cet exemple, vous pouvez mettre en évidence ce qui constitue une étape d’accessibilité segmentée de base, où se trouvent ces boutons d’augmentation et de diminution. Par exemple, imaginons que vous souhaitiez acheter des tomates et que vous vouliez augmenter ou diminuer le nombre de tomates que vous avez. Avant de tester ce modèle de conception, il est important de savoir comment utiliser l’inspecteur d’accessibilité. Lorsque vous ouvrez l’inspecteur, la première chose que vous remarquerez est l’icône cible sur le simulateur.
Pour contrôler cette icône, vous pouvez faire glisser votre doigt et toucher des cibles ; cela se reflétera dans votre simulateur. Pour verrouiller le mode tactile et passer en mode exploration, cliquez sur le bouton correspondant. En substance, ce que nous faisons dans l’inspecteur d’accessibilité, c’est simuler VoiceOver. Il est important de noter qu’un utilisateur de VoiceOver, qui pourrait être une personne aveugle, n’utilisera probablement pas VoiceOver de cette manière. Il est possible qu’il ramène occasionnellement le focus sur l’écran ou qu’il le place au centre de l’écran, mais, la plupart du temps, il utilisera ces gestes de balayage vers la droite et vers la gauche. Il est également possible de simuler les gestes de balayage vers la droite et vers la gauche à l’aide de nos icônes fléchées. Pour ce faire, cliquez sur la flèche de droite.
Identification des informations dans l'Inspecteur d'accessibilité
Dans cet exemple fictif, masquez votre application de simulation et utilisez uniquement l’inspecteur d’accessibilité. Vous pourriez naviguer jusqu’à la zone de contrôle segmentée réglable. Vous pourriez balayer vers la droite ou cliquer sur le bouton fléché vers la droite pour diminuer la quantité d’un élément. Cependant, vous ne pourriez pas voir le nombre affiché à ce stade, car l’étiquette de l’interface utilisateur n’annonce que le libellé « acheter des tomates ». Lorsque vous balayez vers la droite ou vers la gauche, le système annonce « augmenter » ou « diminuer », mais pas le nombre réel de tomates dont vous disposez. Que se passerait-il si vous souhaitiez ajouter une centaine d’articles à votre panier ? Si vous étiez malvoyant ou aveugle, vous devriez vous souvenir du numéro sur lequel vous vous trouvez au fur et à mesure que vous balayez. Cela deviendrait très vite très frustrant.
Applications concrètes : l'accessibilité ne garantit pas une expérience utilisateur positive
Il s'agit ici d'une mise en page très simple. Dans la pratique, ces mises en page seront bien plus complexes que celle-ci. En fin de compte, celle-ci est accessible. Ce modèle de conception d'interface utilisateur répond aux critères des Directives pour l'accessibilité des contenus Web (WCAG) dans un monde hypothétique. On peut également expliquer cela en disant que cette interface utilisateur contient deux types d’informations au sein de ce contrôle. D’une part, il y a le nombre d’articles présents dans le panier, et d’autre part, le fait que ce nombre puisse être augmenté ou diminué. Ces deux types d’informations sont stockés séparément.
La solution : l'encadrement des libellés de l'interface utilisateur
La solution à cette expérience utilisateur peu conviviale consiste à regrouper toutes ces informations. Si vous ajoutiez des tomates à votre panier, VoiceOver lirait « une banane » au lieu de « banane » et « augmenter » ou « diminuer ». L’avantage, c’est que ce regroupement est personnalisable et que vous n’auriez plus besoin du bouton de regroupement. De plus, en regroupant les libellés, le focus ne se porterait plus séparément sur les commandes d’augmentation et de diminution. Au contraire, ce modèle de conception a permis d’ajouter quelques actions supplémentaires. Non seulement vous pouvez augmenter et diminuer la quantité, mais cette information sera également transmise à l’utilisateur de VoiceOver. Par ailleurs, le fait que ce soit réglable signifie également que les utilisateurs de VoiceOver ont accès à ces actions : ils peuvent faire glisser leur doigt vers le haut ou vers le bas sur une commande, au lieu de devoir accéder à ces deux commandes distinctes d’augmentation et de diminution.
Propriétés des étiquettes et des tags de conception
En regroupant toutes ces informations, nous obtenons une information globale très concise. La mise en page sera intégrée dans une classe spéciale de « stepper » d’accessibilité. Les propriétés de cette classe comprendront une étiquette principale, une étiquette secondaire et l’étiquette du « stepper ». Dans cette conception, vous attribueriez ces étiquettes aux vues individuelles. Les vues individuelles « nameLabel » et « hintLabel » sont des étiquettes d’interface utilisateur. L’étiquette d’accessibilité sera la combinaison de « nameLabel » et de « hintLabel ».
Il est important de nommer ces étiquettes « nameLabel » et « hintLabel » pour une raison essentielle. La « nameLabel » doit contenir les informations absolument indispensables, tandis que la « hintLabel » peut soit être regroupée avec l’étiquette d’accessibilité, soit être simplement représentée par l’indication elle-même, selon l’importance de l’information. La mise en page globale doit être un élément d’accessibilité. En d’autres termes, l’ensemble constituera un élément d’accessibilité, ce qui empêchera les éléments individuels d’être mis en surbrillance. C’est tout ce qu’il faut pour concevoir une interface utilisateur accessible et adaptable aux mouvements. Cela dit, ce n’est pas la méthode à suivre systématiquement. Cependant, il est souvent utile de regrouper judicieusement les informations relatives aux conventions de conception sur lesquelles vous travaillez.
