SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Similaire à 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
 

Similaire à 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
 

Dernier

SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
CaitlinCummins3
 
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
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
heathfieldcps1
 

Dernier (20)

Major project report on Tata Motors and its marketing strategies
Major project report on Tata Motors and its marketing strategiesMajor project report on Tata Motors and its marketing strategies
Major project report on Tata Motors and its marketing strategies
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
 
male presentation...pdf.................
male presentation...pdf.................male presentation...pdf.................
male presentation...pdf.................
 
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
 
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
 
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUMDEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
 
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
 
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 
MOOD STABLIZERS DRUGS.pptx
MOOD     STABLIZERS           DRUGS.pptxMOOD     STABLIZERS           DRUGS.pptx
MOOD STABLIZERS DRUGS.pptx
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
 
How To Create Editable Tree View in Odoo 17
How To Create Editable Tree View in Odoo 17How To Create Editable Tree View in Odoo 17
How To Create Editable Tree View in Odoo 17
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
 
demyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptxdemyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptx
 
Đề tieng anh thpt 2024 danh cho cac ban hoc sinh
Đề tieng anh thpt 2024 danh cho cac ban hoc sinhĐề tieng anh thpt 2024 danh cho cac ban hoc sinh
Đề tieng anh thpt 2024 danh cho cac ban hoc sinh
 
Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the life
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptx
 

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.