Heydon Pickering untersucht, wie man einer React-Komponente eine bestimmte Überschrift (wie <h1>, <h2> usw.) je nach Kontext geben kann und dadurch sicherstellt, dass das DOM für Screenreader weiterhin perfekt zugänglich ist. Warum ist die Verwendung der richtigen Überschrift wichtig? Heydon schreibt in der Einleitung:
Eines, das mir immer wieder auffällt, in Recherchen, Tests und alltäglichen Gesprächen mit Kollegen und Freunden, ist, wie wichtig Überschriften sind. Für Screenreader-Nutzer beschreiben Überschriften die Beziehungen zwischen Abschnitten und Unterabschnitten und bieten – wo korrekt verwendet – sowohl einen Überblick als auch ein Navigationsmittel. Überschriften sind Infrastruktur.
Das erinnert mich an einen ausgezeichneten Beitrag von Amelia Bellamy-Royds, in dem sie alle Probleme untersuchte, die durch dieses „Dokumentenstruktur-Dilemma“ verursacht werden, oder sagen wir, eine <h1>, die einer <h3> folgt.
Wie die Dinge derzeit stehen, ist die Dokumentenstruktur nur für Screenreader-Nutzer von täglicher Bedeutung, und diese Nutzer sind es derzeit gewohnt, mit dem Durcheinander von unregelmäßigen Überschriftenebenen auf Webseiten umzugehen. Ich bin sicher, dass viele Screenreader-Nutzer eine Korrektur der Überschriftenebenen begrüßen würden. Aber das Korrigieren von Überschriften für Screenreader-Nutzer bedeutet nicht nur, einen Baum von ordentlich verschachtelten Überschriften ohne übersprungene Ebenennummern zu erstellen. Es bedeutet, eine Überschriftenstruktur zu schaffen, die die vom Ersteller der Webseite beabsichtigte Bedeutung genau widerspiegelt, die Bedeutung, die visuelle Nutzer aus Stil und Layout ableiten. Und um das zu erreichen, müssen wir berücksichtigen, wie Bedeutung für alle Nutzer von Webseiten vermittelt wird, die nicht jede Überschrift mit einer numerischen Ebene angesagt bekommen.
Es ist bemerkenswert, dass simple alte Überschriften so viel Aufmerksamkeit erfordern, sowohl in Bezug auf Usability-Bedenken als auch auf potenzielle Workarounds in der Entwicklung.