Upload
jana-veliskova
View
149
Download
3
Tags:
Embed Size (px)
Citation preview
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