easy ways to make your site more accessible

This is story of Front-End Development, Accessibility,

… and puppies

@jveliskova

Jana Veliskova

http://rjmetrics.com

United Markets

Their Website

http://shouldiuseacarousel.com/

How to be a mindful developer

● Consider accessibility from the start

● Learn and use proper semantics

● Use the right tools and methods to test

● See a screen reader user in action

Every Step Requires Empathy

• Design Stages

• Anything that requires mouse control

– Drag and drop (WAI-ARIA)

– Take care with hovering

• Any dynamic content update

Semantics Matter

● Use logical hierarchy and outline your site’s information

● Use a tool to check the outline of your site

● Make sure your code: HTML, CSS, and JS is written in

accessibility friendly ways

● display: none;

● Forms should have labels (don’t use placeholder text as replacement)

..More

WAI-ARIA

• Event/time base content updates in DOM

• Drag and Drop

• Tree Navigation

Burn out…

Use Some Tools to Help You

• Wave Toolbar

• Fangs - Screen Reader Emulator

• Color Hexa

• Others!

Wave Toolbar

• WebAIM (Web Accessibility in Mind)

• Can evaluate content on intranet

websites/private/secure sites

• Evaluates generated content (AJAX/other scripts)

Wave Toolbar (continued)

• Looks for:

– missing alt tags for images

– missing form labels

– table structure

– evaluates script elements and event handlers

– document structure and reading order

Wave Toolbar

http://www.washington.edu/accesscomputing/AU/before.html

http://www.washington.edu/accesscomputing/AU/before.html

https://www.renttherunway.com

Wave Toolbar Disadvantages

• It’s not perfect – errors aren’t always clear

• It can’t catch design accessibility issues (ex.

Inaccessible nature of drag and drop)

Fangs

• Simulates how a website would be read by JAWS

• Open Source – developed by Peter Krantz

• Do not need to spend time parsing through

auditory output by screen reader to find issues with

site

Fangs Disadvantages

• As the FAQ states, it doesn’t replace testing with a

real screen reader

• Only catches errors you’re looking for

– Compare text vs. site

• Can be difficult to read the output

Let’s Do Some Examples!

22

http://www.w3.org/WAI/demos/bad/bad.zip

Workflow Incorporation

• During cross-browser testing

• After completion of a module

• During QA stage

What Else is in my Toolkit?

PreventionPractice Principles of Universal Design

“Universal design is the design of products and

environments to be usable by all people, to the

greatest extent possible, without the need for

adaptation or specialized design.”

- Ron Mace, Founder of the Center for Universal Design

Seven Principles of Universal Design

• Principle 1: Equitable Use

• Principle 2 : Flexibility in Use

• Principle 3: Simple and Intuitive Use

• Principle 4: Perceptible Information

• Principle 5: Tolerance for Error

• Principle 6: Low Physical Effort

• Principle 7: Size and Space for Approach and Use

http://www.nngroup.com/articles/ten-usability-heuristics/

Reusable classes

• Create a proper visually-hidden class

• Put accessibility information in your style

guide

http://www.colorhexa.com/

Find Your Own Favorites

http://www.w3.org/WAI/ER/tools/

Notes

• These are tools to help minimize accessibility issues

• Use in conjunction with:

– Thorough user testing and UX research such as usability tests

– Screen Readers such as VoiceOver, JAWS, or NVDA

Hear it, see it, believe it

Screen Readers

• Voice Over - FREE, included out of the box

• Cmd + F5

• NVDA - FREE

• JAWS - $895

35

Additional Resources

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

• http://www.elsevier.com/connect/why-web-accessibility-is-the-new-usability

• Digital Outcasts by Kel Smith

• http://webaim.org/

• http://www.standards-schmandards.com/

• http://universaldesign.ie/What-is-Universal-Design/The-7-Principles/

• http://www.w3.org/WAI/ER/tools/

• http://www.w3.org/WAI/demos/bad/

• http://lab.dotjay.co.uk/notes/voiceover-commands/

@jveliskova

Jana Veliskova