Upload
sheila-robbins
View
226
Download
0
Tags:
Embed Size (px)
Citation preview
Agenda 1/2• About @DennisL• About You• Intro to Accessibility
▫ Disability & AT▫ Business Case▫ Guidelines & Law▫ POUR
• Web Dev Foundations▫ 4 Layers▫ Semantics & Order▫Other
• Techniques
▫ Layout/Structure▫ Images/Alt Text▫ Headings▫ Forms▫ Links▫ Keyboard Access▫ Tables▫ Audio & Video▫ About Flash▫ About Validation▫ JavaScript▫ ARIA
2
Agenda 2/2
•Writing•Testing
▫Checklists▫Tools▫Manual
Techniques▫Screen Readers▫High contrast
mode
•More Tips•Resources•Contact Details•Questions
3
About Accessibility – Disability & AT• Visual
▫ Blindness, low vision, colorblindness
• Audio▫ Deafness, HOH
• Motor▫ Limited ability to use
a mouse or keyboard, slow response time, limited fine motor control
• Cognitive▫ Learning disabilities,
distractibility, reading level, impaired memory
• Neurological▫ Prone to seizures due
to flashing
7
About Accessibility – Disability & AT•Other considerations and situational
disabilities:▫Main language is non-native for user.▫Broken equipment (mouse, speakers).▫Temporary disability (hand in cast).▫Environment (sunlight, library).▫Low-band connection (unusable with video,
bloated JavaScript, multiple images).▫Large fingers (need large hit area).
8
About Accessibility – Disability & AT•2 videos:
▫Computers and People with Sensory Impairments
▫Computers and People with Mobility Impairments
9
About Accessibility – Disability & AT•Assistive Technology (AT) - Visual
▫Eye glasses▫High-contrast mode▫Screen magnifier▫Screen reader ▫Braille output
10
About Accessibility – Disability & AT•Assistive Technology - Audio
▫Hearing aid▫Transcriptions, captions▫CART (live transcription)
11
About Accessibility – Disability & AT•Assistive Technology - Motor
▫Alternative keyboard▫Onscreen keyboard▫Alternative mouse▫Switch▫Mouth stick▫Head stick
12
About Accessibility – Disability & AT•Assistive Technology - Cognitive
▫Speech recognitionEx: Dragon NaturallySpeaking
▫Alternative and Augmentative Communication (AAC)Ex: Proloquo2Go
▫Word prediction▫Talking calculators
13
Check on Learning
•What are the 5 types of disability?•What are some examples of assistive
technology?
14
About Accessibility – Disability & AT•Video demos
▫JAWS Screen Reader - Hear an Example▫How screen readers speak a simple HTML5
page
15
About Accessibility – Disability & AT•Simulation exercises:
▫Take off glasses or wear wrong prescription.
▫Put rubber band on your off-hand and use with mouse.
▫Wear mittens/gloves.▫Set very fast mouse pointer.▫Set very high browser zoom.▫For multimedia, turn off audio.
16
About Accessibility – Business Case• Increases potential customer base.• Creates usability benefits for people with and
without disabilities, including the increasing aging population.
• Reduces development and operational costs (server load, bandwidth, and maintenance).
• Improves cross-device browsing, including mobile phones, interactive television, and other delivery channels. (Robust)
18
About Accessibility – Business Case• Avoids possible legal ramifications of not
implementing web accessibility.• Creates ocial acceptance; corporate social
responsibility.• Eliminates need to provide alternative
webpage and media formats (braille, large print, CD, etc).
• Case studies, statistic, and figures covering return on investment from web accessibility.
19
About Accessibility – Guidelines & Law•WCAG 1 (1999)•WCAG 2 (2008)
▫Technology-agnostic.▫Warning: already becoming outdated.▫WebAIM’s WCAG 2.0 Suggestions▫WebAIM's WCAG 2.0 Checklist
20
• U.S.▫Americans with Disabilities Act (ADA) 1990▫Rehabilitation Act Amendments of 1998,
Section 508 (part of Rehabilitation Act of 1973) Enforceable in June 2001 Horribly outdated Refresh said to be similar to WCAG 2.0 AA
▫Telecommunications Act of 1996▫+Court cases and agreements (Target,
Peadpod)
21
About Accessibility – Guidelines & Law
About Accessibility – Guidelines & Law• UK
▫The Disability Discrimination Act 1995 (DDA)▫Special Educational Needs and Disability Act
2001▫PAS 78 – guide by British Standards
Institution (BSI) & Disability Rights Commission (DRC)
• Australia▫Disability Discrimination Act 1992
• Canada▫Canadian Human Rights Act of 1977
• World policies
22
Check on Learning
•What are some business reasons for providing web accessibility?
•Is Section 508 up to date?
23
About Accessibility – POUR• Perceivable
▫ Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)
24
P
About Accessibility – POUR• Perceivable
▫ Provide text alternatives for images, etc.▫ Provide captions and transcripts for video and
audio.▫ Present content in different ways.▫ Design with proficient color contrast.▫ Avoid movement and distractions on page.
25
P
About Accessibility – POUR• Operable
▫ Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device.
▫ [Also important for mobile devices!]
26
O
About Accessibility – POUR• Operable
▫ All functionality is available from the keyboard.▫ Users have control over timing and limits.▫ Do not cause seizures (don’t flash content ~> 3x
per sec).▫ Provide multiple ways to help users navigate, find
content, and determine where they are.
27
O
About Accessibility – POUR• Understandable
▫ Content is clear and limits confusion and ambiguity.
28
U
About Accessibility – POUR• Understandable
▫ Economical and plain use of language.▫ Text supplemented with illustrations, videos, and
other formats where appropriate (i.e., use good Universal Design)
▫ Navigation, information structure are obvious and consistent.
▫ Make pages operate in predictable ways.▫ Help users avoid and correct mistakes.
29
U
About Accessibility – POUR• Robust
▫ A wide range of technologies (including old and new user agents and assistive technologies) can access the content.
30
R
About Accessibility – POUR• Robust
▫ Functional across various technologies.▫ Providing a name, role, and value for non-standard
user interface components.▫ Adhering to W3C standards ensures future
compatibility ▫ Use semantic markup.▫ Use progressive enhancement (PE)!▫ Validate your code - validator.w3c.org
31
R
Foundations – 4 Layers
1. HTML – be POSH!▫Plain Ol’ Semantic Html
2. CSS – style3. JavaScript – to enhance behavior4. ARIA – accessibility helper5. CSS for JavaScript?
▫5 Layers of Web Accessibility by Dirk @Ginader
34
Foundations – Semantics & Order•Semantics
▫Use HTML element that describes the content (not presentation)
▫Good for: Accessibility Graceful degradation Future-proofing Easier to maintain (standard, consistency) SEO
36
Foundations – Other•Strong, em (meaning) vs. b, i (presentation)•Never use an element for its design:
▫blockquote to indent▫headings to bold
•Label attribute of select optgroup treated differently in screen readers.
•Forms:▫If one selection required, use radio, not
checkbox.▫Avoid multiple-select elements; use
checkboxes instead.
38
Techniques
•Layout/Structure•Images/Alt Text•Headings•Forms•Links•Keyboard Access•Tables
•Audio & Video•About Flash•About Validation•JavaScript •ARIA
40
Techniques – Layout/Structure•Visually consistent
▫The main areas of the page—such as the banner, navigation, and sidebar—should be in the same place throughout the site.
•Consistent markup ▫The areas should also be marked up
consistently, such as using the same heading structure.
•Good usability and benefits those with cognitive impairments and those who use AT.
41
Techniques – Images/Alt Text
•Provide alternative text for images that have with meaningful content.
•Fundamental but complex!•Needed badly on infographics, graphical
charts, and comics.
42
Alt text?[Poll]
Techniques – Images/Alt Text
•If decorative, use alt=“” (but better to use CSS)
•If same content exists in page text, use alt=“”
•If image linked, alt text should describe purpose of link
•Be accurate and succinct.•Don’t use phrases like “image of…”•Avoid text in images•Consider using CSS3 instead of an image
43
Techniques – Images/Alt Text
•HTML5▫alt optional with figure/figcaption▫aria-describedby vs longdesc▫My 2-part article
Longdesc & Other Long Image Description Solutions
45
Techniques – Images/Alt Text<figure>
<img src="shadows.jpg" /> <figcaption>Shadow like figures and a graffiti
tag drawn on the walls of a partially demolished building, illuminated by the light from a street lamp (photo).
</figcaption> </figure>
<img src="shadows.jpg" alt="shadow figures" longdesc="description.html" />
46
Techniques – Headings
•Use one H1 per page.•Brief, succinct text.•Nicely nested.•Use a heading with <section> element.•Wrong: <span style="font-size:2em"><b>My Page Title</b></span>
•Right: <h1>My Page Title</h1>
47
Techniques – Forms
•Labels▫All form elements must have a label.▫Other methods such as title and
placeholder are NOT robust.
<label for="firstname">First Name</label> <input name="firstname" id="firstname" type="text" />
50
Techniques – Forms•Fieldset/legend
▫Great for long forms and radio/checkbox groups.
▫Screen readers will announce Legend text before each label text within Fieldset. Legend text should be brief & succinct.
<fieldset> <legend>Gender</legend> <label for="male">Male</label> <input name="male" id="male" type="text" /> <label for="female">Female</label> <input name="female" id=”female" type="text" /> </fieldset>
51
Techniques – Forms
•Alternative method to Fieldset, especially for long Legend text:
<p id="question">What is the name of…</p><div role="radiogroup" aria-labelledby="question"> <input…><label…> <input…><label…></div>
52
Techniques – Forms
•Messages▫Use aria-describedby for screen readers
<label for="address">Address</label> <input name="address" id="address" type="text" aria-describedby="hintAddr" />
<p id="hintAddr">Your primary residence.</p>
53
54
<form action="foo.php" method="post"> <fieldset> <legend>Name</legend> <label for="firstname">First Name</label> <input name="firstname" id="firstname" type="text" /> <label for="lastname">Last Name</label> <input name="lastname" id="lastname" type="text" /> </fieldset> <fieldset> <legend>Location</legend> <p id="hintAddr">Where you are now.</p> <label for="address">Address</label> <input name="address" id="address" type="text“ aria-describedby="hintAddr" /> <label for="city">City</label> <input name="city" id="city" type="text" aria-describedby="hint" /> </fieldset></form>
Techniques – Links
•Content (the link text itself)▫A link should always have meaning when
taken out of context.▫A text link should be unique to that page
(do not use the same link text for different resources).
▫Avoid use of "click here", "more", etc.▫Do not write out and link a long URL
(annoying to screen reader users).
57
Techniques – Links
•Awareness▫Is this a link? Keep the underline!▫Visually indicate when in focus (as well as on
hover).▫Indicate type of link (if not regular hyperlink,
e.g. PDF, MP4, etc).
<a href=“poster.pdf”>Download Poster (PDF)</a>
58
Techniques – Links•About title/tooltip
▫Use for supplementary content only.▫Assume the user may only sometimes read
them.▫Screen reader users often turn off in settings.▫No keyboard support (silly browser vendors!)▫No support on touch/mobile.▫Use sparingly.▫DO NOT create redundant titles on links.
60
Techniques – Keyboard Access
•Many web users do not use a mouse. •Assistive technologies frequently make
use of keyboard input or even a virtual keyboard instead of a mouse or pointing device.
•Links and controls cannot require a mouse.
61
Techniques – Keyboard Access
•In CSS, use :focus together with :hovera:hover,a:focus { background-color: #ccc;}
•Never use:a:focus { outline: none;}
62
Techniques – Keyboard Access
•It's always best to stick with the standard A element.
•Wrong: <span onclick="window.location='foo.html';">foobar</span>
•Right: <a href="foo.html">foobar</a>
63
Techniques – Keyboard Access• Avoid general use of tabindex attribute.• tabindex="0"
▫makes elements besides links and form elements to receive keyboard focus.
• tabindex="-1"▫makes elements besides links and form
elements to receive programmatic focus (by scripting, link, etc.)
64
Techniques – Keyboard Access
•Do not use the double-click handler (onDblClick)
•If you use onMouseOver and onMouseOut JavaScript handlers, also use onFocus and onBlur.▫Not recommended at all, especially
considering touch devices.
65
Techniques – Keyboard Access
•Interaction patterns:▫Enter or Spacebar to open widgets.▫When opening provide feedback to SR user.▫Up/down arrow keys to select options.▫Escape to close.▫Tab closes and focuses next item on page.
•Demo: http://bit.ly/Xbmiwt
66
Techniques – Tables
•Provide caption (title of table). •The summary attribute is no longer
suggested.▫Main purpose, define structure of table, no
longer needed.▫Obsolete in HTML5.▫Difficult to maintain.▫Instead use aria-describedby with P
(tabindex="0” required to support all screen readers)
67
Techniques – Tables, cont.
•Use TH for table header cells.•Add scope attributes to TH to support
older AT.•Never nest data tables.•Avoid complex data tables if possible.
▫Use headers and id attributes if necessary.
68
69
<p id="tableDesc">The following table displays the number of employees and the foundation year of some imaginary companies.</p><table aria-describedby="tableDesc” tabindex="0"><caption>Company Data</caption><tr> <th scope="col" abbr="Company">Company Name</th> <th scope="col" abbr="Employees">Number of Employees</th> <th scope="col" abbr="Founded">Year Founded</th></tr><tr> <th scope="row">ACME Inc</th> <td>1000</td> <td>1947</td></tr> <tr> <th scope="row">XYZ Corp</th> <td>3000</td> <td>1973</td></tr></table>
Techniques – Audio & Video
•HTML5 ▫Multiple formats required due to
differences in browser support.▫Ensure controls are accessible.
Browser vendors slowing making progress.▫Track element for audio descriptions,
captioning, subtitles, etc. (low support).
71
Techniques – Audio & Video
•HTML5 <audio> and <video>•Check browser support.
▫http://caniuse.com/▫http://html5please.com/
•Check codec support:▫http://mzl.la/Mn6tlp (MDN)▫http://bit.ly/Mn6wxN (HTML5Doctor)
72
Techniques – Audio & Video
•HTML5 Code
<video id="video" width="500" height="300" preload="none" poster="cover.jpg" autoplay="false" >
<source src="somevideo.webm" type="video/webm"> <source src="somevideo.mp4" type="video/mp4"> <p>Video not supported. You may <a href="foo.mpg">download the MPG here</a>.</p>
</video>
73
Techniques – Audio & Video
•Transcriptions, captions▫Why:
Deaf hard-of-hearing language is not user’s native learning-impaired broken speakers in library SEO
74
Techniques – Audio & Video
•Transcriptions, captions▫Tools:
dotSUB.com Overstream.net Easy YouTube caption creator MAGpie Captionate (Flash)
75
Techniques – Audio & Video
•Transcriptions, captions▫Services:
Casting Words Even Grounds Dragon Naturally Speaking Volunteers, interns
76
Techniques – Audio & Video•Captioning tips:
▫Should be accurate, consistent, clear, readable.▫Mixed case preferred, but use upper case for
emphasis and shouting.▫Meaningful sound effects should be included.▫Denote when speaker is whispering. [whispering]▫When a speaker cannot be identified, user gender
to describe (e.g., “female 1,” “male narrator”).▫For video-only clips, provide a note saying "No
sound is used in this clip".
77
Techniques – About Flash
•According to screen reader users, Flash content is one of most inaccessible items on the web.
•Adobe has worked hard to make it possible to create accessible Flash, but in Windows only!
•But in practice, frankly speaking, developers rarely do it.
78
Techniques – About Flash
•Use Flash sparingly if at all. •Make every attempt to develop Flash with
accessibility. •If it's not possible for whatever reason, be
sure to provide alternate content.
79
Techniques – About Flash
•A great example of accessible Flash is this entertaining piece by Inclusive Technologies (direct Flash file link): Assistive Technology Boogie.
•It's keyboard accessible, provides captioning, and an option for audio description.
80
Techniques – About Validation
•Important for interoperability, but don’t go overboard.
•Tools▫W3C Markup Validation Service▫HTML Validator for Firefox▫Some design/developer applications such
as Dreamweaver.•User experience is ultimate test.
81
Techniques – JavaScript•Progressive Enhancement, Unobtrusive•Hijax (Jeremy Keith, 2006)
▫Develop server-side first.▫Then “hijack” and enhance behavior with JS.
•Bridge the gaps with ARIA!•Recommended libraries
▫Bootstrap greatly imporoved!▫YUI3 (no longer maintained)▫jQuery Mobile▫DOJO▫FLUID
82
Techniques – JavaScript
•Manage focus▫Essential for accessibility as well as
usability.•tabindex
▫tabindex=0 makes element tabbable▫tabindex=-1 makes element tabbable only
with JavaScript▫Don’t use otherwise.
83
Techniques – JavaScript
•Device Independence•Handlers:
▫If you use the onMouseOver and onMouseOut JavaScript handlers, you must also use onFocus and onBlur.
▫Do not use the double-click handler onDblClick.
84
Techniques – ARIA
•Accessible Rich Internet Applications (WAI-ARIA) 1.0http://www.w3.org/TR/wai-aria/▫Roles
Widget, Landmark, Document Structure▫States and Properties
Widget, Live Region, Drag-and-Drop, Relationship
•[Poll]
85
Techniques – ARIA
•Attributes that define user interface elements to improve the accessibility and interoperability of web content and applications.
•If you can use a native HTML element or attribute instead of an ARIA role, state or property, then do so.
86
Techniques – ARIA
•ARIA provides not functionality; still must build in with scripting.
•Adding an ARIA role overrides the native role semantics.
•Tab is not a main navigation tab.•Adding in HTML (landmark, labeling and
describing roles) vs. with JavaScript.
87
Techniques – ARIA
•Be careful using role="application"•Removes the semantics from the element.•Puts AT user in forms mode.•Some ARIA elements application role by
default (slider, tabs, dialog, toolbar, menu, etc.)
88
Techniques – ARIA
•Use role="presentation" to repair parent-child relationships.
89
<div role=“menu”><ul role=“presentation”>
<li role=“menuitem”>Foo</li><li role=“menuitem”>Bar</li>
</ul></div>
Techniques – ARIA Live Regions•For AJAX implement Live Regions.
▫aria-live (property) off, polite, assertive
▫aria-busy (state)▫aria-atomic (property)▫aria-relevant (property)
92
Techniques – ARIA States
•aria-checked (state)▫Indicates the current "checked" state of
checkboxes, radio buttons, and other widgets.
•aria-expanded (state)▫Indicates whether the element, or another
grouping element it controls, is currently expanded or collapsed.
94
Techniques – ARIA Properties
•aria-describedby (property)▫Like longdesc but on page.
•aria-labelledby (property)▫Like form label.
•aria-required (property)▫Like HTML5 required.
•aria-valuemax, aria-valuemin (properties)▫Defines the minimum and maximum values
for a range widget.
95
Techniques – ARIA & HTML5
•HTML5▫More native power▫Lighter, semantic code▫Good support on mobile▫Exciting
•Currently browser and accessibility/AT issues▫http://html5accessibility.com/
•Use carefully and with moderate fallbacks.
96
Techniques – ARIA & HTML5
•No longer temporary.•HTML5 vs. ARIA• required and aria-required• menu element vs. menu role• longdesc vs. aria-describedby• summary vs. aria-describedby• structural elements vs. landmark roles
(next slide)
97
Techniques – ARIA landmark roles•role =
▫banner (page header - one per page)▫navigation (nav)▫main (main, div - one per page)▫complementary (aside)▫search (form, div)▫contentinfo (page footer - one per page)▫form, application [rare]
98
Techniques – ARIA landmark roles
99
<header role=“banner”>
<nav role=“navigation”
>
<footer role=“contentinfo”>
<div role=“main”><aside
role=“complementary”>
<form role=“search”>
Writing
•Use short sentences.•Use short paragraphs.•Favor the active voice over passive voice.•Do not use jargon, slang or idiomatic
phrases.
102
Writing, cont.
•Avoid directional language.▫“In the links to the left…”
•Don’t convey meaning with color alone. ▫“Click the green button to…”
103
Writing, cont.
•Provide definitions of technical terms.•Provide full terms for lesser known
acronyms and abbreviations▫Write full text at least once on page.▫Use abbr element; acronym deprecated.
<p>I leased a new <abbr title=“Volkswagen”>VW</abbr>.</p>
104
Writing, cont.
•Page title (descriptive, concise, unique)•Headings (descriptive, concise, unique)•Descriptive link text (meaningful on own)
105
Writing, cont.
•Alternative text▫Decorative? Linked? Already on page?
•Legends and Labels (brief and succinct)•Define language (page level and inline)
▫<html lang=“en-us”>
106
Testing
•Use multiple avenues to test•Checklists•Toolbars•Manual techniques•Screen readers•High-contrast mode
108
Testing - Tools
•Toolbars are useful for everyone.•Examples:
▫WAVE (by WebAIM)▫WAT (IE, Opera by TPC)▫Web Developer Toolbar (Firefox, Chrome)▫Accessibility Inspector for Firebug▫FireEyes for Firebug
110
Testing - Tools
•Automated testing is great for “easy” catches and large projects.
•Alone catches only ~25% of issues.•Examples:
▫Tenon.io (w/Node.js)▫Deque FireEyes (w/Firebug)▫QuailJS.org▫WAVE (by WebAIM)
111
Testing - Manual Techniques•View code to ensure:
▫Doc type set▫Language definition set▫Similar text between page title and H1
•Text zoom (150 vs 200%)•Keyboard only•Turn off JavaScript•Turn off CSS•Adequate text size
112
Testing - Manual Techniques
•Layout •Not using color alone to convey meaning•Check doc structure•Check on different browsers and screen
sizes•Check on different devices•Text-only browser such as Lynx•Reading level
113
Testing - Screen Readers• NVDA
▫NVDA tutorial• JAWS• VoiceOver (OS X, iOS)• TalkBack (Android)• Fangs
▫Firefox add-on which simulates screen reader output with text output.
• Window-Eyes free to users of Microsoft Office
114
Testing - High-contrast mode
•Quick to do!•In last WebAIM SR survey, 8.5% of SR
users also use high-contrast mode or custom style sheets.
•On Windows, background images won’t appear.
•Windows shortcut: left SHIFT + left ALT + PRINT SCREEN
115
Check on Learning
•Do you think checklists are useful?•What are some good toolbars/automated
tools?
116
More Tips
•Focus is your friend! (Great for both keyboard-only and screen reader users)
•Plan accessibility from the very start.▫Wireframes
•Small file sizes (lowband, mobile).▫Compress images▫Use external JS, CSS (and minify)▫Remove duplicate code▫Minimize HTTP Requests, use CDN
117
More Tips, cont.
•NVDA and VoiceOver screen readers are free.
•Screen readers use JavaScript.•Error handling is very important.•Warn user when linking externally to
anything other than an HTML page.▫Use role=“button” for Anchors with button-
type functionality.
118
Resources•Companies:
▫WebAIM, Yahoo, IBM, Adobe, The Paciello Group, Knowbility, PayPal
•People: too many to name, check Twitter!▫Hash tags such as #a11y▫Twitter lists
•Not a tweep? Try: Facebook.com/WebAxe•YouTube channels
▫DO-IT▫We Are Nomensa
119
Resources, cont.
•W3C WAI (Web Accessibility Initiative)▫WCAG 2.0▫WAI Handouts and WAI Flyer▫Lots more!
•Email newsletters▫WebAIM, LinkedIn Groups, etc.
•Books, Articles▫Pro HTML5 Accessibility (review)▫25 Ways To Make Your Site More
Accessible
120
Contact Details• Websites
▫EasyChirp.com▫WebAxe.org▫DennisLembree.com
• Twitter Accounts▫@EasyChirp▫@WebAxe▫@DennisL
121