Navigation par onglets accessible sous Android

Cet article a été rédigé conjointement par Chris McMeeking et Melinda Kothbauer.

Les TabWidgets constituent un outil permettant d’ajouter des fonctionnalités très utiles à vos applications mobiles Android ; cependant, ils ne sont pas accessibles par défaut. La norme WCAG 4.1.2 stipule que tous les composants de l’interface utilisateur doivent disposer d’un nom, d’un rôle et d’une valeur afin de garantir que les utilisateurs de technologies d’assistance disposent des informations nécessaires pour naviguer efficacement dans les écrans. Cela vaut tout particulièrement pour les TabWidgets sous Android, car ils ne sont pas accessibles sans ces éléments. Afin de rendre les TabWidgets accessibles, les développeurs doivent effectuer certaines personnalisations au niveau du code. Cet article de blog abordera les points suivants :

Pourquoi les TabWidgets sont-ils si compliqués ?
Comment rendre les TabWidgets accessibles
Mise en œuvre de TabWidgets accessibles
Bonnes pratiques pour les TabWidgets

Cette discussion fait référence à notre application open source. Veuillez l'installer sur votre appareil et activer TalkBack. Vous pouvez également trouver notre application sur le Google Play Store, mais la version disponible peut être antérieure à celle mentionnée dans le dépôt open source. L'application open source est la référence à privilégier. Avant de continuer, repérez la section « Navigation par onglets » dans le menu principal, puis accédez à l'onglet défectueux. La discussion suivante portera à la fois sur l'affichage de l'onglet défectueux et sur celui de l'onglet corrigé.

Pourquoi les TabWidgets sont-ils si compliqués ?

Lorsqu’un onglet est mis en surbrillance à l’aide de TalkBack sous Android, l’annonce par défaut se limite au texte (le cas échéant) contenu dans l’onglet actuel. Elle n’indique pas l’état de l’onglet (s’il est sélectionné ou non), ni sa position dans l’ensemble du TabWidget (par exemple, onglet n° de #). Elle ne précise pas non plus sa fonction, à savoir qu’il s’agit d’un onglet. Essayez sur la page « défectueuse » : tout ce qui est annoncé, c’est « Chat », « Chien » ou « Poisson ». Un utilisateur malvoyant ne serait pas en mesure de savoir que l’élément mis en surbrillance est un onglet. Rien n’indique que la vue mise en surbrillance possède la moindre fonctionnalité. Pour un utilisateur de TalkBack, il n’y a aucune différence entre ce TabWidget et un TextView. Ce comportement signifie que les TabWidgets par défaut enfreignent les critères de succès des WCAG 2.0.

Comment rendre les TabWidgets accessibles

Afin de créer une application accessible tout en continuant à exploiter les fonctionnalités de TabWidget, les développeurs d’ Deque ont créé une mise en page TabWidget personnalisée, qui étend une classe LinearLayout, destinée à remplacer le TabWidget par défaut d’Android. Elle implémente les attributs « name », « role » et « value » évoqués précédemment en redéfinissant les valeurs par défaut d’Android getContentDescription méthode, qui permet à TalkBack de récupérer les informations à lire à voix haute, et la mise en œuvre d'une méthode appelée findContentDescription pour récupérer le texte approprié s'il n'y a pas de description du contenu.

`getContentDescription` Méthode

[code language="java"]
@Override
public CharSequence getContentDescription() {

final TabWidget tabWidget = mTabHost.getTabWidget();
final View view = tabWidget.getChildTabViewAt(mTabHost.getCurrentTab());
final int tabCount = tabWidget.getTabCount();
int tabNumber;

for (tabNumber = 0; tabNumber < tabCount; tabNumber++) {
if (this == tabWidget.getChildTabViewAt(tabNumber)) break;
}

CharSequence contentDescription = findContentDescription(this);

if (view == this) {
contentDescription = contentDescription + ", selected";
}

contentDescription = contentDescription + ", onglet " + (tabNumber + 1) + " sur " + tabCount;

return contentDescription;
}
[/code]

Remarquez aux lignes 16 et 19 que nous remplaçons la description du contenu pour y inclure des informations essentielles (rôle et valeur). Le findContentDescription La méthode de la ligne 13 est une méthode personnalisée dont le code figure ci-dessous.

`findContentDescription` Méthode

[code language="java"]
private CharSequence findContentDescription(View view) {

if (view == null) return null;

CharSequence contentDescription = null ;

if (TextView.class.isInstance(view)) {
TextView textView = (TextView)view;

contentDescription = textView.getText();
}

if (contentDescription != null) return contentDescription;

if (ViewGroup.class.isInstance(view)) {
ViewGroup viewGroup = (ViewGroup)view;

for (int i = 0; i < viewGroup.getChildCount(); i++) {
contentDescription = findContentDescription(viewGroup.getChildAt(i));

if (contentDescription != null) return contentDescription;
}
}

return null;
}
[/code]

Mise en œuvre de TabWidgets accessibles

Une fois que vous avez créé une classe de mise en page TabWidget personnalisée, sa mise en œuvre est relativement simple. Là où vous utiliseriez normalement une autre mise en page pour votre widget d'onglets dans le code, il vous suffit de la remplacer par votre classe de mise en page TabWidget personnalisée. Cela se produit généralement lors de la configuration de votre hôte d'onglets ou de votre widget d'onglets. Vous trouverez un exemple ci-dessous.

Avant

[code language="java"]
mTabHost.addTab(mTabHost.newTabSpec("tab1").setContent(R.id.tab1).setIndicator(getTabIndicator(mTabHost.getContext(), R.string.aac_tab_nav_cat_tab_title)));

private View getTabIndicator(Context context, int title) {
View view = LayoutInflater.from(context).inflate(R.layout.tab_nav_story_tab_layout_broken, null);
TextView tv = (TextView) view.findViewById(R.id.aac_tab_nav_tab_title);
tv.setText(title);
return view;
}
[/code]

Après

[code language="java"]
mTabHost.addTab(mTabHost.newTabSpec("tab1").setContent(R.id.tab1).setIndicator(createTabIndicator(mTabHost.getContext(), R.string.aac_tab_nav_cat_tab_title)));

private View createTabIndicator(Context context, int title) {
TabLayout view = (TabLayout) LayoutInflater.from(context).inflate(R.layout.tab_nav_story_tab_layout_fixed, null);
view.setTabHost(mTabHost);
TextView tv = (TextView) view.findViewById(R.id.aac_tab_nav_tab_title);
tv.setText(title);
return view;
}
[/code]

Bonnes pratiques

Par défaut, les TabWidgets ne sont pas accessibles sous Android. Pour les rendre accessibles, il faut les personnaliser en y ajoutant leur nom, leur rôle, leur valeur et leur état, afin de garantir que les utilisateurs de TalkBack disposent de toutes les informations nécessaires pour naviguer sur l’écran. Cela signifie que la description du contenu de l’onglet doit être mise à jour par programmation pour indiquer qu’il s’agit d’un onglet, préciser s’il est sélectionné ou non, indiquer de quel onglet il s’agit parmi combien d’autres, tout en incluant le texte affiché dans l’onglet. La méthode « Deque » n’est pas la seule façon de procéder, mais elle est efficace et relativement simple.

Conseils

N'utilisez pas le widget « TabWidget » par défaut d'Android, car il n'est pas accessible. Utilisez plutôt une technique comme celle décrite sur Dequeet créez une disposition d'onglets personnalisée qui attribue de manière dynamique et appropriée les informations nécessaires à chaque onglet.
Testez vos barres d'onglets à l'aide de TalkBack pour vous assurer qu'elles annoncent bien ce que vous attendez. Effectuez également des tests sur différents appareils afin de vous assurer que vous ne passez pas à côté de problèmes spécifiques à certains appareils ou à certaines versions.

Nous espérons que ce tutoriel vous aura été utile. Découvrez notre application Android pour accéder à d'autres tutoriels et démonstrations sur l'accessibilité !