37
This is story of Front-End Development, Accessibility, … and puppies @jveliskova Jana Veliskova

Easy ways to make your site more accessible

Embed Size (px)

Citation preview

Page 1: Easy ways to make your site more accessible

This is story of Front-End Development, Accessibility,

… and puppies

@jveliskova

Jana Veliskova

Page 2: Easy ways to make your site more accessible

http://rjmetrics.com

Page 3: Easy ways to make your site more accessible

United Markets

Page 4: Easy ways to make your site more accessible

Their Website

Page 5: Easy ways to make your site more accessible

http://shouldiuseacarousel.com/

Page 6: Easy ways to make your site more accessible

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

Page 7: Easy ways to make your site more accessible

Every Step Requires Empathy

• Design Stages

• Anything that requires mouse control

– Drag and drop (WAI-ARIA)

– Take care with hovering

• Any dynamic content update

Page 8: Easy ways to make your site more accessible

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)

Page 9: Easy ways to make your site more accessible

..More

WAI-ARIA

• Event/time base content updates in DOM

• Drag and Drop

• Tree Navigation

Page 10: Easy ways to make your site more accessible

Burn out…

Page 11: Easy ways to make your site more accessible

Use Some Tools to Help You

• Wave Toolbar

• Fangs - Screen Reader Emulator

• Color Hexa

• Others!

Page 12: Easy ways to make your site more accessible

Wave Toolbar

• WebAIM (Web Accessibility in Mind)

• Can evaluate content on intranet

websites/private/secure sites

• Evaluates generated content (AJAX/other scripts)

Page 13: Easy ways to make your site more accessible

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

Page 14: Easy ways to make your site more accessible

Wave Toolbar

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

Page 15: Easy ways to make your site more accessible

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

Page 16: Easy ways to make your site more accessible

https://www.renttherunway.com

Page 17: Easy ways to make your site more accessible

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)

Page 18: Easy ways to make your site more accessible

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

Page 19: Easy ways to make your site more accessible
Page 20: Easy ways to make your site more accessible
Page 21: Easy ways to make your site more accessible

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

Page 22: Easy ways to make your site more accessible

Let’s Do Some Examples!

22

Page 23: Easy ways to make your site more accessible

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

Page 24: Easy ways to make your site more accessible

Workflow Incorporation

• During cross-browser testing

• After completion of a module

• During QA stage

Page 25: Easy ways to make your site more accessible

What Else is in my Toolkit?

Page 26: Easy ways to make your site more accessible

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

Page 27: Easy ways to make your site more accessible

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

Page 28: Easy ways to make your site more accessible

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

Page 29: Easy ways to make your site more accessible

Reusable classes

• Create a proper visually-hidden class

• Put accessibility information in your style

guide

Page 30: Easy ways to make your site more accessible

http://www.colorhexa.com/

Page 31: Easy ways to make your site more accessible

Find Your Own Favorites

Page 32: Easy ways to make your site more accessible

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

Page 33: Easy ways to make your site more accessible

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

Page 34: Easy ways to make your site more accessible

Hear it, see it, believe it

Page 35: Easy ways to make your site more accessible

Screen Readers

• Voice Over - FREE, included out of the box

• Cmd + F5

• NVDA - FREE

• JAWS - $895

35

Page 36: Easy ways to make your site more accessible

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/

Page 37: Easy ways to make your site more accessible

@jveliskova

Jana Veliskova