Embed Size (px)
Citation preview
Web Accessibility API
Testing For Accessibility
03/01/2016
Hagai Asaban
linkedin.com/in/hagaiasaban
Disability Major Types
Visual
Blindness
Low vision
Color-blindness
Hearing
Deafness
Hard-of-hearing
Motor
Inability to use a mouse
Slow response time
Limited fine motor control
Cognitive
Learning disabilities
Distractibility
Usability & AccessibilityTwins separated at birth
a11y - accessibility
11
Motivations for Accessibility
Legislation
Business and outreach (reach everyone)
Improving Marketing & SEO
Accessibility Error Priorities
Critical
An absolute barrier to access
SeriousA barrier that could cause frustration to most, causing a need for work-arounds
Moderate,
A frustration that would not prevent someone from using the site
Minor
A WCAG error that is unlikely to cause problems
W3C: Web Content Accessibility
Guidelines (WCAG) 2.0
https://www.youtube.com/watch?v=2ma44vyMOs8
Levels of Conformance
62 specific success criteria
• Level A : 26 success criteria
• Level AA : 13 success criteria
• Level AAA: 23 success criteria
WCAG 2.0 - Accessibility Principles
1. Perceivable: Information and user interface components must be presentable to users
in ways they can perceive.
2. Operable: User interface components and navigation must be operable.
3. Understandable: Information and the operation of user interface must be understandable.
4. Robust:Content must be robust enough that it can be interpreted reliably by a
wide variety of user agents, including assistive technologies.
Perceivable Principle
Text alternatives for:
∙ Images
∙ Time-based media
∙ CAPTCHAs
Adaptable presentation
Use color and contrast effectively
Organize content in a meaningful sequence
Operable Principle
Content needs to work with the keyboard
Provide enough time to read and use
Not design content in a way that known
as could cause epileptic seizures
Help users to navigate, find content, and
locate themselves in your site
Understandable Principle
Use plain language
Define jargon and abbreviations
Consistent and predictable user interfaces
Help users avoid mistakes
Robust Principle
Use valid markup and standards
Describe the names, roles, and values of all user interface controls
Assistive Technology
Photo: mtstcil.org
Mobility Disabilities
One hand keyboard Eye Tracking
Mobility Disabilities
Mouth Stick Puff and Sip Device
Accessible API
ARIA - Accessible Rich Internet Applications(also known as WAI-ARIA)
W3C specification
Fills the semantic gaps in HTML
Roles, states, and properties
http://www.w3.org/TR/wai-aria/introduction
ARIA - (Roles, States, Properties)
Roles - describe widgets not present in HTML 4
• slider, menubar, tab, dialog
Properties - describe characteristics:
draggable, hasPopup, required
States - describe what’s happening:
busy, disabled, selected, hidden
http://karlgroves-sandbox.com/CheatSheets/ARIA-Cheatsheet.html - ARIA Chectsheet
ARIA Example - Tree
Role = tree(on outer container)
Role = treeitemexpanded=true(on open Africa node)
Role = treeitemexpanded=false(on closed Australia node)
Role = treeitemselected=true(on highlighted Egypt child node with no children)
Designing Navigation
Designing Navigation - Use Structured Content
Navigable Headings
Level 1
Level 2
Level 3 Level 3
Level 3
Level 3
Level 4
Navigable Headings
<H1>
<H2>
<H3>
<H4>
<H3>
<H3>
<H3>
Navigable Headings
Labelling Forms
Label for
Labelling Forms
<li>
<label for="text-font">Font style:</label>
<select id="text-font" name="text-font-selection">
<option value="serif">Serif</option>
<option value="sansSerif">Sans-Serif</option>
<option value="arial">Arial</option>
<option value="verdana">Verdana</option>
<option value="courier">Courier</option>
<option value="times">Times</option>
</select>
<li>
Table Structure
Header
Body
Table Structure<table summary="An editable table of student grades and instructor comments.">
<thead>
<tr>
<th>Name</th>
<th abbr="I.D.”>User ID</th>
<th>Points</th>
<td>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ahn, Jason</td>
<td>15234314</td>
<td>
<input type="text" name="points" value="87">
</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
</tbody>
</table>
Header
Body
Grouping Forms
Field Set
Legend
Grouping Forms
Field Set
<fieldset>
<legend>Background Images</legend>
<span>
<input type="radio" value="true" checked="checked"
name="background-images-selection" id="background-yes">
<label for="background-yes">Yes</label>
</span>
<span>
<input type="radio" value="false" name="background-images-selection" id="background-no">
<label for="background-no">No</label>
</span>
</fieldset>
what is “alt” text?
It is read by screen readers in place of images allowing the content
and function of the image to be accessible
It provides a semantic meaning and description to images which
can be read by search engines.
The “alt” attribute
Be accurate and equivalent in presenting the same content and function as presented by the image.
Be succinct. Typically no more than a few words are necessary.
Do NOT be redundant or provide the exact same information as text within the context.
Do NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It usually apparent to the user that it is an image.
Good Example : <img src="boat.gif" alt="Big Boat" />
Use Captions
YouTube
Keyboard Access
Keyboard Conventions
Tab key focuses the control or widget
Arrow keys select an item
Enter or Spacebar activate an item
Tab is handled by the browser.
For the rest, you need to write code.
http://keycode.info/ - JavaScript Event KeyCodes
•Statically analyze markup
•Specify the Guideline for Validation
•e.g. WCAG 2.0 AA
•Will alert you to in accessible markup
•e.g. missing alt text on images
Accessibility Checkers: What They Do
Accessibility Checkers
http://achecker.ca/checker/index.php
http://wave.webaim.org/
Color Validation
View in respect to Color Blindness
Determine Adjustability of Colors
Is this contrast level to spec?
Color Validation Online Tools
http://www.checkmycolours.com/
http://www.dasplankton.de/ContrastA/
http://colorfilter.wickline.org/
Accessibility Checkers: Limitations
Lack Of Human Judgment
Is the alt text meaningful?
Static Analysis
Will javascript make it inaccessible?
Markup Based Validation
How will CSS affect the page?
Open Source API For Web Accessibility
Bootstrap Accessibility Plugin
https://github.com/paypal/bootstrap-accessibility-plugin
HTML Code Sniffer
http://squizlabs.github.io/HTML_CodeSniffer/
tota11y - an accessibility visualization toolkit
https://github.com/Khan/tota11y
Tools and resources
a11yproject.com
Free QA Software
Screen Readers
Books
Blogs
Guidelines
Tutorials
http://a11yproject.com/
References
How to Meet WCAG 2.0 -
http://www.w3.org/WAI/WCAG20/quickref/
Building Accessible User Interfaces -
https://wiki.jasig.org/download/attachments/28574591/jQuery%20Workshop.pdf?version=1&modificationDate=1268935398318&api=v2
Web Accessibility Overview –
http://www.slideshare.net/cedwvugraphics/web-accessibility-overview
Accessible UX: beyond the checklist –
http://www.slideshare.net/whitneyq/accessible-ux-beyond-the-checklist-to-great-experiences
W3C Recommendation 20 March 2014 (WAI-ARIA) 1.0-
http://www.w3.org/TR/wai-aria/
Web Accessibility API
Testing For Accessibility
03/01/2016
Hagai Asaban
linkedin.com/in/hagaiasaban
