LESSONS LEARNED from our new ONLINE NEWS SITE

ROBIN PRATT & BEN WHETSTONE

Accessibility

Agenda

Overview of PresentationWhy be accessible?Web Development Techniques & ToolsChoosing Accessible TechnologiesConsiderations for Content ProvidersQ & A

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

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

The case for accessibility

The point is that you would be frustrated at best and not able to access important information at worst.

Business Case for Accessibility

Among US adults:25.2 million are blind or visually impaired1

1 in 12 have problems seeing colors correctly2

34.8 million are deaf or hearing impaired3

33.1 million w/physical limitations3

39 million 65+ in 2009. 89 million in 2050.4

1. http://www.afb.org/Section.asp?SectionID=152. http://www.iamcal.com/toys/colors/stats.php3. http://www.cdc.gov/nchs/fastats/disable.htm4. http://www.census.gov/Press-Release/www/releases/archives/international_population/013882.html

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.

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!

Designing with Accessibility in Mind

Easy things you can do now (in order of importance):

1.Add “alt” tags to images. Three scenarios:a) Conveying informationb) Acting as a linkc) “Eye candy”

a) alt=“Tong Zhao and Michael Doyle created a fast-acting microbial wash for food”

b) alt=“FACES home” c) alt=“”

Designing with Accessibility in Mind

2. Don’t rely on color alone to convey information:

a) Underline, bold, or enlarge links.b) 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.

Designing with Accessibility in Mind

3. Don’t mangle the markup.a) Use headers to convey structure, not size.b) Use text for headings, not images.c) Use relative text sizes (em), not fixed (pt).d) If it’s a list, use list tags, not breaks.e) Use stylesheets for display, not tables.

Designing with Accessibility in Mind

4. 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

Designing with Accessibility in Mind

5. Mark up tables correctly.a) Use tables to display tabular data.b) <th> for headers, not <td><strong>.c) Associate data and headers with SCOPE and

HEADERS attributes.

Designing with Accessibility in Mind

6. Allow users to access site via keyboard only.a) Use the accesskey attribute in links.

b) Check your tab order.

<a href=“page.html” accesskey=“p”>

Tools to Help You

Screen readers:1. JAWS – Free trial for 30 days2. Built-in reader on Macintoshes (Voiceover)3. NVDA – Free for PC4. Firevox – Firefox extension

Tools to Help You

Firefox Web Developer extension:http://chrispederick.com/work/web-developer/

Our Experience: Accessible Video

So you want to put video on there, huh?

Yikes!

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

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 basket See http://www.caes.uga.edu/?tiny=YXJ54D Google Voice and iPhone monopoly might make this workable at some point

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?

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

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

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.

Accessible Video

Ohio State JW Player Tab accessible when tabbing through page Captions outside player

Accessible Video

(By the way…. OSU is really good at this

http://wac.osu.edu/)

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

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.

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.

Accessible Video

http://www.caes.uga.edu/?tiny=3SSAVD

Content Providers

But who’s going to write all that accessible HTML and make all those caption files?

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

Q & A

Ask questions or share your experiences.

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/

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