implementing and evaluating web application accessibility
TRANSCRIPT
1
Implementing & Evaluating Web Application Accessibility
Jared Smith Associate Director WebAIM @jared_w_smith
www.3playmedia.com twitter: @3playmedia live tweet: #a11y
! Type questions in the window during the presentation ! Recording of presentation will be available for replay ! To view live captions, please click the link in the chat window
Lily Bond (Moderator) 3Play Media Director of Marketing [email protected]
Jared Smith @jared_w_smith
webaim.org
Implementing and Evaluating Web
Application Accessibility
Accessibility ...
... is a continuum. ... is a process.
... can always be improved.
Accessibility ...
... encourages good design and development practices.
... supports SEO. ... supports internationalization.
... supports mobile-friendly content.
>8.5% of the population has a disability that affects computer use
Guidelines are measures on the continuum of
accessibility
Web Content Accessibility Guidelines 2.0
•Levels - A, AA, and AAA
•Finalized in 2008
•Principles-based and technology agnostic = ethereal and confusing
•WebAIM’s WCAG 2.0 Checklist
Perceivable Operable
Understandable Robust
Usable
Useful
POUR
Your site can be compliant, yet inaccessible
accessibility > compliance
Your site can be technically accessible, yet functionally
inaccessible
Perceivable
Auditory Disabilities
•Captions for video & live audio •Text transcripts for all audio content
Visual Disabilities
•Blindness •Low vision •Color deficiency
Structure and Semantics
Is the application and content structured to facilitate
understanding and navigation?
Are the semantics of components meaningful and accurate?
Logical Heading Structure• Typically one <h1> per page. • Should define an ‘outline’ or table of
contents. • Headings should be descriptive of page
sections.
Regions• HTML5
• <header>, <nav>, <main>, <footer>, and <aside>
• ARIA Landmarks • role=banner, complementary, contentinfo, main, navigation, or search
• <div role=“region” aria-labelledby=“filterHeading”> <h2 id=“filterheading”>Filter</h2>
Semantics
•Use meaningful links. Avoid “click here”. •Alternative text for non-text elements
•Content and Function<img alt=“Jared Smith”>
•Form control labels<label for=“name”>Name:</label> <input type=“text” id=“name”>
•Button values<button>Search</button> or <input type=“submit” value=“Search”>
Semantics
•Associate data cells to row/column headers<th scope=“col”> or <th scope=“row”>
•Descriptive page titles<title>Introduction to Web Accessibility</title>
•Define document language<html lang=“en”>
Semantics
Semantics•HTML elements have default semantics,
so use them. •When the semantics of HTML are not
sufficient, then (and only then) can you use ARIA (Accessible Rich Internet Applications).
Rule #1 of ARIA: Don’t use ARIA
ARIA
ARIA changes and enhances the default semantics of HTML elements to API values which screen readers
already understand.
<slider>???
Just use a button!
Visual Disabilities
•Sufficient contrast •http://webaim.org/resources/
contrastchecker/ •Ensure that meaning is not conveyed
with color alone
Operable
Motor Disabilities
Operable•Ensure keyboard accessibility •Don’t remove focus indicators
•Avoid outline:0 and outline:none •Ensure interactive elements are clearly
distinguishable •Logical reading/navigation order
Operable
•Programmatic focus should follow visual focus
•Allow user to skip over repetitive or lengthy lists of links
•Give users control over time-sensitive changes
ARIA Enhancements• aria-expanded=“true | false”
• aria-haspopup=“true”
• aria-live=“assertive | polite | off”
• aria-required=“true”
• aria-invalid=“true”
• role=“alert”, etc.
BE CAREFUL!!!
Understandable
Who does this affect?•Users with cognitive or learning
disabilities •Largest disability group. Larger than all
the others put together. •Everyone!
Understandable• Be careful with movement and other
distracters
• Use good organization (headings, lists, etc.)
• Simplify and be consistent.
• Avoid small text
• Avoid long line lengths
Understandable
•Focus the user’s attention
• “Chunk” and simplify content
•Balance cognitive load vs. functionality
Robust
Does it work in the technologies my users have?
Robust
Perceivable Operable
Understandable Robust
Evaluating Web Accessibility• Only people can evaluate true accessibility
• Use a checklist
• WebAIM’s WCAG 2.0 Checklist
• Perform keyboard testing
• Test in a screen reader
• Conduct user testing
• Use automated tools
wave.webaim.org
“For people without disabilities, technology makes things convenient, whereas for people with disabilities,
it makes things possible.” - Judy Hueman
thank you
Jared Smith @jared_w_smith
webaim.org
3
Presenters Jared Smith Associate Director WebAIM Lily Bond (Moderator) 3Play Media Director of Marketing [email protected]
Q&A
Upcoming Webinars: ! July 29: Accessibility at Yahoo ! August 4: Impact of Recent Lawsuits
! September 8: Quick Start to Captioning
! September 29: Fall 2016 Legal Update on Digital Accessibility Cases (with Lainey Feingold)
You can register for these free webinars at:
www.3playmedia.com/webinars/
Please type your questions into the window in your control panel. A recording of this webinar will be available for replay.