Wie wir die Zugänglichkeit unseres Single -Page -App -Menüs verbessert haben

Das Aufbau eines zugänglichen Hauptmenüs für eine React -PWA unter Verwendung von React -Router stellte unerwartete Herausforderungen vor. Dieser Artikel beschreibt unsere Reise zur Erstellung eines Tastatur- und Maus-freundlichen Menüs, in dem sich die Überwindung der Fallstricke der gängigen Barrierefreiheit in einseitigen Anwendungen (SPAs) konzentriert.

Unser Ziel war ein Menü, das über Tastatur und Maus navigierbar war und es den Benutzern ermöglichte, über die Elemente auf oberster Ebene und unter-Menus (auf Schwebedauer/Fokus bekannt gegeben) mit klaren Fokussindikatoren zu tab.

Erste Versuche, die CSS- visibility zu verwenden, um die Untermenüs anzuzeigen/ausblenden, fehlten für Tastaturbenutzer, da fokussierte Elemente mit visibility: hidden bleiben unsichtbar. Wir haben die Position position umgestellt:

 .Menu-item {
  Position: Relativ;
}

.Sub-Menu {
  Position: absolut;
  Links: -100000px; / * Off-Screen-Positionierung *//
}

.Menu-item: Hover .Sub-Menu,
.Menu-item: Focus .Sub-Menu,
.Menu-item: Fokus in .Sub-Menu {
  links: 0;
}

Diese verbesserte Tastaturnavigation führte jedoch ein neues Problem ein: Das Menü blieb nach der Auswahl geöffnet (klicken oder Registerkarte). Dies lag daran, dass das ausgewählte Element den Fokus beibehielt und Spas keine vollständige Seite nach Lade auslösen, um den Fokus zu löschen. Darüber hinaus wurde der Link "Spring to Content" über die Tastatur nach der Menüinteraktion unzugänglich.

Unser erster Versuch, dies zu lösen, beinhaltete die Verwendung von document.activeElement.blur() im onClick -Handler der Link des React Routers:

 const clearFocus = () => {
  document.activeLement.blur ();
};

Während dies das Menü nach Klicks schloss, löste es das Problem der Tastaturnavigation nicht oder behält das erwartete Verhalten "zum Inhalt" nicht bei.

Um dies anzugehen, haben wir uns programmgesteuert auf ein unsichtbares, nicht interaktives Ankerelement konzentrieren, das über dem Link "zum Inhalt springen" im DOM platziert ist:

 const app = () => {
  const focusResetref = react.usERef ();
  // ... anderer Code ...
  zurückkehren (
    
      <a aria-hidden="true" href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488" ref="{focusResetRef}" tabindex="-1" style="{{" position: top:>Fokus zurücksetzen</a>
      <a classname="jump-to-content-a11y-styles" href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Zu Inhalt springen</a>
      <menu onselectmenuitem="{handleResetFocus}"></menu>
      {/ * ... Rest von App */}
    >
  );
};

Dies stellte sicher, dass nach der Menüauswahl der nächste Tab -Stopp der Link "zum Inhalt springen" war. Das aria-hidden , tabIndex und das Styling stellten sicher, dass das Element mit Ausnahme des programmatischen Fokus unsichtbar und nicht interaktiv blieb.

Um die Benutzererfahrung, insbesondere für Mega -Menüs, weiter zu verbessern, haben wir einen clearHover -Status und eine Auszeit hinzugefügt, um den Schwebestand nach der Auswahl sofort zu beseitigen, um sicherzustellen, dass das Menü unabhängig von der Eingabemethode konsequent schließt.

Unsere endgültige Implementierung verwendet einen React -Kontext, um das Management über Komponenten hinweg zu vereinfachen. Während wir noch keine realen Benutzerdaten haben, bietet unsere Lösung eine konsistente und zugängliche Erfahrung sowohl für Tastatur- als auch für Mausbenutzer in unserem Spa, wobei das Verhalten einer vollständigen Seite nachgeschlagen wird. Wir begrüßen Feedback zu diesem Ansatz.

Das obige ist der detaillierte Inhalt vonWie wir die Zugänglichkeit unseres Single -Page -App -Menüs verbessert haben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!