Easy ways to make your site more accessible
-
Upload
jana-veliskova -
Category
Technology
-
view
150 -
download
3
Transcript of Easy ways to make your site more accessible
![Page 1: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/1.jpg)
This is story of Front-End Development, Accessibility,
… and puppies
@jveliskova
Jana Veliskova
![Page 3: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/3.jpg)
United Markets
![Page 4: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/4.jpg)
Their Website
![Page 6: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/6.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/7.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/8.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/9.jpg)
..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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/10.jpg)
Burn out…
![Page 11: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/11.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/12.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/13.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/14.jpg)
Wave Toolbar
http://www.washington.edu/accesscomputing/AU/before.html
![Page 15: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/15.jpg)
http://www.washington.edu/accesscomputing/AU/before.html
![Page 17: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/17.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/18.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/19.jpg)
![Page 20: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/20.jpg)
![Page 21: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/21.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/22.jpg)
Let’s Do Some Examples!
22
![Page 24: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/24.jpg)
Workflow Incorporation
• During cross-browser testing
• After completion of a module
• During QA stage
![Page 25: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/25.jpg)
What Else is in my Toolkit?
![Page 26: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/26.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/27.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/28.jpg)
http://www.nngroup.com/articles/ten-usability-heuristics/
![Page 29: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/29.jpg)
Reusable classes
• Create a proper visually-hidden class
• Put accessibility information in your style
guide
![Page 31: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/31.jpg)
Find Your Own Favorites
![Page 33: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/33.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/34.jpg)
Hear it, see it, believe it
![Page 35: Easy ways to make your site more accessible](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/35.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/36.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a89b531a28aba37f8b4695/html5/thumbnails/37.jpg)
@jveliskova
Jana Veliskova