Global Accessibility Awareness Day

1. Global Accessibility Awareness Day Boston - May 9, 2012

2. What is GAAD? Global Accessibility Awareness Day • Joe Devon • Los Angeles area Web Developer • Jennison Asuncion • Toronto based Accessibility Evangelist

3. How Global is Global? Global Accessibility Awareness Day • Boston, USA • Los Angeles, USA • Los Angeles #2, USA • San Diego, USA • Washington D.C., USA • Llandarcy, Wales UK • Brisbane, Australia • Melbourne, Australia • Sydney, Australia • Mumbai, India • Bangalore, India • Toronto, Canada

4. Goals of GAAD • Raise the profile of accessibility • Introduce Topics of Digital Accessibility • Why accessibility matters • Answer your Questions

5. How to participate • Use your computer without the mouse • Try out a screen reader • Explore accessibility features of your current Operating System or device • Caption a video on YouTube • Blog, tweet or Facebook about Accessibility

6. Tonight’s Agenda • Intro to Accessibility • Live Demo of Access Technology • “Click and Go” access to the Massachusetts State House • Boston Accessibility Group • Open Discussion / Q & A

7. An Introduction to Web Accessibility For Content Developers

8. Why are we here? • Get a better understanding of: • Accessibility • HTML – the language of the web • How people of different abilities use the web • How we can improve everyone’s web experience by creating accessible content • Live Demo of Access Technology • Answer your Questions

9. What is Accessibility? Accessibility is a general term used to describe the degree to which a product, device, service, or environment is available to as many people as possible. Accessibility can be viewed as the ability to access and benefit from some system or entity. Accessibility is often used in reference to people with disabilities or special needs and their right of access to entities, often through the use of assistive technology. Wikipedia : Accessibility

10. Then what is WEBAccessibility? Web accessibility refers to the inclusive 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. Wikipedia : Web Accessibility

11. The Four Principals of Web Accessibility (WCAG 2.0) • Perceivable - Text alternatives for non-text elements, captioned and described media, adaptable presentation. • Operable - Make it keyboard accessible, provide navigation aids, avoid time-outs. Avoid flashing and scrolling content. • Understandable - Make content readable, predictable, easy to navigate, read and understand. Provide input assistance. • Robust - Maximize compatibility with current and future user agents, including assistive technologies.

12. How does a person with a disability access the web? • Access/Assistive/Adaptive Technology (let's just call it AT) • AT is a term that describes assistive, adaptive, and rehabilitative devices or software for people with disabilities that attempt to reduce the impact or remove the disability entirely.

13. Examples of AT • Screen reading software: Uses synthesized speech to read what is being displayed on a visual output device • Braille terminals or Refreshable Braille displays: Renders text as Braille characters (usually by means of raising pegs through holes in a flat surface). • Screen magnification software: Enlarges and modifies the contrast/coloring of what is being displayed on the computer monitor, making it easier to read for vision impaired users. • Speech recognition software: Accepts spoken commands to the computer, or turns dictation into grammatically correct text. • Keyboard overlays or specialized keyboards: Makes typing easier and more accurate for those who have motor control difficulties.

14. Typical Features of an Accessible Web Site Accessible web sites have: • Text Equivalents for Images • Links that make sense out of context • Text that is large or enlargeable and of high contrast • Clickable items that are large and indicate focus • Pages that can be used with a keyboard or switch device • Videos that are closed captioned and audio described • Content that is written in plain English and augmented with instructional diagrams • Adherence to widely accepted paradigms • Semantically Meaningful HTML/Markup

15. Let’s get started! Time for some learnin’

16. Provide Meaningful Page Titles

17. Navigational Aids Provide a way for users to skip repetitive content

18. structural/semantic HTML elements (headings, lists, blockquotes, etc.)

19. Semantically Meaningful HTML/Markup <h1>A web Page about HTML</h1> <h2>Elements of HTML</h2> <h3>Lists</h3> <p>There are two main types of lists; ordered and unordered:</p> <h4>Unordered Lists</h4> <ul> <li>I'm the first item in an unordered list</li> <li>I'm the second</li> </ul> <h4>Ordered Lists</h4> <ol> <li>I'm the first item in an unordered list</li> <li>I'm the second</li> </ol> <h3>Links</h3> <p>Let's <a href="http://www.google.com>visit Google</a></p>

20. Semantically Meaningful HTML/Markup Screen readers use structural information to help make reading more efficient. For example, most screen readers can skip from heading to heading, announce the number of items in a list, and identify the current row and column in a data table. Identify headings, paragraphs, lists, quotations, etc., using the appropriate markup instead of relying solely on formatting. For example, use <h1> tags to identify the top-level heading rather than simply making its text large and bold. Do not misuse structural markup for formatting effects, such as using <blockquote> to indent a paragraph.

21. Use heading elements • Properly used Headings give a web page a machine readable structure that reveals the topics discussed on a page and how they are hierarchically related to each other. • Access technologies operate just like "machines" and can provide a means for a user to navigate that structure with speed and with ease. • Properly used Headings enable a visually impaired user to quickly "scan" a page for specific content or relevant topics much like a sighted person would. • Harvard Pilgrim Healthcare – Members • CNN

22. Use Headings (in order) Heading Level 1<h1>This is the title of the page or article</h1> Heading Level 2<h2>This is a subsection of the page or article</h2> Heading Level 3<h3>This is a subsection of the current subsection</h3> Heading Level 4<h4>This is a subsection of the current subsection</h4> Heading Level 5<h5>This is a subsection of the current subsection</h5> Heading Level 6<h6>This is a subsection of the current subsection</h6>

23. Use Lists to identify series of related items Screen readers identify the number and type of items in a list and enable users to easily skip all or part of the list if desired. Unordered Lists (bulleted)<ul> <li>This is the first list item</li> <li>This is the next</li> </ul> Ordered Lists (numbers)<ol> <li>This is the first list item</li> <li>This is the second</li> </ol>

24. Use Blockquotes (for quoted text) Do not misuse structural markup for formatting effects, such as using <blockquote> to indent a paragraph <blockquote>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. </blockquote>

25. Provide alternative text for nontext elements

26. MYTH: Images are bad for accessibility • Technically, images are only inaccessible to people who are totally blind. What about people with: • low vision • color-blindness • Deafness • motor disabilities • cognitive disabilities • Images are not bad for accessibility. They actually increase comprehension and usability for most audiences.

27. Using ALT text effectively • Images can often ENHANCE accessibility for sighted individuals by providing visual cues that aid comprehension: • illustrations: • icons • animations • Graphics can be especially useful to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.

28. How Images Are Used Images on Web sites are used in three main ways: • to convey important content • to provide visual enhancements which offer no real content • to link to other areas of the site The most appropriate alt text depends on the way in which the image is used and communicates the purpose of the graphic, not its appearance.

29. A Practical example – The Mona Lisa Introductory art class giving examples of different types of art: alt=“Painting of a woman” Paintings by Leonardo DaVinci: alt=“The Mona Lisa” Article about works by Italian Artists: alt=“Leonardo DaVinci, The Mona Lisa” Art History Class: alt=“The Mona Lisa, oil on poplar panel, Leonardo DaVinic, 16th Century”

30. Images of Text Images of text should have ALT text that reflects the text in the image. Common examples of images of text are: • Banners • Headers • Buttons

31. NULL (Empty) Alt text Is it ever OK to skip using ALT text? YES • Images that do not provide any content to the user (rounded corners, transparent images, spacer images) • Images that are used solely for decorative purposes • Images (linked or not) that are described by nearby text Do not leave the ALT Text out entirely! Simply create an empty alt attribute: alt=“”

32. Action or Linked Images Some images represent actions and may be the only content in the link. alt=“Follow us on Twitter” alt=“Like us on Facebook” alt=“Subscribe to our RSS Feed” alt=“Send us an email”

33. Accuracy and brevity Alternative text for images should be as accurate and as succinct as possible. Make sure that your alt text conveys all of the important information relevant to its purpose, but don't burden users with excessively long alt text. Screen readers or refreshable Braille devices always read the alt text, which can make image-heavy pages rather long.

34. Summary : ALT text • Alwaysput an alt attribute on your images. • Use an empty alt attribute if the image is purely decorative or is followed by text that equally describes the image. • Think about the best alt text for your image. It depends on what the image represents. Is it a call to action, a work of art, or additional content for the page? • Test your page by disabling images and style sheets. Is all the information there? Does it all still make sense?

35. Use color and contrast with care

36. Use font size, color and contrast carefully The vast majority of visually-impaired people have some degree of usable vision. Most conditions that affect vision are highly sensitive to lighting and contrast. Age related vision loss is a perfect example of a condition that is worsened by low contrast or tiny fonts. Join the Contrast Rebellion!http://contrastrebellion.com/ • Boston Complete Streets • FCC.gov

37. Give links unique names and make them descriptive.

38. Give links descriptive and unique names Screen reading software provides a very popular option to browse the links on a page out of context. There should never be two links on a page that use the same text. Link text should describe the action to be performed or destination of the link. Not only do screen reader users and those with cognitive difficulties benefit from this, but search engines can also use the descriptive text to create context and relationships between link text and link destinations. • Link text should make sense • Don’t be device specific • Avoid repetitive link text • Include relevant information Read more… More… Click here

39. Create formsthe right way!

40. Creating Accessible Forms • All important information for forms, such as form instructions, must be presented before the form itself. (screen reader users go through forms linearly) • The submit button must be the last form element contained within a form. (remember this computer?) • All form fields must be associated with their labels using the <label> HTML tag.

41. Creating Accessible Forms • All forms should clearly indicate which form fields are required prior to the actual form inputs. Avoid cryptic hints such as the use of the asterisk or different colors as the sole means of indicating mandatory information requirements. • Form fields that are logically related should be grouped in a field set. If appropriate, the field set should be labeled with a legend. (think billing and shipping address) • Avoid putting non-focusable text between form fields. (like format suggestions)

42. Keyboard Accessibility

43. Ensure that all content is keyboard accessible • The use of a mouse requires hand-eye coordination. This presents a problem for most visually impaired computer users as well as those with mobility issues who may be interacting with their computers using a switch or "sip and puff" device. One of the most frequently encountered accessibility barriers involves the inability to interact with an interface which requires the use of a point and click device. • Use “Go” or “Submit” buttons with select lists/combo boxes. Avoid “auto-submit”

44. Self Evaluation

45. Self Evaluation • Evaluation Tools (Browser Extensions) • Web Developer Toolbar • WAVE Toolbar • Worldspace Fire-eyes • Juicy Studio Accessibility Toolbar • Code Review (Browser Extension) • Firebug • AT Testing • JAWS (www.freedomscientific.com) • NVDA (www.nvda-project.org) • Voiceover (Command F5) • Your Keyboard

46. Stay in touch!@gbla11yday#GAAD@cptvitamin@briancharlson@carrollcenterwww.globalaccessibilityawarenessday.orgwww.facebook.com/globalaccessibilityawarenessday