Plattform News: Verwenden: Fokus-sichtbar, BBCs neue Schriftart, deklarative Schattendoms, A11y und Platzhalter

In den Nachrichten dieser Woche gibt es eine ganze Reihe von Zugänglichkeit, von den Nuancen der Verwendung: Fokus-sichtbare und Eingabe-Platzhalter bis hin zu zugänglichen Schriftarten und einem Safari-Fehler mit: Anzeige: Inhalt. Außerdem ein Snippet für eine Back-Bones-Webkomponente, die die Style-Kapselung unterstützt.

Jetzt kann ein guter Zeitpunkt sein, um mit der Verwendung zu beginnen: fokussierbar

Das CSS: Fokus-sichtbare Pseudo-Klasse ersetzt: Fokus als neue Möglichkeit, benutzerdefinierte Fokusanzeigen für Tastaturbenutzer zu erstellen. Chrome kürzlich umgeschaltet von: Focus auf: Fokus auf dem User Agent Stylesheet und als Ergebnis dieser Änderung wird der Standardfokusring nicht mehr angezeigt, wenn der Benutzer auf eine Schaltfläche klickt oder aufnimmt.

Beim Wechsel von: Fokus auf: Fokus aufsichtbar, berücksichtigen Sie die Kompatibilität rückwärts. Ihre Tastaturfokussindikatoren sollten in allen Browsern deutlich sichtbar sein, nicht nur diejenigen, die unterstützen: Fokus zu sichern. Wenn Sie nur stylen: fokussierbarer, nicht unterstützender Browser zeigen den Standardfokusring, der je nach Design „überhaupt nicht ausreichend klar oder sichtbar ist“.

 Taste {
  Hintergrund: weiß;
}

Taste: Fokus zu sichtbar {
  Umriss: Keine;
  Hintergrund: #ffdd00; /* Gold */
}

Ein guter Weg, um zu verwenden: Fokus zu sehen, ist heute, die Fokusstile in A: Focus-Regel zu definieren und dann die gleichen Stile in A: Focus: Nicht (: fokussierbar). Dies ist zugegebenermaßen nicht das eleganteste und intuitivste Muster, aber es funktioniert gut in allen Browsern:

• Browser, die nicht unterstützen: Fokus aufwesbar Verwenden Sie die in der: Fokusregel definierten Fokusstile und ignorieren Sie die zweite Stilregel vollständig (weil: Fokus auf sichtbar ist, der ihnen unbekannt ist).
• In Browsern, die Unterstützung durchführen : Fokus-sichtbar, weist die zweite Stilregel die in der: Fokusregel definierten Fokusstile zurück, wenn der: Fokus-sichtbare Zustand nicht auch aktiv ist. Mit anderen Worten, die in der: Focus-Regel definierten Fokusstile sind nur dann in Kraft, wenn: Fokus zu sichbar ist ebenfalls aktiv.

 Taste: Fokus {
  Umriss: Keine;
  Hintergrund: #ffdd00; /* Gold */
}

Button: Fokus: Nicht (: fokussierbar) {
  Hintergrund: weiß; / * Gold rückgängig *///
}

Die BBC hat eine zugänglichere Schrift erstellt

Die BBC erstellte ihre eigene benutzerdefinierte Schrift namens Reith (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 gemischten Fähigkeiten (Legasthenie und Sehbehinderung) und über verschiedene Bildschirmgrößen getestet.

Wir [die BBC] verwendeten Helvetica oder Arial. Wir hatten auch Gill Sans als Unternehmensschrift. Diese Schriften wurden vor hundert Jahren für die gedruckte Seite [und] auf den heutigen modernen digitalen Bildschirmen nicht gut abgestimmt.

Hinweis: Wenn Sie Reith Sans und Reith Serif in Wakamai Fondue inspizieren möchten, können Sie im Abschnitt „Alle Schriftarten auf Seite“ auf der BBC -Website schnell auf die URLs der WOFF2 -Dateien in den Abschnitt „Alle Schriftarten auf Seite“ auf dem Bereich der Schriftarten in Firefox zugreifen.

Anzeige: Inhalt ist in Safari immer noch nicht zugänglich

Das CSS -Display: Inhaltswert 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 bei Flex- und Netzlayouts, bei denen der Inhaltswert verwendet werden kann, um tiefer verschachtelte Elemente für Flex-/Netzelemente zu „fördern“, während eine semantische Dokumentstruktur beibehalten wird.

Leider wurde diese Funktion ursprünglich mit einem Implementierungsfehler versendet, der das Element vom Browser -Zugehörigkeitsbaum entfernt hat. Zum Beispiel führte das Antrag auf Anzeige: Inhalt auf ein

Elements führte zu diesem Element, das von Bildschirmlesern nicht mehr erwähnt wurde. Seitdem wurde dieser Fehler in Firefox und Chrome (in der neuesten Version) behoben.

In Chrome und Firefox informiert der Bildschirmleser den Benutzer, dass die „Hauptnavigation“ eine „Liste, 2 Elemente“ enthält. In Safari fehlt der letztere Teil, da die Elemente

und
• nicht im Benzin der Barrierefreiheit vorhanden sind. Wenn Apple diesen Fehler in Safari festlegt, sollten Sie vorsichtig mit dem Inhaltswert für semantische Elemente und testen Sie in Bildschirmlesern, um zu bestätigen, dass Ihre Seiten auch in Safari zugänglich sind.

  Stellen Sie die Opazität fest, wenn Sie die Farbe des Platzhaltertext überschreiben

  Barrierefreiheitsexperten empfehlen, Platzhalter nach Möglichkeit zu vermeiden, da sie für vorgepopulierten Text verwirrt werden können und verschwinden, wenn der Benutzer mit dem Eingeben eines Wertes beginnt. Viele Websites (einschließlich Wikipedia und Gov.uk) verwenden jedoch Platzhalter in einfachen Webformularen, die nur ein einzelnes Eingabebuch enthalten, z. B. ein Suchfeld.

  Platzhalter können über das weit verbreitete :: Platzhalter-Pseudo-Element gestaltet werden. Wenn Ihr Design eine benutzerdefinierte Farbe für den Platzhaltertext vorsieht, geben Sie sicher, dass Sie Farbe und Deckkraft angeben. Letzteres wird für Firefox benötigt, was die Deckkraft anwendet: 0,54 bis: Platzhalter standardmäßig. Wenn Sie diesen Wert nicht überschreiben, hat Ihr Platzhaltertext möglicherweise einen unzureichenden Kontrast in Firefox.

   .Search-Field :: Placeholder {
    Farbe: #727272;
    Deckkraft: 1; / * für Firefox benötigt */
  }

  Deklarative Shadow Dom könnte dazu beitragen, die Verbreitung der Stilpopulation zu popularisieren

  Eine der wichtigsten Merkmale von Shadow DOM ist die Style -Kapselung, wobei die Stilregeln der äußeren Seite nicht Elemente im Schattenbaum übereinstimmen und umgekehrt. Um diese Funktion zu verwenden, müssen Sie einen Schatten-Dom-Baum an ein Element (normalerweise ein benutzerdefiniertes Element wie ) anhängen und die Vorlage des Elements (normalerweise aus einem Element im DOM) auf das neu erstellte Schattendom des Elements kopieren.

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

   CustomElements.define (
    "My-Element",
    Die Klasse erweitert Htmlelement {
      constructor () {
        super();
  
        // finde <semplate> im DOM
        let template = document.getElementById ("my-template");
  
        // Erstellen Sie eine Kopie des Vorlageninhalts…
        lass content = template.content.clonenode (true);
  
        //… und injizieren Sie es in den Schattendom von <my-element>
        this.attachShadow ({modus: "öffnen"}). appendChild (Inhalt);
      }
    }
  );</my-element></semplate>

  Für ein Beispiel für eine Stilverkapselung siehe Miriam Suzannes Element auf CodePen. Die Scoped -Stile befinden sich im Element im HTML -Bereich. Beachten Sie, wie dieser CSS-Code einfache Selektoren verwenden kann, wie z. B. Artikel, die nur Elemente in Shadow Dom von übereinstimmen.

  JavaScript kann bald nicht mehr erforderlich sein, um diese Art der Stilkapselung in modernen Browsern zu erstellen. Anfang dieser Woche war Chrome der erste Browser, der den deklarativen Schatten -Dom -Vorschlag von Google versandte. Wenn es zu einem Standard wird, ermöglicht diese Funktion auch die Verwendung von Shadow DOM in Kombination mit dem Server-Side-Rendering.

Das obige ist der detaillierte Inhalt vonPlattform News: Verwenden: Fokus-sichtbar, BBCs neue Schriftart, deklarative Schattendoms, A11y und Platzhalter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!