Dissecting websites through the lens of accessibility

… … … . . … . … . . . Dissecting Websites through the lens of Accessibility GAAD - May 2022 Hector Osborne Rodriguez @HecOsborneRod

… … … . . … . … . . . Slides bit.ly/a11y-disect-website

… … … . . … . … . . . Preface (skip to content)

… … … . . … . … . . . 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

… … … . . … . … . . . 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

… … … . . … . … . . . 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

… … … . . … . … . . . Agenda 1 2 3 Unwrap the structure Define the interaction flow Inspect the elements @HecOsborneRod

… … … . . … . … . . . Unwrap the structure 1 2 3

… … … . . … . … . . . Website layout Blog Features Blog Article Profile Product Search Product Page

… … … . . … . … . . . Website layout HTML5 provides key markers to structure the website. For example: <header> <main> <footer>

… … … . . … . … . . . Website layout Navigation Search

<nav> <form role=“search> Landmarks are used for navigation by screen reader users. Main Navigation <nav> <main> Footer <footer> Banner . <header> .

… … … . . … . … . . . takeaway #1 Layout definition improves navigation & comprehension (and potentially SEO)

… … … . . … . … . . . Headings Product Name Provide a clear structure of a document. Ship to Home Free Pickup You have also seen Ratings & Reviews

… … … . . … . … . . . 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

… … … . . … . … . . . 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

… … … . . … . … . . . takeaway #2 Headings make it easier to scan through the content (and definitively improve SEO)

… … … . . … . … . . . Define the interaction flow 1 2 3

… … … . . … . … . . . Interaction devices Mouse Keyboards Product Name Delivery options Overview You have also seen Ratings & Reviews

… … … . . … . … . . . Interaction devices Mouse Keyboards Screen readers Switches Buttons Pencils Fingers Mouth sticks Head Pointer Voice Recognition Software Virtual Reality TV Remote Control Product Name Delivery options Overview You have also seen Ratings & Reviews

… … … . . … . … . . . Interaction devices 1 2 Product Name Let’s focus on keyboard interaction TAB SHIFT

TAB Delivery options Overview 5 You have also seen Ratings & Reviews 3 4

… … … . . … . … . . . Interaction devices 1 2 3 4 Product Name Let’s focus on keyboard interaction TAB SHIFT

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

… … … . . … . … . . . takeaway #3 Account for multiple ways to interact with your application

… … … . . … . … . . . Inspect the Elements 1 2 3

… … … . . … . … . . . Product Cards Clearance Everywhere backpack by Brand Name (200) $119.97 $199.99 Add to Cart @HecOsborneRod

… … … . . … . … . . . 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

… … … . . … . … . . . Product Cards Clearance clickable clickable clickable Everywhere backpack clickable by Brand Name clickable (200) $119.97 $199.99 clickable Add to Cart @HecOsborneRod

… … … . . … . … . . . Product Cards Clearance 1 2 3 4 5 6 7 Everywhere backpack 8 9 10 by Brand Name (200) $119.97 $199.99 Add to Cart 11 @HecOsborneRod

… … … . . … . … . . . takeaway #4 Accessibility should always be considered from the beginning (shift left)

… … … . . … . … . . . Hector Osborne Rodriguez Front-End Development Manager at Accenture Linked In: @HectorOsborneRodriguez Twitter: @HecOsborneRod Web: https://a11y.tips

… … … . . … . … . . . Thank you

… … … . . … . … . . . Dissecting Websites through the lens of Accessibility GAAD - May 2022 Hector Osborne Rodriguez @HecOsborneRod