Nothing
We transform grand ideas into pioneering products. With the power of design.
Accessible from the start
Or: What Russian villages have to do
with the accessibility of websites
Nothing AG
Technology experts in digital inclusion
Josua Muheim
www.nothing.ch
Some common prejudices
- Accessibility is expensive.
- Accessibility leads to unsatisfactory compromises.
- Accessibility must be treated / added separately.
- Accessibility makes life difficult for developers.
regarding digital accessibility
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
Potemkin Villages
A short excursion to Russia
Potemkin Villages
- Field Marshal Potemkin is said to have set up backdrops of villages
- To deceive Catherine the Great about prosperity and development
- Illusion of demonstratable success through material/organizational effort
Vorspiegelung falscher Tatsachen
- Good looking objects that
hide bad condition - Work elaborated and
impressive - Substance is lacking
with Accessibility?
What does this have to do
Web pages are also built like this
- They have "things" in the background
- HTML (and JavaScript)
- Information (text, audio, charts...)
- And a visual facade
- CSS
- Purely graphic elements (images)
"Build first, then paint!"
- First we need rock solid building fabric
- After that we paint it beautifully!
- For rock solid building fabric we need
we need knowledge about all
requirements- Often accessibility is no requirement
- Or too late
Subsequent "optimization"
- Building fabric must be extensively modified
- "Please, make Sagrada Familia wheelchair
accessible!"
- "Please, make Sagrada Familia wheelchair
- Leads to enormous additional costs
- Gives unsatisfactory results
- Compromises, Workarounds
- Compromises, Workarounds
- Again:
What does this have to do with digital
accessibility??
Potemkin Villages!
Many modern websites are
At least from the point of view of accessibility
Big mouth, little behind it?
- Modern websites are often geared towards
- Elaborate visual experience
- Complex interactive possibilities
- You "put the cart before the horse"
- Focus completely on the facade
- Building fabric (HTML) neglected
- General problem: bad semantics in HTML!
- Assistive devices (screen readers) require
clean semantics - This enables meaningful consumption and interaction
- Assistive devices (screen readers) require
Semantic HTML
Webdesign Elementary:
Importance of semantics
- Philosophy & Linguistics: The study of meanings
- UI / Web Development
- Refers to the meaning of UI elements
- Meaningful structure of content
- For example
- "This is a heading"
- "This is a heading of level 2"
- "This is a text input"
- Screen readers evaluate this info
- They convey it to user (through audio)
- This allows meaningful interaction with elements
Assistive devices
expose bad semantics!
Collateral damage of missing semantics
- Basic functionalities are missing or
only limited available- Keyboard-only navigation impossible
- Heading structures poor
- Alternative texts of images are missing
- Interactive elements (custom JavaScript
components) inoperable - Etc.
- <div> and <span> "soup"
- "Spiced" with CSS
- Flavor enhancers, no vitamins
Common prejudices
The main cause is subsequent optimization!
- Accessibility is expensive.
- Accessibility leads to unsatisfactory compromises.
- Accessibility must be treated / added separately.
- Accessibility makes life difficult for developers - and also users!
Antoni Gaudí!
Let's not blame
Wheelchair accessibility 1882
Hardly a topic of public interest
Accessibility!
From the very start:
Website implementation
- Visual design (Figma)
- Semantic prototype (HTML)
- Information structure as HTML
- Small additions with ARIA
- Interactivity with JavaScript
- Visual revision (CSS)
- Step 1: Spatial positioning
- Step 2: Aesthetics, decoration
- Example project: WOZ!
Accessibility as a basic requirement
Demo WOZ project
On the green field...
Conclusion: Accessibility done right
- Customer has taken over prototypes
- Is impressed by meaningfulness,
logical stringency and simplicity - aesthetics (CSS) on this basis can be easily
implementable - Good feeling to know that
accessibility
is already
ensured
- Is impressed by meaningfulness,
Accessibility from the start
Prejudices - debunked!
- Accessibility is not expensive if considered from the beginning. Clean HTML structure pays off several times over!
- Accessibility leads to clean and elegant solutions.
- Accessibility is an integral part of a cleanly
programmed website.
- Accessibility makes life easier for
both developers and users.
Accessibility from the start
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
Accessible from the start
By Nothing
