Delivering Accessible Online Content - NETC 2010
- 1. LESSONS LEARNED from our new ONLINE NEWS SITE ROBIN PRATT & BEN WHETSTONE Accessibility
- 2. Agenda Overview of Presentation Why be accessible? Web Development Techniques & Tools Choosing Accessible Technologies Considerations for Content Providers Q & A
- 3. The case for accessibility Why is accessibility important? “How to speak in front of people” http://www.youtube.com/watch?v=VG9_j6VYaKo User would not be able to learn anything from this video There are no other links on the page to provide the same content. “Which house is Bob’s?” http://www.youtube.com/watch?v=ffrq6cUoE5A
- 4. The case for accessibility One more example: visual impairment Font size: CNN.com Text is not resizable using browser font-size Can use browser’s zoom, but doesn’t solve problem Font size: GeorgiaFACES.org
- 5. The case for accessibility The point is that you would be frustrated at best and not able to access important information at worst.
- 6. Business Case for Accessibility Among US adults: 25.2 million are blind or visually impaired 1 1 in 12 have problems seeing colors correctly 2 34.8 million are deaf or hearing impaired 3 33.1 million w/physical limitations 3 39 million 65+ in 2009. 89 million in 2050. 4 http://www.afb.org/Section.asp?SectionID=15 http://www.iamcal.com/toys/colors/stats.php http://www.cdc.gov/nchs/fastats/disable.htm http://www.census.gov/Press-Release/www/releases/archives/international_population/013882.html
- 7. What can we learn from this? Quit your job NOW and go into gerontology. Do you really want to exclude that many people from your content? Bad business sense Bad PR Just plain bad It’s not that hard to do the right thing IF you plan for it.
- 8. Legal Case for Accessibility Section 508 StandardsSubpart A -- General1194.1 Purpose.1194.2 Application.1194.3 General exceptions.1194.4 Definitions.1194.5 Equivalent facilitation.Subpart B -- Technical Standards1194.21 Software applications and operating systems.1194.22 Web-based intranet and internet information and applications. 16 rules.1194.23 Telecommunications products.1194.24 Video and multimedia products.1194.25 Self contained, closed products.1194.26 Desktop and portable - Functional Performance Criteria1194.31 Functional performance criteria.Subpart D -- Information, Documentation, and Support1194.41 Information, documentation, and support.Figures to Part 1194Authority: 29 U.S.C. 794d.Subpart A -- General§ 1194.1 Purpose.The purpose of this part is to implement section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C. 794d). Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency.§ 1194.2 Application.(a) Products covered by this part shall comply with all applicable provisions of this part. When developing, procuring, maintaining, or using electronic and information technology, each agency shall ensure that the products comply with the applicable provisions of this part, unless an undue burden would be imposed on the agency.(1) When compliance with the provisions of this part imposes an undue burden, agencies shall provide individuals with disabilities with the information and data involved by an alternative means of access that allows the individual to use the information and data.(2) When procuring a product, if an agency determines that compliance with any provision of this part imposes an undue burden, the documentation by the agency supporting the procurement shall explain why, and to what extent, compliance with each such provision creates an undue burden.(b) When procuring a product, each agency shall procure products which comply with the provisions in this part when such products are available in the commercial marketplace or when such products are developed in response to a Government solicitation. Agencies cannot claim a product as a whole is not commercially available because no product in the marketplace meets all the standards. If products are commercially available that meet some but not all of the standards, the agency must procure the product that best meets the standards.(c) Except as provided by §1194.3(b), this part applies to electronic and information technology developed, procured, maintained, or used by agencies directly or used by a contractor under a contract with an agency which requires the use of such product, or requires the use, to a significant extent, of such product in the performance of a service or the furnishing of a product.§ 1194.3 General exceptions.(a) This part does not apply to any electronic and information technology operated by agencies, the function, operation, or use of which involves intelligence activities, cryptologic activities related to national security, command and control of military forces, equipment that is an integral part of a weapon or weapons system, or systems which are critical to the direct fulfillment of military or intelligence missions. Systems which are critical to the direct fulfillment of military or intelligence missions do not include a system that is to be used for routine administrative and business applications (including payroll, finance, logistics, and personnel management applications).(b) This part does not apply to electronic and information technology that is acquired by a contractor incidental to a contract.(c) Except as required to comply with the provisions in this part, this part does not require the installation of specific accessibility-related software or the attachment of an assistive technology device at a workstation of a Federal employee who is not an individual with a disability.(d) When agencies provide access to the public to information or data through electronic and information technology, agencies are not required to make products owned by the agency available for access and use by individuals with disabilities at a location other than that where the electronic and information technology is provided to the public, or to purchase products for access and use by individuals with disabilities at a location other than that where the electronic and information technology is provided to the public.(e) This part shall not be construed to require a fundamental alteration in the nature of a product or its components.(f) Products located in spaces frequented only by service personnel for maintenance, repair, or occasional monitoring of equipment are not required to comply with this part.§ 1194.4 Definitions.The following definitions apply to this part:Agency. Any Federal department or agency, including the United States Postal Service.Alternate formats. Alternate formats usable by people with disabilities may include, but are not limited to, Braille, ASCII text, large print, recorded audio, and electronic formats that comply with this part.Alternate methods. Different means of providing information, including product documentation, to people with disabilities. Alternate methods may include, but are not limited to, voice, fax, relay service, TTY, Internet posting, captioning, text-to-speech synthesis , and GOT IT? GREAT!
- 9. Designing with Accessibility in Mind Easy things you can do now (in order of importance): Add “alt” tags to images. Three scenarios: Conveying information Acting as a link “ Eye candy” a) alt=“Tong Zhao and Michael Doyle created a fast-acting microbial wash for food” b) alt=“FACES home” c) alt=“”
- 10. Designing with Accessibility in Mind Don’t rely on color alone to convey information: Underline, bold, or enlarge links. Ensure text and background colors contrast. Click here for the antidote to the poison you just drank. or Click here for the antidote to the poison you just drank. Click here for the antidote to the poison you just drank. Click here for the antidote to the poison you just drank.
- 11. Designing with Accessibility in Mind Don’t mangle the markup. Use headers to convey structure, not size. Use text for headings, not images. Use relative text sizes (em), not fixed (pt). If it’s a list, use list tags, not breaks. Use stylesheets for display, not tables.
- 12. Designing with Accessibility in Mind Make sure site can be used with CSS turned off, text size increased. <span style="font-size: 18pt; font-weight: bold; color: #ff0000;>Important Information</span>Read this carefully. With CSS Without CSS
- 13. Designing with Accessibility in Mind Mark up tables correctly. Use tables to display tabular data. <th> for headers, not <td><strong>. Associate data and headers with SCOPE and HEADERS attributes.
- 14. Designing with Accessibility in Mind Allow users to access site via keyboard only. Use the accesskey attribute in links. Check your tab order. <a href=“page.html” accesskey=“p”>
- 15. Tools to Help You Screen readers: JAWS – Free trial for 30 days Built-in reader on Macintoshes (Voiceover) NVDA – Free for PC Firevox – Firefox extension
- 16. Tools to Help You Firefox Web Developer extension: http://chrispederick.com/work/web-developer/
- 17. Our Experience: Accessible Video So you want to put video on there, huh? Yikes!
- 18. Accessible Video In terms of accessibility, the non-negotiables: Captioning Descriptive and transcript text when necessary Controls you can tab through Client buy-in Even better if: Captions off the main video screen Can tab through page to get to player Not often possible except in IE
- 19. Accessible Video Youtube The most obvious solution – let them handle the details! Their first attempt at captions in 2008 was pretty bad -- often on top of video Google now putting all their eggs into the auto-captions baske t See http://www.caes.uga.edu/?tiny=YXJ54D Google Voice and iPhone monopoly might make this workable at some point
- 20. Accessible Video So we decided to set up our own video server… This led to some additional questions, like: What technology? WMV? Flash? Something else? What kind of player should we use?
- 21. Accessible Video We went with Flash Adobe seemed to be “accessibility conscious” So which player? The Adobe Player JW Player CC Player OSU Controls + JW Player
- 22. Accessible Video Adobe’s player Has some built-in accessibility features But our accessibility guru wasn’t high on them The controls were hard to use At the time, the captions displayed on the screen
- 23. Accessible Video CC Player (WGBH) Displays caption text separate from video The Flash component this player is based on could be used by itself if you’re a Flash programmer. Player implementation is basic. Supported fairly well by WGBH.
- 24. Accessible Video Ohio State JW Player Tab accessible when tabbing through page Captions outside player
- 25. Accessible Video (By the way…. OSU is really good at this http://wac.osu.edu/ )
- 26. Accessible Video JW Player (LongTail Video) Not perfect but pretty good at everything Tab accessible controls – although not as big Captions and Audio Description Supported very well Used by lots of folks
- 27. Accessible Video Our video publishing interface for content providers Makes things consistent We control how things are displayed and can make sure that all video on our site (at least all video that we know about) is displayed correctly. Still, we can’t enforce good practice with caption files and that kind of thing. It’s up to our users.
- 28. Accessible Video Caption Files, Text Transcript, Audio Description, Descriptive Text, Caption Text, Transcript Files! What? There is a difference between public viewers and internal ones Intended audience matters Some accessibility features don’t need to be provided for internal media We can make it easier on our content providers by giving them aides.
- 30. Content Providers But who’s going to write all that accessible HTML and make all those caption files?
- 31. Content Providers Make the case Legal, Ethical, Emotional Make it easy Help documents, examples, tutorials Easy links to resources, like captioning services Make it your practice Do it yourself first Show your work to others
- 32. Q & A Ask questions or share your experiences.
- 33. What accessibility files are needed for video in different contexts http://www.caes.uga.edu/?tiny=3SSAVD Ohio State’s Web Accessibility Center http://wac.osu.edu/ The Online News site that was catalyst for this presentation http://georgiafaces.org Examples of inaccessible design, with code http://www.tbs-sct.gc.ca/clf2-nsi2/tb-bo/td-dt/eid-ecna-eng.asp Screen readers NVDA: http://www.nvda-project.org/ Voiceover: http://www.apple.com/accessibility/voiceover/ Firevox: http://www.firevox.clcworld.net/downloads.html JAWS: http://www.freedomscientific.com/products/fs/jaws-product-page.asp Firefox Web Developer extension http://chrispederick.com/work/web-developer/
- 34. Resources See how colorblind people experience the web. http://www.iamcal.com/toys/colors/ Usability and user-centered design. http://www.stcsig.org/usability/index.html Why won’t Firefox allow me to tab through links? http://www.caes.uga.edu/?tiny=RZLVJS Easy to understand 508 checklist for your site. http://www.webaim.org/standards/508/checklist What does CSS have to do with accessibility? http://www.w3.org/TR/CSS-access WAI Web Content Accessibility Curriculum Checkpoints http://www.w3.org/WAI/wcag-curric/chk1-0.htm Correct way to mark up tables. http://www.w3.org/WAI/wcag-curric/table.htm Learn more about associating table data with headers. http://www.w3.org/TR/WCAG-TECHS/H43.html
Editor's Notes
- #3: How many people are dealing with accessibility issues? Dirt basic stuff here. We are not lawyers.
- #4: Some content would be completely impossible to access if you had a disability.
- #7: This doesn’t even take into account users who may read screen readers because their eyes/hands are busy doing something else, people in noisy or low-light environments, or people who disable graphics because of slow connections or a type of device (mobile) that we didn’t design .
- #8: What is the right thing? How do we know? Who sets the standard? Brings me to my last reason for caring about accessibility: it’s the law. So let’s look at the law that governs web accessibility: 508.
- #9: Ha ha ha ha ha ha ha ha ha ha ha! As usual, the explanation the federal government provides us is clear as glass. I’d encourage you instead to to think about people and the help they might need to be able to fully use your web site. The following techniques come from summaries of 508 requirements and solutions to meet these requirements. If you can include these techniques as part of your development process, you’ll be in good shape.
- #12: Why is it important to separate structure from content with CSS? Example: CSS allows precise control over spacing, alignment and positioning. Authors can thereby avoid &quot;tag misuse&quot; - the practice of misusing a structural element for its expected stylistic effects. For example, while the BLOCKQUOTE and TABLE elements in HTML are meant to mark up quotations and tabular data, they are frequently used to create visual effects instead such as indentation and alignment. When specialized browsing software such as a speech synthesizer encounters elements that are misused in this way, the results can be unintelligible to the user.
- #14: http://www.w3.org/WAI/wcag-curric/table.htm
- #15: Accesskey allows users to access links via keyboard shortcuts. Tab through the site yourself, or use a tool like Firefox Developer to show tab order. Audio and video presents its own set of challenges, which Ben will tell you about in a minute.
- #17: The big picture, the point I want you to get, is that you need to think about your audience, provide alternatives for accessing content, and you need to test. We are used to accommodating people, this is just another way we do it.
- #18: This is a specific example of the way we handled video.. Hopefully it’ll be clear that there are lots of ways to do this. “ Make our site look current!” We were noobs. Our non-negotiable objectives. 1) Maintainability 2) Supportable cost 2) Accessible
- #24: WGBH – Boston Public Broadcasting strives to make their content accessible to those w/ disabilities, and has developed a flash player that displays captions very well. But it’s ugly. We said no to the CC Player
- #25: UGLY! and Not widely used Not widely supported
- #31: The real crux of the issue is that, for web content to actually be accessible, someone’s going to have to do the work. This may or may not be you. When it’s not, convincing content providers to do “extra” work – web content, video content, etc – is difficult. In our unit, we have a number of individuals who believe either in following the letter or the spirit of the law, and inasmuch as we provide content for our websites we are able to do a fairly good job. But when no one is obviously looking over our shoulder, it’s tempting to take the easier route… So if this is something you think is worth doing, how do you convince others?