Barrierefreie Navigation mit Registerkarten unter Android

Dieser Beitrag wurde gemeinsam von Chris McMeeking und Melinda Kothbauer verfasst.

TabWidgets sind ein Werkzeug, mit dem Sie Ihre mobilen Android-Apps um großartige Funktionen erweitern können; standardmäßig sind sie jedoch nicht barrierefrei. WCAG 4.1.2 schreibt vor, dass alle Komponenten der Benutzeroberfläche über einen Namen, eine Rolle und einen Wert verfügen müssen, um sicherzustellen, dass Nutzer von assistiver Technologie über die notwendigen Informationen verfügen, um effektiv durch die Bildschirme zu navigieren. Dies gilt insbesondere für TabWidgets in Android, da sie andernfalls nicht barrierefrei sind. Um TabWidgets barrierefrei zu gestalten, müssen Entwickler einige programmatische Anpassungen vornehmen. Dieser Blogbeitrag konzentriert sich auf:

Warum TabWidgets schwierig sind
So machen Sie TabWidgets barrierefrei
Barrierefreie TabWidgets implementieren
Bewährte Vorgehensweisen für TabWidgets

Diese Diskussion bezieht sich auf unsere Open-Source-App. Bitte richten Sie diese auf Ihrem Gerät ein und aktivieren Sie TalkBack. Sie finden unsere App auch im Google Play Store, allerdings kann es sein, dass die dort veröffentlichte Version hinter der im Open-Source-Repository genannten Version zurückbleibt. Die Open-Source-App ist die bevorzugte Referenz. Bevor Sie fortfahren, suchen Sie im Hauptmenü den Abschnitt „Tabbed Navigation“ und navigieren Sie zu dem fehlerhaften Reiter. Die folgende Erläuterung bezieht sich sowohl auf die Ansicht des fehlerhaften Reiters als auch auf die Ansicht des korrigierten Reiters.

Warum sind TabWidgets so schwierig?

Wenn eine Registerkarte mit TalkBack unter Android markiert wird, wird standardmäßig nur der Text (sofern vorhanden) der aktuellen Registerkarte angesagt. Der Status der Registerkarte – ob sie ausgewählt ist oder nicht – wird nicht angesagt, ebenso wenig wie die Position der aktuellen Registerkarte innerhalb des gesamten TabWidgets (z. B. Registerkarte Nr. von #). Auch ihre Rolle – dass es sich um eine Registerkarte handelt – wird nicht angesagt. Probieren Sie es auf der „defekten“ Seite aus – es wird lediglich „Katze“, „Hund“ oder „Fisch“ angesagt. Ein blinder Nutzer könnte nicht erkennen, dass es sich bei dem markierten Element um eine Registerkarte handelt. Nichts deutet darauf hin, dass die markierte Ansicht irgendeine Funktionalität besitzt. Für einen TalkBack-Nutzer gibt es keinen Unterschied zwischen diesem TabWidget und einem TextView. Dieses Verhalten bedeutet, dass Standard-TabWidgets gegen die Erfolgskriterien der WCAG 2.0 verstoßen.

So machen Sie TabWidgets barrierefrei

Um eine barrierefreie Anwendung zu erstellen, die dennoch die Funktionen des TabWidgets nutzt, haben die Entwickler von „ Deque “ ein benutzerdefiniertes TabWidget-Layout erstellt, das auf einem LinearLayout basiert und anstelle des standardmäßigen Android-TabWidgets verwendet wird. Es implementiert die zuvor besprochenen Attribute „name“, „role“ und „value“, indem es die Standardwerte von Android überschreibt. getContentDescription Methode, über die TalkBack die anzukündigenden Informationen abruft, sowie die Implementierung einer Methode namens findContentDescription um den passenden Text zu erhalten, falls keine Inhaltsbeschreibung vorhanden ist.

`getContentDescription` Verfahren

[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 + ", Registerkarte " + (tabNumber + 1) + " von " + tabCount;

return contentDescription;
}
[/code]

Beachten Sie in den Zeilen 16 und 19, dass wir die Inhaltsbeschreibung überschreiben, um wichtige Informationen (Rolle und Wert) hinzuzufügen. Die findContentDescription Die Methode in Zeile 13 ist eine benutzerdefinierte Methode, deren Code unten zu finden ist.

`findContentDescription` Verfahren

[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]

Barrierefreie TabWidgets implementieren

Sobald Sie eine benutzerdefinierte TabWidget-Layoutklasse erstellt haben, ist deren Implementierung relativ einfach. An den Stellen, an denen Sie im Code normalerweise ein anderes Layout für Ihr Tab-Widget verwenden würden, ersetzen Sie dieses einfach durch Ihre benutzerdefinierte TabWidget-Layoutklasse. Dies ist typischerweise beim Einrichten Ihres Tab-Hosts bzw. Tab-Widgets der Fall. Ein Beispiel finden Sie weiter unten.

Vorher

[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]

Danach

[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]

Bewährte Verfahren

Standardmäßig sind TabWidgets unter Android nicht barrierefrei. Um sie barrierefrei zu gestalten, müssen sie so angepasst werden, dass ihr Name, ihre Rolle, ihr Wert und ihr Status hinzugefügt werden, damit TalkBack-Nutzer über alle Informationen verfügen, die sie zur Navigation auf dem Bildschirm benötigen. Das bedeutet, dass die Inhaltsbeschreibung des Tabs programmgesteuert aktualisiert werden muss, um anzugeben, dass es sich um einen Tab handelt, ob er ausgewählt ist oder nicht, um welchen von insgesamt wie vielen Tabs es sich handelt, und dabei auch den im Tab angezeigten Text zu berücksichtigen. Der „ Deque “-Ansatz ist nicht die einzige Möglichkeit, dies zu erreichen, aber er ist effektiv und relativ einfach.

Tipps

Verwenden Sie nicht das standardmäßige Android-TabWidget – dieses ist nicht barrierefrei. Nutzen Sie stattdessen eine Methode wie die unter Dequebeschriebene und erstellen Sie ein benutzerdefiniertes Tab-Layout, das die erforderlichen Informationen dynamisch den einzelnen Tabs zuordnet.
Testen Sie Ihre Tab-Leisten mit TalkBack, um sicherzustellen, dass die Ansagen Ihren Erwartungen entsprechen. Testen Sie außerdem auf verschiedenen Geräten, um sicherzustellen, dass Sie keine geräte- oder versionsspezifischen Probleme übersehen.

Wir hoffen, dass Ihnen dieses Tutorial weitergeholfen hat. Schauen Sie sich unsere Android-App an, um weitere Tutorials und Demos zum Thema Barrierefreiheit zu entdecken!