Wir sind alle nur zeitweilig ohne Einschränkungen. Deswegen sind barrierefreie Lösungen für jeden nützlich. Barrierefreiheit nicht bloß als eine nachrangige, von Vorschriften getriebene Pflichtübung zu verstehen, sondern von Anfang an als wesentlichen Faktor für gute Nutzererlebnisse zu begreifen, führt zu besseren Produkten und Dienstleistungen.
Dieser Vortrag beleuchtet, wie man die Grundlagen für Accessibility in einem Designsystem legt: womit man beginnt, welche Aspekte beachtet werden müssen und welche Werkzeuge einem dabei helfen. Mittels greifbarer Beispiele (und cooler Grafiken) wird das Thema einfach und direkt verständlich dargestellt.
5. We use a Persona Spectrum to understand related limitations
across a spectrum of permanent, temporary, and situational
disabilities. It’s a quick tool to help foster empathy and to
show how a solution can scale to a broader audience.
Support Card | The Persona Spectrum
Permanent Temporary Situational
Touch
en temporary or situational.
ck which limitations apply to
e Can’t speak
r Can’t touch
@BennoLoewenberg
Quelle:
Microsoft
Inclusive
Design
Toolkit
Aye !
Deaf Ear infection Bartender
Speak
Non-verbal Laryngitis Heavy accent
6. Can’t see Can’t speak
Can’t hear Can’t touch
Blind Cataract Distracted driver
Hear
Deaf Ear infection Bartender
Speak
Non-verbal Laryngitis Heavy accent
We use a Persona Spectrum to understand related limitations
across a spectrum of permanent, temporary, and situational
disabilities. It’s a quick tool to help foster empathy and to
show how a solution can scale to a broader audience.
Support Card | The Persona Spectrum
Permanent Temporary Situational
Touch
@BennoLoewenberg
Quelle:
Microsoft
Inclusive
Design
Toolkit
7. One arm Arm injury New parent
See
Blind Cataract Distracted driver
Hear
Deaf Ear infection Bartender
Disabilities are often temporary or situational.
Use this card to pick which limitations apply to
your scenario.
Can’t see Can’t speak
Can’t hear Can’t touch
We use a Persona Spectrum to understand related limitations
across a spectrum of permanent, temporary, and situational
disabilities. It’s a quick tool to help foster empathy and to
show how a solution can scale to a broader audience.
Support Card | The Persona Spectrum
Permanent Temporary Situational
Touch
@BennoLoewenberg
Quelle:
Microsoft
Inclusive
Design
Toolkit
traffic observant
8. e Can’t speak
r Can’t touch
show how a solution can scale to a broader audience.
Permanent Temporary Situational
Touch
One arm Arm injury New parent
See
Blind Cataract Distracted driver
We use a Persona Spectrum to understand related limitations
across a spectrum of permanent, temporary, and situational
disabilities. It’s a quick tool to help foster empathy and to
show how a solution can scale to a broader audience.
Support Card | The Persona Spectrum
Permanent Temporary Situational
Touch
Quelle:
Microsoft
Inclusive
Design
Toolkit
@BennoLoewenberg
9. „Betrachte Barrierefreiheit als eine
Notwendigkeit für ’s Kundenerlebnis.
Nicht als eine von Vorschriften
getriebene Pflichtübung.“
Quelle:
Gina
Bhalwalkar
@BennoLoewenberg
11. eCommerce-Händler verlieren
durch nicht barrierefreie Websites
— 6.9 Milliarden US$
jährlich in den USA
Quelle:
Deque
/
Home
Depot
@BennoLoewenberg
12. TREIBER & VORTEIL
—
| Barrierefreiheit vergrößert Marktanteil
—
| bringt Digital mit Markenversprechen
zur Übereinstimmung
—
| verringert Beschwerden und
Support-Aufwände
Quelle:
Forrester
@BennoLoewenberg
15. „Limitierter Zugang
= schlechtes Erlebnis.
Barrierefreiheit ist der erste Schritt
hin zu richtig guter User Experience.“
Quelle:
Beatrriz
Gonzalez
@BennoLoewenberg
22. „Man kann veraltete Systeme haben,
aber deren Nutzererlebnis durch
zugängliche Benutzeroberflächen
komplett [positiv] verändern“
Quelle.
Rachel
Haot
@BennoLoewenberg
40. Il1 db qp CO eo
Il1 db qp CO eo
Il1 db qp CO eo
@BennoLoewenberg
Schriftarten:
„Helvetica
/
Arial“
„Aestetico“
„Franziska“
!
! !
+
+ +
+
+
+ +
+
+ +
+
!
!
41. @BennoLoewenberg
—
| dechiffrierbar von Dyslexikern
—
| entspricht WCAG-Mindestvorgaben
—
| skalierbar durch Nutzereinstellungen
(dynamic type)
LESBARE SCHRIFT
57. „Inhärent inklusive Designsysteme
mit barrierefreien Komponenten
garantieren nicht automatisch
auch barrierefreie Produkte.“
Quelle.
Roy
&
Curtis
@BennoLoewenberg
58. Accessibility muss Teil
der Designsystemstrategie sein
Quelles:
Cook
&
Curtis
UMSETZUNG VON BARRIEREFREIHEIT
im System enthalten vom Team angepasst Arbeiten durch Audit
+ +
@BennoLoewenberg
62. „Definiere was genau Du meinst,
wenn Du sagst Du wärst barrierefrei.“
Quelle:
Verison
Brand
Guidelines
@BennoLoewenberg
Gestaltungsprinzipien Umsetzungsrichtlinien Redaktionelle Richtlinien
63. Designing for users who are
deaf or
hard of hearing
Do...
write in
plain language
use subtitles
or provide
transcripts for
videos
use a linear,
logical layout
!
CC
!
Don’t...
use complicated
words or figures
of speech
!
put content in
audio or video
only
make complex
layouts and
menus
!
!
Designing for users who are
deaf or
hard of hearing
Do...
write in
plain language
use subtitles
or provide
transcripts for
videos
use a linear,
logical layout
break up content
with sub-headings,
!
CC
!
Don’t...
use complicated
words or figures
of speech
!
put content in
audio or video
only
make complex
layouts and
menus
make users
read long blocks
!
!
Quelle:
UK
Home
Office
–
Accessibility
Posters
@BennoLoewenberg
Gestalten für Nutzer …
Designing for users with
dyslexia
XyL
dAS
e
i
XyL
dAS
e
i
XyL
dAS
e
i
Do...
use images and
diagrams to
support text
align text to the
left and keep a
consistent layout
consider producing
materials in other
formats (for example
audio or video)
keep content
short, clear
and simple
let users change the
contrast between
background and text
!
!
Don’t...
use large
blocks of
heavy text
underline words,
use italics or
write in capitals
force users to remember
things from previous
pages - give reminders
and prompts
rely on accurate
spelling - use
autocorrect or
provide suggestions
put too much
information in
one place
!!
DON’T
DO THIS
!
!
!
dyslexia
dsyle
Designing for users with
dyslexia
XyL
dAS
e
i
XyL
dAS
e
i
XyL
dAS
e
i
Do...
use images and
diagrams to
support text
align text to the
left and keep a
consistent layout
consider producing
materials in other
formats (for example
audio or video)
keep content
short, clear
and simple
let users change the
contrast between
background and text
!
!
!
Don’t...
use large
blocks of
heavy text
underline words,
use italics or
write in capitals
force users to remember
things from previous
pages - give reminders
and prompts
rely on accurate
spelling - use
autocorrect or
provide suggestions
put too much
information in
one place
!!
DON’T
DO THIS
!
!
!
dyslexia
dsyle
!
ukhomeoffice.github.io/accessibility-posters/
posters/accessibility-posters.pdf
Designing for users with
physical or motor
disabilities
Do...
make large
clickable actions
Yes
give clickable
elements space
design for
keyboard or
speech only
use
design with mobile
and touchscreen
in mind
provide shortcuts
Tab
!
!"
Find address
Postcode
Don’t...
demand
precision
No
bunch
interactions
together
make dynamic
content that
requires a lot of
mouse movement
have short
time out
windows
tire users
with lots of
typing and
scrolling
!
!
1
2
3
2a
2b
2c
!
Your session
has timed out
Address
ng for users with
al or motor
ities
Yes
Tab
!
!"
Find address
Postcode
Don’t...
demand
precision
No
bunch
interactions
together
make dynamic
content that
requires a lot of
mouse movement
have short
time out
windows
tire users
with lots of
typing and
scrolling
!
!
1
2
3
2a
2b
2c
!
Your session
has timed out
Address
ukhomeoffice.github.io/accessibility-posters/
posters/accessibility-posters.pdf
Designing for users with
anxiety
Do...
give users enough
time to complete
an action
explain what
will happen after
completing a
service
make important
information clear
Don’t...
rush users or set
impractical time
limits
leave users
confused about
next steps or
timeframes
leave users
uncertain about
the consequences
of their actions
1
3
2
4
We have sent
you an email
ng for users with
ty
h
Don’t...
rush users or set
impractical time
limits
leave users
confused about
next steps or
timeframes
leave users
uncertain about
the consequences
of their actions
1
3
2
4
make support
or help hard to
access
We have sent
you an email
Designing for users on the
autistic spectrum
Do...
write in
plain language
use simple
colours
use simple
sentences and
bullets
make buttons
descriptive
build simple and
consistent layouts
!
Don’t...
use bright
contrasting colours
use figures of
speech and idioms
create a wall
of text
make buttons
vague and
unpredictable
build complex and
cluttered layouts
!
!!
Designing for users on the
autistic spectrum
Do...
write in
plain language
use simple
colours
use simple
sentences and
bullets
make buttons
descriptive
build simple and
consistent layouts
!
!
Don’t...
use bright
contrasting colours
use figures of
speech and idioms
create a wall
of text
make buttons
vague and
unpredictable
build complex and
cluttered layouts
!
!!
!
ukhomeoffice.github.io/accessibility-posters/
posters/accessibility-posters.pdf
Designing for users of
screen readers !
"
Do...
describe images
and provide
transcripts
for video
<alt>
Don’t...
only show
information in an
image or video
Designing for users of
screen readers !
"
Do...
describe images
and provide
transcripts
for video
follow a linear
<alt>
Don’t...
only show
information in an
image or video
spread content
Designing for users with
low vision
Do...
use good colour
contrasts and a
readable font size
publish all information
on web pages
use a combination
of colour, shapes
and text
Aa
!
HTML
Start
Don’t...
use low colour
contrasts and small
font size
bury information
in downloads
only use colour to
convey meaning
Aa
!
Designing for users with
low vision
Do...
use good colour
contrasts and a
readable font size
publish all information
on web pages
use a combination
of colour, shapes
and text
follow a linear,
Aa
!
HTML
Start
200% magnification
Don’t...
use low colour
contrasts and small
font size
bury information
in downloads
only use colour to
convey meaning
spread content all
Aa
!
200% magnification
Gestaltungsprinzipien Umsetzungsrichtlinien Redaktionelle Richtlinien
89. „Beim Gestalten für Barrierefreiheit
stößt man oft auf Lösungen,
welche besser sind als beim
‚normalen‘ Gestalten.“
Quelle.
Elise
Roy
@BennoLoewenberg
91. „Wird Accessilibility nur als
abzuarbeitender Punkt
auf der Checkliste angesehen,
können uns Möglichkeiten
entgehen bessere Produkte
und Dienstleistungen
zu gestalten, Punkt.“
Quelle:
Mason
Magyar
@BennoLoewenberg