Windows Dev Center

Verfügbarmachen der logischen Struktur einer Windows-Runtime-App

Logische Struktur in HTML

Durch eine geeignete Auszeichnung von Struktur- und Orientierungselementen für die Barrierefreiheit kann die Sprachausgabe eine Seitenzusammenfassung oder ein Inhaltsverzeichnis erstellen. Mit diesen Informationen kann der Benutzer den Seiteninhalt besser verstehen und leichter auf der Seite navigieren.

Im Allgemeinen sollten Sie den gesamten Seiteninhalt in logische Bereiche und optionale Unterbereiche aufteilen und jeden Bereich und Unterbereich mit einer entsprechenden Orientierungsrolle und einem barrierefreien Namen kennzeichnen. Insbesondere sollte jede Seite mindestens einen mit role="main" gekennzeichneten Bereich enthalten, der den Hauptinhalt der Seite darstellt. "navigation" und "search" sind ebenfalls wichtige Orientierungsrollen. Hiermit sollten Bereiche mit Navigations- bzw. Suchfunktion gekennzeichnet werden. Weitere Beispiele für Orientierungsrollen zum Kennzeichnen von Seiteninhalten sind "banner", "contentinfo" und "complementary".

Wenn Ihre App Bereiche enthält, die keiner vorhandenen Orientierungsrolle entsprechen, kennzeichnen Sie die Bereiche mit der Strukturrolle "region". Abschließend sollten Sie alle HTML-Formulare, Frames und iframe-Elemente mit barrierefreien Namen versehen.

Beim Festlegen von Bezeichnungen für Bereiche empfiehlt es sich, mit dem aria-labelledby-Attribut auf sichtbaren Text zu verweisen, der als Bereichsbezeichnung verwendet werden soll. Verwenden Sie möglichst ein HTML-Headerelement als Bezeichner für einen Bereich, entweder mit einem <h1>-Überschriftentag wie <h2>, <h3> oder role="header" oder durch Kennzeichnen von Verweistext mit aria-level und dem entsprechenden -Attribut. Wenn kein sichtbarer Text als Bereichsbezeichner verwendet werden kann, legen Sie den barrierefreien Namen mit dem aria-label-Attribut oder dem title-Attribut fest (normalerweise bei Frames und iframe-Elementen). In einigen Fällen kann ein Bereich auch über eine zusätzliche Beschreibung verfügen, die mit einem aria-describedby-Attribut gekennzeichnet wird. Weitere Informationen finden Sie unter Navigation anhand von Orientierungspunkten (Widget) in der Dokumentation des World Wide Web Consortium (W3C).


<div id="title" role="banner" aria-labelledby="label_title">
    <a href="..."><img class="logo" alt="Home Page" src="..." /></a>
    <h1 id="label_title">...</h1> 
  </div>    

  <div id="nav1" >
    <h2 class="nav" id="nav1_label">...</h2>
    <ul id="navigation1" role="navigation" aria-labelledby="nav1_label">
      <li><a href="...">...</a></li>
      <li><a href="...">...</a></li>
      <li><a href="...">...</a></li>
    </ul>
  </div>

  <form id="search" ...>
    <div role="search" aria-labelledby="search_box">
      <label for="search_box">Search for ...</label>
      <input type="text" id="search_box" >
      <input type="submit" value="Search">
    </div>
  </form>

  <div id="contact-info" role="complementary" aria-labelledby="contact_label">
    <h4 id="contact_label">contact info</h4>
  </div>
	
  <div id="content-col-1" role="main" aria-labelledby="main_label"> 
    <h1 id="main_label">Welcome to ...</h1>  
    ...
  </div>

  <div id="copyright" role="contentinfo">Copyright ...</div>

Logische Struktur in XAML

Eine XAML-Benutzeroberfläche verfügt nicht über das direkte Äquivalent des XHTML-role-Attributs und -Vokabulars, das bei allgemeinen UI-Elementen zum Herstellen einer logischen Struktur verwendet wird. XAML bietet eine direktere Unterstützung der Microsoft-UI-Automatisierung, bei der Steuerelementtypen zum Beschreiben von Elementen in der Benutzeroberfläche genutzt werden. Jedes in einer XAML-Benutzeroberfläche verwendete Steuerelement oder Element meldet seinen Steuerelementtyp dem Steuerelement der UI-Automatisierung oder der Inhaltsstruktur. Eine rein semantische Markierung wie beispielsweise die "komplementäre" Markierung entspricht der UI-Automatisierung jedoch nicht und wird in einer XAML-Benutzeroberfläche nicht verwendet. Siehe Zuordnen von ARIA-Rollen zur UI-Automatisierung.

Verwandte Themen

Implementieren der Barrierefreiheit für bestimmte Inhaltstypen

 

 

Anzeigen:
© 2015 Microsoft