TransparentContainer

TransparentContainer und Barrierefreiheit

Das Vorlesen durch Screenreader im Rahmen der Barrierefreiheit ist nur sinnvoll, wenn

TransparentContainer.isLayoutContainer = false.

Der Text für die Barrierefreiheit wird bei einem TransparentContainer aus den Werten, die für die Eigenschaften tooltip und accessibilityDescription des TransparentContainer definiert sind ermittelt.

• Wenn die unter 1. genannten Eigenschaften nicht gesetzt sind, dann wird für die Barrierefreiheit der Text der Werte für die Eigenschaften tooltip und text des UI-Elements SectionHeader verwendet.

• Wenn weder die unter 1. noch die unter 2. genannten Eigenschaften gesetzt sind, wird für die Barrierefreiheit der Text der Werte für die Eigenschaften tooltip und text des Label-UI-Elements verwendet, das zu dem TransparentContainer gehört.

TransparentContainer und SectionHeader

Um die Überschrift eines TransparentContainer von einem Screenreader vorlesen zu lassen, setzen Sie TransparentContainer.isLayoutContainer = false. Dies bedeutet, dass der TransparentContainer selbst semantische Informationen enthält.

Zusätzlich verwenden Sie im TransparentContainer einen SectionHeader.

Use Cases

TransparentContainer als Layout für ein Formular

Sie können den TransparentContainer als gruppierendes Element für ein Formular verwenden, indem Sie als Titel den SectionHeader einfügen und darunter weitere UI-Elemente.

Zusätzlich legen Sie folgendes fest: TransparentContainer.isLayoutContainer = false. Damit definieren Sie, dass der TransparentContainer an sich wichtig ist und semantische Bedeutung hat.

Wenn Sie das TransparentContainer-Element unter dem Aspekt der Barrierefreiheit als gruppierenden Container verwenden, dann können Sie den Titel dieser Gruppe folgendermaßen vergeben:

1. Wenn es keinen sichtbaren Gruppentitel geben soll, dann setzen Sie Werte für TransparentContainer.accessibilityDescription und TransparentContainer.tooltip.

2. Mit dem SectionHeader-Element als sichtbaren Gruppentitel, das dann die Eigenschaft accessibilityDescription ersetzt bzw. repräsentiert.

In den diskutierten Fällen gehen Sie wie nachfolgend vor:

Gruppieren ohne Titel

Setzen Sie die Eigenschaft isLayoutContainer=false.

Stellen Sie einen Text, der den Gruppentitel repräsentiert, in der Eigenschaft accessibilityDescription zur Verfügung.

Gruppieren mit Titel

1. Verwenden Sie das Element SectionHeader als Titel für das TransparentContainer-Element.

2. Verwenden Sie die Eigenschaft labeledBy, um das TransparentContainer-Element mit dem Element SectionHeader zu verbinden.

Der Text und der Tooltip des SectionHeader-Elements werden automatisch als accessibilityDescription des TransparentContainer-Elements ausgegeben, falls dessen accessibilityDescription und tooltip leer sind.

TransparentContainer als Melting-Group-ähnliches UI-Element

Sie können einen TransparentContainer als Klammer verwenden, um festzulegen, dass mehrere Felder inhaltlich zusammengehören, z.B. bei Währungsangaben.

Ein TransparentContainer wird zu einem Melting-Group-artigen UI Element, falls folgende Bedingungen erfüllt sind:

1. keine Schachtelung weiterer Container im TransparentContainer

   Im TransparentContainer sollten nur UI-Elemente wie InputFields, DropDown-Listen, TextViews, etc. angeordnet sein

2. die Eigenschaft isLayoutContainer muss auf FALSE gesetzt werden

   Da der TransparentContainer inhaltlich zusammengehörige Felder verbindet müssen Sie hier festlegen, dass TransparentContainer.isLayoutContainer = FALSE.

3. es sollte ein Label mit Property islabelFor = <D des TransparentContainer> geben

   Sie setzen den Label vor den TransparentContainer. Der Label muss auf den TransparentContainer verweisen. Die entsprechenden Eigenschaften des Label werden dann für die Barrierefreiheit-Texte verwendet.

   Beispiel

   Beispiel zum barrierefreien Gruppieren:

   Wenn Sie beispielsweise einen Prüftext in einem TextView-Element hinter einem InputField-Element ausgeben möchten, verwenden Sie ein TransparentContainer-Element mit MatrixLayout (kein FlowLayout!), um das InputField-Element und dessen nachfolgenden Text zu gruppieren. Um das Ganze im Rahmen des bislang Gesagten barrierefrei zu machen, binden Sie noch ein Label an das TransparentContainer-Element (mit der Eigenschaft labelFor) und geben dem Feld und dem Prüftext noch einen zusätzlichen Tooltip. Der Tooltip wäre im Fall des Feldes hier optional, aber beim TextView-Element unbedingt erforderlich.

TransparentContainer nur für Layouting-Zwecke

In diesem Fall verwenden sie den TransparentContainer lediglich für reines Layouting.

Zusätzlich legen Sie fest, dass TransparentContainer.isLayoutContainer = true. Der Screenreader liest die Eigenschaft accessibilityDescription in diesem Fall nicht vor

Ordnen Sie bei der Verwendung als Layoutcontainer die Elemente so an, dass sich keine unerwarteten Verschiebungen der Tabulatorsequenz ergeben. Mit anderen Worten: Schachteln Sie TransparentContainer stets so, dass die Tabulatorsequenz nicht zwischen verschiedenen Gruppierungen hin- und herspringt.

Implementierungsdetails

Eigenschaften im View Designer

Aggregationen im View Designer

Dynamische Programmierung

Für die dynamische Programmierung stehen dieselben Eigenschaften, Ereignisse und Aggregationen zur Verfügung wie im View Designer. Beachten Sie dabei die unterschiedlichen Schreibweisen.

Dynamische Programmierung der Eigenschaften