Screen Readers to Search Engines:
Who Benefits From Web Site Accessibility
Sarah Fazenbaker
Webmaster
Florida Museum of Natural History
Florida Association of Museums Conference
Gainesville, FL | Sept. 13, 2006
Disclosure
I Am Not A Lawyer!
Disclosure
I am not an Accessibility Expert...
Disclosure
...and you don't need to be one either to improve your site!
What Is Accessibility?
Accessibility means that users of any kind, using any device, should have access to the essential information that is contained on your web site.
Accessibility Myths
- Accessible sites are plain or ugly
- Accessibility means a separate "text-only" site
- Accessibility is difficult or complicated
- Accessibility is just for the disabled
U.S. Accessibility Laws
Americans with Disabilities Act (ADA) - 1990
Prohibits discrimination in employment, State and local government, public accommodations, commercial facilities, transportation and telecommunications.
Rehabilitation Act - 1973
Prohibits discrimination in programs conducted by Federal agencies or receiving Federal financial assistance
- Section 508 - Amended in 1998
The disabled must have access to info that is comparable to the access available to others though technology - phones, fax machines, computers, web sites and more.
Must I Comply with Section 508?
Federally funded: YES
State funded: Varies by state...
Florida: YES
http://www.myflorida.com/myflorida/accessibility.html
Privately Funded: No, but it is still the right thing to do. You are also not protected from discrimination lawsuits....
Lawsuits
- National Federation of the Blind v. America Online (1999)
- Bruce Maguire v. Sydney Organizing Committee for the Olympic Games (2000)
- Robert Gumson v. Southwest Airlines (2002)
- National Federation of the Blind v. Target (2006)
Auditory Impairments
- Includes all ranges of hearing loss, from mild to profound
Considerations
- May use hearing aids, sign language or read lips
- Relying on sign language will not aid all users
- Often difficult to make out signer in a small web video
Designing For Auditory Impairments
- Provide transcripts for audio clips
- Provide synchronous captioning and transcripts for video clips.
Types of Cognitive Impairments
(Approx. 15-20% of population)
- Memory deficits
- Problem-solving deficits
- Attention-deficits
- Poor reading or math comprehension
- Dyslexia
- Other learning disorders
- Second language
Dyslexia simulation: http://www.webaim.org/simulations/dyslexia-sim.html
Considerations
- May have difficulty following instructions/tasks
- Become frustrated when dealing with errors/mistakes
- Easily distracted by ads or animation
- Need further explanation of equations or higher-level vocabulary and slang/satire/colloquialisms
Designing for Cognitive Impairments
- Make instructions/tasks easy to follow
- Ensure errors are easy to understand and recover from
- Use short, simple, unambiguous phrases
- Plenty of white space
Sources of Mobility Impairments
- Spinal cord injury, paralysis, lost or damaged limbs
- Cerebral palsy, Parkinson's disease, other tremors
- ALS/Lou Gehrig's disease, Spina Bifida, Muscular Dystrophy, Multiple Sclerosis, Arthritis
Considerations
May access the web using:
- Keyboard guards or overlays, on-screen keyboards, adaptive keyboards
- Specialized mice, trackballs, foot pedals
- Switches (maneuvering by puffing in straw, head wands, mouth sticks, eye blinks, etc.)
- Voice-recognition software
Designing for Mobility Impairments
- Make sure that all functions are available from the keyboard
- Design pages to be error-tolerant and use prompts
- Provide a method for skipping over long lists of links or other lengthy content
Types of Vision Impairments
- Blindness
- Low-vision
- Macular Degeneration
- Glaucoma
- Diabetic retinopathy
- Cataracts
- Less-than 20/20 vision without glasses/contacts
Considerations
May access the web using:
- Glasses/contacts
- Screen magnifiers
- Screen reader software
- Voice browsers
- Braille displays
Designing for Vision Impairments
- Make everything configurable
- Users may need to enlarge text, change its color and change the background color, as well as widen or narrow the screen to meet their needs
Aging Users
Research study by Microsoft shows 57% of adult computer users can benefit from accessible technology.
Aging of America:
- Median age in the U.S. today is 43
- In 1996, the baby boomer generation of approximately 78 million began turning 50 at the rate of 300,000 a month
- By the year 2025, there will be twice as many people over 65 as there will be teenagers
- The over-85 age group is the fasting-growing segment of the U.S. population
Web-Enabled Cell Phones
- New users are signing up at the rate of 1,000 per minute (just under 18 per second) worldwide
- It took 12 years to reach 1 billion connections
- The 2nd billion has been achieved in just 30 months, boosted by the increase in emerging markets such as China, India, Africa and Latin America, which accounted for 82% of the 2nd billion subscribers (June 2006)
Guess Who...
Who is the most well-known "blind" user that your museum cares deeply about?
Search Engines
How Google Works
Automated programs called spiders "crawl" through your site's links and add them to the index.
- They are essentially "blind" - they cannot "see" the content of images
- If your site is not optimized for accessibility, your site is NOT optimized for search engines
Page Rank Explained
- Google interprets a link from page A to page B as a vote, by page A, for page B
- Votes cast by pages that are themselves "important" weigh more heavily and help to make other pages "important"
- More details: http://www.google.com/technology/
Improving Your Google Rank
- Make sure your site code is accessible and "machine-readable"
- Seek other reputable, high-quality sites to link TO your site
- Avoid shady SEO services that engage in deceptive practices
- Google WILL drop you from their index if they feel you are attempting to manipulate search results
- More on SEO: http://www.google.com/support/webmasters/bin/answer.py?answer=35291
- Resources & Tools: http://www.google.com/webmasters/
So Many Acronyms!
- (W3C) World Wide Web Consortium
- (WAI) Web Accessibility Initiative
- (WCAG) Web Content Accessibility Guidelines
- http://www.w3.org/TR/WCAG10/
- Grouped by priority level: http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html
- Coding examples/advice: http://www.w3.org/TR/WCAG10-HTML-TECHS/
How to Use the WCAG Guidelines
Priorities
- 1: Web sites MUST satisfy these checkpoints. Otherwise, some groups will find it impossible to access info on the site.
- 2: Web sites SHOULD satisfy these. It will remove significant barriers to access.
- 3: Web sites MAY satisfy to improve access.
Conformance
- A: All Priority 1 checkpoints are satisfied
- AA: All Priority 1 & 2 checkpoints are satisfied
- AAA: All Priority 1, 2 & 3 checkpoints are satisfied
#1 Provide Equivalents
Provide equivalent alternatives to auditory and visual content.
- Provide a text equivalent for every non-text element, e.g "alt" or "longdesc" tags, transcripts [1]
- Includes: images, graphics, image map regions, animations, applets, bullets, spacers, buttons, audio and video.
[1] = Priority 1 requirement
Alt Tag Tips
Describe the CONTENT and FUNCTION of the images within your web content.
- Use alt="" for purely decorative elements, bullets, icons and spacers
- Avoid "image of..." or "link to..." - this is redundant
- Try to keep it short
Appropriate Alt Primer: http://webaim.org/techniques/alttext/
Hmmm...
Can you figure out how to purchase this item? (Actual alt tag contents are displayed in yellow)
Let's Help Target...
Now that you can see the images, how would you label their alt tags effectively?
#2 Communicating With Color
- Ensure that all information conveyed with color is also available without color. [1]
- More than 10 million American men are colorblind - they cannot distinguish red from green or see differently from most people
- Testing/Filter site: http://colorfilter.wickline.org/
- Provide sufficient contrast between foreground and background colors
- Color Contrast Analyzer: http://juicystudio.com/services/colourcontrast.php
Colorblindness Example
#3 Markup
Use markup and style sheets and do so properly.
Examples:
- Avoid using images as text as much as possible
- Use <h2> to indicate a subsection of <h1> - do not use headers for font effects
- <strong> vs. <b> and <em> vs. <i>
#4 Language
Clarify natural language usage
When abbreviations and natural language changes are not identified, they may be indecipherable when machine-spoken or brailled.
- Identify when languages change within the same document. [1]
- Provide explanations of abbreviations and acronyms
<acronym title="World Wide Web">WWW</acronym>
<abbr title="Attention">Attn:</abbr>
#5 Tables
Create tables that transform gracefully.
Try to use CSS for layout and reserve tables for truly tabular information.
If you do use tables:
- Clearly identify row and column headers, e.g. <th> [1]
- Avoid overly nested and complicated tables
- Provide a table summary:
<table summary="adult and children's tickets prices">
#6 Plan for Older/Alternative Browsers
Ensure that pages are accessible even when newer technologies are not supported or are turned off.
- Make sure pages are still viewable with style sheets, applets or scripting are turned off [1]
Use <noscript> and <noframes> tags to provide alternative content - Ensure that equivalents for dynamic content are updated when the dynamic content changes. [1]
- Making Ajax Work with Screen Readers: http://juicystudio.com/article/making-ajax-work-with-screen-readers.php
#7 Movement
Ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or stopped.
- Avoid causing the screen to flicker [1]
- People with epilepsy can have seizures triggered by flickering or flashing in the 4-59 Hz range
- Moving text may prove distracting or difficult for people with cognitive or visual disabilities
- People with physical disabilities might not be able to move quickly or accurately interact with moving objects
#8 Embedded Interfaces
Ensure that the user interface (audio/video player, applet, et.) - follows principles of accessible design: device-independent access to functionality, keyboard operability, self-voicing, etc.
- Make elements such as scripts and applets directly accessible or compatible with assistive technologies if important and not presented elsewhere [1]
#9 Design for Device-Independence
Use features that enable activation of page elements via a variety of input devices.
- Make sure both mouse and keyboard can operate the page
- Only use client-side image maps and use "alts" with each link [1]
- Provide an alternative list of links elsewhere on the page
#10 Interim Solutions
Care must be taken with certain coding methods until browsers and screen readers upgrade their abilities. e.g. these methods shouldn't be necessary in the future, but help currently.
- Avoid pop-up windows or changing the current window without informing the user
- Ensure that form labels are properly positioned
- Be aware some older screen readers may read all the way across tables line-by-line.
| New children's area open free entry with hand stamp |
Shark attacks up this year along with more serious injuries |
#11 New Technology
If you cannot create an accessible page, provide a link to an alternative page that is accessible, has equivalent information/functionality, and is updated as often as the inaccessible/original page [1]
Technology Cautions
Examples of potentially non-accessible technologies:
- Flash & Shockwave
- Newer versions of Flash are getting better, but developers need to be knowledgeable about accessibility features
- Creating Accessible Flash Content: http://webaim.org/techniques/flash/
- PDFs
- Unaccessible if exported from desktop publishing programs like Quark or Pagemaker
- Possible with some effort in PDF editor: http://alistapart.com/articles/pdf_accessibility
#12 Orientation
Give each page a unique title!
The page title identifies browser bookmarks and is what Google displays as a link.
- Title each frame element. [1]
- Divide large blocks of information into manageable groups
#13 Navigation
Clear and consistent navigation mechanisms are important to people with cognitive disabilities or blindness, and benefit all users.
- Make link text meaningful
- Use Exhibit Information instead of Click Here
- Use navigation mechanisms in a consistent manner
- Allow users to skip navigation links
- Enable different types of searches for different skill levels and preferences
#14 Clarity
Ensure that documents are clear and simple so they may be more easily understood.
- Use the clearest and simplest language appropriate for a site's content [1]
- Consistent page layout and recognizable graphics benefit all users
Tools
- WAVE Accessibility Tool
- Web Developer Toolbar (Firefox only)
- Lists of even more tools:
WAVE Analysis
Links
- "Building Accessible Websites" by Joe Clark - Entire book is available online
- (WebAIM) Web Accessibility in Mind
- Extensive Resources: