… …
… . .
… .
…
. .
.
Types of Disabilities Visual Disabilities includes those who are legally blind or have visual impairments.
Hearing Disabilities includes those who are deaf or hard of hearing.
Physical Disabilities includes physiological, functional and/or mobility impairments.
Cognitive Disabilities includes learning, mental health and intellectual disabilities. @HecOsborneRod
Slide 5
… …
… . .
… .
…
. .
.
Types of Disabilities Permanent Permanent impairments from birth, trauma, or developed over time e.g. blind
Temporary Longer-term impairments arising from injuries and other inconveniences e.g. eye injury
Situational Largely contextual, shorter-term impairments e.g. glare while driving @HecOsborneRod
Slide 6
… …
… . .
… .
…
. .
.
Accessibility Principles Perceivable Users must be able to perceive the information being presented
Operable Users must be able to operate the interface
Understandable Users must be able to understand the information as well as the operation of the user interface
Robust Users must be able to access the content as technologies advance .
@HecOsborneRod
Slide 7
… …
… . .
… .
…
. .
.
Agenda
1
2
3
Unwrap the structure
Define the interaction flow
Inspect the elements
@HecOsborneRod
Slide 8
… …
… . .
… .
…
. .
.
Unwrap the structure 1
2
3
Slide 9
… …
… . .
… .
…
. .
.
Website layout
Blog
Features
Blog Article
Profile
Product Search
Product Page
Slide 10
… …
… . .
… .
…
. .
.
Website layout
HTML5 provides key markers to structure the website. For example: <header> <main> <footer>
… …
… . .
… .
…
. .
.
Headings Product Name
Provide a clear structure of a document. Ship to Home Free Pickup
You have also seen
Ratings & Reviews
Slide 14
… …
… . .
… .
…
. .
.
Headings
Product Name Product Name
Provide a clear structure of a document. Ship to Home
They are also used for navigation by screen reader users.
Free Pickup
You have also seen You have also seen
Ratings & Reviews Ratings & Reviews
Slide 15
… …
… . .
… .
…
. .
.
Headings
Product Name Provide a clear structure of a document. They are also used for navigation by screen reader users. Structure Example: H1 – Product Name H2 – Delivery Options (visually hidden) H3 – Delivery Options H3 – Ship to home H2 – You have also seen H2 – Ratings & Reviews
H1 Options H2 Delivery (visually hidden)
Ship to Home
H3
Free Pickup
H3
You have also seen
H2
Ratings & Reviews
H2
Slide 16
… …
… . .
… .
…
. .
.
takeaway #2
Headings make it easier to scan through the content (and definitively improve SEO)
TAB
Delivery options
Overview
Does any element require alternative ways to operate? 5
You have also seen
LEFT ARROW RIGHT ARROW
1
Ratings & Reviews
2
3
4
5
Slide 22
… …
… . .
… .
…
. .
.
takeaway #3
Account for multiple ways to interact with your application
Slide 23
… …
… . .
… .
…
. .
.
Inspect the Elements 1
2
3
Slide 24
… …
… . .
… .
…
. .
.
Product Cards Clearance
Everywhere backpack by Brand Name (200) $119.97 $199.99 Add to Cart
@HecOsborneRod
Slide 25
… …
… . .
… .
…
. .
.
Product Cards Clearance
Colour description: Pink, blue, grey, red, light blue, even lighter blue
Everywhere backpack by Brand Name
Alternative description 4 out of 5 stars
(200) $119.97 $199.99
Alternative description New $119.97 Was $199.99
Add to Cart
@HecOsborneRod