Accessibility in Designsystemen (deutsch) #WorkingProducts

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.

1.  ACCESSIBILITY IN DESIGN SYSTEMS 
WORKING PRODUCTS
APRIL 24. 2024

@BENNOLOEWENBERG

2. “We’re all just temporarily abled.”
Source: Cindy Li
@BennoLoewenberg

3. Source: Burnsitoun Comedy Show – “Eleven” Scottish Elevator
@BennoLoewenberg
 No buttons ? 
 Only voice 
  recognition ! 
 That doesn’t work 
  with scottish accent ! 

4. @BennoLoewenberg
“Disabilities are a mismatch between
one’s ability and one’s environment.”
Source: unknown

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
PermanentTemporarySituational
Touch
One arm Arm injury New parent
See
Blind Cataract Distracted driver
Hear
Deaf Ear infection Bartender
Speak
Non-verbal Laryngitis Heavy accent
Support Card | Temporary/Situational Limit
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
@BennoLoewenberg
Source: Microsoft Inclusive Design Toolkit
Aye !
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
PermanentTemporarySituational
Touch
One arm Arm injury New parent
See
Blind Cataract Distracted driver
Hear
Deaf Ear infection Bartender
Speak
Non-verbal Laryngitis Heavy accent

6. Support Card | Temporary/Situational Limit
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
PermanentTemporarySituational
Touch
One arm Arm injury New parent
See
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
PermanentTemporarySituational
Touch
One arm Arm injury New parent
See
Blind Cataract Distracted driver
Hear
Deaf Ear infection Bartender
Speak
Non-verbal Laryngitis Heavy accent
@BennoLoewenberg
Source: Microsoft Inclusive Design Toolkit

7. 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
PermanentTemporarySituational
Touch
One arm Arm injury New parent
See
Blind Cataract Distracted driver
Hear
Deaf Ear infection Bartender
Speak
Non-verbal Laryngitis Heavy accent
Support Card | Temporary/Situational Limit
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
PermanentTemporarySituational
Touch
One arm Arm injury New parent
See
Blind Cataract Distracted driver
Hear
Deaf Ear infection Bartender
Speak
Non-verbal Laryngitis Heavy accent
@BennoLoewenberg
Source: Microsoft Inclusive Design Toolkit
traffic observant

8. Support Card | Temporary/Situational Limit
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
PermanentTemporarySituational
Touch
One arm Arm injury New parent
See
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
PermanentTemporarySituational
Touch
One arm Arm injury New parent
See
Blind Cataract Distracted driver
Hear
Deaf Ear infection Bartender
Speak
Non-verbal Laryngitis Heavy accent
Source: Microsoft Inclusive Design Toolkit
@BennoLoewenberg

9. “Approach accessibility as
a customer experience imperative,
not a compliance-driven initiave.”
Source: Gina Bhalwalkar
@BennoLoewenberg

10. Source: Deque / Anna Cook
@BennoLoewenberg

Design syste m accessibili ty has significant impacts

11. inaccessible eCommerce retailers
loose out on
— 6.9 billion US$
annually
in the US
Source: Deque / Home Depot
@BennoLoewenberg

12.  KEY DRIVER AND BENEFIT 
—| A11y increases market share
—| aligns digital with brand promise
—| reduces complaints & support costs
Source: Forrester
@BennoLoewenberg

13. Alps, Alta,
Anatomy, Anvil, Archipelago,
Argon, Apex, Asphalt, Astro, Aurora, Axiom,
Backpack, Barista, Base, Binary, Bits, Blocks, Bloom, Bluemix,
Blueprint, Boundless, Build, Bouy, Bolt, Canvas, Carbon, Cargo, Cedar,
Chameleon, Chrome, Cirrus, Clarity, Clay, Comet, Connect, Constellation,
Cosmos, DressCode, Duet, Edison, Eos, Epoxy, Evergreen, Fabric, Feather,
Feelix, Fiori, Fish Tank, Flame, Fleet, Float, Fluent, Foundation, Forma,
Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet,
Group, Harmony, Hawkins, Helix, Honeycomb, Horizon, Indigo, Janus, Keirin,
Klik, Kompas, Kotti, Kyper, Latitude, Leonardo, Lexicon, Lightning, Lion,
Liquid, Luci, Luna, Material, Mayflower, Mercury, Miui, Mind, Mineral,
Minutiae, Mixtape, Momentum, Mosaic, Muesli, Nachos, Neo, Nicollet,
Northstar, Nova, Odyssey, One, Oneui, Opattern, Orbit, Origami, Otkit, Oxide,
Pajamas, Paste, Patternfly, Photon, Plasma, Polaris, Polestar, Poncho,
Precise, Predix, Primer, Protocol, Pulse, Purple, Quantum, Quartz, Quik,
Radius, Ratio, Recess, Rimble, Ring, Rivet, Rizzo, Sandcastle, Saphir, Scooter,
Seeds, Skin, Skyline, ShowCar, Snacks, Solar, Solid, SolidWork, Spark,
Spectrum, Stacks, Starling, Sticky, Stitch, Swarm, SynNeo, Tack, Tape,
Terra, ThingWorx, Thumbprint, Unicycle, Uniform, Unison,
Unity, Ustyle, Vanilla, Wonderblocks, X,
Yarn, Yoga, Zui,
 DESIGN SYSTEMS 
@BennoLoewenberg

14. Alps, Alta,
Anatomy, Anvil, Archipelago,
Argon, Apex, Asphalt, Astro, Aurora, Axiom,
Backpack, Barista, Base, Binary, Bits, Blocks,
Bloom, Bluemix,
Blueprint, Boundless, Build, Bouy, Bolt, Canvas , Carbon
, Cargo, Cedar,
Chameleon, Chrome, Cirrus, Clarity , Clay, Comet
, Connect, Constellation,
Cosmos, DressCode, Duet , Edison
, Eos, Epoxy, Evergreen, Fabric, Feather,
Feelix, Fiori
, Fish Tank, Flame, Fleet, Float, Fluent, Foundation, Forma,
Frontier, Fuse, Fusion, Garden, Gel , Gestalt, Glu, Glue, Gravity ,
Grommet,
Group, Harmony, Hawkins, Helix, Honeycomb, Horizon, Indigo, Janus, Keirin,
Klik, Kompas, Kotti, Kyper, Latitude, Leonardo, Lexicon, Lightning
, Lion,
Liquid, Luci, Luna , Material, Mayflower, Mercury , Miui, Mind ,
Mineral,
Minutiae, Mixtape, Momentum, Mosaic, Muesli, Nachos, Neo, Nicollet,
Northstar,
Nova, Odyssey, One, Oneui, Opattern, Orbit, Origami
, Otkit, Oxide,
Pajamas, Paste, Patternfly, Photon, Plasma, Polaris
, Polestar, Poncho,
Precise, Predix, Primer, Protocol, Pulse, Purple, Quantum, Quartz, Quik,
Radius, Ratio, Recess, Rimble, Ring, Rivet, Rizzo, Sandcastle, Saphir, Scooter,
Seeds, Skin, Skyline , ShowCar, Snacks, Solar, Solid, SolidWork,
Spark,
Spectrum, Stacks, Starling , Sticky, Stitch, Swarm
, SynNeo, Tack, Tape,
Terra, ThingWorx, Thumbprint, Unicycle, Uniform, Unison,
Unity,
Ustyle, Vanilla
, Wonderblocks, X,
Yarn, Yoga, Zui,
 DESIGN SYSTEMS 
@BennoLoewenberg
Accessibility in

15. “Limited access = broken experience.
Accessilibity is the first step
to a g reat user experience.”
Source: Beatrriz Gonzalez
@BennoLoewenberg

16. Source: W3C WAI Web Accessibility Perspectives – Colors with Good Contrast
 e. g. WHEN CONTRAST COUNTS 
@BennoLoewenberg

17. Source: W3C WAI Web Accessibility Perspectives – Keyboard Compatibility
 e. g. WHEN A MOUSE CAN’T BE USED 
@BennoLoewenberg

18. “Auditing your design system
for accessibility is about UX
just as much as it is about UI”
Sources: Anma Cook
@BennoLoewenberg

19. @BennoLoewenberg
Building block or
built-in blocker ?

20. @BennoLoewenberg
The users are NOT disabled,
(design) systems are
disabling them

21. @BennoLoewenberg
The curb-cut effect
is beneficial for all
Parents with strollers, Elderly, Cyclists,
Delivery workers with push carts,
Tourists with heavy luggage, …

22. “You can have antiquated systems,
but if you have an accessible
interface, it can completely
transform that experience”
Source. Rachel Haot
@BennoLoewenberg

23. @BennoLoewenberg
Implementing accessibility measures
with curb-cut effect

24. @BennoLoewenberg
Cross-device scalability
TypographyBUS

25. @BennoLoewenberg
Ensuring navigation
regardless of input method
Communicating
state changes
Tactile AND visual

26. @BennoLoewenberg
Useful labels and messaging
Semantic markup
Paint as added layer
of information

27.  WHAT TO START WITH 
@BennoLoewenberg

28. @BennoLoewenberg
Implementing accessible design & code
Code :-)

29. Source: James Sullivan
Are you able
to read this  ?
@BennoLoewenberg

30. How about now  ? Source: James Sullivan
@BennoLoewenberg

31. Can you stand
reading this ?
Source: James Sullivan
@BennoLoewenberg

32. @BennoLoewenberg
Colour &
Contrast
Source: Accessible Color Matrix

33. @BennoLoewenberg
Colour &
Contrast
Source: Koopersmith & Miner

34. @BennoLoewenberg
Colour &
Contrast
Source: Koopersmith & Miner

35. @BennoLoewenberg
Colour &
Contrast

36. Label @BennoLoewenberg
Contrast ?

37. Label
@BennoLoewenberg
ContrAAAHst !

38. Il1
@BennoLoewenberg
Guess the glyph  ? 
Font face: “Gill Sans”

39. Il1
@BennoLoewenberg
Yes, that’s the glyph  !  
Font face: “Aestetico”

40. Il1 db qp CO eo
Il1 db qp CO eo
Il1 db qp CO eo
@BennoLoewenberg
Font faces: “Helvetica / Arial” “Aestetico” “Franziska”
!
!
!
+
+
+
++
+ +
+
+
+
+
!
!

41. @BennoLoewenberg
—| decypherable by dyslexic
—| complies WCAG minimum settings
—| scalable by user settings (dynamic type)
 READABLE TYPE 

42. Label
font-size: 1 rem
@BennoLoewenberg

43. @BennoLoewenberg
Focus Behaviour

44. @BennoLoewenberg
Label
most important,
but often forgotten

45. Touch Target Sizes
@BennoLoewenberg
0.75 cun

46. Label
height: 3 rem
@BennoLoewenberg

47. Semantic
markup
Source: HTML5 Accessibility
@BennoLoewenberg

48. Name
@BennoLoewenberg
label for = "name"
input id = "name"
Labelled form elements
added value:
label becomes part
of touch target too

49. Name
@BennoLoewenberg
High contrast mode
Semantic html
automatically gets
rendered accessibly

50. Label
That‘s an error !
@BennoLoewenberg@BennoLoewenberg
Normal vision

51. @BennoLoewenberg@BennoLoewenberg
Deuteranopia (simulated)
Is that an error  ?
Label

52. @BennoLoewenberg
descriptive error message
−
Don't rely on colour as sole information
Label

53. alt = "success"
alt = "warning"
alt = "information"
alt = "error"
Non-text
elements
−
!
i

54. “The first rule of ARIA is not to use it.
But you should use it knowin gly
to support assistive technolog y”
@BennoLoewenberg

55. @BennoLoewenberg
descriptive error message
−
First name
alt = "error"
aria-describedby = "first-name-error-msg"
label for = "firstname"

56.  BEYOND COMPONENT STYLING 
@BennoLoewenberg

57. “Inherently inclusive design systems
that contain accessible patterns
don’t guarantee accessible products.”
Source. Roy & Curtis
@BennoLoewenberg

58. Accessibility should be backed
into the design system strategy
Sources: Cook & Curtis
IMPLEMENTING ACCESSBILITY
Embedded in System Configured by Team Work identified by Audit+ +
@BennoLoewenberg

59. most
important
HOW TO USE HOW TO USE
HOW IT LOOKS
& SOUNDS
MADE TO USE
@BennoLoewenberg

60. most
important
HOW TO USE GUIDELINES
STYLE &
PATTERNS
DES & DEV
RESOURCES
@BennoLoewenberg

61. BUILDING BLOCKS (STYLE GUIDE)
Color PallettesTypographic ScalesGrid DefinitionsIcons & Assets
UI PATTERNS (LIBRARY)
Elements Components Modules Templates
RULES (GUIDELINES)
Design Principles Implementation Guidelines Editorial Guidelines
@BennoLoewenberg
Source: UX Pin
integrate accessibility here

62. “Define what you mean,
when you say, you are accessible.”
Source: Verison Brand Guidelines
@BennoLoewenberg
Design PrinciplesImplementation Guidelines Editorial Guidelines

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
break up content
with sub-headings,
images and videos
let users ask for their
preferred communication
support when booking
appointments

CC


Don’t...
use complicated
^VYKZVY?N\YLZ
of speech

put content in
audio or video
only
make complex
layouts and
menus
make users
read long blocks
of content
make telephone
the only means of
contact for users





\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM 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,
images and videos
let users ask for their
preferred communication
support when booking
appointments

CC


Don’t...
use complicated
^VYKZVY?N\YLZ
of speech

put content in
audio or video
only
make complex
layouts and
menus
make users
read long blocks
of content
make telephone
the only means of
contact for users





\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM Design PrinciplesImplementation Guidelines Editorial Guidelines
Source: UK Home Office – Accessibility Posters@BennoLoewenberg
Designing for users … Designing for users with
dyslexia
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

\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM Designing for users with
dyslexia
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

\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM Designing for users with
physical or motor
disabilities
Do...
make large
clickable actions
Yes
give JSPJRHISL
LSLTLU[ZZWHJL
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
\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM Designing for users with
physical or motor
disabilities
Do...
make large
clickable actions
Yes
give JSPJRHISL
LSLTLU[ZZWHJL
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
\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM 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
give users the
support they
need to complete
a service
let users check
their answers
before they
submit them
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
leave users
questioning what
answers they gave
We have sent
you an email
?
?
?
?
?
?
\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM 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
give users the
support they
need to complete
a service
let users check
their answers
before they
submit them
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
leave users
questioning what
answers they gave
We have sent
you an email
?
?
?
?
?
?
\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM 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
\ZL?N\YLZVM
speech and idioms
create a wall
of text
make buttons
vague and
unpredictable
build complex and
cluttered layouts



\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM 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
\ZL?N\YLZVM
speech and idioms
create a wall
of text
make buttons
vague and
unpredictable
build complex and
cluttered layouts



\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM Designing for users of
screen readers

Do...
describe images
and provide
transcripts
for video
follow a linear
logical layout
structure content
using HTML5
build for keyboard
use only
write descriptive
links and headings
<alt>

<h1>
<nav>
<label>

Contact us
Don’t...
only show
information in an
image or video
spread content
all over a page
rely on text size
and placement
for structure
force mouse or
screen use
write uninformative
links and headings

Header
36pt, bold

Click here
\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM Designing for users of
screen readers

Do...
describe images
and provide
transcripts
for video
follow a linear
logical layout
structure content
using HTML5
build for keyboard
use only
write descriptive
links and headings
<alt>

<h1>
<nav>
<label>

Contact us
Don’t...
only show
information in an
image or video
spread content
all over a page
rely on text size
and placement
for structure
force mouse or
screen use
write uninformative
links and headings

Header
36pt, bold

Click here
\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM 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,
logical layout
put buttons and
UV[P?JH[PVUZPU
context
Aa

HTML
Start


Submit
Don’t...
use low colour
contrasts and small
font size
bury information
in downloads
only use colour to
convey meaning
spread content all
over a page
separate actions
from their context
Aa



Submit
\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM 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,
logical layout
put buttons and
UV[P?JH[PVUZPU
context
Aa

HTML
Start


Submit
Don’t...
use low colour
contrasts and small
font size
bury information
in downloads
only use colour to
convey meaning
spread content all
over a page
separate actions
from their context
Aa



Submit
\ROVTLVMMPJLNP[O\IPVHJJLZZPIPSP[`WVZ[LYZ
WVZ[LYZHJJLZZPIPSP[`WVZ[LYZWKM

64. Accessible implementation
& contents
Design PrinciplesImplementation Guidelines Editorial Guidelines
@BennoLoewenberg

65. @BennoLoewenberg
Informative
headings and
page titles
Source: A11y Annotation Kit
optimal for
quick reading
& SEO too

66. @BennoLoewenberg
Meaningful
link texts and
button labels
Source: unknown

67. Text alternatives for images
@BennoLoewenberg
alt = "description"

68. Text alternatives for media
@BennoLoewenberg
 Link to Caption & Transcript 

69. @BennoLoewenberg
Form Design
First name
eMail address
in large zoom levels
a second column vanishes
(e. g. for last name)

70. @BennoLoewenberg
Feedback and Notifications
• Last name is required
• Street name is required
• Passwords don’t match
−

71. @BennoLoewenberg
Implementing cognitive accessibility

72. “Disabled buttons
disable disabled users”
Source. Hampus Sethfors
@BennoLoewenberg

73. @BennoLoewenberg
SubmitClear form
✗

74. @BennoLoewenberg
Plain Language

75. @BennoLoewenberg
Reduced MotionParallax Scroll Effect Parallax Scroll Effect Parallax Scroll Effect
 preferes-reduced-motion 

76. Data Visualization
Source: unknown
@BennoLoewenberg
Data set 1
Data set 2
important for dyslexic too

77. Souce: Accessibility statement for the GOV.UK Design System website
—| change colours, contrast levels and fonts
—| zoom in up to 300%
without the text spilling off the screen
—| navigate website using just a keyboard
—| navigate using speech recognition
—| listen to the website with a screen reader
@BennoLoewenberg

78. @BennoLoewenberg
Keyboard Navigation

79. @BennoLoewenberg
Tab Order (DOM)
Source: Accessibility Bluelines

80. @BennoLoewenberg
Focus Order (Landmarks)
Source: Accessibility Bluelines

81. @BennoLoewenberg
Skip Links
Sources: A11y Annotation Kit & Accessibility Bluelines

82.  KICK STARTER TOOLBOX 
@BennoLoewenberg

83. Source: W3C WAI WCAG
@BennoLoewenberg
Web Content Accessibility Guidelines 

84. Source: Microsoft Inclusive Design
@BennoLoewenberg
Inclusive Design Toolkit 
incl. Inclusive AI

85. Source: Microsoft Accesible Design Toolkit for Figma
Accessible Design Toolkit 
@BennoLoewenberg

86. @BennoLoewenberg
Online Accessibility Toolkit 
Source: Government of South Australia

87. @BennoLoewenberg
Equal Access Toolkit 
Source: IBM Accessibility

88. @BennoLoewenberg
Source: A Book Apart
Accessibility
for Everyone 

89. @BennoLoewenberg
Source: Smashing Magazine
Inclusive
Components

90. @BennoLoewenberg

 AI 

91. GenAI can support A11y at every step
(design, code, finding & fixing problems)
through a growing number of tools.
But it needs correctives to be useful:
Intent detection, prompting expertise
and guardrails for accessible outputs.
@BennoLoewenberg
aft. Kevin Berg

92.  TAKE HOME THOUGHTS 
@BennoLoewenberg

93. “When we design for disability first,
you often stumble upon solutions
that are better than those
when we design for the norm.”
Source. Elise Roy
@BennoLoewenberg

94. @BennoLoewenberg

95. “When we treat accessibility
as a requirement box to check,
we can miss opportunities to design
better products and services, period.”
Source: Mason Magyar
@BennoLoewenberg

96.  @BENNOLOEWENBERG