Plattform-Neuigkeiten: Bevorzugt Kontrast, MathML, :is() und CSS-Hintergrund-Initialwerte 

In der dieswöchigen Zusammenfassung landet prefers-contrast in Safari, MathML erhält Aufmerksamkeit, :is() ist tatsächlich recht fehlerverzeihend, weitere ADA-bedingte Klagen, inkonsistente Initialwerte für CSS-Hintergrundeigenschaften können zu unerwarteten – aber irgendwie netten – Mustern führen.

Die prefers-contrast: more Media Query wird in Safari Preview unterstützt

Nach prefers-reduced-motion im Jahr 2017, prefers-color-scheme im Jahr 2019 und forced-colors im Jahr 2020 macht sich ein viertes Benutzerpräferenz-Medienmerkmal auf den Weg in die Browser. Die CSS prefers-contrast: more Media Query wird jetzt in der Vorschauversion von Safari unterstützt. Diese Funktion ermöglicht es Websites, die Präferenz eines Benutzers für erhöhten Kontrast zu berücksichtigen.

.pricing-info {
  color: #86868b; /* contrast ratio 3.5:1 */
}

@media (prefers-contrast: more) {
  .pricing-info {
    color: #535283; /* contrast ratio 7:1 */
  }
}

Mathematik als vollwertiger Bestandteil des Webs

Eine der frühesten Spezifikationen, die Mitte bis Ende der 90er Jahre vom W3C entwickelt wurde, war eine Markup-Sprache zur Darstellung mathematischer Notationen im Web namens MathML. Diese Sprache wird derzeit in Firefox und Safari unterstützt. Die Implementierung von Chrome wurde 2013 aufgrund von „Bedenken hinsichtlich Sicherheit, Leistung und geringer Nutzung im Internet“ entfernt.

Wenn Sie Chrome oder Edge verwenden, aktivieren Sie „Experimental Web Platform features“ auf der Seite about:flags, um die Demo anzuzeigen.

Es gibt verstärkte Bemühungen, MathML ordnungsgemäß in die Webplattform zu integrieren und es browserübergreifend interoperabel verfügbar zu machen. Igalia entwickelt seit 2019 eine MathML-Implementierung für Chromium . Die neue Spezifikation MathML Core Level 1 ist eine grundlegende Teilmenge von MathML 3 (2014), die „am besten für die Browserimplementierung geeignet“ ist. Wenn sie vom W3C genehmigt wird, wird eine neue Math Working Group daran arbeiten, die Barrierefreiheit und Durchsuchbarkeit von MathML zu verbessern.

Die Mission der Math Working Group ist es, die Einbeziehung von Mathematik im Web zu fördern, damit sie ein vollwertiger Bestandteil des Webs ist, der gut angezeigt wird, zugänglich und durchsuchbar ist.

CSS :is() wertet Selektorlisten auf, um sie fehlerverzeihend zu machen

Die neuen CSS-Pseudo-Klassen :is() und :where() werden jetzt in Chrome, Safari und Firefox unterstützt. Neben ihren Standardanwendungsfällen (Reduzierung von Wiederholungen und geringe Spezifität) können diese Pseudo-Klassen auch verwendet werden, um Selektorlisten „fehlerverzeihend“ zu machen.

Aus historischen Gründen ist das allgemeine Verhalten einer Selektorliste, dass die gesamte Selektorliste ungültig wird, wenn ein Selektor in der Liste nicht erfolgreich analysiert werden kann [...]. Dies kann es schwierig machen, CSS zu schreiben, das neue Selektoren verwendet und in älteren User Agents immer noch korrekt funktioniert.

Mit anderen Worten: „Wenn ein Teil eines Selektors ungültig ist, macht er den gesamten Selektor ungültig.“ Das Umschließen der Selektorliste in :is() macht sie jedoch fehlerverzeihend: Nicht unterstützte Selektoren werden einfach ignoriert, aber die verbleibenden Selektoren stimmen immer noch überein.

Leider funktionieren Pseudo-Elemente nicht innerhalb von :is() (obwohl sich das in Zukunft ändern könnte), sodass es derzeit nicht möglich ist, zwei herstellerspezifische Pseudo-Elemente in eine fehlerverzeihende Selektorliste umzuwandeln, um die Wiederholung von Stilen zu vermeiden.

/* One unsupported selector invalidates the entire list */
::-webkit-slider-runnable-track, ::-moz-range-track {
  background: red;
}

/* Pseudo-elements do not work inside :is() */
:is(::-webkit-slider-runnable-track, ::-moz-range-track) {
  background: red;
}

/* Thus, the styles must unfortunately be repeated */
::-webkit-slider-runnable-track {
  background: red;
}
::-moz-range-track {
  background: red;
}

Dell und Kraft Heinz wegen unzugänglicher Websites verklagt

Immer mehr amerikanische Unternehmen sehen sich Klagen wegen Barrierefreiheitsproblemen auf ihren Websites gegenüber. Zuletzt wurde der Technologiekonzern Dell von einer sehbehinderten Person verklagt, die Dells Website und seinen Online-Shop nicht mit den Screenreadern JAWS und VoiceOver navigieren konnte.

Der Beklagte kommuniziert Informationen über seine Produkte und Dienstleistungen nicht effektiv, da Hilfsmittel für Screenreader keinen Zugriff auf wichtige Inhalte auf der digitalen Plattform haben. [...] Die digitale Plattform nutzt visuelle Hinweise, um Inhalte und andere Informationen zu vermitteln. Leider können Screenreader diese Hinweise nicht interpretieren und die von ihnen dargestellten Informationen für Menschen mit Sehbehinderungen nicht kommunizieren.

Anfang dieses Jahres wurde die Kraft Heinz Foods Company verklagt, weil sie die Web Content Accessibility Guidelines auf einer der Websites des Unternehmens nicht eingehalten hat. Die Klage besagt unter anderem, dass die Website keine Sprache deklariert (lang-Attribut) und ihren Bildlinks keine zugänglichen Bezeichnungen gegeben hat.

In den Vereinigten Staaten gilt der Americans with Disabilities Act (ADA) auch für Websites, was bedeutet, dass Menschen Einzelhändler verklagen können, wenn ihre Websites nicht zugänglich sind. Laut dem CEO von Deque Systems (den Herstellern von axe) kann der jüngste steigende Trend von webbasierten ADA-Klagen auf einen Mangel an einer einzigen übergreifenden Verordnung zurückgeführt werden, die spezifische Compliance-Anforderungen festlegen würde.

background-clip und background-origin haben unterschiedliche Initialwerte

Standardmäßig wird ein CSS-Hintergrund innerhalb des Elementrahmens gezeichnet (background-clip: border-box), aber relativ zum Element-Padding-Rahmen positioniert (background-origin: padding-box). Diese Inkonsistenz kann zu unerwarteten Mustern führen, wenn der Rand des Elements halbtransparent oder gestrichelt/punktiert ist.

.box {
  /* semi-transparent border */
  border: 20px solid rgba(255, 255, 255, 0.25);

  /* background gradient */
  background: conic-gradient(
    from 45deg at bottom left,
    deeppink,
    rebeccapurple
  );
}

Aufgrund der unterschiedlichen Initialwerte wird der Hintergrundverlauf im obigen Bild als gekacheltes Bild auf allen Seiten unter dem halbtransparenten Rahmen wiederholt. In diesem Fall wäre es sinnvoller, den Hintergrund relativ zum Rahmen zu positionieren (background-origin: border-box).