beginners guide to accessibility
TRANSCRIPT
![Page 1: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/1.jpg)
Beginners Guide to AccessibilityFor Digital Product Teams
![Page 2: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/2.jpg)
HowdyI’m Rick Dzekman
We’re here to talk about Accessibility & DesignYou can find me on Twitter@rickdzekman
2
![Page 3: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/3.jpg)
1.Why Accessibility MattersReal world consequences
![Page 4: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/4.jpg)
“ If you want to make your UI so user-friendly that anyone can use it, then everyone should be able to use it
4
![Page 5: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/5.jpg)
5
“But the building's facade doesn't look as good with a wheelchair ramp”
- Some horrible person
“We can't have a handrail in the stairwell, it would make it look ugly”
- Another horrible person
https://commons.wikimedia.org/wiki/File:SSF_Main_Library_wheelchair_ramp_1.JPG
https://commons.wikimedia.org/wiki/File:Orange_stairwell._(2610265332).jpg
Imagine a real world analogy...
![Page 6: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/6.jpg)
Australians with Serious Disability
6
Domain % of Australian who “have a lot of difficulty” or cannot perform tasks with
Seeing 0.9%
Hearing 1.6%
Walking or climbing stairs 4.1%
Remembering or concentrating 1.6%
Self care 0.9%
Communication 0.6%
Source: Supplementary Disability Survey, 2016
![Page 7: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/7.jpg)
18.3%Of Australians reported having a disability
7Source: Disability, Ageing and Carers, Australia: First Results, 2015
![Page 8: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/8.jpg)
Beyond Disability
▪ Vision Impairment - including▫ Colour Blindness, Myopia/Hyperopia, Eye-strain
▪ Cognitive Impairment▫ Head injury, Autism, Developmental Disabilities,
ADHD, Dyslexia▪ Motor or dexterity impairment
▫ Paralysis, Cerebral Palsy, Dyspraxia, Carpal Tunnel▪ Hearing-related disabilities
▫ Deafness, Hard of hearing, or Hyperacusis.8
![Page 9: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/9.jpg)
My Personal Take on Accessibility
▪ I experience eye strain – I browse the web at 150% zoom▪ My dad is inexperienced with technology – he can
struggle working out what is clickable▪ My mum needs glasses to read the screen – small or low
contrast text is very problematic▪ My cousin has RSI so using a mouse can be painful – he
prefers keyboard navigation
9
![Page 10: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/10.jpg)
Accessibility needs can be temporary or even situational
Source: Microsoft Inclusive Toolkit
![Page 11: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/11.jpg)
Beyond Impairments
● Digital Literacy○ Old age○ Inexperience○ Culture
● Economic Accessibility○ Cost of technology○ Availability of Access
11
![Page 12: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/12.jpg)
2.Legal ImplicationsIMPORTANT: I AM NOT A LAWYER
![Page 13: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/13.jpg)
Legal Implications are Secondary
We OUGHT to pursue accessibility for the purposes outlined in the previous section
To be pragmatic this section covers some basic legal implications
REPEAT: I AM NOT A LAWYER13
![Page 14: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/14.jpg)
No EXPLICIT Legal Requirement
Australian law does not currently mandate any accessibility requirements for non-government organisations
14
![Page 15: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/15.jpg)
Disability Discrimination
However, Australian law does mandate that businesses do not discriminate against people with disabilities, leaving the option open for legal challenges by a disabled individual
15
![Page 16: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/16.jpg)
No Certification Exists
There are no entities in Australia that are able to legally certify a website or application as being accessible
Organisations that provide accessibility consulting are not backed with any regulatory or legal framework for their services^
16 ^ This does not mean they aren’t worth engaging
![Page 17: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/17.jpg)
Case: Sydney Olympics Website (1999)
“The HREOC's ruling set a precedent that creating a website intended for use by and to inform the general public, where such a website is more accessible to a sighted user than the same intent and information is not available for a user who is blind by virtue of disability” [Applies to Commonwealth Government Websites]
17Source: A Cautionary Tale of Inaccessibility
![Page 18: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/18.jpg)
Case: Coles Website (2015)
“The settlement follows the mutual agreement of the parties to make further improvements to the Coles website in respect of accessibility enhancements suggested by Ms Mesnage”
18Source: Settlement of Federal Court Proceedings
![Page 19: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/19.jpg)
Case (USA): Hobby Lobby (2017)
“U.S. District Court for the Central District of California denied Hobby Lobby’s motion to dismiss a website accessibility lawsuit … decision further calls into question the precedential value of the Central District of California’s recent outlier holding … which provided businesses with hope that the tide of recent decisions might turn in their favor”
19Source: U.S. District Court for the Central District of California denied Hobby Lobby’s motion
![Page 20: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/20.jpg)
3.Core PrinciplesTo more accessible design
![Page 21: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/21.jpg)
You Have to Want It
▪ You need empathy for those with accessibility needs
▪ Be the change you want to see▪ Don’t let your design be compromised by poor
accessibility
21
![Page 22: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/22.jpg)
Team EffortHaving accessible apps and websites requires designers, developers, and product owners, all working together
22
![Page 23: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/23.jpg)
Your Design Should Be...
SimpleStructuredConsistentIntuitive
Redundant
23
These are obvious
What does this mean?
![Page 24: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/24.jpg)
BadHighlighting important information with only an icon
Redundancy Example #1
GoodImportant information is highlighted with text as well
24
![Page 25: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/25.jpg)
BadOnly using colour to differentiate a link
Redundancy Example #2
GoodUsing both colour and underline to differentiate a link
25
![Page 26: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/26.jpg)
BadOnly colour is used to convey an error in the form
Redundancy Example #3
GoodError is shown with text, colour, and an icon
26
![Page 27: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/27.jpg)
Why redundancy?
Most accessibility problems come from making incorrect assumptions. E.g. assuming users...▪ Can see▪ Can tell the difference between red and green▪ Understand internet conventions▪ Are able to concentrate or focus▪ Can hear the sound in the video
27
![Page 28: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/28.jpg)
Avoid Hiding Content
28
If content is important don’t hide it. If it’s not important why is it on the page? Hiding content behind a click or a hover should be avoided.
![Page 29: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/29.jpg)
Hiding Content has Interaction Costs
When you hide content behind a hover or click you risk breaking the accessibility of a page. This is especially true of hover.
Is there a way to avoid hiding content? Is there a way to provide a summary of hidden content?
29
![Page 30: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/30.jpg)
4.Starting PointsImportant things to consider in design
![Page 31: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/31.jpg)
Colour Contrast
31
![Page 32: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/32.jpg)
Colour ContrastThis text is low contrast
32
This would be bad but the font size makes up for it
This is better
This is obviously going to be better
Check your contrast online: http://webaim.org/resources/contrastchecker/
![Page 33: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/33.jpg)
Text Over Pictures?Generally a bad idea
33
HOW’S MY CONTRAST?
HOW ABOUT MINE?
If your design allows text over a picture you run the risk of content managers creating accessibility problems.
Better to create an overlay instead
![Page 34: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/34.jpg)
Disabled Buttons
34
The WCAG standard is not infallible. This is a case where I disagree.
According to the WCAG standard on contrast:“Text or images of text that are part of an inactive user interface component... have no contrast requirement.”
![Page 35: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/35.jpg)
Colourblind Friendly Design
35
![Page 36: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/36.jpg)
36
Normal Vision Deuteranopia
Protanopia Tritanopia
Types of Colour Blindness
Source: Types of Colourblindness (Note: there are other rarer types of colour blindness)
Did you know?Worldwide 8% of men
and 0.5% of women have a colour vision
deficiency
![Page 37: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/37.jpg)
37
What parts of this page are clickable?
![Page 38: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/38.jpg)
38
How about now?
![Page 39: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/39.jpg)
39
Form Errors
▪ Form errors are definitely an area where you should not use colour alone
▪ Use text and icons to further highlight errors
While we’re at it...▪ Errors should tell users how to fix problems!
![Page 40: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/40.jpg)
Keyboard Focus & Tab Order
40
![Page 41: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/41.jpg)
41
Highlight Every Button and Link
▪ Keyboard users can use TAB to move between links and other actionable elements
▪ When the keyboard has focus on an element the user can press enter to perform an action (e.g. go to the URL of the link)
▪ The element that is in focus should have a highlight around it that is clearly distinguishable from the background
![Page 42: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/42.jpg)
42
In both Sydney Morning Herald and News.com.au ● Most hyperlinks get an outline when they have
keyboard focus● Except the social media icons - e.g. Facebook
icon only shows a focus outline on SMH
![Page 43: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/43.jpg)
43
Tab Order and DOM Order
▪ Stick to the default tab order in the DOM - playing with tab order is problematic
▪ Normally we read left-to-right, but sometimes secondary content appears on the left▫ In this case the content that needs to be
read first should appear first in the DOM▫ Position it to the left with appropriate floats
and flex values
![Page 44: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/44.jpg)
Touch Friendly
44
![Page 45: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/45.jpg)
Touch Area
45
▪ Ensure a large enough touch area on all clickable items - especially links
▪ W3C recommends touch target sizes on screen of at least: 9mm x 9mm
▪ Think about how this is impacted when many hyperlinks are close together?
▪ Imagine what it’s like if precise motor control is hard for the user
![Page 46: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/46.jpg)
Zoom - Desktop and Mobile
46
![Page 47: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/47.jpg)
Responsive Zoom on Desktop
47
▪ Most responsive is designed so that the page adjusts when resizing the browser
▪ This should work identically when users zoom in to the page
▪ This tends to break if all measurements are done in precise pixel values - instead of using em or rem values
![Page 48: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/48.jpg)
Don’t Disable Zoom on Mobile
48
▪ Many developers are putting in <meta> tags that prevent users from zooming
▪ Users with eyesight difficulties should be able to pinch zoom on mobile devices
![Page 49: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/49.jpg)
Images
49
![Page 50: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/50.jpg)
Images and “alt text”
50
If an image adds meaning to content then it needs to be given a textual representation. This is useful not only for screen readers but also for SEO.
This needs to be done either as an alt tag or a caption on the image^ (using the <figure> and <figcaption> elements). ^See: Techniques for providing useful text alternatives from w3
![Page 51: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/51.jpg)
51
● The alt text on the image says “Amazon Echo” but this is exactly the same as the heading
● This alt text should describe what the product is like, e.g. “The Amazon Echo is a small dark cylinder with a speaker”
![Page 52: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/52.jpg)
Visual Hierarchy
52
![Page 53: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/53.jpg)
Primary Heading (H1)Secondary heading (H2)Tertiary Heading (H3)Body copy text
53
It is important to have a clear visual hierarchy, both with page structure and with vertical rhythm
Users with cognitive impairment will find well structured pages easier to follow
Site Header
Page Header
Body
![Page 54: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/54.jpg)
54
Up-ending page structure with highly visual elements can negatively impact users with cognitive impairment. This may force them to lose their place on the page and become confused.
This is especially bad with animations (e.g. carousels, or things that remain in motion on screen)
Site Header
Page Header
Body
Aside
Stand-out
Aside
Footer
![Page 55: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/55.jpg)
Affordances^
55
^ Well according to Don Norman (who introduced the term to UX) we’ll actually be talking about signifiers; but most people continue to use affordance
![Page 56: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/56.jpg)
56
Smashing MagazineHome Page Article Page
This article heading is a link!
Clicking the link goes to this
page
While the other links are blue and the
buttons are raised!
These pages also look
identical until here
![Page 57: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/57.jpg)
57
Appearing Clickable/Tappable
▪ Links and buttons must have the affordance of being clicked or tapped
▪ Do not use the same style on non-clickable decorative items as you would on clickable ones
![Page 58: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/58.jpg)
“ Clickable UI elements with absent or weak visual signifiers condition users over time to click and hover uncertainly across pages — reducing efficiency and increasing reliance on contextual cues and immediate click feedback. Young adult users may be better at perceiving subtle clickability clues, but they don’t enjoy click uncertainty any more than other age groups.
58
Long-Term Exposure to Flat DesignKate Mayer - Nielsen Norman Group
![Page 59: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/59.jpg)
▪ Flat UI is likely here to stay▪ While it’s not a WCAG accessibility issue, it does
predominantly affect older users▪ We can try to augment flat UI by including other
signifiers (e.g. shadows, icons)At the very least we need consistency about what is and what is not clickable
59
On Flat UI
![Page 60: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/60.jpg)
Icons & Labels
60
![Page 61: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/61.jpg)
“ A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.
61
Icon UsabilityAurora Harley - Nielsen Norman Group
![Page 62: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/62.jpg)
Headers from top 4^ ecommerce sites
62
Login
Search
^ According to alexa.com
![Page 63: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/63.jpg)
Universal Icons are Rare
63
▪ According to research from Nielsen Norman Group: “universal” icons are rare
▪ Search and Home are two of very few icons that are recognised by almost all people
▪ The odds of your users knowing what you mean by a specific icon are very low
▪ Consider the ecomm stores in the previous slide - almost no icons came without a label
![Page 64: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/64.jpg)
Icons Without Labels
64
▪ In order to support screen readers extra code is required when icons have no labels
▪ Labels on icons help both sighted users and non-sighted users
▪ Even on mobile it’s problematic - it saves space at the cost of comprehension
![Page 65: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/65.jpg)
Icons in Code
If an icon is purely decorative you need to make sure that screen readers ignore it. For images alt=”” and for icon-fonts use aria-hidden=”true”.Icons need very little Accessibility work if they are also accompanied by explanatory labelsFor a non-decorative icon with no label, check out the Font Awesome Accessibility guidelines
65
![Page 66: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/66.jpg)
Forms
66
![Page 67: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/67.jpg)
Form Accessibility Is a Deep Topic
67
My presentation on “Designing Usable Forms” contains a mix of design and development discussion points for form design, including accessibility
Follow design best practices on form design, e.g. 10 Rules for Efficient Form Design by Nick Babich
![Page 68: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/68.jpg)
5. Practical ExerciseExperiencing Accessibility for yourself
![Page 69: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/69.jpg)
Exercise 1 - Keyboard Navigation
▪ Pick a reasonably large ecommerce store▪ Imagine you have Carpal Tunnel Syndrome
▫ Using a mouse is physically painful▫ You can click to start focus somewhere but
keep it to a minimum▪ Find a particular item in the store
▫ Once using navigation, once using search▪ Add the item to your cart and go to checkout
69
![Page 70: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/70.jpg)
Exercise 1 - How did you go?
▪ We would expect that a task like this would probably be slower using only a keyboard
▪ But it should at least be possible▪ Were there any problems?
▫ Did you always know where the focus was?▫ Were there things that were difficult to get
focus on?▫ Did you complete the task?
70
![Page 71: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/71.jpg)
Exercise 2 - Screen Reader
▪ Pick a registration form for a site you know▪ Use Google Chrome
▫ Install the “Chrome Vox” extension▪ Load the page with the registration form, then
turn on Vox▪ Close your eyes or shut off your monitor, and
attempt to fill out the form using only the voice prompts and your keyboard
71
![Page 72: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/72.jpg)
Exercise 2 - How did you go?
▪ Were you able to successfully complete your task?
▪ Looking at the page afterwards, was there anything about the page that was not apparent when using the screen reader?
72
![Page 73: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/73.jpg)
6. Final ThoughtsThings you may not have considered
![Page 74: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/74.jpg)
Other Accessibility Tools
▪ Users may browse in “High Contrast Mode”▪ Users may browse with images disabled▪ Users may have their browser significantly
zoomed in (e.g. 400%)▪ Users may be on a very slow internet
connection or old computer▪ Users may be doing this particular task for the
very first time, or have difficulty learning it74
![Page 75: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/75.jpg)
Accessibility is a Big Topic
▪ Try to get the little things done▪ Work with Accessibility experts where you can
to expand your knowledge▪ Use a consulting firm to test your product with
actual users with accessibility needs
75
![Page 76: Beginners Guide to Accessibility](https://reader030.vdocuments.net/reader030/viewer/2022020411/5a6542977f8b9ace0b8b48a5/html5/thumbnails/76.jpg)
THANKS!Any questions?You can find me on Twitter:@rickdzekman
76