SlideShare a Scribd company logo
1 of 31
WITH
LUCINDA
HENSLEY
Welcome!
Accessible design
Minimum effort, maximum impact
April 25, 2024
AND
JUSTINE
SWAIN
Agenda
• Why accessible design matters
• Transforming an example
• Clean screens
• Visual design
• Text and formatting
• Multi-optionality
• Tools to make accessible design simple
• Q&A
16%
of the global population (that’s 1 in
6!)
1.3 billion*
People globally experience and live with
some type of disability or impairment.
* Statistics from the World Health Organisation.
This figure is estimated, based on those who have declared their disability either through their GP or other routes.
Why it’s
important
Why it’s
important
Permanent Temporary Situational
A life-long disability or impairment.
Examples: Blind, neurodiverse, brain
injury.
A disability or impairment that will
impact the user for a period of time.
Examples: Broken arm, concussion,
eye infection.
Where the need to adapt is based
on your current situation.
Examples: Noisy background, slow
broadband, new children or pets.
An example of inaccessible design
Clean screens
Why it’s
important
• Cluttered screens divert learner attention and dimmish
engagement
• Excessive information creates cognitive overload, impeding
learner’s ability to process that information
• Busy screens convolute and disrupt the intended learner
journey
Particularly key for:
• Visually impaired
• Neurodiverse individuals
• Screen reader users
What it
is
Ensuring there is an obvious and
natural reading order to the screen: Top
to bottom (columns) or left to right
(paragraphs).
Not having too much going on, only the
critical information needed is on each
screen.
Making use of whitespace to prevent
overloading the screen .
Cleaning up the example
Keep in
mind
• What is the key purpose of the screen?
Is that the most obvious part?
• Where is the eye naturally drawn first?
Is this where you want it to be?
• Everything on the screen should support the learning in
some way; if it doesn’t, it’s likely just a distraction
Visuals
Why it’s
important
• Poor contrasting can render text illegible
• Any graphics included in an experience have an
intended learning purpose, if they’re imperceptible,
we risk learners missing parts of the experience.
Particularly key for:
• People with visual impairments, such as colour
blindness
What it
is
Using colours that compliment one
another and don’t blend together.
Avoiding colours that are “too stark”, like
pure black on pure white, instead using
muted versions, such as cream on dark
blue.
Avoiding colours being sole indicators,
such as to denote status, integrate text
and symbols to ensure everyone can
understand the message.
Keep in
mind
• If your brand colours aren’t set up for accessibility,
can different gradients be used?
• Do the visuals all support the learning, are any of
them a distraction?
• Sometimes we do need to add extra visuals for
decoration to prevent a screen looking bland, need to
balance engagement with clarity
Fixing the visual design of the
example
Text and
formatting
Why it’s
important
• Lack of clarity risks learners not being able to
understand essential information
• People are time-poor; they’re likely to bypass
information that’s difficult to comprehend
Particularly key for:
• Visual disabilities and impairments
• Neurodiverse individuals
• Learning disabilities and
impairments
What it
is
Using accessible fonts, such as sans-serif
Using optimal line spacing (1.5x)
Using large, legible font sizes no smaller
than 12-14pt.
Avoiding formats like italics, instead use
bold text for emphasis
Accessible language, like ‘select’ instead
of ‘click’, clear button wording, etc.
A
A
Keep in
mind
• Does the screen look really text heavy and off
putting?
• There’s no point writing things if people can’t
comprehend them, it’s better to say less in a
clear way.
Reformatting and rewriting the example
The before and after of
accessible design
Multi-optionality
Why it’s
important
• Some modes of delivery are completely inaccessible
for different disabilities and impairments
• Different environments for learning can impact the
ability to consume certain modes
• Everyone has preferences for how they explore and
acquire new knowledge
Particularly key for:
• Visual disabilities and impairments
• Hearing disabilities and impairments
• Neurodiverse individuals
• Learning disabilities and impairments
What it
is
Alternative (alt.) text for any visuals,
offering screen reader compatibility
Transcripts for any audio or video
Subtitles/closed captions/open captions
for any videos or audio, and
recognising the differences
Audio alternatives to text on screen
Keep in
mind
• If someone is missing/has an impaired sense, could
they still explore the course?
• Harness technological innovations to make some
aspects more efficient if cost/time is a key limitation .
There are lots of tools for things like generating
captions and transcripts.
Tools to make
accessible design
simple
Why it’s
important
• Accessible design is just good design, it improves
the experience for all, not just those with specific
requirements
• Authoring tools have streamlined the accessible
development process – maximising their potential
is crucial for designing a truly accessible solution
There’s a huge, huge variety of different
disabilities and impairments, the more our
solutions cover, the more accessible they are.
What it
is
Tools like Storyline have built-in
functionalities to support accessible
design, many of which are simple
toggle on or off.
WebAIM contrast checker
Eight shapes brand colour contrast checker
Text on image colour contrast checker
Download NVDA Screen reader and the
accompanying NVDA user guide
Hemingway readability checker
WebFX readability checker
DE&I Imagery Toolkits
Recognising that the WCAG guidelines
were built for websites not digital
learning, Designing accessible learning
content, written by Susi Miller simplifies
the approach to accessible learning
design.
Keep in
mind
• Research the tools you most often use, to see what built-in
accessibility they have – often, it’s more than you think!
• Better to have some than none – in an ideal world would all
be accessible to everyone, but better to do the bits we can
when it’s as simple as toggling a button on/off, if more
intense elements are out of reach
Accessible design is just GOOD design
• The more accessible a solution is the more confident you can be in
your people’s ability to learn and comply.
• You might not be able to do it all, but something is better than
nothing!
• The range of requirements is huge, consider how every decision
could impact different people.
• People’s requirements vary based on condition and personal
preference, where possible give your people the autonomy to
choose what works for them.
• Accessible design makes learning better for everybody.
Stay Connected
CONNECT
WITH
JUSTINE
CONNECT
WITH
LUCINDA

More Related Content

Similar to Accessible design: Minimum effort, maximum impact

Eme2040 ada compliance with technology overall
Eme2040 ada compliance with technology overallEme2040 ada compliance with technology overall
Eme2040 ada compliance with technology overall
Elizabeth (Ferris) Metzger
 
Eme2040 ada compliance with technology overall
Eme2040 ada compliance with technology overallEme2040 ada compliance with technology overall
Eme2040 ada compliance with technology overall
Elizabeth (Ferris) Metzger
 

Similar to Accessible design: Minimum effort, maximum impact (20)

Power point acivity 1
Power point acivity 1Power point acivity 1
Power point acivity 1
 
Power point acivity 1
Power point acivity 1Power point acivity 1
Power point acivity 1
 
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetHCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
 
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetHCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
 
Notes from the dyslexic side of the screen - Lisa Matthews - Nexer Digital ...
Notes from the dyslexic side of the screen - Lisa Matthews  - Nexer Digital  ...Notes from the dyslexic side of the screen - Lisa Matthews  - Nexer Digital  ...
Notes from the dyslexic side of the screen - Lisa Matthews - Nexer Digital ...
 
Notes from the dyslexic side of the screen - Lisa Matthews - Nexer Digital ...
Notes from the dyslexic side of the screen - Lisa Matthews  - Nexer Digital  ...Notes from the dyslexic side of the screen - Lisa Matthews  - Nexer Digital  ...
Notes from the dyslexic side of the screen - Lisa Matthews - Nexer Digital ...
 
Free opensourceat
Free opensourceatFree opensourceat
Free opensourceat
 
Free opensourceat
Free opensourceatFree opensourceat
Free opensourceat
 
Powerpoint act 1
Powerpoint act 1Powerpoint act 1
Powerpoint act 1
 
Powerpoint act 1
Powerpoint act 1Powerpoint act 1
Powerpoint act 1
 
Eme2040 ada compliance with technology overall
Eme2040 ada compliance with technology overallEme2040 ada compliance with technology overall
Eme2040 ada compliance with technology overall
 
Universal Design for Learning and Making Digital Content Accessible to All: ...
Universal Design for Learning  and Making Digital Content Accessible to All: ...Universal Design for Learning  and Making Digital Content Accessible to All: ...
Universal Design for Learning and Making Digital Content Accessible to All: ...
 
Eme2040 ada compliance with technology overall
Eme2040 ada compliance with technology overallEme2040 ada compliance with technology overall
Eme2040 ada compliance with technology overall
 
Universal Design for Learning and Making Digital Content Accessible to All: ...
Universal Design for Learning  and Making Digital Content Accessible to All: ...Universal Design for Learning  and Making Digital Content Accessible to All: ...
Universal Design for Learning and Making Digital Content Accessible to All: ...
 
Senses Working Overtime: Improving Software Quality Through Accessibility and...
Senses Working Overtime: Improving Software Quality Through Accessibility and...Senses Working Overtime: Improving Software Quality Through Accessibility and...
Senses Working Overtime: Improving Software Quality Through Accessibility and...
 
Senses Working Overtime: Improving Software Quality Through Accessibility and...
Senses Working Overtime: Improving Software Quality Through Accessibility and...Senses Working Overtime: Improving Software Quality Through Accessibility and...
Senses Working Overtime: Improving Software Quality Through Accessibility and...
 
Free apps
Free appsFree apps
Free apps
 
Free apps
Free appsFree apps
Free apps
 
Accessible Information: Glasgow Kelvin College
Accessible Information: Glasgow Kelvin CollegeAccessible Information: Glasgow Kelvin College
Accessible Information: Glasgow Kelvin College
 
Accessible Information: Glasgow Kelvin College
Accessible Information: Glasgow Kelvin CollegeAccessible Information: Glasgow Kelvin College
Accessible Information: Glasgow Kelvin College
 

Recently uploaded

Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPSSpellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
AnaAcapella
 
Orientation Canvas Course Presentation.pdf
Orientation Canvas Course Presentation.pdfOrientation Canvas Course Presentation.pdf
Orientation Canvas Course Presentation.pdf
Elizabeth Walsh
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
Peter Brusilovsky
 
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
EADTU
 

Recently uploaded (20)

How to Manage Call for Tendor in Odoo 17
How to Manage Call for Tendor in Odoo 17How to Manage Call for Tendor in Odoo 17
How to Manage Call for Tendor in Odoo 17
 
Including Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdfIncluding Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdf
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
AIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.pptAIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.ppt
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
VAMOS CUIDAR DO NOSSO PLANETA! .
VAMOS CUIDAR DO NOSSO PLANETA!                    .VAMOS CUIDAR DO NOSSO PLANETA!                    .
VAMOS CUIDAR DO NOSSO PLANETA! .
 
Simple, Complex, and Compound Sentences Exercises.pdf
Simple, Complex, and Compound Sentences Exercises.pdfSimple, Complex, and Compound Sentences Exercises.pdf
Simple, Complex, and Compound Sentences Exercises.pdf
 
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPSSpellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
What is 3 Way Matching Process in Odoo 17.pptx
What is 3 Way Matching Process in Odoo 17.pptxWhat is 3 Way Matching Process in Odoo 17.pptx
What is 3 Way Matching Process in Odoo 17.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Orientation Canvas Course Presentation.pdf
Orientation Canvas Course Presentation.pdfOrientation Canvas Course Presentation.pdf
Orientation Canvas Course Presentation.pdf
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
 
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
 
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdfDiuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
 
Introduction to TechSoup’s Digital Marketing Services and Use Cases
Introduction to TechSoup’s Digital Marketing  Services and Use CasesIntroduction to TechSoup’s Digital Marketing  Services and Use Cases
Introduction to TechSoup’s Digital Marketing Services and Use Cases
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 

Accessible design: Minimum effort, maximum impact

  • 1. WITH LUCINDA HENSLEY Welcome! Accessible design Minimum effort, maximum impact April 25, 2024 AND JUSTINE SWAIN
  • 2. Agenda • Why accessible design matters • Transforming an example • Clean screens • Visual design • Text and formatting • Multi-optionality • Tools to make accessible design simple • Q&A
  • 3. 16% of the global population (that’s 1 in 6!) 1.3 billion* People globally experience and live with some type of disability or impairment. * Statistics from the World Health Organisation. This figure is estimated, based on those who have declared their disability either through their GP or other routes. Why it’s important
  • 4. Why it’s important Permanent Temporary Situational A life-long disability or impairment. Examples: Blind, neurodiverse, brain injury. A disability or impairment that will impact the user for a period of time. Examples: Broken arm, concussion, eye infection. Where the need to adapt is based on your current situation. Examples: Noisy background, slow broadband, new children or pets.
  • 5. An example of inaccessible design
  • 7. Why it’s important • Cluttered screens divert learner attention and dimmish engagement • Excessive information creates cognitive overload, impeding learner’s ability to process that information • Busy screens convolute and disrupt the intended learner journey Particularly key for: • Visually impaired • Neurodiverse individuals • Screen reader users
  • 8. What it is Ensuring there is an obvious and natural reading order to the screen: Top to bottom (columns) or left to right (paragraphs). Not having too much going on, only the critical information needed is on each screen. Making use of whitespace to prevent overloading the screen .
  • 9. Cleaning up the example
  • 10. Keep in mind • What is the key purpose of the screen? Is that the most obvious part? • Where is the eye naturally drawn first? Is this where you want it to be? • Everything on the screen should support the learning in some way; if it doesn’t, it’s likely just a distraction
  • 12. Why it’s important • Poor contrasting can render text illegible • Any graphics included in an experience have an intended learning purpose, if they’re imperceptible, we risk learners missing parts of the experience. Particularly key for: • People with visual impairments, such as colour blindness
  • 13. What it is Using colours that compliment one another and don’t blend together. Avoiding colours that are “too stark”, like pure black on pure white, instead using muted versions, such as cream on dark blue. Avoiding colours being sole indicators, such as to denote status, integrate text and symbols to ensure everyone can understand the message.
  • 14. Keep in mind • If your brand colours aren’t set up for accessibility, can different gradients be used? • Do the visuals all support the learning, are any of them a distraction? • Sometimes we do need to add extra visuals for decoration to prevent a screen looking bland, need to balance engagement with clarity
  • 15. Fixing the visual design of the example
  • 17. Why it’s important • Lack of clarity risks learners not being able to understand essential information • People are time-poor; they’re likely to bypass information that’s difficult to comprehend Particularly key for: • Visual disabilities and impairments • Neurodiverse individuals • Learning disabilities and impairments
  • 18. What it is Using accessible fonts, such as sans-serif Using optimal line spacing (1.5x) Using large, legible font sizes no smaller than 12-14pt. Avoiding formats like italics, instead use bold text for emphasis Accessible language, like ‘select’ instead of ‘click’, clear button wording, etc. A A
  • 19. Keep in mind • Does the screen look really text heavy and off putting? • There’s no point writing things if people can’t comprehend them, it’s better to say less in a clear way.
  • 21. The before and after of accessible design
  • 23. Why it’s important • Some modes of delivery are completely inaccessible for different disabilities and impairments • Different environments for learning can impact the ability to consume certain modes • Everyone has preferences for how they explore and acquire new knowledge Particularly key for: • Visual disabilities and impairments • Hearing disabilities and impairments • Neurodiverse individuals • Learning disabilities and impairments
  • 24. What it is Alternative (alt.) text for any visuals, offering screen reader compatibility Transcripts for any audio or video Subtitles/closed captions/open captions for any videos or audio, and recognising the differences Audio alternatives to text on screen
  • 25. Keep in mind • If someone is missing/has an impaired sense, could they still explore the course? • Harness technological innovations to make some aspects more efficient if cost/time is a key limitation . There are lots of tools for things like generating captions and transcripts.
  • 26. Tools to make accessible design simple
  • 27. Why it’s important • Accessible design is just good design, it improves the experience for all, not just those with specific requirements • Authoring tools have streamlined the accessible development process – maximising their potential is crucial for designing a truly accessible solution There’s a huge, huge variety of different disabilities and impairments, the more our solutions cover, the more accessible they are.
  • 28. What it is Tools like Storyline have built-in functionalities to support accessible design, many of which are simple toggle on or off. WebAIM contrast checker Eight shapes brand colour contrast checker Text on image colour contrast checker Download NVDA Screen reader and the accompanying NVDA user guide Hemingway readability checker WebFX readability checker DE&I Imagery Toolkits Recognising that the WCAG guidelines were built for websites not digital learning, Designing accessible learning content, written by Susi Miller simplifies the approach to accessible learning design.
  • 29. Keep in mind • Research the tools you most often use, to see what built-in accessibility they have – often, it’s more than you think! • Better to have some than none – in an ideal world would all be accessible to everyone, but better to do the bits we can when it’s as simple as toggling a button on/off, if more intense elements are out of reach
  • 30. Accessible design is just GOOD design • The more accessible a solution is the more confident you can be in your people’s ability to learn and comply. • You might not be able to do it all, but something is better than nothing! • The range of requirements is huge, consider how every decision could impact different people. • People’s requirements vary based on condition and personal preference, where possible give your people the autonomy to choose what works for them. • Accessible design makes learning better for everybody.