-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #545 from Orange-OpenSource/Android-article
Android article
- Loading branch information
Showing
2 changed files
with
198 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
--- | ||
title: "Testing the accessibility of an Android application" | ||
abstract: "Description of the main testing tools and methods to quickly assess the accessibility of an Android application" | ||
titleBeforeTag: true | ||
date: "2024-10-15" | ||
tags: | ||
- mobile | ||
- beginner | ||
--- | ||
|
||
## Presentation and configuration of accessibility options | ||
|
||
### Presentation of the main options | ||
- **Talkback**: the screen reader for all Android devices. It allows you to vocalize all the (useful) information present on the screen. It's an essential tool for blind and visually impaired people. | ||
- **Keyboard navigation**: enable this feature to use your phone with an external keyboard (usually via Bluetooth). It's useful for people who have difficulties using the touch screen due, for example, to motor impairment. | ||
- **Voice Access**: option to control a phone only with the voice. It's essential for people who cannot physically interact with the device or an external contactor. | ||
- **Font size**: increase text size, only useful with applications that manage this option. | ||
|
||
|
||
### Accessibility shortcuts setting | ||
For greater convenience, it is necessary to install some tools from the Google Play Store: | ||
- Android Accessibility Suite (install TalkBack and others tools) | ||
- Voice Access | ||
|
||
For easier use, we recommend adding the essential tools to the accessibility shortcuts: | ||
- Settings > Accessibility > Advanced settings > Accessibility button > Select Actions | ||
- Choose at least : "TalkBack" and "Voice Access". | ||
|
||
**Then choose how you want to access these options: either from the navigation bar or from a floating button. We advise to use the navigation bar, which is more discreet**. | ||
|
||
![](https://github.com/user-attachments/assets/04773a89-c143-402e-9bf5-d85fd55137b9) | ||
|
||
|
||
|
||
|
||
## Getting started with accessibility options | ||
|
||
### TalkBack | ||
Navigating with the screen reader is not always easy when you are starting, but a few simple basic gestures allow you to navigate within an application. | ||
|
||
A detailed description of these actions is available on the following page: https://a11y-guidelines.orange.com/en/mobile/android/talkback/ | ||
|
||
By using TalkBack, you can verify that all the essential information for understanding and navigation is rendered by the screen reader, including: | ||
- interactive elements (buttons, links, checkboxes, etc.), | ||
- the status of the elements (checked or not, selected or not, unfolded or not, etc.), | ||
- the page titles must be read to allow users to be informed of a screen change and understand the context, | ||
- content changes or temporary messages must also be read (alerts, errors, messages, etc.), | ||
- the consistency between VoiceOver reading order and the visual order of information presentation. | ||
|
||
|
||
### Keyboard navigation | ||
It is possible to use your phone only with an external keyboard. | ||
1. Connect a keyboard to the phone. | ||
2. Now, all features available by touch gestures should also be operable with the keyboard. | ||
Navigating is similar to a desktop keyboard, ```TAB``` key to move forward, ```SHIFT+TAB``` to go back, ```SPACE``` or ```ENTER``` to activate an element. | ||
|
||
Combinations are also specific to the Android mobile environment: | ||
|
||
![Shortcuts examples: CMD+ENTER for Home, CMD+DEL for Back, ALT+TAB for Recents, ALT+F4 to close the current application, CMD+/ to access keyboard shortcuts.](https://github.com/user-attachments/assets/99bccc16-b3fb-4af8-b8c2-6e712b4367eb) | ||
|
||
|
||
|
||
3. Keyboard navigation also allows you to check that the navigation order is consistent. | ||
|
||
|
||
### Voice Access | ||
When "Voice Access" is enabled, you can say commands like: | ||
- "Go home " | ||
- "Tap *item name*" | ||
- "Open *app name*" | ||
- "Turn volume up" | ||
|
||
Once Voice Access has been activated, say "show labels", which will display the accessible name assigned to components without a visible label. For an application to be controllable in this way, the interactive components must have a simple and consistent accessible name (in particular in the case of a link image or button image without a visible label). | ||
|
||
![](https://github.com/user-attachments/assets/6e28c394-bcdb-4937-9f37-083327e0208a) | ||
|
||
|
||
### Font size | ||
1. Increase the text size from the menu Settings > Display > Font size and style | ||
|
||
![](https://github.com/user-attachments/assets/759344d4-c227-4401-8dd9-bb75e756aa2d) | ||
|
||
|
||
2. Maximum font size corresponds to a 200% zoom. | ||
|
||
3. If the application has been designed to support enlargement (Dynamic Type), then the texts will be correctly rendered, readable, and without loss of information (no truncated text or superposition). | ||
|
||
![](https://github.com/user-attachments/assets/aaadf571-bb66-4455-9525-bd21df31bacc) ![](https://github.com/user-attachments/assets/bac1f246-faeb-4cfc-b5df-4084c530d4e2) | ||
|
||
|
||
### Dark mode | ||
As the dark mode is used more and more, so it's strongly recommended to test your application by activating 'dark mode'. | ||
|
||
1. Go to Settings > Display (or directly from Control Centre). | ||
|
||
![](https://github.com/user-attachments/assets/45cea752-8ea2-4be5-ad36-d22f587fb204) | ||
|
||
2. Check that all texts and components are visible and meet the expected contrast levels. | ||
|
||
![](https://github.com/user-attachments/assets/0b910a56-9461-4512-8d42-9b19336b3757) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
--- | ||
title: "Tester l'accessibilité d'une application Android" | ||
abstract: "Description des principaux outils et méthodes de tests pour évaluer rapidement l'accessibilité d'une application Android" | ||
titleBeforeTag: true | ||
date: "2024-10-15" | ||
tags: | ||
- mobile | ||
- beginner | ||
--- | ||
|
||
## Présentation et paramétrage des options d'accessibilité | ||
|
||
### Présentation des principales options | ||
- **TalkBack** : c'est le lecteur d'écran pour tous les appareils Android. Il permet de vocaliser toutes les informations (utiles) présentes à l'écran. Outil indispensable pour les non-voyants et mal-voyants. | ||
- **Navigation clavier** : permet d'utiliser son téléphone à partir d'un clavier externe (généralement en Bluetooth), utile pour les personnes ayant des difficultés à utiliser l'écran tactile. | ||
- **Voice Access** : option pour piloter son téléphone entièrement à la voix. Indispensable pour les personnes ne pouvant pas interagir physiquement avec le device ou avec un contacteur externe. | ||
- **Taille de police** : permet d'ajuster la taille des polices de caractères dans les applications qui gèrent cette option. | ||
|
||
|
||
### Paramétrage des raccourcis d'accessibilité | ||
En premier lieu, il est nécessaire d'installer certains outils depuis le Play Store Google : | ||
- Outils d'accessibilité Android (installera TalkBack et des outils supplémentaires) | ||
- Voice Access | ||
|
||
Pour plus de facilité, il est recommandé d'ajouter les outils indispensables dans les raccourcis d'accessibilité : | ||
- Paramètres > Accessibilité > Paramètres avancés > Touche Accessibilité > Sélectionner des actions | ||
- Choisir à minima: "TalkBack" et "Voice Access". | ||
|
||
**Choisir ensuite le moyen d'accéder à ces options : soit depuis la barre de navigation soit depuis une touche flottante. Nous vous conseillons d'utliser la barre de navigation qui reste plus discrète** | ||
|
||
![](https://github.com/user-attachments/assets/a6de7363-aa83-419c-a549-ed84c87bd10a) | ||
|
||
|
||
|
||
## Prise en main des options d'accessibilité | ||
|
||
### TalkBack | ||
La navigation à l'aide du lecteur d'écran n'est pas toujours aisée quand on débute, mais quelques gestes de base assez simples permettent de naviguer dans une application. | ||
|
||
La description détaillée de ces gestes est disponible sur la page suivante : https://a11y-guidelines.orange.com/fr/mobile/android/talkback/ | ||
|
||
En utilisant TalkBack, vous pourrez vérifier que toutes les informations indispensables à la compréhension et à la navigation sont restituées par le lecteur d'écran, notamment : | ||
- les éléments interactifs (boutons, liens, cases à cocher...), | ||
- l'état des éléments (coché ou non, sélectionné ou non, déplié ou non...), | ||
- les titres des pages doivent être restitués pour permettre aux utilisateurs de s'assurer d'un changement de page et d'en comprendre le contexte, | ||
- les changements de contenus ou messages temporaires doivent également être lus (alertes, erreurs, changement de contenu...), | ||
- l'ordre de lecture est cohérent par rapport à la présentation de l'information. | ||
|
||
|
||
### Navigation clavier | ||
Il est possible d'utiliser son téléphone seulement avec un clavier externe. | ||
1. Connecter un clavier au téléphone | ||
2. A présent, toutes les fonctionnalités disponibles par gestes tactiles doivent l'être également à l'aide du clavier. | ||
La navigation se fait de la même manière que pour un clavier sur desktop, touche ```TAB``` pour avancer, ```SHIFT+TAB``` pour reculer, ```ESPACE``` ou ```ENTREE``` pour activer un élément. | ||
|
||
Des combinaisons sont également spécifiques à l'environnement mobile Android : | ||
|
||
![Exemples de raccourcis : CMD+ENTREE pour l'accueil, CMD+SUPPR pour retour, ALT+TAB pour récents, ALT+F4 pour fermer l'application en cours, CMD+! pour accéder aux raccourcis clavier](https://github.com/user-attachments/assets/46a81d5a-5dcb-4232-a206-8baf39366eb0) | ||
|
||
|
||
3. La navigation clavier permet également de vérifier que l'ordre de navigation est respecté. | ||
|
||
|
||
### Voice Access | ||
Lorsque « Voice Access » est activé, vous pouvez énoncer des commandes comme : | ||
- « Retourner à l'écran d'accueil» | ||
- « Appuyer sur *nom de l'élément* » | ||
- « Ouvrir *nom de l'app* » | ||
- « Monter le volume » | ||
|
||
Une fois Voice Access activé, dites "afficher les libellés", ce qui affichera le nom accessible attribué aux composants sans étiquette visible. Pour qu'une application soit pilotable de la sorte, il faut que les composants interactifs aient un nom accessible simple et cohérent (en particulier dans le cas d'une image-lien ou image-bouton sans libellé visible). | ||
|
||
![](https://github.com/user-attachments/assets/7ba3b950-435d-49a5-8df9-4420b47486d9) | ||
|
||
### Taille de police | ||
1. Agrandir la police de caractères à partir du menu Paramètres > Écran > Taille et style de police | ||
|
||
![](https://github.com/user-attachments/assets/959c0d70-5516-4f74-a78c-9f6e0bd8e17e) | ||
|
||
2. L'agrandissement maximal correspond à un zoom de 200% | ||
|
||
3. Si l'application a été prévue pour supporter l'agrandissement, alors les textes seront correctement restitués, lisibles et sans perte d'information (pas de texte tronqué ni de superposition) | ||
|
||
![](https://github.com/user-attachments/assets/7cdc7cc8-0969-4c57-b096-409dbff8a63b) ![](https://github.com/user-attachments/assets/17375194-f66f-4515-9eb6-e20e7ec4cef5) | ||
|
||
|
||
### Mode sombre | ||
Le mode sombre est de plus en plus utilisé par les utilisateurs, il est donc fortement recommandé de tester son application en activant le "dark mode" | ||
|
||
1. Aller dans Paramètres > Ecran (ou directement depuis le centre de contrôle) | ||
|
||
![](https://github.com/user-attachments/assets/f49f847e-7d9f-4381-816a-55351d6590d5) | ||
|
||
|
||
2. Vérifier que tous les textes et composants sont bien visibles et respectent les niveaux de contrastes attendus. | ||
|
||
![](https://github.com/user-attachments/assets/0b910a56-9461-4512-8d42-9b19336b3757) |