8 Accessible Design_4

Chapter 8:Accessible
Design
1
What is Accessible Design?
Why should you care?
What are the principles of

Outli accessibility?
ne Accessibility does and don'ts for

our focus groups.
How can I go about implementing
accessibility in my
designs?
What is Accessible
Design?
• “Accessibility is the practice of making your websites usable by as many people
as possible.”
Persons of
Interest
Visual Blindness, low vision, colour blindness
Hearing Deafness, low hearing
Mobility Physical, neurological
Cognitive ADHD, dyslexia, persons

on the autism spectrum
Benefits of Accessible Design
• Enabling Access and Improving Usability for All
Expanded Customer Base
• Reducing Expenses
• Employee retention
• Avoiding litigation( taking legal actions)
• Positive Public Perception
https://digital.gov/2017/05/09/benefits-of-accessible-design/
WCAG 2.0 Principles of
Accessibility
Web Content Accessibility
Guidelines (WCAG)
P
O Perceivable
Operable
U Understandable
R Robust
https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html
Accessibility
P Perceivable : Informati on and user interface
components must be presentable to users in ways they
can perceive.
O Operable: This means that users must be able to

operate the interface (the interface cannot require interacti on
that a user cannot perform)
Accessibility
U Understandable : Informati on and the operation
of user interface must be understandable.
R Robust: This means that users must be able
to access the content as technologies advance (as
technologies and user agents evolve, the content
should remain accessible)
Accessibility for
Visually Impaired
(1/2)
• Provide
descriptions/captions/alternativ
e text for images
• Use simple and consistent
layouts
• Allow keyboard navigation
• Use semantic HTML i.e.
<header>, <nav>,<footer>
instead of <div
class=”header”>
• Avoid small font sizes
Accessibil • Do not rely on colours alone - use
text/shapes/icons too
ity for • Contrast Ratio for text and icons:
Visually • >= 4.5:1 for normal text (>=
Impaired 14pt),
(2/2) • >= 3:1 for large text (>= 18pt)

• Icons should have text descriptions
Colour and Text Tools
● Contrast Ratio Checker - https://contrast-ratio.com
● Contrast Ratio Safe Palette Generator -
http://colorsafe.co
● Colour Blindness Overlay -
• https://michelf.ca/projects/mac/sim-daltonism/
● OS Accessibility Settings
Colour and Text Tools - contrast-
ratio.com
Colour and Text Tools: colorsafe.co
Colour and Text Tools - Sim Daltonism
Colour Blindness Overlay - https://michelf.ca/projects/mac/sim-daltonism/
• Provide captions and/or
Accessibil transcripts for audio and video
content
ity for the • Do not rely solely on audio
Hearing indicators - Visual or haptic
indicators in addition
Impaired • Use plain language to the nuance
provided by tone
Use large interaction
areas e.g. buttons,
form areas Allow
keyboard navigation
Accessibil
ity for
Design for
Mobile touchscreen use
Impairmen
ts
Use semantic HTML

Use plain language
Accessibil Avoid large blocks of text - use

headings, images, videos to
ity for break up text
Cognitive
Keep a consistent layout
Impairmen
ts
Use images to support text
• Use plain language
• Use a consistent layout and logical structure
• Use contrasting colours and readable font
sizes
Quick • Provide captions/transcripts for audio and

video content
•
Wins
Implement large clickable areas and form
fields
• Allow normal keyboard use and do not
break conventions
• Provide text descriptions for images
• Use semantic HTML
UK Govt Accessibility
Posters (1/2)
UK Govt Accessibility Posters
(2/2)
In •“At some point in the future, we’re all
going to need accessible technology.
Conclusi [...] We are all only temporarily abled.”
• - Allison Shaw - Designing for
on inclusivity: How and why to get started
References
Web Content Accessibility Guidelines - https://www.w3.org/TR/WCAG20/
Material UI - https://material.io/guidelines/usability/accessibility.html
Bootstrap - https://getbootstrap.com/docs/4.0/getting-started/accessibility/ MDN -

https://developer.mozilla.org/en-US/docs/Web/Accessibility
iOS - https://developer.apple.com/accessibility/ios/ Contrast Ratio Checker -

contrast-ratio.com
Inclusive Design at Microsoft - https://www.microsoft.com/en-us/design/inclusive
UK Government -
https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/

8 Accessible Design_4

Uploaded by

Copyright:

Available Formats

8 Accessible Design_4

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

8 Accessible Design_4

Uploaded by

Copyright:

Available Formats

Chapter 8:Accessible

Why should you care?

What are the principles of

ne Accessibility does and don'ts for

Hearing Deafness, low hearing

Mobility Physical, neurological

Cognitive ADHD, dyslexia, persons

O Operable: This means that users must be able to

(2/2) • >= 3:1 for large text (>= 18pt)

Use semantic HTML

Accessibil Avoid large blocks of text - use

Quick • Provide captions/transcripts for audio and

Bootstrap - https://getbootstrap.com/docs/4.0/getting-started/accessibility/ MDN -

iOS - https://developer.apple.com/accessibility/ios/ Contrast Ratio Checker -

Inclusive Design at Microsoft - https://www.microsoft.com/en-us/design/inclusive

You might also like