Tales from the Accessibility Trenches

Graeme Coleman, Mark Palmer@graemecoleman, @caledoniaman

Who are we?

• Graeme Coleman (@graemecoleman)– Accessibility consultant at The Paciello

Group (http://www.paciellogroup.com)

• Mark Palmer (@caledoniaman)– Independent accessibility consultant– shout@markpalmer.org

• Was once a trainee accountant here in Edinburgh…

• Had a bit (but not a lot) of web development experience

• MSc then PhD at the University of Dundee

• Joined the Digital Media Access Group in 2007

Graeme’s Background

• UI Developer for HBOS for 7 years• Accessibility consultant with an

Edinburgh UX consultancy for 7 years• Currently employed within the Civil

Service as UX Specialist• Also freelancing as an Accessibility

Consultant

Mark’s Background

What interests us?

How can we ensure that the content we put on the web is accessible to everyone, including people with disabilities?

The stats

• 650 million people worldwide have a disability of some kind

• That’s around 10% of us…!

• By the time we retire, over 30% of us will have some form of disability (however minor)

Source: “A Web for Everyone” (Horton & Quesenbery, 2013)

Forms of disability

• Our users may be:– Blind (and use a screen reader)– Visually impaired (and use a screen

magnifier)– Color blind (and unable to distinguish

between, say, red and green)–Mobility impaired (which prevents or limits

use of the mouse)– Cognitively impaired (for example, dyslexia,

and use a Windows high contrast theme)

Forms of disability

• Our users may also be:

– Older people with a combination of minor age related impairments

– Using a small screen device– Coping with fatigue, weakness, or stress

Design for Flexibility

• We have no idea:

–Who will be accessing our content

–How they will be accessing our content

How did I get involved in web accessibility?

“When I grow up, I want to be a web accessibility consultant!”- No

Early Days

I HAVE NO IDEAWHAT I’M DOING

Source:

http://creativenerds.co.uk/freebies/slick-but-clean-free-social-media-icon-set/

I’m a web accessibility consultant

What do you do?

…

…yeah, we don’t have

the capacity to make

these changes

Web accessibility is important because…

http://www.slideshare.net/johnfoliot/fireman-cop

The Blue Meanie

Source: https://flic.kr/p/4z4EkR

It’s not accessible. Do you like

my new widget? Took me months to build, and…

Negative mantra

No. But…can you help

me make it accessible?

Limited or no remediation advice

FIX ALL THE

THINGS!Where do I

start…

Limited or no help with prioritizing

…I don’t know if I have the resources,

time, budget…

No awareness of organization’s structure

I don’t know if I have the resources,

time, budget…

No awareness of organization’s structure

FIX ALL THE

THINGS!

A positive approach

• Clearly explain why something poses an accessibility barrier

• Provide illustrative examples, with steps to reproduce if necessary

• Provide clear recommendations for remediation, with code if necessary

• Help the client prioritize based on accessibility impact and resources required

My perspective on accessibility

• You should not have to completely redesign your site (except in very, very, very rare circumstances)

• Most accessibility advice will remediate issues “under the hood”

• The main aesthetic/visible changes I may suggest relate to:– colour contrast, table reorganization,

and sectioning content

Six Accessibility Tips

Tip 1:

Don’t assume specific input devices

• Test that interactive components can be accessed via the keyboard:– Can you “tab” to it using the Tab key?– Does it respond to the Enter key/space bar?

• Make sure that:– There is a clear indication of focus (don’t

use outline: none;)– Navigation order is logical– Custom dialog boxes “grab” focus (but

watch for keyboard traps)

Tip 2:

Use semantic markup

• Give each page an appropriate title – The first item a screen reader will

announce when the page is opened

• Provide a logical heading structure• Use HTML elements as per the

specification:– Use list elements for lists, button

elements for buttons, table elements for data tables…

• http://www.paciellogroup.com/resources/wat

But:

What about custom widgets?

Tip 3:

WAI-ARIA

• Web Accessibility Initiative Accessible Rich Internet Applications

• Provides additional semantic meaning to HTML elements for use by assistive technologies

• As of 20th March 2014, WAI-ARIA is a W3C recommendation

• http://www.w3.org/TR/wai-aria/

WAI-ARIA example

<div>Custom Button</div>

WAI-ARIA example

Note:Further scripting is required to ensure the

above responds to both Enter and Space keyshttp://blog.paciellogroup.com/2011/04/html5-

accessibility-chops-just-use-a-button/

<div role=“button”>Custom Button</div>

WAI-ARIA – the caveats

• If a native element already exists, use it!– It will already have the necessary semantics

and behaviour built in by default

• Use WAI-ARIA when:– Styling possibilities for the native element

are limited– The feature is not (yet) available/well

supported in HTML (e.g. a dialog box, treeview)

• http://www.w3.org/TR/aria-in-html/

WAI-ARIA design patterns

http://www.w3.org/TR/wai-aria-practices/#aria_ex

Don’t reinvent the wheel…

http://hanshillen.github.io/jqtest/

Tip 4:

Progressively enhance

“Just stop saying that JavaScript as a platform is by its very existence an accessibility problem. It's not, and saying so is an obstacle to all of the people working to use it to the advantage of everyone.’”

Matt May, December 2012http://lists.w3.org/Archives/Public/w3c-wai-ig/2012OctDec/0223.html

Percentage of screen reader users who browse with JavaScript enabled (total n=1465):

97.6%

WebAIM screen reader survey 5, Feb. 2014http://webaim.org/blog/survey-5-results/

• Take a “content first” approach– Everyone gets access to the important

information

• A content first approach provides a fallback for breakage– This will give you an idea of how

assistive technology users experience your site

Tip 5:

Use colour sensibly

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• Can you distinguish between foreground and background colour combinations?

• Problematic when viewing on a mobile device outside in the sunshine

• Pro Tip: Print the page out in greyscale – is it still readable?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• Can you distinguish between foreground and background colour combinations?

• Problematic when viewing on a mobile device outside in the sunshine

• Pro Tip: Print the page out in greyscale – is it still readable?

GoodBad

Choose a colour for your t-shirt: Choose a colour for your t-shirt

X

Red

Green

Blue

Yellow

Required fields are indicated in red text * = Required Field

First name:

Middle name:

Surname:

First name: *

Middle name:

Surname: *

http://24ways.org/2012/colour-accessibility/

Tools for checking use of color

• Colour Contrast Analyser: – http://www.paciellogroup.com/resources/

contrastAnalyser

• Color Contrast Check:– http://snook.ca/technical/colour_contrast/

colour.html

• Luminosity Colour Contrast Ratio Analyser:– http://juicystudio.com/services/

luminositycontrastratio.php

Tip 6:

Ask

• Involve different types of users (and accessibility consultants!) in the design process, from as early as possible

• Ask assistive technology users to demonstrate how they use their devices

• There are many videos on YouTube of people using assistive devices – check them out!

Useful Resources

• TPG blog: http://blog.paciellogroup.com/

• Marco’s blog: http://www.marcozehe.de/

• WebAIM: http://webaim.org/

Thank You!

Graeme Coleman@graemecoleman

Now over to Mark…