Nothing
We transform grand ideas into pioneering products. With the power of design.
Zugänglich von Anfang an
Oder: Was russische Dörfer mit der Barrierefreiheit
von Webseiten zu tun haben
Nothing AG
Technology experts in digital inclusion
Josua Muheim
www.nothing.ch
Einige gängige Vorurteile
- Barrierefreiheit ist teuer.
- Barrierefreiheit führt zu unbefriedigenden Kompromissen.
- Barrierefreiheit muss separat behandelt /
hinzugefügt werden.
- Barrierefreiheit macht Entwickelnden das
Leben schwer.
gegenüber digitaler Barrierefreiheit
Hallo zusammen! 👋🏼
- Josua Muheim
- Web-Entwickler ~15 Jahre
- Überzeugung: Technologie soll menschliches Potenzial freischalten
- Ziel: Inklusion aller Menschen
-
Experte für Barrierefreiheit ~8 Jahre
- Ehemaliger Mitarbeiter «Zugang für alle»
- Initiator des «A11y Dev Guide»
Good ol' times! 😊
Nothing AG
- Web Agentur / Venture Lab
- UX, Frontend Entwicklung
- Peer to peer (P2P)
- Mission: Anderen helfen, zu helfen!
- Bern, Schweiz
A11y-Techies:
Wir sind die Technologie-Experten im Thema
Digitale Inklusion.
Nothing's Kompetenzen & Angebote
- Entwicklerinnen, Designer, UX- und
Accessibility-Spezialisten - Wir arbeiten aktiv in Ihrem Projekt
mit - direkt im Code! - Umsetzung / Begleitung von Projekten
- Optimierung existierender Projekte
- Schulung: Weitergabe unserer Skills
Technology experts in digital inclusion
Kontaktiere josua@nothing.ch
Potemkinsche Dörfer
Kleiner Exkurs nach Russland
Potemkinsche Dörfer
- Feldmarschall Potemkin soll Kulissen von Dörfern aufgestellt haben
- Um Katharina die Grosse über Wohlstand und Entwicklung zu täuschen
- Illusion von vorweisbaren Erfolgen durch materiellen/organisatorischen Aufwand
Vorspiegelung falscher Tatsachen
- Gut aussehende Objekte, die
schlechten Zustand verbergen - Wirken ausgearbeitet und
beeindruckend - Es fehlt an Substanz
Barrierefreiheit zu tun?
Was hat das mit
Webseiten sind auch so aufgebaut
- Wir haben "Dinge" im Hintergrund
- HTML (und JavaScript)
- Informationen (Text, Audio, Bilder...)
- Und eine visuelle Fassade
- CSS
- Rein grafische Elemente (Bilder)
"Baue, dann bemale!"
- Zuerst benötigen wir grundsolide
Bausubstanz - Danach bemalen wir sie schön!
- Für grundsolide Bausubstanz benötigen
wir Wissen über alle Anforderungen- Keine Anforderung "Barrierefreiheit"
- Oder zu spät
Nachträgliche "Optimierung"
- Bausubstanz muss aufwändig verändert
werden- "Mach Sagrada Familia rollstuhlgängig!"
- Führt zu enormen Zusatzkosten
- Ergibt unbefriedigende Ergebnisse
- Kompromisse, Workarounds
- Kompromisse, Workarounds
- Nochmal:
Was hat das mit digitaler Barrierefreiheit
zu tun??
Potemkinsche Dörfer!
Viele moderne Websites sind
Zumindest
aus Sicht der Barrierefreiheit
Grosse Klappe, wenig dahinter?
- Moderne Webseiten sind oft ausgerichtet auf
- Aufwändiges visuelles Erleben
- Komplexe interaktive Möglichkeiten
- Man zäumt das Pferd von hinten auf
- Fokus komplett auf Fassade gerichtet
- Bausubstanz (HTML) vernachlässigt
- Generelles Problem: schlechte Semantik im HTML!
- Assistive Geräte (Screenreader) benötigen
saubere Semantik - Dies ermöglicht sinnvolle Konsumation und Interaktion
- Assistive Geräte (Screenreader) benötigen
Semantisches HTML
Webdesign Grundschulstufe:
Was ist Semantik?
- Philosophie & Linguistik: Das Studium der Bedeutung
- Bei User Interface / Web Webentwicklung:
- Die Bedeutung von UI Elementen
- Die allgemeine Bedeutung der Inhaltsstruktur
- Zum Beispiel
- "Dies ist eine Überschrift" <h...>
- "Dies ist eine Überschrift auf Ebene 2" <h2>
- "Dies ist ein Texteingabefeld" <input type="text">
- Eingabehilfen (etwa Screenreader) evaluieren diese Information
- Dies ermöglicht sinnvolle Konsumation und Interaktion
Assistive Geräte
entlarven schlechte Semantik!
Kollateralschäden fehlender Semantik
- Grundlegende Funktionalitäten fehlen oder
nur eingeschränkt verfügbar- Keyboard-only Navigation unmöglich
- Überschriften-Strukturen mangelhaft
- Alternativ-Texte von Bildern fehlen
- Interaktive Elemente (custom JavaScript
Widgets) unbedienbar - Etc.
- <div> und <span> "Suppe"
- "Gewürzt" mit CSS
- Geschmacksverstärker, keine Vitamine
Gängige Vorurteile
- Barrierefreiheit ist teuer.
- Barrierefreiheit führt zu unbefriedigenden Kompromissen.
- Barrierefreiheit muss separat behandelt /
hinzugefügt werden.
- Barrierefreiheit macht Entwickelnden das
Leben schwer - und Nutzenden ebenfalls!
Hauptursache ist nachträgliches Optimieren!
Antoni Gaudí!
Beschuldigen wir nicht
Rollstuhlgängigkeit 1882
Kaum Thema von öffentlichem Interesse
Barrierefreiheit!
Von Anfang an:
Implementierung einer Website
- Visuelles Design (Figma)
- Semantischer Prototyp (HTML)
- Informations-Struktur als HTML
- Ergänzungen mit ARIA
- Interaktives mit JavaScript
- Visuelle Überarbeitung (CSS)
- Schritt 1: Räumliche Positionierung
- Schritt 2: Ästhetik, Dekoration
- Beispiel-Projekt: WOZ!
Barrierefreiheit als Grundanforderung
Demo WOZ-Projekt
Auf der grünen Wiese...
Fazit: Accessibility done right
- Kunde hat Prototypen übernommen
- Ist beeindruckt von Sinnhaftigkeit,
logischer Stringenz und Einfachheit - Ästhetik (CSS) auf dieser Basis einfach
implementierbar - Gutes Gefühl, zu wissen, dass
Barrierefreiheit
bereits
sichergestellt
- Ist beeindruckt von Sinnhaftigkeit,
Barrierefreiheit von Anfang an
Vorurteile - debunked!
- Barrierefreiheit ist nicht teuer, wenn von Beginn weg berücksichtigt. Saubere HTML-Struktur zahlt sich mehrfach aus!
- Barrierefreiheit führt zu sauberen und eleganten Lösungen.
- Barrierefreiheit ist integraler Bestandteil
einer sauber programmierten Website. - Barrierefreiheit macht das Leben einfacher
von sowohl Entwickelnden als auch
Nutzenden.
Barrierefreiheit von Anfang an
Best Practices: Design / UX
- Farben und Kontraste validieren
- Komplexe Animationen / Interaktionen
- Bringen sie tatsächlich Mehrwert?
- Sonst → fort damit!
- Wie sollen sie umgesetzt werden?
- Möglichst mittels traditionellen,
semantischen HTML-Elementen - Bei Interaktivität → Form Controls!
- Es hilft, wenn Designer:innen grundlegendes HTML-Verständnis haben
- Möglichst mittels traditionellen,
- Bringen sie tatsächlich Mehrwert?
Mögliche Stolpersteine früh erkennen!
Best Practices: Design / UX
Weitere Beispiele
Best Practices: Development
- Korrekte HTML-Container (<header>, <main>...)
- Korrekte Überschriften-Struktur → H123
- Korrekte Alternativtexte für Bilder
- Einsatz barrierefreier Bibliotheken
(z.B. Widgets) - Regelmässiges manuelles Testen
- Mit Screenreadern (Desktop & Mobile)
- Mit Tastatur-Only
- Einsatz von automatisierbaren Test-Tools
- Kann sinnvoll sein
- Ersetzt aber niemals manuelles Testen
Sauberes HTML, dann visuelle Fassade
Accessibility Champions
- Übergeordneter Champion (Accessibility Ambassador)
- Generelle Verantwortung
- Muss nicht unbedingt technisches Wissen haben
- Am besten betroffene Person
- Pro Bereich ein Champion
- UX / Design
- Entwicklung
- Ggf. Inhalt
- Unabdingbar: komplettes Team muss sich des Themas annehmen
Accessibility Checkliste 2.0
- Alle Erfolgskriterien der WCAG 2.1 kurz und prägnant
- Verstehen-Text
- Was? Warum / für wen?
- Ausnahmen
- Verwandte Themen / Kriterien
- Verantwortlichkeiten
- Design, Dev, Content...
- Code-Beispiele
- Verstehen-Text
- Checkliste: 111 Prüfpunkte
- Prüfanleitung
a11y.digitaldialog.swiss
Accessibility
in MVPs
- Accessibility starts way before implementation phase
- Do it right - right from the start!
- Read our article: https://www.nothing.ch/showcase/mvp-inclusive-successful-idea-implementation/
Feedback & Diskussion
Besten Dank!
Nothing AG
Technology experts in digital inclusion
Nothing's Kompetenzen & Angebote
- Entwicklerinnen, Designer, UX- und
Accessibility-Spezialisten - Wir arbeiten aktiv in Ihrem Projekt
mit - direkt im Code! - Umsetzung / Begleitung von Projekten
- Optimierung existierender Projekte
- Schulung: Weitergabe unserer Skills
Technology experts in digital inclusion
Kontakt: josua@nothing.ch
Zugänglich von Anfang an
By Nothing
