Makingaccessibile websites can be challenging – and we’ll all make mistakesChecklists are not a bad thing – they can be a useful toolHowever, if you rely solely on checklists – you will generate false positive reports that a site is accessibleChecklists are about as smart as a spellchecker – try and keep that in mind
Perceivable - Information and interface must be presentable to users in ways they can perceive.This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)Operable - User interface components and navigation must be operable.This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)Understandable - Information and the operation of user interface must be understandable.This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
Getting Started withWeb Accessibility & WAVE @seanyo SeanYo.ca email@example.com
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
Why Web Accessibility Makes Sense More Be People Awesome on Your Website It’s the Be Better Awesome law or it Code will be More Do The Google Aging Right Will Visitors Thing Love You Easier to Maintain
AODAPrinciples of Accessibility Independence Dignity Integration Equality of opportunity
W3CPrinciples of Accessibility Perceivable Operable Understandable Robust
UnderstadingWeb Accessibility For Managers & Developers
Accessibility is SimpleAutomated Tools and Best Practices • 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 ComplicatedNo Single Path • 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
Accessibility is CheapThe Best Stuff is Open & Free • 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
Accessibility is ExpensiveYou’re only as Accessible as your last a11y bug… • 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
Most errors are introduced during requirements analysis anddesign. The later they are removed, the most expensive it is totake 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 isaccessible does not make it accessible.
WAVE BasicsTesting Web Accessibility 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
WAVE ReportsErrors, Features & Alerts 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
WAVE ReportsStructure/Order View 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.
WAVE ReportsText-Only View 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
WAVE ReportsOutline View 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.
WAVE ToolbarIntegrating with Firefox 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.
Let’s Get Our Hands Dirty! w3.org/WAI/demos/bad/
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.