122
INDATA Web Accessibility Training for Developers Presented by Dennis Lembrée December 2014 1

INDATA Web Accessibility Training for Developers Presented by Dennis Lembrée December 2014 1

Embed Size (px)

Citation preview

INDATAWeb Accessibility Training

for DevelopersPresented by Dennis Lembrée

December 2014

1

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 @DennisL

4

About You

•Number attending?•How many a developer? A designer?

Other?•Years of experience?

5

About Accessibility

•Disability & AT•Business Case•Guidelines & Law•POUR

6

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 – Disability & AT•Simulation exercises:

▫Keyboard only; put away your mouse!

17

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

Check on Learning

•What does POUR stand for?

32

Foundations

•4 Layers•Semantics & Order•Other

33

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 – 4 Layers

35

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 – Semantics & Order•Content Order = Source Order = Tab

Order

37

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

Check on Learning

•What are the 4 layers of accessibility?•Content Order = Source Order = ?

39

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

44

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 – Headings

48

Techniques – Forms

•Labels•Fieldset/legend•Messages (errors, required information)

49

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 – Forms

55

Techniques – Links

•Content (the link text itself)•Awareness•About title/tooltip

56

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

59

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 – Tables, cont.

•VideoAccessibility: Web Apps: Tables

70

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

•For example, this:<h1 role="presentation">text</h1>

•becomes this:<>text</>

90

Techniques – ARIA

•Example: Menu Buttonhttp://bit.ly/Xbmiwt

91

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 Live Regions

93

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”>

Techniques – ARIA landmark roles•Video

How ARIA landmark roles help screen reader users

100

Check on Learning

•What are the 3 states of a live region?•Name 4 landmark roles

101

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

Check on Learning

•Is it better to use the abbr or acronym element?

107

Testing

•Use multiple avenues to test•Checklists•Toolbars•Manual techniques•Screen readers•High-contrast mode

108

Testing - Checklists

•Useful or not?•Examples:

▫WebAIM’s WCAG2 checklist▫Section 508▫Internal

109

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

Questions?

122