Überschriftsebenen in Konstruktionssystemen verwalten

Eine Sache, die mir bei Recherchen, Tests und alltäglichen Gesprächen mit Kollegen und Freunden immer wieder auffällt, ist, wie wichtig Überschriften sind. Für Benutzer von Bildschirmleseprogrammen beschreiben Überschriften die Beziehungen zwischen Abschnitten und Unterabschnitten und stellen bei richtiger Verwendung sowohl eine Gliederung als auch ein Navigationsmittel bereit. Überschriften sind Infrastruktur.

Das Anwenden der richtigen Überschriftenebene ist eine Frage des Kontexts. Beispielsweise beschreiben zwei aufeinanderfolgende Überschriften derselben Ebene zwei gleichgeordnete Abschnitte in der Dokumentgliederung. Wenn sich die zweite der aufeinanderfolgenden Überschriften auf einer höheren Ebene befindet, wird ein Unterabschnitt beschrieben, der zum Abschnitt der ersten Überschrift gehört.

alt text = im Bild gibt es zwei Kästchen nacheinander, die als Geschwister der Stufe h2 gekennzeichnet sind. Im zweiten Feld befindet sich ein drittes Feld, das als Unterabschnitt der Stufe h3 gekennzeichnet ist.

HTML5 versprach, diese Beziehungen zu automatisieren, indem der Verschachtelungsalgorithmus auf

s (oder andere Schnittelemente) verschoben wird. Die Idee war, dass durch buchstäbliches Verschachteln der übergeordneten
-Elemente im DOM deren Überschriftenebenen im Eingabehilfenbaum kostenlos angepasst werden. (Der Eingabehilfenbaum ist die Interpretation des DOM, das an Software wie Bildschirmlesegeräte übermittelt wird.)

  

Abschnittsüberschrift   
    ` für Screenreader ->     

Unterabschnittsüberschrift   

Leider hat bisher kein großer Browser-Anbieter diesen sogenannten "Document Outline Algorithmus" sinnvoll implementiert. Wenn der Browser es nicht anzeigt, können Bildschirmleser es nicht kommunizieren. Das letzte Codebeispiel würde einfach nicht funktionieren.

Diejenigen von uns, die an der Erstellung barrierefreier Dokumentgliederungen interessiert sind, können daher keine Überschriftenebenen (

bis

) auswählen, unabhängig davon, welche wir verwenden.

  

Abschnittsüberschrift   
    

Unterabschnittsüberschrift   

Dies stellt ein besonderes Problem dar, wenn Musterbibliotheken für Entwurfssysteme entwickelt werden. Während einzelne Muster / Komponenten innerhalb eines Entwurfssystems Überschriften verwenden können und sollten, ist es schwierig zu wissen, welche Überschriftenebenen sie einnehmen sollten. Als isolierte Module innerhalb einer Musterbibliothek ist der Kontext der Komponente innerhalb einer Seite unbestimmt. Für wiederverwendbare Komponenten ändert sich der Kontext zusammen mit der erforderlichen Ebene.

alt text = Im Bild wird angezeigt, dass eine Komponente in verschiedenen Kontexten einer Seite wiederverwendbar ist. Je nach Kontext müsste die Komponente eine Überschriftenebene h2 oder h3 haben.

Die Level-Requisite

Mit APIs wie Reacts und Vues können wir Eigenschaften (oder Requisiten) für unsere Komponenten bei der Instantiierung manuell einfügen. Damit können wir bestimmte Einstellungen auf die Instanz der Komponente anwenden, um sie intern zu verwenden.

Durch die Unterstützung einer Level-Requisite können Autoren die Überschriftenebene der Komponente zum Zeitpunkt der Instanziierung anpassen, wenn sie den umgebenden Kontext kennen. So würde es auf die äußere Komponente angewendet:

 

Intern müssen wir die vorgeschriebene Stufe verwenden, um die Hauptüberschrift der Komponente zu erweitern. Hierfür gibt es verschiedene Möglichkeiten. Der erste Weg wäre, eine Logik zu verwenden, die das richtige Überschriftenelement (

bis

) für uns auswählt. In React können wir eine Komponente als Variable verwenden:

render () {
  const H = 'h' + this.props.level;
  Rückkehr (
    
       Eine Überschrift einer bestimmten Stufe       

Lorem ipsum etc.        ); }

Dies wird schnell unhandlich, wenn eine Struktur mit mehreren Überschriften innerhalb der Komponente beibehalten wird (siehe den folgenden Abschnitt). Stattdessen können wir die Ebene des Heading-Elements in der Eingabehilfenstruktur direkt über die Eigenschaft aria-level ändern.

Zwei Dinge zu beachten:

  • Ein

    -Element wird als "sinnvoller Standard" verwendet. Alle Unterabschnitte der ersten Ebene, die der Überschrift

    der Seite folgen, gehören zur zweiten Ebene (

    ). Wenn die Ebenenstütze nicht bereitgestellt wird, wird die Arienebene nicht angewendet und die implizite zweite Ebene fungiert als Standard (der Nullwert bedeutet, dass das Attribut nicht gerendert wird).

  • Das

    hat bereits die implizite Überschriftenrolle, sodass die Verwendung von role = "heading" überflüssig wäre. Hätten wir ein
    verwendet, um unsere Überschrift zu definieren, wäre role = "heading" neben der Arienebene erforderlich. Dies wird nicht empfohlen, da die Unterstützung relativ gering ist. Zumindest dort, wo Arien-Level nicht unterstützt werden, haben wir immer noch eine Überschrift

    - auch wenn es nicht das richtige Level ist. Überschriften jeder Ebene können in Bildschirmleseprogrammen wie NVDA oder JAWS mit der Taste h navigiert werden.

Mehrere Überschriften

In einigen Fällen kann der Teilbaum, aus dem unsere Komponente besteht, mehrere Überschriften enthalten, die eine Mikrostruktur innerhalb des Dokuments beschreiben. Das harte Codieren jeder Ebene über ihre eigenen Requisiten wäre ausführlich und fehleranfällig für den Autor.


 

Stattdessen können wir dieselbe Struktur beibehalten, indem wir eine einfache Arithmetik anwenden.

Überschriftstext

Lorem ipsum.

Untertiteltext

Lorem ipsum.

Verschachtelter Untertiteltext

Lorem ipsum.

Jetzt muss der Autor zum Zeitpunkt der Instanziierung nur noch eine Ebene anwenden (falls erforderlich!) Und die gesamte Struktur verschiebt sich entsprechend. Einfach aber effektiv.

Komplette Automatisierung

Wussten Sie, dass ein -Element bereits 1991 diskutiert wurde und Überschriftenebenen so automatisieren würde, wie es der sagenumwobene „Document Outline Algorithm“ tun soll? Tatsächlich wird es immer noch diskutiert.

Wie mir die berühmte Sophie Alpert gezeigt hat, ist es mit Reacts relativ neuer Kontext-API möglich, dieses automatisierte Gliederungsverhalten zu emulieren.

Das Schöne an Context ist, dass Sie - um die Dokumente zu zitieren - „Daten durch den Komponentenbaum leiten können, ohne Requisiten auf jeder Ebene manuell übergeben zu müssen“. In der Praxis bedeutet dies, dass wir den Wert des Pegels einfach durch Verschachteln von Komponenten anpassen können.

Zuerst müssen wir den Kontext initialisieren.

const Level = React.createContext (2);

Beachten Sie die 2, mit der die Standardstufe festgelegt wird, wie in den vorherigen Beispielen. Jetzt müssen wir nur noch die Section- und H-Komponenten einrichten.

Funktionsabschnitt (Requisiten) {
  Rückkehr (
     {level =>
      
        {props.children}
      
    } 
  );
}
Funktion H (Requisiten) {
  Rückkehr (
     {level => {
      const Überschrift = 'h' + Math.min (Stufe 6);
      return <Überschrift {... Requisiten} />;
    }} 
  );
}

Der Abschnitt verwendet den Ebenenwert für diese Sammelebene (über Level.Consumer) und passt dann die Ebene für alle untergeordneten Elemente an (Ebene + 1).

Wenn ein H-Element die Kontextebene belegt, stellt Math.min sicher, dass keine Überschriften mit einer höheren Ebene als 6 gerendert werden. Ein oder würde vom Browser nicht als Überschrift interpretiert, was zu Parsing und damit zu Zugänglichkeitsmängeln führen würde.

Abgesehen von der Großschreibung (und Reagieren!) Können wir jetzt etwas strukturieren, das dem, was TimBL ursprünglich vorgestellt hatte, sehr nahe kommt:

Funktion Dokument (Requisiten) {
  Rückkehr (
    
      

Überschriftstiefe automatisieren                 Stufe 2          Geschwisterstufe 2                     Stufe 3                        Stufe 2       

Lorem ipsum dolor sit usw.        ); }

Jede Komponente, die Level.Provider und Level.Consumer verwendet, kann so konfiguriert werden, dass sie die kontextsensitive Gliederung berücksichtigt. Bei Komponenten, die Inhalte umbrechen, aber nicht als semantische Unterabschnitte betrachtet werden können, kann die Ebene einfach durchlaufen und wie sie ist wiederverwendet werden - nicht inkrementiert.

Styling

Wie Sie das Styling anwenden, hängt von Ihrer Strategie ab. In den meisten Fällen sollte die Schriftgröße der Überschrift ihre Position in der Hierarchie widerspiegeln, wobei

die größte oder bekannteste ist.

Unter Verwendung von Context erfolgt dies automatisch, indem die verschiedenen Überschriftenelemente gerendert werden. Mit der Arien-Level-Technik müssten Sie die Elemente und Attribute nach Level koppeln:

h1, [aria-level = "1"] {font-size: 3rem}
h2, [aria-level = "2"] {font-size: 2.25rem}
h3, [aria-level = "3"] {font-size: 1.75rem}
/* etc */

Wenn Sie möchten, dass das visuelle Erscheinungsbild der Überschrift der Komponente nicht vom Kontext beeinflusst wird und dennoch eine zugängliche Hierarchie beibehalten wird, können Sie eine Klasse anwenden.

 Überschriftstext 

Mit einer Bibliothek wie Styled Components erstellen Sie neue Überschriften auf der Basis der semantischen H-Komponente und formatieren sie direkt. Sie müssen nur H erweitern:

const Überschrift = H.extend`
  Schriftgröße: 2rem;
`;

Überschriften sind immer noch wichtig

Einige Webanwendungsentwickler verzichten gewöhnlich auf alles, was sie als "aus einer Ära einfacher Dokumente" betrachten. Es ist richtig, dass Überschriften aus der Tradition stammen, statische, prosaische Dokumente zu kennzeichnen, wie Sie sie möglicherweise in MS Word oder einem ähnlichen Format verfasst haben. Zu glauben, dass eine solide Überschriftenstruktur in einer Anwendungsoberfläche nicht erforderlich ist, bedeutet jedoch, die tatsächlichen Überschriften falsch zu verstehen.

Überschriften sind Bezeichnungen für Abschnitte (oder Bereiche), die eine Schnittstelle bilden. Sie können einen Informationsabschnitt oder eine Reihe interaktiver Steuerelemente kennzeichnen. Es ist alles das Gleiche. Das Beschriften der Bereiche Ihrer Benutzeroberfläche ist genauso wichtig wie das Beschriften Ihrer einzelnen Steuerelemente. Ohne Etiketten wissen die Leute einfach nicht, wofür etwas ist.

Für Benutzer von Bildschirmleseprogrammen sind Überschriften nicht nur Bezeichnungen, sondern ein Umgehungsmechanismus, mit dem sie zwischen verschiedenen Bereichen navigieren können. Ohne Überschriften müssen sie nacheinander jedes einzelne Element durchgehen, um von einem Ort zum anderen zu gelangen. Mühsam und abstoßend.

Tastaturbenutzer, die keinen Bildschirmleser verwenden, der diese Tastenkombinationen unterstützt, sind möglicherweise sehr mühsam, insbesondere wenn eine Vielzahl interaktiver Steuerelemente zum Durchlaufen erforderlich ist. Glücklicherweise steht eine Browser-Erweiterung von Matt Atkinson zur Verfügung. Es bietet Verknüpfungen nicht zu Überschriften, sondern zu Orientierungspunkten (

,
,
usw.). Die Unterstützung von Überschriften wird jedoch ebenfalls in Betracht gezogen. Die besten Dokument- (und Anwendungs!) - Strukturen enthalten sowohl Orientierungspunkte als auch Überschriften. Gürtel und Hosenträger.

Weitere Informationen zu Inclusive Design und Designsystemen finden Sie unter https://inclusive-components.design/ und folgen Sie Inclusive Components auf Twitter.