Die neuen CSS-Queries @layer,
@scope
und @container

*ERRORS: Missing alternative text*

Dr. Eva Broermann
vienneva.com, Wien, seit 2002
Contao seit 2.9.4
hands-on, learning by doing
HTML, CSS, (JS, PHP)
Web Accessibility Expert

*ERRORS: Missing alternative text*

Die CSS-Kaskade

Ebenen:

User agent stylesheets (Browser)
User stylesheets (Browser, gesetzt vom Benutzer)
Author stylesheets (Webdesigner)

!important dreht die Kaskade um!

*ERRORS: Missing alternative text*

Die CSS-Kaskade

Spezifität

#id .klasse selector

1 - 1 - 1

100 + 10 + 1

Beispiel:

*ERRORS: Missing alternative text*

@layer – Cascade Layers

Schichten in der Caskade.
Eine Möglichkeit Styles verschiedene Prioritäten zuzuorden.
Styles in @layer haben weniger Gewicht als ungelayerte Styles
Die Reihenfolge der Layer entscheidet unabhägig von der Spezifität

*ERRORS: Missing alternative text*

@layer – Cascade Layers

@import url('normalize.css') layer(reset);

@layer reset {

h1, h2, h3, h4, h5, p, ul{

margin:0;

}

@layer bootstrap, base, application;

*ERRORS: Missing alternative text*

@layer – Cascade Layers

*ERRORS: Missing alternative text*

@layer	@container	@scope
Schichtung von Styles	Größen-Abfragen von Elementen	Einschränkung von Gültigkeitsbereichen
W3C-Candidate Recommendation	W3C- Working Draft	W3C- Working Draft
93.59%	90.97%	82.53%
2022 in den großen Browsern	2023 in den großen Browsern nur (size) query	eingeschränkt in großen Browsern ~~Firefox~~
	71.04% (style) query ~~Firefox~~

*ERRORS: Missing alternative text*

Wie mache ich eine
Contao Website barrierefrei?

*ERRORS: Missing alternative text*

"Google ist der größte blinde und gehörlose User."

"Ich sehe was, was du nicht siehst."

Acessibility = Zugänglichkeit

⊂ UX

Ein sehr gewagter Titel!

(Was heißt eigentlich "barrierefrei"?)

Wie mache ich eine
Contao Website zugänglicher?

*ERRORS: Missing alternative text*

Möglichkeiten in Contao aufzeigen
Standardmäßig Zugänglichkeit erhöhen
Kein Anspruch auf Vollständigkeit
Diskussion anregen

https://www.w3.org/TR/WCAG21/

Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/

Grundsätze und betroffene Bereiche

*ERRORS: Missing alternative text*

Wahrnehmbar

Bedienbar

Verständlich

Robust

Maus
Touch
Keyboard
Sprache
Zeitlimits

ohne CSS
Ladezeit
Screengröße

Content/
Wording

Technik/
CMS

Design/
Struktur

Farben/Kontraste
Audio/Video
Grafiken
Schrift

Beschriftung
Überschriften
Formulierung
Alt-Texte
Hilfen
Audio/Video

Websites zugäglicher machen

*ERRORS: Missing alternative text*

Farbkontraste, Test in Graustufen
HTML5 Semantik nutzen, Aufbau testen
Navigation erleichtern, mehrere Wege, Tastaturnavigation, Screenreader
Metabeschriftungen setzen (Seitentitel, alt- und title-Texte)
Buttons, Formulare, Tabellen verbessern
Steuerbarkeit von Medien beachten
Sprache vereinfachen

Die Basis

Wie kann man sich das anschauen?

*ERRORS: Missing alternative text*

Struktur/ Aufbau der Website
Farbkontraste
Zugang über Tabulator-Navigation
Ausgabe per Screenreader

https://einfachnaehen.at, https://lebe-lang.at

Tools:

WAVE
Tota11y Accessibility-Tool
NVDA

Navigation

*ERRORS: Missing alternative text*

Wenn man per Tabulator durch die Seite tappt ...

<embed>
(<details>)
<audio> (mit controls Attribut)
<video> (mit controls Attribut)
<object> (mit usemap Attribut)
<img> ( mit usemap Attribut)

<a> (mit href Attribut)
<input> (nicht hidden)
<label>
<select>
<textarea>
<button>
<iframe>

Interaktive Elemente:

Zusätzliche Elemente kann man mit tabindex interaktiv machen. Wichtig werden dann weitere Attribute.

Wie ist Zugänglichkeit
in Contao vorbereitet?

*ERRORS: Missing alternative text*

HTML5-Semantik

*ERRORS: Missing alternative text*

https://www.html5accessibility.com

https://html.spec.whatwg.org/

<header>: Logo - Basisorientierung - Navigation
<main> Hauptbereich - Inhalt der jeweiligen Seite
<aside>: Nebenbereich - rechte und linke Spalte
<footer>: Fußbereich - Informationen zur Website
<article>: Ein unabhängiger in sich abgeschlossener Inhalt
<nav>: Navigationsbereiche- Navigationsmodule in Contao
<section>: gliedernder Unterbereich mit Überschrift

Sprachauszeichnung

*ERRORS: Missing alternative text*

Website Root:
Sprache der Website <html lang="de">
Zentrale Sprachauszeichung nicht nur zum Umschalten im Browser, sondern auch für die Aussprache im Screenreader.
Editor:
-> Abweichende Sprache z.B. Englische Ausdrücke innerhalb einer deutschen Website sollten gekennzeichnet werden.
- <span lang="en">Screenreader</span>

Seiteneigenschaften

*ERRORS: Missing alternative text*

Der Seitentitel ist das erste, was der Screenreader vorliest
Der Seitentitel ist das erste, was Google anzeigt
Automatisch: Seitentitel = Menüpunkt + Website-Titel
Seitentitel und Beschreibung können individuell vergeben werden.

Tastatureinstellungen:

Tabindex - ändert die Reihenfolge in der der Punkt angesprungen wird oder nimmt den Punkt aus.
Tastaturkürzel - Möglichkeit für direkte Navigation - muss definiert werden.

Seiteneigenschaften

*ERRORS: Missing alternative text*

Dateiverwaltung

*ERRORS: Missing alternative text*

Zentrale Verwaltung von Alternativ-Text, Bild-Title, Bildunterschrift und Verlinkung.

Der Alternativtext muss die Funktion und/oder den Bildinhalt einer Grafik vermitteln.
Leerer alt-Text bei Schmuckbildern.
Hat die Grafik eine Linkfunktion (z.B. Logo als Link zur Starseite), so soll der alt-Text die Funktion vermitteln.
Im alt-Text keine Copyright-Nachweise.
Im Title werden Informationen untergebracht, die auch für Sehende relevant sind (z.B. das Copyright).

Dateiverwaltung

*ERRORS: Missing alternative text*

Navigation - Contao Menüs

Navigationsmodule
Website Suche

Mehrere Wege

Unterschiedliche Bedienung

Maus
Tabulatortaste

*ERRORS: Missing alternative text*

Navigation - Contao Menüs

:focus hat normalerweise im Browser eine Outline (Linie außerhalb von "border"). Kann per CSS gestyled werden
Menülinks und sonstige Links mit :hover
-> gleiches CSS auch bei :focus
zusätzliche Outline hilft
Bei unklarem Hintergrund z.B. auf Sliderbildern outline:inset; outline:outset; outline:invert;

Bedienung Tabulator-Taste

Navigation - Contao Menüs

*ERRORS: Missing alternative text*

Ziel:

Skiplinks sichtbar, wenn sie den Focus haben.
Sinnvolle Beschriftung der Links
Evtl. zusätzliche Skiplinks,
z.B. "Direkt zum Content", "Zum aktiven Submenü"

Listen mit Links
Unsichtbarer Skiplink zum Überspringen der Liste.

*ERRORS: Missing alternative text*

Navigation - Contao Menüs

*ERRORS: Missing alternative text*

Skiplinks sichtbar machen

Skiplinks sind versteckt.

Skiplinks werden sichtbar,
wenn sie den Focus haben.

class="invisible"

layout.min.css

.invisible {
 border:0;
 clip:rect(0 0 0 0);
 height:1px;
 margin:-1px;
 overflow:hidden;
 padding:0;
 position:absolute;
 width:1px
}

a[href*="#skip"].invisible:focus,{
display: inline-block;
color: #25baba;
clip: auto;
outline: 2px dotted #25baba;
width:auto;
height:auto;
margin:0;
position:relative;
}

*ERRORS: Missing alternative text*

Sinvolle Beschriftung der Skiplinks

Nutzen des Modul-Titels

Template Anpassung mod_navigation.html

<a href="<?= $this->request ?>#<?= $this->skipId ?>" class="invisible">
<?= $this->name ?> - <?= $this->skipNavigation ?></a>

*ERRORS: Missing alternative text*

Navigation - Contao Menüs

<a href="<?= $this->request ?>#<?= $this->skipId ?>" class="invisible">
<?= $this->skipNavigation ?></a>

Ausgabe: Navigation überspringen

*Ausgabe: Hauptmenü - Navigation überspringen

*ERRORS: Missing alternative text*

Navigation - Contao Menüs

*ERRORS: Missing alternative text*

Zusätzliche Skiplinks

*ERRORS: Missing alternative text*

"Direkt zum Inhalt"

Sinnvoll wenn der Header viele interaktive Elemente enthält (z.B: Metamenü, Slider)
Modul "HTML-Element" als erstes in die Kopfzeile

<a class="invisible" href="{{env::request}}#main" title="Direkt zum Seitentext springen">
Direkt zum Inhalt</a>

https://dr-hochsteger.at

*ERRORS: Missing alternative text*

Zusätzliche Skiplinks

*ERRORS: Missing alternative text*

*"Direkt zum Submenü"

<?php foreach ($this->items as $item): ?>
<?php if (strpos($item['class'],'submenu')!==false && strpos($item['class'],'trail')!==false):?>
<a href="{{env::request}}#skip2subnav" class="invisible">Direkt zum Submenü</a>
<?php endif; ?>
<?php endforeach; ?>
<ul class="<?= $this->level ?>">

Navigation - Contao Menüs

<?php elseif ($item['class']== 'submenu trail'): ?>
 <li class="<?= $item['class'] ?>">
  <a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>
   <?php if ($item['accesskey'] !== '') echo ' accesskey="' . $item['accesskey'] . '"'; ?>
   <?php if ($item['tabindex']) echo ' tabindex="' . $item['tabindex'] . '"'; ?>
   <?php if ($item['nofollow']) echo ' rel="nofollow"'; ?>
   <?= $item['target'] ?>
   <?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="url">
   <span itemprop="name"><?= $item['link'] ?></span></a>
  <a id="skip2subnav" class="invisible"></a>
  <?= $item['subitems'] ?>
 </li>

nav_default.html

Navigation - Eigene Buttons

*ERRORS: Missing alternative text*

z.B. auch Mobiles Menü - Trigger

<button>
oder role="button", mit tabindex=0, aria-haspopup="true", aria-expanded="false" ...
Focus bleibt zunächst dort; Trigger mit z-index sichtbar halten
Mobiles Menü wird durgetabt, selbst wenn es verborgen ist! -> Desktop: CSS display:none
Erreichbarkeit nach dem Öffnen: Menü im Header ansiedeln, nicht ans Ende verschieben -> Tabindex

https://www.vienneva.com/

*ERRORS: Missing alternative text*

Navigation - Eigene Buttons

*ERRORS: Missing alternative text*

Navigation - Eigene Buttons

*ERRORS: Missing alternative text*

#mm_toggler {
    position:relative;
    margin-top:.4em;
    padding-left:0;
    text-align:center;
    border:0;
    font-size:.9em;
    color:#fff;
    text-transform:uppercase;
    background:transparent;
    z-index:1001;
    cursor:pointer;
    outline:none;
}

Videoplayer

*ERRORS: Missing alternative text*

Steuerelemente anspringbar, bedienbar, verlassbar
- Sichtbarer :focus
- CSS funktioniert nicht mit reinem HTML5 Video
  aber z.B. MediaElement.js (js_mediaelement)

#main .mejs__container :focus {
    background-color:#702856;
    border:0;
    outline-offset:0;
}


#main .mejs__container.mejs__video:focus {
    border:4px solid #b01778;
}

Videoplayer

*ERRORS: Missing alternative text*

SRT-Untertitel: vorlesbar, SEO-geeignet
- Nr., Zeitpunkt, Text, Leerzeile
- Bearbeitung mit Texteditor oder z.B. mit Aegisub
- Hinzufügen z.B. mit VLC

Evtl. Langbeschreibungen

longdesc="beschreibung.html"

longdesc="#beschreibung"

oder zusammenfassender Text

Formulare

*ERRORS: Missing alternative text*

Label mit Attribut for: Das Label wird automatisch dem zugehörigen Inputfeld zugeordnet.
Standardprüfungen (E-Mail, Datum, Zahl ...) nutzen
HTML5-Validierung: Bei Fehlen oder Fehleingabe.
Kann ausgeschaltet werden (novalidate).
Fehlerausgabe im p.error
Tabindex setzbar

https://www.vienneva.com/

Formulare

*ERRORS: Missing alternative text*

Tabindex nur wenn notwendig setzen:
Besser sinnvolle Reihenfolge einrichten.
Textfeld-Meldung sehr einförmig (Browserstandard)
Auf Konformitätsstufe AA müssen Korrekturen für Fehleingaben vorgeschlagen werden, sofern sie ermittelt werden können und sofern dabei keine Sicherheitsprobleme entstehen.

*ERRORS: Missing alternative text*

HTML5-Styling der Eingabefelder über CSS-Werte:
:focus, :valid, :invalid, :optional
z.B. Farbcodierung bereits bei der Eingabe.
Farbcodierung alleine genügt nicht. Da UserInnen mit Farbschwäche sie möglicherweise nicht wahrnehmen.

Formulare

*ERRORS: Missing alternative text*

https://www.vienneva.com/

*ERRORS: Missing alternative text*

Anpassung der Popup-Fehlermeldungen

über die Contraint Validation API (HTML5, Browser)

var firstname = document.getElementById("ctrl_13");

firstname.addEventListener('input', () => {
  firstname.setCustomValidity('');
  firstname.checkValidity();
});

firstname.addEventListener("invalid", function (event) {
  if(firstname.value === ''){
    firstname.setCustomValidity('Bitte geben Sie Ihren Vornamen ein!');
  } else {
  	firstname.setCustomValidity("Ihr Vornamen muss aus mindestens 2 Buchstaben bestehen.");
  }
});

Formulare

*ERRORS: Missing alternative text*

Anpassung der Popup-Fehlermeldungen

über die Contraint Validation API (HTML5, Browser)

Formulare

https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation

https://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

https://www.sitepoint.com/html5-forms-javascript-constraint-validation-api/

Die Anpassung ist nicht trivial, da sie die Standard-Meldung jeweils fix überschreibt.
Wird die Meldung leer gesetzt, so wird keine Meldung ausgegeben.

Tabellen

*ERRORS: Missing alternative text*

Beschriftung ist wichtig.
Caption = Tabellenüberschrift (TinyMCE)

Im Quelltext:

Summary = Zusammenfassung, wenn Überschrift nicht zur Erklärung ausreicht, unsichtbar nur für Screenreader
Table headers = Spaltennamen
Scope Bezug auf Reihe oder Spalte

*ERRORS: Missing alternative text*

https://www.w3.org/WAI/tutorials/tables/
https://www.einfach-fuer-alle.de/artikel/barrierefreie-datentabellen/komplexe-tabellen/

Tabellen

*ERRORS: Missing alternative text*

Contao Inhaltslelement Tabelle:

Zusammenfassung = Caption
Kopfzeile hinzufügen: Die erste Reihe wird als thead und deren Zellen als th ausgewiesen
Reihenüberschriften hinzufügen: Erste Zelle einer Reihe wird als th ausgewiesen mit scope:row.
Fußzeile: Die letze Reihe wird mit tfoot ausgewiesen.

Redakteure sensibilisieren

*ERRORS: Missing alternative text*

Redakteure sensibilisieren

*ERRORS: Missing alternative text*

Einheitliche Pflege der Website
Überschriften Reihenfolgen einhalten (Plugin)
Dateiverwaltung immer mit Metadaten
Sensibilisierung für "Ich sehe was, was Du nicht siehst."
Einfache Formulierungen anstreben
Alternative Texte anbieten

Verständliche Inhalte

*ERRORS: Missing alternative text*

Logische, lesbare Strukturierung
- Menüpunkte
- Überschriften
Einfache Sprache, oder alternative Erklärung in einfacher Sprache
Klare, unmissverständliche Anleitungen
Videos mit Untertiteln oder Transkription
Audio mit Transkription
Nicht auf Abbildungen verlassen

Barrierefreiheit

*ERRORS: Missing alternative text*

Nicht leicht zu ereichen
Einfühlen in die Einschränkungen
Zusammenarbeit mit Personen
mit Handicap

Pi.1415926535 [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)]

Lohnend, weil sie den Blick erweitert
Von Vorteil für alle.

Links

*ERRORS: Missing alternative text*

Die neuen CSS-Queries @layer, @scope und @container - ContaoKonfv2024

Vortrag Contao Konferenz 2024, München

Die neuen CSS-Queries @layer, @scope und @container

Die CSS-Kaskade

Ebenen:

Die CSS-Kaskade

Spezifität

@layer – Cascade Layers

@layer – Cascade Layers

@layer – Cascade Layers

Wie mache ich eine Contao Website barrierefrei?

Acessibility = Zugänglichkeit

⊂ UX

Ein sehr gewagter Titel!

Wie mache ich eine Contao Website zugänglicher?

Grundsätze und betroffene Bereiche

Websites zugäglicher machen

Die Basis

Wie kann man sich das anschauen?

Navigation

Wie ist Zugänglichkeit in Contao vorbereitet?

HTML5-Semantik

Sprachauszeichnung

Seiteneigenschaften

Seiteneigenschaften

Dateiverwaltung

Dateiverwaltung

Navigation - Contao Menüs

Navigation - Contao Menüs

Navigation - Contao Menüs

Navigation - Contao Menüs

Navigation - Contao Menüs

Navigation - Contao Menüs

Navigation - Contao Menüs

Navigation - Eigene Buttons

Navigation - Eigene Buttons

Navigation - Eigene Buttons

Videoplayer

Videoplayer

Formulare

Formulare

Formulare

Formulare

Formulare

Tabellen

Tabellen

Redakteure sensibilisieren

Redakteure sensibilisieren

Verständliche Inhalte

Barrierefreiheit

Links

Links

Links

Die neuen CSS-Queries @layer, @scope und @container - ContaoKonfv2024

More from Eva Broermann

Die neuen CSS-Queries @layer,
@scope
und @container

Wie mache ich eine
Contao Website barrierefrei?

Wie mache ich eine
Contao Website zugänglicher?

Wie ist Zugänglichkeit
in Contao vorbereitet?