Wöchentliche Plattform-Nachrichten: Reduzierte Bewegung, CORS, WhiteHouse.gov, Popups und 100vw

In der dieswöchigen Zusammenfassung beleuchten wir einen Vorschlag für ein neues <popup>-Element, untersuchen die Verwendung von prefers-reduced-motion auf preisgekrönten Websites, erfahren, wie wir Cross-Origin-Isolation aktivieren, sehen, wie WhiteHouse.gov mit Barrierefreiheit umgeht, und warnen vor den Gefahren von 100vh.

Kommen wir zu den Nachrichten!

Das neue HTML-<popup>-Element ist in Entwicklung

Am 21. Januar veröffentlichte Melanie Richards vom Webplattform-Team von Microsoft Edge einen Explainer für ein vorgeschlagenes HTML-<popup>-Element (der Name ist noch nicht endgültig). Wenige Stunden später kündigte Mason Freed von Google eine Absicht an, dieses Element in der Blink-Browser-Engine zu prototypisieren. Die Implementierung wird in Issue #1168738 von Chromium bearbeitet.

Ein Popup ist ein temporäres (transientes) und „light-dismissable“ UI-Element, das auf der „obersten Ebene“ aller anderen Elemente angezeigt wird. Das Ziel des <popup>-Elements ist es, standardmäßig vollständig gestaltbar und barrierefrei zu sein. Ein <popup> kann an ein aktivierendes Element, wie z. B. eine Schaltfläche, angeheftet werden, aber es kann auch ein eigenständiges Element sein, das beim Laden der Seite angezeigt wird (z. B. eine Teaching-UI).

Ein <popup> wird automatisch ausgeblendet, wenn der Benutzer die Esc-Taste drückt oder den Fokus auf ein anderes Element verlagert (dies wird als light dismissal bezeichnet). Im Gegensatz zum <dialog>-Element kann nur ein <popup> gleichzeitig angezeigt werden, und im Gegensatz zum veralteten <menu>-Element kann ein <popup> beliebige Inhalte, einschließlich interaktiver Elemente, enthalten.

Wir stellen uns vor, dass <popup> für verschiedene Arten von Popover-UIs nützlich sein wird. Wir haben uns entschieden, ein Aktionsmenü als Hauptbeispiel zu verwenden, aber Leute verwenden Popups-ähnliche Muster für viele verschiedene Arten von Inhalten.

Preisgekrönte Websites sollten die Präferenz „Bewegung reduzieren“ berücksichtigen

Anfang dieser Woche gab AWWWARDS die Gewinner seiner jährlichen Auszeichnungen für die besten Websites des Jahres 2020 bekannt. Die folgenden Websites wurden ausgezeichnet:

• Website des Jahres: cornrevolution.com
• Entwickler-Website des Jahres: kodeclubs.com
• E-Commerce-Website des Jahres: eiger-extreme.mammut.com
• Mobile Website des Jahres: synchronized.studio
• Website des Jahres, Nutzerwahl: darknetflix.io

Alle diese Websites sind hochdynamisch und zeigen Vollbildanimationen beim Laden und während des Scrollens. Leider können solche Animationen bei Menschen mit vestibulären Störungen Schwindel und Übelkeit verursachen. Websites wird daher empfohlen, nicht wesentliche Animationen über die prefers-reduced-motion Media Query zu reduzieren oder auszuschalten, die für Personen, die ihre Präferenz für reduzierte Bewegung geäußert haben (z. B. die Option „Bewegung reduzieren“ auf Apple-Plattformen), auf true ausgewertet wird. **Keine der Gewinner-Websites tut dies.**

/* (code from animal-crossing.com) */
@media (prefers-reduced-motion: reduce) {
  .main-header__scene {
    animation: none;
  }
}

Ein Beispiel für eine Website, die dies richtig macht, ist die offizielle Website des Animal Crossing-Spiels vom letzten Jahr. Die Website berücksichtigt nicht nur die Präferenz des Benutzers über prefers-reduced-motion, sondern bietet auch eine eigene Umschaltfläche „Bewegung reduzieren“ ganz oben auf der Seite.

(via Eric Bailey)

Websites können jetzt Cross-Origin-Isolation aktivieren

Cross-Origin-Isolation ist Teil einer „langfristigen Sicherheitsverbesserung“. Websites können Cross-Origin-Isolation aktivieren, indem sie die folgenden beiden HTTP-Antwortheader hinzufügen, die in Chrome und Firefox bereits unterstützt werden:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Eine cross-origin-isoliert Seite gibt ihre Fähigkeit auf, Inhalte von anderen Ursprüngen ohne deren ausdrückliche Zustimmung (über CORS-Header) zu laden, und erhält im Gegenzug Zugriff auf einige leistungsstarke APIs, wie z. B. SharedArrayBuffer.

if (crossOriginIsolated) {
  // post SharedArrayBuffer
} else {
  // do something else
}

Das Weiße Haus bekennt sich erneut zur Barrierefreiheit

Die neue WhiteHouse.gov-Website der Biden-Administration wurde in nur sechs Wochen von Grund auf neu entwickelt, wobei Barrierefreiheit als oberste Priorität galt („Barrierefreiheit stand im Vordergrund“). Der Chief Accessibility Officer von Microsoft überprüfte die Website und gab ihr seinen Segen.

Die Erklärung zur Barrierefreiheit der Website (verlinkt aus der Fußzeile der Website) erklärt ein „Bekenntnis zur Barrierefreiheit“ und verweist direkt auf die neueste Version der Web Content Accessibility Guidelines, WCAG 2.1 (2018). Dies ist bemerkenswert, da Bundesbehörden in den USA nur verpflichtet sind, WCAG 2.0 (2008) einzuhalten.

Die Web Content Accessibility Guidelines sind die am weitesten verbreiteten Standards für Internetzugänglichkeit. … Durch die Bezugnahme auf WCAG 2.1 (die neueste Version der Richtlinien) könnte die Biden-Administration eine breitere Akzeptanz des WCAG-Modells signalisieren.

Der CSS-Wert 100vw kann einen nutzlosen horizontalen Scrollbalken verursachen

Unter Windows verbraucht ein vertikaler Scrollbalken auf einer Webseite Platz und reduziert die Breite des <html>-Elements der Seite; dies wird als klassischer Scrollbalken bezeichnet. Auf macOS ist dies nicht der Fall, da dort Overlay-Scrollbalken anstelle von klassischen Scrollbalken verwendet werden; ein vertikaler Overlay-Scrollbalken beeinflusst die Breite des <html>-Elements nicht.

macOS-Benutzer können von Overlay-Scrollbalken zu klassischen Scrollbalken wechseln, indem sie in den Systemeinstellungen > Allgemein „Scrollbalken anzeigen“ auf „Immer“ setzen.

Der CSS-Längenwert 100vw entspricht der Breite des <html>-Elements. Wenn jedoch ein klassischer vertikaler Scrollbalken zur Seite hinzugefügt wird, wird das <html>-Element schmaler (wie oben erklärt), aber 100vw bleibt gleich. Mit anderen Worten, 100vw ist bei Vorhandensein eines klassischen vertikalen Scrollbalkens *breiter* als die Seite.

Dies kann für Webentwickler auf macOS, die 100vw verwenden, aber sich seiner Besonderheit nicht bewusst sind, ein Problem darstellen. Beispielsweise könnte eine Website width: 100vw für ihre Artikelüberschrift festlegen, um sie vollständig breit zu machen, aber dies verursacht unter Windows einen nutzlosen horizontalen Scrollbalken, den einige Besucher der Website möglicherweise störend empfinden.

Webentwickler auf macOS können zu klassischen Scrollbalken wechseln, um sicherzustellen, dass Überlauffehler, die durch 100vw verursacht werden, nicht unbemerkt bleiben. In der Zwischenzeit habe ich die CSS Working Group um Stellungnahme gebeten.