How do I know if my web project is accessible?

Slide 1

Slide 1 text

Coolfields Consulting www.coolfields.co.uk @coolfields Michael Beil Coffee Dev Web Addict [email protected] @michaelbeil How do I know if my web project is accessible?

Slide 2

Slide 2 text

Coolfields Consulting www.coolfields.co.uk @coolfields Social Stuff #a11y @MadJavaScript @michaelbeil

Slide 3

Slide 3 text

Coolfields Consulting www.coolfields.co.uk @coolfields Social Stuff #a11y @MadisonJavascript

Slide 4

Slide 4 text

Coolfields Consulting www.coolfields.co.uk @coolfields Relax

Slide 5

Slide 5 text

What I’m going to cover Web Content Accessibility Guidelines  (Version 2) published by the Web Accessibility Initiative of the World Wide Web Consortium http://www.w3.org/TR/WCAG20/ A.K.A. WCAG2.0 • Good resource for accessibility • Can be hard to interpret

Slide 6

Slide 6 text

What I’m going to cover So how about a simple yes/no checklist? Easy to check with free tools

Slide 7

Slide 7 text

The Four Principles of Accessibility Perceivable – Make web content available for the senses: sight, sound, or touch. The most practical way to achieve this is to provide text alternatives for any non-text content. Operable – Make interface elements operable (forms, control, navigation). The biggies here are making keyboard navigation available and giving users time to read or click through content (i.e. imagine a slider that rotates images faster than a user can process or click). Understandable – Make sure content and user interface are understandable. Now this is User Interface 101, accessibility or not. If somebody’s having to guess about where to click, then the design is a failure. Stick to layouts and interfaces that are predictable – if you get too clever with a design, people won’t intuitively know how to use it. Designers, don’t hate on this one. Accessible does not have to equal boring or ugly. Robust – Content can be used reliably by a variety of user agents, including assistive technologies. The bottom line here? Always strive to conform with current web coding standards. See: http://www.carriedils.com/how-to-check-website-accessibility/

Slide 8

Slide 8 text

Take note •

Slide 9

Slide 9 text

Disclaiming We’re only going to cover some common accessibility issues. But, if you can answer these questions correctly, your site/project/app will be more accessible than many.

Slide 10

Slide 10 text

Legal stuff • Section 255 of the Telecommunications Act • (USA) Rehabilitation Act, Section 504 • (USA) Rehabilitation Act Amendments of 1998, Section 508 http://www.w3.org/WAI/Policy/#US

Slide 11

Slide 11 text

Coolfields Consulting www.coolfields.co.uk @coolfields Keyboard Interaction

Slide 12

Slide 12 text

Keyboard interaction You need to answer Yes to these: 1) Can I easily access all parts of the site with the keyboard only? 2) Can I easily see where keyboard focus is?

Slide 13

Slide 13 text

Keyboard interaction Hover states Keyboard focus

Slide 14

Slide 14 text

Keyboard interaction CSS a:hover {background:#fff, color:#000} a:hover, a:focus {background:#fff, color:#000} Don't do this: a:focus {outline:none} jQuery $(selector).hover(inFunction,outFunction); $(selector).focusin(inFunction); $(selector).focusout(outFunction);

Slide 15

Slide 15 text

Keyboard interaction

Slide 16

Slide 16 text

Keyboard interaction You need to answer Yes to these: 3) Can I easily access all functionality with the keyboard only? 4) Does the keyboard tab order make sense?

Slide 17

Slide 17 text

Keyboard interaction Img of Lightbox When lightbox opens, focus remains on page below

Slide 18

Slide 18 text

Keyboard interaction

Slide 19

Slide 19 text

Coolfields Consulting www.coolfields.co.uk @coolfields Links

Slide 20

Slide 20 text

Links Can you answer Yes to this one? 5) Are the links obviously links?

Slide 21

Slide 21 text

Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? Elements list in NVDA

Slide 22

Slide 22 text

Coolfields Consulting www.coolfields.co.uk @coolfields Media

Slide 23

Slide 23 text

Media Can you answer Yes to these? 7) Do all images have appropriate alternate text? (appropriate may mean empty ie alt="") 8) Do all videos have captions?

Slide 24

Slide 24 text

Coolfields Consulting www.coolfields.co.uk @coolfields Signposting Content

Slide 25

Slide 25 text

Signposting content Can you answer Yes to all these? 9) Are the page titles unique and meaningful? 10) Do pages have appropriate headings and subheadings? 11) Are ARIA landmark roles present?

Slide 26

Slide 26 text

Using headings Headings list from NVDA screen reader Note: NVDA exposes heading hierarchy Headings are used as a navigation feature

Slide 27

Slide 27 text

ARIA landmark roles Banner Navigation Footer Content Sidebar

Slide 28

Slide 28 text

ARIA landmark roles

Slide 29

Slide 29 text

Coolfields Consulting www.coolfields.co.uk @coolfields Text

Slide 30

Slide 30 text

Text Can you answer Yes to this one? 12) Can I resize text in a page without breaking the layout?

Slide 31

Slide 31 text

Normal size NB: Resizing and zooming are not the same thing Text Larger size

Slide 32

Slide 32 text

Text Can you answer No to this one? 13) Is any of the text fully justified?

Slide 33

Slide 33 text

"Rivers of white space" Text Left aligned text Fully justified text could cause distraction.

Slide 34

Slide 34 text

Coolfields Consulting www.coolfields.co.uk @coolfields User Input

Slide 35

Slide 35 text

Coolfields Consulting www.coolfields.co.uk @coolfields No Upset Users

Slide 36

Slide 36 text

Coolfields Consulting www.coolfields.co.uk @coolfields No Mixed Emotions

Slide 37

Slide 37 text

Coolfields Consulting www.coolfields.co.uk @coolfields Reach for the stars

Slide 38

Slide 38 text

User input Can you answer Yes to this one? 14) Do all form fields have an accompanying label?

Slide 39

Slide 39 text

User input

Slide 40

Slide 40 text

Coolfields Consulting www.coolfields.co.uk @coolfields Color & Shape

Slide 41

Slide 41 text

Color & shape Can you answer Yes to this one? 15) Is the color contrast sufficient?

Slide 42

Slide 42 text

Color contrast Colour Contrast Analyzer Tool

Slide 43

Slide 43 text

Color contrast Michael

Slide 44

Slide 44 text

Color & Shape Can you answer No to this one? 16) Is meaning conveyed by color or shape only?

Slide 45

Slide 45 text

Assessing accessibility in color and shape … Project Name Status Fully Resourced? Easy peasy project ! Quite a tricky project ! So glad I'm not on that project " Going OK !

Slide 46

Slide 46 text

Coolfields Consulting www.coolfields.co.uk @coolfields Collaboration Connect with your community.

Slide 47

Slide 47 text

Coolfields Consulting www.coolfields.co.uk @coolfields Forget No One

Slide 48

Slide 48 text

Coolfields Consulting www.coolfields.co.uk @coolfields Example

Slide 49

Slide 49 text

Coolfields Consulting www.coolfields.co.uk @coolfields Woot!

Slide 50

Slide 50 text

Coolfields Consulting www.coolfields.co.uk @coolfields Demo

Slide 51

Slide 51 text

Useful resources Color Contrast Analyzer • http://paciellogroup.com/resources/contrastAnalyser Wave Toolbar/Website • Standalone - http://wave.webaim.org • Chrome or Firefox add-on Browser Tools • Chrome - Inspect element: accessibility properties • Firefox – Firebug inspect element

Slide 52

Slide 52 text

Chrome: accessibility properties

Slide 53

Slide 53 text

More useful resources Getting alternate text right • http://owl.li/pGtKC Coding forms for accessibility • http://owl.li/pDLMQ Creating text for screen readers only • http://owl.li/qzOGj

Slide 54

Slide 54 text

Thanks for listening! Any questions? [email protected] @michaelbeil Props to @coolfields for letting me build on his slides. Find him at http://coolfields.co.uk. Photos from http://pexels.com and GIFs from http://giphy.com.

Slide 55

Slide 55 text

eo From http://a11ymemes.tumblr.com

Slide 56

Slide 56 text

Video From http://a11ymemes.tumblr.com

Slide 57