Digitale Barrierefreiheit von Anfang an

Die Website »Digitale Barrierefreiheit von Anfang an« zeigt anhand von Videos, was man beachten sollte, wenn man Webseiten gestaltet. Zur Zeit sind folgende Videos verfügbar:

Videos in der Reihe »Digitale Barrierefreiheit von Anfang an«
Video	Beschreibung	Behandelte HTML-Tags bzw. CSS-Properties	Relevante WCAG 2.1-Erfolgskriterien	Weitere Bemerkungen und Links
Seitentitel & Überschriften	Dieses Video erklärt, was man bei Webseiten bezüglich Seitentitel und Überschriften beachten muss, damit die WCAG 2.1-Anforderungen erfüllt sind.	`title` `main` `section` `h1`, `h2`, `h3`, `h4`, `h5`, `h6`.	1.3.1: Info and Relationships (A) 1.3.2: Meaningful Sequence (A) 1.3.6: Identify Purpose (AAA) 2.4.1: Bypass Blocks (A) 2.4.5: Multiple Ways (AA) 2.4.10: Section Heading (AAA) 3.2.3: Consistent Navigation (AA)	WAI: Headings WAI: Content Structure
Seitenstruktur & Landmarks	Dieses Video erklärt, was man bei Webseiten bezüglich Seitenstruktur und Landmarks beachten muss, damit die WCAG 2.1 Anforderungen erfüllt sind. Außerdem wird der Skip-Link erklärt.	`header`, `nav`, `main`, `footer` `section`, `article`, `aside` `form`	1.3.1: Info and Relationships (A) 2.4.1: Bypass Blocks (A) 2.4.2: Page Titled (A) 2.4.6: Headings and Labels (AA) 2.4.10: Section Heading (AAA)	WAI: Page Regions Deque: HTML 5 and ARIA Landmarks
Einsatz von Farben	Dieses Video erklärt, was man beim Einsatz von Farben beachten muss, damit die WCAG 2.1 Anforderungen erfüllt sind.	`color`, `background-color` (CSS)	1.3.3: Sensory Characteristics (A) 1.4.1: Use of Color (A) 1.4.3: Contrast (Minimum) (AA) 1.4.6: Contrast (Enhanced) (AAA) 1.4.11: Non-text Contrast (AA)	contrast-ratio.com Tanaguru Contrast-Finder Colour Contrast Analyser (CCA)
Animationen	Dieses Video erklärt, wie man Animationen gestalten sollte, damit die WCAG 2.1 Anforderungen erfüllt sind	(`img`, `script`)	1.1.1: Non-text Content (A) 1.4.11: Non-text Contrast (AA) 2.2.2: Pause, Stop, Hide (A) 2.3.1: Three Flashes or Below Threshold (A) 2.3.2: Three Flashes (AAA) 2.3.3: Animation from Interactions (AAA)	Gifffer: Demo; Gifffer Quellcode Omri.js
Links oder Verweise	Dieses Video erklärt, worauf man bei der Gestaltung von Links achten sollte.	`a`	1.3.1: Info and Relationships (A) 1.3.2: Meaningful Sequence (A) 1.3.5: Identify Input Purpose (AA) 1.3.6: Identify Purpose (AAA) 2.4.6: Headings and Labels (AA) 2.5.3: Label in Name (A) 2.5.5: Target Size (AAA) 3.2.1: On Focus (A) 3.2.2: On Input (A) 3.2.4: Consistent Identification (AA) 3.2.5: Change on Request (AAA) 3.3.2: Labels or Instructions (A) 3.3.5: Help (AAA) 4.1.2: Name, Role, Value (A)	WebAIM: Links and Hypertext

Diese Videos sind unter der Lizenz Creative Commons — Namensnennung 4.0 International — CC BY 4.0 verfügbar.

Auf der Website WCAG 2.1 erklärt finden Sie Links zu Videos und anderen Ressourcen zu den Richtlinien und Erfolgskriterien von WCAG 2.1.

Werkzeuge zur Überprüfung der Barrierefreiheit von Webseiten:

WAVE Web Accessibility Tool (WebAIM)
ARC Toolkit (Paciello Group)
Functional Accessibility Evaluator (FAE) 2.0 (University of Illinois)
AChecker

Hinweis: Die Hochschule der Medien bietet im Rahmen des Weiterbildungskurses »Digital Innovation« ein Modul Grundlagen der digitalen Barrierefreiheit an.