Plattform-Neuigkeiten: :focus-visible verwenden, die neue Schriftart der BBC, deklarative Shadow DOMs, A11Y und Platzhalter

Es gibt viel Barrierefreiheit in den Nachrichten dieser Woche, von den Nuancen der Verwendung von :focus-visible und Eingabeplatzhaltern bis hin zu barrierefreien Schriftarten und einem Safari-Bug mit :display: contents. Außerdem ein Ausschnitt für eine einfache Webkomponente, die Stil-Kapselung unterstützt.

Jetzt ist vielleicht ein guter Zeitpunkt, um mit :focus-visible zu beginnen

Die CSS-Pseudo-Klasse :focus-visible ersetzt :focus als neue Methode zur Erstellung benutzerdefinierter Fokusindikatoren für Tastaturbenutzer. Chrome hat kürzlich in der Benutzeroberflächen-Stylesheet von :focus zu :focus-visible gewechselt, und infolgedessen wird der Standard-Fokusring nicht mehr angezeigt, wenn der Benutzer auf eine Schaltfläche klickt oder tippt.

Beim Wechsel von :focus zu :focus-visible sollten Sie die Abwärtskompatibilität berücksichtigen. Ihre Fokusindikatoren für die Tastatur sollten in allen Browsern deutlich sichtbar sein, nicht nur in denen, die :focus-visible unterstützen. Wenn Sie nur :focus-visible stylen, zeigen Browser, die es nicht unterstützen, den Standard-Fokusring an, der je nach Design „möglicherweise nicht ausreichend klar oder überhaupt nicht sichtbar“ ist.

button {
  background: white;
}

button:focus-visible {
  outline: none;
  background: #ffdd00; /* gold */
}

Eine gute Möglichkeit, :focus-visible heute zu verwenden, ist, die Fokusstile in einer :focus-Regel zu definieren und dann diese gleichen Stile sofort in einer :focus:not(:focus-visible)-Regel rückgängig zu machen. Dies ist zugegebenermaßen nicht das eleganteste und intuitivste Muster, aber es funktioniert gut in allen Browsern.

• Browser, die :focus-visible **nicht** unterstützen, verwenden die in der :focus-Regel definierten Fokusstile und ignorieren die zweite Stilregel vollständig (da :focus-visible ihnen unbekannt ist).
• In Browsern, die :focus-visible **unterstützen**, macht die zweite Stilregel die in der :focus-Regel definierten Fokusstile rückgängig, wenn der :focus-visible-Zustand nicht ebenfalls aktiv ist. Mit anderen Worten, die in der :focus-Regel definierten Fokusstile sind nur dann wirksam, wenn :focus-visible ebenfalls aktiv ist.

button:focus {
  outline: none;
  background: #ffdd00; /* gold */
}

button:focus:not(:focus-visible) {
  background: white; /* undo gold */
}

Die BBC hat eine zugänglichere Schriftart entwickelt

Die BBC hat ihre eigene benutzerdefinierte Schriftart namens Reith entwickelt (benannt nach dem Gründer der BBC, Sir John Reith). Ihr Ziel war es, eine Schriftart zu erstellen, die mehrere Sprachen unterstützt und leichter zu lesen ist, insbesondere auf kleinen Geräten. Die Schriftart wurde mit Benutzergruppen mit unterschiedlichen Fähigkeiten (Legasthenie und Sehbehinderung) und über verschiedene Bildschirmgrößen hinweg getestet.

Wir [die BBC] haben Helvetica oder Arial verwendet. Wir hatten auch Gill Sans als Unternehmensschriftart. Diese Schriftarten wurden vor hundert Jahren für den Druck entworfen und funktionieren auf den heutigen modernen digitalen Bildschirmen nicht gut.

Hinweis: Wenn Sie Reith Sans und Reith Serif in Wakamai Fondue inspizieren möchten, können Sie die URLs der WOFF2-Dateien im Abschnitt „Alle Schriftarten auf der Seite“ des Schriftartenfensters im DOM-Inspektor von Firefox auf der BBC-Website schnell abrufen.

display: contents ist in Safari immer noch nicht zugänglich

Der CSS-Wert display: contents wird seit 2018 in Browsern unterstützt. Ein Element mit diesem Wert „generiert keine Boxen“ und wird effektiv durch seine Kinder ersetzt. Dies ist besonders nützlich in Flex- und Grid-Layouts, wo der Wert contents verwendet werden kann, um tiefer verschachtelte Elemente zu Flex-/Grid-Items zu „fördern“ und gleichzeitig eine semantische Dokumentenstruktur beizubehalten.

Leider wurde diese Funktion ursprünglich mit einem Implementierungsfehler ausgeliefert, der das Element aus dem Zugänglichkeitsbaum des Browsers entfernte. Beispielsweise führte die Anwendung von display: contents auf ein <ul>-Element dazu, dass dieses Element von Screenreadern nicht mehr erwähnt wurde. Seitdem wurde dieser Fehler in Firefox und Chrome (in der neuesten Version) behoben.

In Chrome und Firefox informiert der Screenreader den Benutzer, dass die „Hauptnavigation“ eine „Liste mit 2 Elementen“ enthält. In Safari fehlt der letztere Teil, da die Elemente <ul> und <li> nicht im Zugänglichkeitsbaum vorhanden sind. Bis Apple diesen Bug in Safari behebt, seien Sie vorsichtig bei der Verwendung des contents-Werts für semantische Elemente und testen Sie mit Screenreadern, um zu bestätigen, dass Ihre Seiten auch in Safari zugänglich sind.

Setzen Sie die opacity beim Überschreiben der Farbe des Platzhaltertextes

Barrierefreiheitsexperten empfehlen, Platzhalter nach Möglichkeit zu vermeiden, da sie mit vorab ausgefülltem Text verwechselt werden können und verschwinden, wenn der Benutzer mit der Eingabe beginnt. Viele Websites (einschließlich Wikipedia und GOV.UK) verwenden jedoch Platzhalter in einfachen Webformularen, die nur ein einziges Eingabefeld enthalten, z. B. ein Suchfeld.

Platzhalter können über das weit verbreitete Pseudo-Element ::placeholder gestylt werden. Wenn Ihr Design eine benutzerdefinierte Farbe für Platzhaltertext erfordert, stellen Sie sicher, dass Sie sowohl color als auch opacity angeben. Letzteres wird für Firefox benötigt, das standardmäßig opacity: 0.54 auf ::placeholder anwendet. Wenn Sie diesen Wert nicht überschreiben, kann Ihr Platzhaltertext in Firefox unzureichenden Kontrast aufweisen.

.search-field::placeholder {
  color: #727272;
  opacity: 1; /* needed for Firefox */
}

Deklaratives Shadow DOM könnte zur Popularisierung von Stil-Kapselung beitragen

Eine der Hauptfunktionen von Shadow DOM ist die Stil-Kapselung, bei der die Stilregeln der äußeren Seite nicht mit Elementen innerhalb des Shadow-Baums übereinstimmen und umgekehrt. Um diese Funktion nutzen zu können, müssen Sie einen Shadow DOM-Baum an ein Element anhängen (normalerweise ein benutzerdefiniertes Element wie <my-element>) und die Vorlage des Elements (normalerweise aus einem <template>-Element im DOM) in den neu erstellten Shadow DOM des Elements kopieren.

Diese Schritte können nur in JavaScript ausgeführt werden. Wenn Sie nur an Stil-Kapselung interessiert sind und keine dynamische Funktionalität für Ihr Element benötigen, hier ist die minimale JavaScript-Menge, die erforderlich ist, um ein benutzerdefiniertes Element mit einem Shadow DOM zu erstellen.

customElements.define(
  "my-element",
  class extends HTMLElement {
    constructor() {
      super();

      // find <template id="my-template"> in the DOM
      let template = document.getElementById("my-template");

      // make a copy of the template contents…
      let content = template.content.cloneNode(true);

      // …and inject it into <my-element>’s shadow DOM
      this.attachShadow({ mode: "open" }).appendChild(content);
    }
  }
);

Ein Beispiel für Stil-Kapselung finden Sie in Miriam Suzannes <media-object>-Element auf CodePen. Die gekapselten Stile befinden sich im <template>-Element im HTML-Bereich. Beachten Sie, wie dieser CSS-Code einfache Selektoren wie article verwenden kann, die nur mit Elementen innerhalb des Shadow DOM von <media-object> übereinstimmen.

JavaScript ist möglicherweise bald nicht mehr erforderlich, um diese Art von Stil-Kapselung in modernen Browsern zu erstellen. Anfang dieser Woche hat Chrome als erster Browser die Deklarative Shadow DOM-Vorschlag von Google ausgeliefert. Wenn dies ein Standard wird, wird diese Funktion auch die Verwendung von Shadow DOM in Kombination mit serverseitiger Wiedergabe ermöglichen.