WCAG

Web Content Accessibility Guidelines

Autor: · Lizenz: CC BY-NC-ND 4.0 · Bookmark: Permalink

Vortragszeit: ~30 min

Themen

  • Einordnung
    Die Geschichte des World Wide Web und die Arbeit des W3C.
  • Web Accessibility
    Die Arbeit des W3C für Barrierefreiheit im World Wide Web.
  • WCAG 2.0
    Blick auf die Web Content Accessibility Guidelines.

Teil 1

Einordnung

Geschichte des World Wide Web und die Arbeit des W3C.

Geschichte

  • 1989 entwickelt Tim Berners-Lee das Mesh
  • am CERN, in Genf, Schweiz.
  • 1990 wird das Mesh umbenannt in World Wide Web.

Sir Tim Berners-Lee

Tim Berners-Lee at his desk in CERN, 1994

Tim Berners-Lee hat die erste Webseite, den ersten Browser und den ersten Webserver entwickelt.

Er schrieb die ersten Spezifikationen für URLs, HTTP und HTML.

World Wide Web Consortium (W3C)

W3C Logo

1994 gründete Tim Berners-Lee das W3C, eine Standardisierungsorganisation für die Technologien des World Wide Web.

Mission

Die Entwicklung von Protokollen und Richtlinien (Standards), die das langfristige Wachstum des World Wide Web sicherstellen und voll ausschöpfen.

Standards

Das W3C entwickelt hunderte von Standards. Zum Beispiel: HTML, XML, CSS, SVG, WOFF, WCAG, etc.

Mitglieder

Mehr als 450 Organisationen sind im W3C aktiv.
Auszug der Mitgliederliste:

  • Arron Eicholz, Microsoft
  • Alex Danilo, Google
  • Edward O'Connor, Apple Inc.
  • Jonathan Watt, Mozilla Corporation
  • Erik Dahlström, Opera Software
  • Anthony Grasso, Canon Inc.
Durchsetzungsfähig
  • Gesellschaftlich breit aufgestellt
    Regierungsvertreter, Akademiker (R&D), Privatunternehmen, Organisationen, …
  • Offene Prozesse
    (Größtenteils) transparente Prozesse, Beteiligung/Feedback ist möglich und gefordert.
  • Freie Nutzung
    Standards sind frei zugänglich, kostenfreie Nutzung, weite Verbreitung ist angestrebt.
W3C - Multilingual Web Workshop
W3C Multilingual Weg Workshop Europäische Kommission, Luxemburg - 2012

Teil 2

Web Accessibility

Die Arbeit des W3C für Barrierefreiheit im Web.

Barrierefreiheit

"Die Kraft des World Wide Web ist in seiner Universalität begründet.

Der Zugang von allen, unabhängig von Behinderung ist ein wesentlicher Aspekt dieser Universalität."

Tim Berners-Lee

Ein Web für alle Menschen

... unabhängig von ihrer Hardware, Software, Netzwerkinfrastruktur, Sprache, Kultur, geographischer Lage oder körperlicher oder geistiger Fähigkeit.

Hardware und Software

Browser Icon

Die Inklusionsarbeit bzgl. Hardware und Software drückt sich u.a. durch die Zusammenarbeit mit Herstellern aus.

Beispiele: Google, Mozilla, Microsoft, Canon, Siemens.

Netzwerke

IETF Logo

Die Inklusionsarbeit bzgl. Netzwerkinfrastruktur drückt sich u.a. durch die Zusammenarbeit mit und Kompatibilität zu Standards anderer Standardisierungsorganisationen, z.B. der Internet Engineering Task Force (IETF) aus.

Entwickelt: TCP/IP, DNS, HTTP, etc.

World Wide Web im Internet

IETF beschreibt die Technologien des Internet.
W3C beschreibt die Technologien des World Wide Web.

Internet
(IETF)

World Wide Web
(W3C)

Sprache, Kultur und Geografische Lage

W3C Multilingual Web (MLW) Activity Logo

Die Inklusionsarbeit bzgl. Sprache, Kultur und geografischer Lage, findet u.a. innerhalb der W3C Internationalization (i18n) Activity statt.

Entwickelt: Working Group übergreifende Richtlinien und Tutorials für mehrsprachige Inhalte und interkulturelle Funktionen.

Körperliche und geistige Fähigkeiten

W3C Web Accessibility Initiative (WAI) Logo

Die Inklusionsarbeit bzgl. körperlicher und/oder geistiger Fähigkeiten, findet u.a. innerhalb der W3C Web Accessibility Initiative (WAI) statt.

Entwickelt: ATAG, UAAG und WCAG.

W3C-Ökosystem

Working Groups & Task Forces entwickeln Standards.

W3C

HTML
Working Group (WG)

HTML5

...

WAI
Task Force

WA WG

WCAG
2.0

Web Accessibility Komponenten

3 Guidelines für Web Accessibility:

  • Authoring Tool Accessibility Guidelines (ATAG)
  • Web Content Accessibility Guidelines (WCAG)
  • User Agent Accessibility Guidelines (UAAG)

Web Accessibility Komponenten

Authoring Tool Accessibility Guidelines (ATAG)

Web Accessibility Komponenten

Web Accessibility Komponenten

Web Content Accessibility Guidelines (WCAG)

Web Accessibility Komponenten

Web Accessibility Komponenten

User Agent Accessibility Guidelines (UAAG)

Web Accessibility Komponenten

Web Accessibility Initiative (WAI)

Ca. 150 Menschen aus Industrie, Behindertenorganisationen, Behörden und Forschungslabors.

Web Accessibility Working Group (WA WG)

Auszug der Mitgliederliste:

  • Steve Faulkner, The Paciello Group
  • Joshue O Connor, InterAccess
  • Loretta Guarino Reid, Google
  • Cynthia Shelly, Microsoft
  • Andrew Kirkpatrick, Adobe
  • Drew LaHart, IBM
  • Gregg Vanderheiden, University of Wisconsin

Teil 3

WCAG 2.0

Blick auf die Web Content Accessibility Guidelines.

WCAG 2.0

Der Guideline umfasst eine breite Palette von Empfehlungen für die Bereitstellung von Webinhalten für Menschen mit Behinderungen/Einschränkungen, u.a.:

  • Blindheit und Sehschwäche
  • Taubheit und Hörverlust
  • Lernschwierigkeiten
  • kognitive Einschränkungen
  • begrenzte Bewegungen
  • Sprachbehinderungen
  • Lichtempfindlichkeit
  • sowie Kombinationen dieser Einschränkungen

Wen betrifft das?

"Eine Milliarde Menschen oder 15% der Weltbevölkerung, leben mit irgendeiner Form von Behinderung."

Weltbank

Umschreibende Zusammenfassung

Die folgenden Seiten enthalten eine pa­ra­phra­sie­rte Zusammenfassung der Web Content Accessibility Guidelines (WCAG) 2.0.

Die (normativen) technischen Spezifikationen finden Sie unter www.w3.org/TR/WCAG20.

Grundsätze (Principles)

Anforderungen der WCAG an barrierefreiheit:

  1. Wahrnehmbar (4 Richtlinien)
  2. Bedienbar (4 Richtlinien)
  3. Verständlich (3 Richtlinien)
  4. Robust (1 Richtlinie)
1. Wahrnehmbar

Allgemeine Anforderung:

"Informationen und Komponenten der Benutzeroberfläche (z.B. Formulare) müssen so aufbereitet sein, dass ein Benutzer sie auf unterschiedliche Art und Weise wahrnehmen kann."

1. Wahrnehmbar

Die Anforderung enthält folgende 4 Richtlinien für Barrierefreiheit:

  1. Textalternativen für Nicht-Text-Inhalte
  2. Alternativen für zeitbasierte Medien
  3. Anpassungsfähige Inhalte
  4. Unterscheidbare Inhalte
1.1. Textalternativen

"Stellen Sie Textalternativen für alle Nicht-Text-Inhalte zur Verfügung, damit diese in andere Formen umgewandelt werden können, z.B. Blindenschrift, Symbole oder einfachere Sprache."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html

1.1. Textalternativen

(negativ) Beispiel 1: Alternative = Text

Beispielbild: Unausgefülltes alt-Attribut.
1.1. Textalternativen

Beispiel 2: Alternative = gesprochenes Wort (Audio)

Beispielbild für ein Google Captcha mit Audiofunktion
1.2. Alternativen für zeitbasierte Medien

"Stellen Sie Alternativen für zeitbasierte Medien wie Audio und Video bereit, damit diese in andere Formen umgewandelt werden können, z.B. Blindenschrift, Symbole oder einfachere Sprache."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv.html

1.2. Alternativen für zeitbasierte Medien

Beispiel: Alternative = Text (Web Video Text Track (.vtt))

Beispielbild: HTML5 Videoplayer (HTML5-Track-Element und .vtt-Datei.
1.3. Anpassungsfähig

"Erstellen Sie Inhalte, die auf unterschiedliche Weise dargestellt werden können (z. B. einfacheres Layout), ohne Informationen oder Struktur zu verlieren."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation.html

1.3. Anpassungsfähig

Beispiel: Inhalt unabhängig von visueller Darstellung

Beispielbild: ZEIT Online Überschrift in gerendert im Browser und Code.
1.3. Anpassungsfähig

Beispiel: Inhalt unabhängig von visueller Darstellung

Beispielbild: ZEIT Online Überschrift in Kommandozeilenbrowser.
1.4. Unterscheidbar

"Erleichtern Sie dem Nutzer das Anzeigen und Hören von Inhalten, einschließlich der Trennung des Vordergrunds vom Hintergrund."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast.html

1.4. Unterscheidbar

Beispiel 1: Farbunabhängige Informationen.

Beispielbild: Nicht barrierefreies Formular
1.4. Unterscheidbar

Beispiel 1: Alternative = Symbole

Beispielbild: Nicht barrierefreies Formular
1.4. Unterscheidbar

Beispiel 2: Schriftart, Größe und Kontrast.

Beispielbild: Nicht barrierefreies Formular

Grundsätze (Principles)

Anforderungen der WCAG an barrierefreiheit:

  1. Wahrnehmbar (4 Richtlinien)
  2. Bedienbar (4 Richtlinien)
  3. Verständlich (3 Richtlinien)
  4. Robust (1 Richtlinie)
2. Bedienbar

Allgemeine Anforderung:

"Komponenten der Benutzeroberfläche und Navigation müssen auf unterschiedliche Art und Weise bedienbar sein."

2. Bedienbar

Der Grundsatz enthält folgende 4 Richtlinien für Barrierefreiheit:

  1. Alle Funktionen müssen per Tastatur zugängig sein
  2. Genügend Zeit zum Lesen und Verwenden
  3. Inhalte dürfen keine Krampfanfälle verursachen
  4. Navigtion muss einfach sein
2.1. Per Tastatur zugänglich

"Stellen Sie alle Funktionen auch über eine Tastatur zur Verfügung."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html

2.1. Per Tastatur zugänglich

(negativ) Beispiel 1: Unzugänglich

Beispielbild: Das Programm des WUDHH 2017 ist nicht mit Tab ansteuerbar.
2.2. Genügend Zeit zum Lesen und Verwenden

"Stellen Sie Benutzern ausreichend Zeit zum Lesen und Verwenden von Inhalten zur Verfügung."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html

2.2. Genügend Zeit zum Lesen und Verwenden

Beispiel 1: Pause, Stop, Hide

Beispielbild: Ein s.g. Caroussel auf der Webseite bundeskanzlerin.de mit einem Pause-Knopf.
2.3. Krampfanfälle vermeiden

"Entwerfen Sie Inhalte nicht auf eine Weise, die bekanntermaßen Anfälle verursacht (grob: alles was mehr als 3 Mal/Sekunde blinkt."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure.html

2.3. Krampfanfälle vermeiden

(negativ) Beispiel 1: Animated Gifs (auch Werbung)

Beispielbild: Webseite mit animierten Bildern.
2.3. Krampfanfälle vermeiden

Beispiel 1: Missbrauch

Artikel in der Osnabrücker Zeitung über Angriffe mit Epilepsie-auslösenden Tweets auf Journalisten.
2.4. Einfaches navigieren

"Bieten Sie Nutzern die Möglichkeit zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms.html

2.4. Einfaches navigieren

Beispiel 1: Skip Navigation

Beispielbild: "Direkt zum Inhalt springen" bei ZEIT Online.
2.4. Einfaches navigieren

Beispiel 2: Breadcrumbs

Beispielbild: Breadcrubs auf den Seiten von bund.de

Grundsätze (Principles)

Anforderungen der WCAG an barrierefreiheit:

  1. Wahrnehmbar (4 Richtlinien)
  2. Bedienbar (4 Richtlinien)
  3. Verständlich (3 Richtlinien)
  4. Robust (1 Richtlinie)
3. Verständlich

Allgemeine Anforderung:

"Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein."

3. Verständlich

Der Grundsatz enthält folgende 3 Richtlinien für Barrierefreiheit:

  1. Lesbar und verständlich
  2. Vorhersehbar
  3. Fehler vermeiden und korrigieren
3.1. Lesbar und verständlich

"Textinhalte müssen lesbar und verständlich sein."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning.html

3.1. Lesbar und verständlich

Beispiel 1: Abkürzungen (Abbreviations)

Beispielbild: Nutzung des HTML abbr-Element
3.1. Lesbar und verständlich

(negativ) Beispiel 2: Sprache

Beispielbild: Nutzung des lang-Attribut am html-Element
3.2. Vorhersehbar

"Gestalten Sie Webseiten vorhersehbar in Aussehen und Funktion."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior.html

3.2. Vorhersehbar

(negativ) Beispiel 1: Konsistente Navigation
Seit über 10 Jahren ein verlässliches Beispiel für inkonsistente Navigation:

Screenshot der Navigationsleiste von ibm.com
3.3. Fehler vermeiden und korrigieren

"Helfen Sie Benutzern, Fehler zu vermeiden und zu korrigieren."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error.html

3.3. Fehler vermeiden und korrigieren

(negativ) Beispiel 1: Keine Text-Fehleridentifikation

Fehlende Bescheibung eines Fehlers im Text-Format auf der Webseite von Cinemaxx.

Grundsätze (Principles)

Anforderungen der WCAG an barrierefreiheit:

  1. Wahrnehmbar (4 Richtlinien)
  2. Bedienbar (4 Richtlinien)
  3. Verständlich (3 Richtlinien)
  4. Robust (1 Richtlinie)
4. Robust

Allgemeine Anforderung:

"Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen User-agents, einschließlich technischer Hilfsmittel für Menschen mit Behinderungen."

https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat.html

4. Robust

Der Grundsatz enthält folgende Richtlinie für Barrierefreiheit:

  1. Kompatibilität
4.1. Kompatibilität

Beispiel 1: Validierung [validator.w3.org]

Beispielbild: Ergebnis des HTML-Validators
4.1. Kompatibilität

Weitere Werkzeuge zur Validierung finden Sie unter:
https://www.w3.org/WAI/ER/tools/

4.1. Robust

Webseiten, vollständig nach aktuellen Spezifikationen entwickelt, sind robust.

Vielen Dank!

Autor: · Lizenz: CC BY-NC-ND 4.0 · Bookmark: Permalink