Beginners Guide to AccessibilityFor Digital Product Teams

HowdyI’m Rick Dzekman

We’re here to talk about Accessibility & DesignYou can find me on Twitter@rickdzekman

2

1.Why Accessibility MattersReal world consequences

“ If you want to make your UI so user-friendly that anyone can use it, then everyone should be able to use it

4

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

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

18.3%Of Australians reported having a disability

7Source: Disability, Ageing and Carers, Australia: First Results, 2015

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

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

Accessibility needs can be temporary or even situational

Source: Microsoft Inclusive Toolkit

Beyond Impairments

● Digital Literacy○ Old age○ Inexperience○ Culture

● Economic Accessibility○ Cost of technology○ Availability of Access

11

2.Legal ImplicationsIMPORTANT: I AM NOT A LAWYER

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

No EXPLICIT Legal Requirement

Australian law does not currently mandate any accessibility requirements for non-government organisations

14

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

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

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

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

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

3.Core PrinciplesTo more accessible design

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

Team EffortHaving accessible apps and websites requires designers, developers, and product owners, all working together

22

Your Design Should Be...

SimpleStructuredConsistentIntuitive

Redundant

23

These are obvious

What does this mean?

BadHighlighting important information with only an icon

Redundancy Example #1

GoodImportant information is highlighted with text as well

24

BadOnly using colour to differentiate a link

Redundancy Example #2

GoodUsing both colour and underline to differentiate a link

25

BadOnly colour is used to convey an error in the form

Redundancy Example #3

GoodError is shown with text, colour, and an icon

26

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

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.

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

4.Starting PointsImportant things to consider in design

Colour Contrast

31

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/

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

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

Colourblind Friendly Design

35

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

37

What parts of this page are clickable?

38

How about now?

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!

Keyboard Focus & Tab Order

40

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

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

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

Touch Friendly

44

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

Zoom - Desktop and Mobile

46

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

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

Images

49

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

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”

Visual Hierarchy

52

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

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

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

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

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

“ 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

▪ 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

Icons & Labels

60

“ 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

Headers from top 4^ ecommerce sites

62

Login

Search

^ According to alexa.com

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

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

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

Forms

66

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

5. Practical ExerciseExperiencing Accessibility for yourself

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

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

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

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

6. Final ThoughtsThings you may not have considered

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

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

THANKS!Any questions?You can find me on Twitter:@rickdzekman

76