wave training
DESCRIPTION
In introduction to Web Accessibility andTRANSCRIPT
What is Web Accessibility?
Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. When sites are
correctly designed developed and edited all users can have equal access to
information and functionality.
http://en.wikipedia.org/wiki/Web_accessibility
What is WAVE?
Web-based tool Helps make web content
more accessible Not a substitute for
humans Reports a11y errors,
possible errors, and other crisis points
Web Accessibility
Web Accessibility BarriersDiversity of Abilities
Auditory
Speech
Cognitive and Neurological
Physical/Motor
Visual5
4
3
2
1
Why Be Accessible?
Why Web Accessibility Makes Sense
More People on Your Website
Be Awesome
Better Code
Be Awesome
It’s the law or it will be
Do The Right Thing
More Aging
Visitors
Google Will
Love You
Easier to Maintain
Why Be Accessible?
Why Have a Website?
To Connect With People
User Experience
Accessibility Experience
People Have Experiences Checklists Don’t
Web Accessibility Principles
The Only One That Matters
People First
Principles of AccessibilityAODA
Independence Dignity Integration Equality of opportunity
Principles of AccessibilityW3C
Perceivable Operable Understandable Robust
Understading Web Accessibility
For Managers & Developers
Automated Tools and Best PracticesAccessibility is Simple
• Lots of great, free tools to measure accessibility• Lots of great, free info & recommendations• Using web standards is good for accessibility
• Tools: WAVE, FAE, TAW, FANGS, NVDA• Info: WAI, WCAG, WebAIM, WaSP• Use valid, semantic code - Even better, use a
CMS
Accessibility is Complicated
• How to measure accessibility?• Automated testing needs user testing• Websites are not fire &forget – they are a process
• Which Standard? WCAG, 508, AODA• Lots of platforms: IE, Gecko, Webkit + Mobile• Content will change & break accessibility
No Single Path
The Best Stuff is Open & FreeAccessibility is Cheap
• Being accessible improves search rankings• Google is a Screen Reader• CMS tools are a strong investment – Open & free
• The best tools are Open & free• Development best practices are Open & free• CMS tools can automated compliance : alt tags
You’re only as Accessible as your last a11y bug… Accessibility is Expensive
• Passing a checklist doesn’t make a site accessible• Accessibility is challenging and doesn’t end• Leaving it to the end is costly – in time and money
• Web development is a mature profession• Accessibility is a critical dimension of webdev• A11y is expensive to retrofit, like schemas &
security
Accessibility is Cheap & Simple…
…When Finding Problems
Accessibility is Complicated and Expensive…
…When Fixing Accessibility Problems
Accessibility for Management
Plan for Accessibility From the Beginning
Most errors are introduced during requirements analysis and design. The later they are removed, the most expensive it is to take them out.
Boehm et al (1975): “Some Experience with Automated Aids to the Design of Large-Scale Reliable Software.”Diagram Source: http://blogs.windriver.com/vxworks/device-management/
Accessibility is not an option.An inaccessible website is incomplete.
A vendor claiming a product is accessible does not make it accessible.
Avoid Assumptions About Your Audience
Count on Text Provide Alternatives in Text
Don’t take control of your visitor’s experience
Use Clear Language
Testing Is Hard
Real PeopleDifferent Needs
Assistive Technology
Using WAVE
Testing Web AccessibilityWAVE Basics
Tool to identify a11y issues Cannot validate as “accessible” Adds colour coded comments Provides 4 types of reports
Errors, Features & Alerts Structure/Order View Text-Only View Outline View
Errors, Features & AlertsWAVE Reports
Default View Presents your page with the
embedded accessibility icons and indicators.
If this view is too complicated you can “disable styles”
Scripting is removed from this an all other WAVE reports
Structure/Order ViewWAVE Reports
Displays icons and indicators for overall structure of the page.
Number indicators show the reading/navigation order of the page.
Follow the numbers to determine if the reading and navigation order of the page makes sense and is logical.
Text-Only ViewWAVE Reports
Displays only the underlying text of the page.
Information that is commonly read by screen readers will be presented.
The visual styling of the page is removed. This provides a visual view of what a
screen reader would likely read. Fangs Firefox Add-On
Outline ViewWAVE Reports
Displays only the headers that are within your page.
Ensure that your page contains headers where appropriate
Ensure structure of the page is logical and appropriate.
Integrating with FirefoxWAVE Toolbar
Displays content as it appears within your web browser.
Allows evaluation of private, intranet, password protected, dynamically generated, or scripted web content.
All evaluation happens directly within your browser.
The toolbar also evaluates content after scripting has been applied, whereas the server version of WAVE removes all scripting.
w3.org/WAI/demos/bad/
Let’s Get Our Hands Dirty!