Designing for Accessibility. Jason Withrow

Transcription

1 Designing for Accessibility

2 Overview What is Web Accessibility? Universal Design Legal Aspects of Accessibility Types of Disabilities Adaptive Technologies WCAG 1.0 Guidelines Testing Accessibility

3 What is Web Accessibility? Providing access to web content for users with disabilities Can they experience the content? Ensuring that the content is usable for users with disabilities Does the content make sense?

4 Best Approach: Universal Design Designing for everyone from the start Thinking about the needs of users with disabilities helps those without disabilities Problems with non-universal design: Time and effort to create accessible versions of documents Difficulties retrofitting content/functionality to improve accessibility

5 The Value of Universal Design Universal design benefits everyone: Alt text helps users browsing with images off Closed captioning continues to provide information when the TV is muted Predictive completion of URLs reduces typing time and speeds up browsing process Screen readers assist with multi-tasking because you can be looking at something else while content is being read aloud

6 Provide a Text-Only Version? Some web developers used to assume that a text-only version of the website had solved the accessibility problem This is simply not the case While it may simplify screen reader access, users with cognitive and information-processing problems benefit greatly from content-related images Disabled users also don t necessarily want a separate page for them

7 Provide a Text-Only Version? The disabled users would rather be able to experience the page well in its regular state (back to the Universal Design idea) Other issues with text-only versions: Not as likely to be kept up to date if all files are static ( regular version gets updated but text-only is ignored) A plain text dump is not exactly an optimized user experience; much more can be done in the code to make the content accessible, in terms of accessibility-related tags/attributes

8 Legal Aspects of Accessibility 1990: Americans with Disabilities Act becomes law 1990s: Numerous court decisions 1998: Rehabilitation Act Amended 2000: Access Board finalizes Section 508 rules 2001: Section 508 regulations go into effect (Govt. websites must be accessible)

9 Disabilities: Not Uncommon 22% of adults report some type of disability (U.S. Census) All of us likely have or will have some sort of disability, either long-term or shortterm (especially as we grow older) I have color blindness (blindness is too strong of a word, it is more like color confusion) for red/green This is a fairly common issue for men; the rate is around 10% (8% - 12% around the world)

10 Vision Types of Disabilities Blindness, Low Vision, Color Blindness Auditory & Speech Deafness, Hearing Loss, Speech Difficulties Mobility Tremors, Poor Motor Control, Arm Paralysis Cognitive / Neurological Reading, Learning, Memory, Intelligence, Seizure, Brain Injury

11 Situational / Temporary Disabilities Broken arms/legs from accidents Eye injuries that gradually heal Constraints imposed by environment Poor ergonomics Noisy environment (or quiet environment, such as in a library) Bad lighting Small screen

12 Some Scenarios to Consider User is unable to see, hear, and/or move Difficulty reading or comprehending text Don t have a keyboard or mouse Can t use a keyboard or mouse Have a text-only screen or device (e.g., Lynx), a small screen, or a slow Internet connection

13 Some Scenarios to Consider Eyes, ears, or hands busy or interfered with (e.g., driving to work and talking on the phone) Using an early version of a browser, a voice browser, or a different operating system (e.g., Windows users adapting to a Mac and vice versa)

14 Blindness: Adaptive Technology Users rely on screen reader software Data output to a synthesizer or in braille Can use a screen reader with a browser: A graphical browser (IE, Mozilla, Firefox, Opera) Lynx (a text-only browser) Or a voice browser, which accepts voice input or even input via a telephone Likely to be using the tab key to move through navigation and headings quickly

15 Blindness: Accessibility Issues Problems navigating due to missing alt text for navigation buttons (all they can go on is the file name) Tables-based layouts that linearize poorly Difficulties in completing a form due to confusing tab sequence Devices (e.g., browsers) lacking keyboard shortcuts for all commands

16 Low Vision Term for a whole series of conditions interfering with proper vision: Tunnel vision Clouded vision Central field loss Blurriness

17 Low Vision: Adaptive Technology Depending on the specific disability: Screen reader Screen magnifier Switching to large fonts Altering foreground / background colors Using a large monitor

18 Low Vision: Accessibility Issues Inability to resize text based on browser limitations and/or how the page was coded Poor color contrast that does not respond to user style sheets (depends on browser) Issues that arise when zooming in: Text in images not re-wrapping Layouts that fall apart at this size

19 Color Blindness Difficulties in interpreting colors as others see them; confusion between pairs of colors (red/green, yellow/blue) Major issues include: Poor color contrast Situations where distinguishing between colors makes a difference in interpretation (e.g., lines in a diagram, coloring text) User style sheets are used to change color combinations, as much as possible

20 Deafness / Hearing Disabilities Primarily encounter issues with audio content that lacks captions or that lacks a text transcript of the audio content If a website required voice input there would also be major difficulties Users with varying levels of hearing loss (not to the level of deafness) will also need to be able to adjust the audio volume

21 Speech Disabilities Various issues: Stuttering Inability to speak loudly Slurring words A major issue if a website requires speech input because the speech interpreter might not understand Website needs to offer alternate ways to provide input, such as via keyboard

22 Mobility-Related Disabilities Paralysis in a limb or limbs Loss of a limb or limbs Tremors Weakness Loss of sensation Stiffness in joints Pain (e.g., repetitive stress injury)

23 Mobility: Adaptive Technology Head-pointer / mouth-stick Eye gaze Voice recognition A special keyboard with a layout of keys matching the range of hand motion Adjustments to mouse and keyboard sensitivity (can be done in the OS) Many of these combine the pointer with single keystrokes to accomplish actions

24 Mobility: Accessibility Issues Major difficulties filling out forms and completing processes in a limited time frame I don t recommend trying to buy tickets through Ticketmaster online Smaller objects are harder to target effectively Due to Fitts Law

25 Understanding Fitts Law Fitts Law: The time to acquire a target is a function of the distance to, and size of, the target. The larger something is, the faster it is to acquire (everything else being equal). This is because there is less need to slow down, less precision needed, as you approach the target. Small buttons are more difficult to click (greater chance of missing) so one has to slow down as they are approached

26 Ideal Menu Placement The four sides of your monitor are ideal, because each represents an infinite space in all directions that cannot be moved into (thus a huge object) No matter how far the mouse is moved, the target is still acquired This requires that no pixels of space exist between window edge and menu This is one reason why Mac OS is superior to Windows in task performance

27 Cognitive / Neurological Disabilities Reading / learning (e.g., dyslexia) ADD / ADHD Mental retardation / development disability Low intelligence Loss of short-term memory Damage to long-term memory Psychiatric illnesses (e.g., schizophrenia) Seizure (e.g., epilepsy) Organicity (brain damage due to accident)

28 Cognitive: Accessibility Issues Flickering and blinking can cause seizures; even audio can be a factor here. Allow animations to be frozen Individuals with psychiatric illnesses can be quickly overwhelmed with too much activity on-screen Also an issue for ADD / ADHD individuals Reading level of text can be too high Poor organization / labeling generates sigificant confusion

29 Multiple Disabilities One final consideration is that an individual may very well have multiple disorders A car accident could result in: Mobility impairments Cognitive impairments With age we also experience more issues, potentially stretching across all the areas

30 Tackling Accessibility Issues W3C = World Wide Web Consortium WAI = Web Accessibility Initiative (from the W3C) WCAG = Web Content Accessibility Guidelines (as part of the WAI)

31 The History of the WAI / WCAG 1990s: World Wide Web Consortium (W3C) launches the Web Accessibility Initiative (WAI) Three goals / priorities: 1. Develop guidelines for making content accessible (called the WCAG - Web Content Accessibility Guidelines) 2. Introduce new accessibility-related tags 3. Create tools for authoring accessible pages

32 Our Focus: WCAG Guidelines Web Content Accessibility Guidelines (WCAG) 1.0 is the version of interest 2.0 is a working draft at this stage WCAG 1.0 served as the basis for the US government s Section 508 guidelines, which are substantially similar Accessibility-checking software will allow you to test against WCAG 1.0 as well as Section 508

33 WCAG Guidelines & Checkpoints WCAG 1.0 contains fourteen guidelines, broken down into specific checkpoints (checkpoints are the things to do) Checkpoints are given a level of priority based on their accessibility impact Priority 1 (Must be satisfied) Priority 2 (Should be satisfied) Priority 3 (May be satisfied) Ideally all Priority 1 checkpoints satisfied

34 WCAG Guideline 1 Guideline: Provide equivalent alternatives to auditory and visual content Relevant checkpoints Provide text descriptions of images and charts ( alt is a required <img /> attribute) Captions for video Text version of audio passages

35 WCAG Guideline 2 Guideline: Don t rely on color alone Relevant checkpoints Avoid communicating meaning solely with color (users may be colorblind or have noncolor displays). Color can be used; just have the information available in another format such as text or audio. Provide sufficient contrast between background and foreground colors.

36 Guideline 2 Example

37 WCAG Guideline 3 Guideline: Use markup and style sheets and do so properly Relevant checkpoints Use markup to convey information rather than an image, if the markup can do it Code proper HTML for document structure (headings, subheadings, blockquotes, putting table data into tables) Use CSS to control presentation

38 WCAG Guideline 4 Guideline: Clarify natural language use Relevant checkpoints Specify document language in the code (the lang attribute is valid for almost any tag; lang= fr ); screen synthesizers and braille devices then know to switch to that language Abbreviations and acronyms can also be noted and are then shown as tooltips in most browsers (IE doesn t support this for <abbr>) and are output to adaptive technology <acronym title= Cascading Style Sheets >CSS</acronym> <abbr title= Michigan">MI</abbr>

39 WCAG Guideline 5 Guideline: Create tables that transform gracefully Relevant checkpoints Use tables for data, not for layout. If tables are used for layout, do they linearize well? Specify row and column headers (<th>, <thead>) and associate headers with cells (scope attribute, headers attribute) Indicate structural divisions (<col>) Provide summaries for tables

40 WCAG Guideline 6 Guideline: Ensure that pages featuring new technologies transform gracefully Relevant checkpoints Does your document still make sense with style sheets (CSS) turned off/unavailable? Does the page still work if scripts (e.g., Javascript) are turned off or unavailable? Are the actions that trigger scripts deviceindependent (e.g., onmouseover)? Is an alternative version needed?

41 WCAG Guideline 7 Guideline: Ensure user control of timesensitive content changes Relevant checkpoints Don t make the screen blink or flicker (flashes in the 4 to 59 flashes per second range may trigger seizures; some give a range of 2 to 55 flashes per second) Screen readers cannot read moving text Make sure moving objects can be frozen in place to avoid confusion or overstimulation Don t auto-refresh or redirect pages

42 WCAG Guideline 8 Guideline: Ensure direct accessibility of embedded user interfaces Relevant checkpoints Are Flash interfaces accessible? Macromedia has made some progress on this, but still has a long way to go. Is the interface of a Java applet accessible?

43 WCAG Guideline 9 Guideline: Design for device independence Relevant checkpoints Don t make your form elements rely on the use of a mouse. Not all users will have one (or be able to use the one they have)! Create a logical tabbing order for form elements (via the tabindex attribute) Provide keyboard shortcuts to important links and form fields (via the accesskey attribute; underline or use the title attribute to note the accesskey to use)

44 WCAG Guideline 10 Guideline: Use interim solutions For now, use these approaches to ensure older adaptive technology can access your content Relevant checkpoints Don t spawn new windows (older browsers don t let users turn them off) Include placeholder text in input boxes and textarea boxes for old screen readers

45 WCAG Guideline 11 Guideline: Use W3C technologies and guidelines They are developed in an open manner with lots of input and feedback from industry Relevant checkpoints Write valid HTML, CSS, XHTML, XML, etc. Avoid deprecated tags

46 WCAG Guideline 12 Guideline: Provide context and orientation information Relevant checkpoints Divide large groups of information into more manageable groups If using frames, title each frame and provide a longdesc of the frame contents Associate form elements and their labels explicitly

47 WCAG Guideline 13 Guideline: Provide clear navigation mechanisms Relevant checkpoints Make the text for links clear (not click here ) Provide a site map or table of contents Create a navigation bar Visually group related links Provide a means to skip over ASCII art

48 WCAG Guideline 14 Guideline: Ensure that documents are clear and simple Relevant checkpoints Keep a consistent layout across pages Write in clear, simple language Supplement text with images or an auditory component, if it assists in comprehension

49 Additional Guidelines (non-wcag) Give the user control, especially over fonts and font sizes Don t refer to spatial relationships (e.g., the right-hand box ) DHTML menus can be very difficult to manipulate successfully

50 Primary Criticism of WCAG Focuses too much on visual disabilities in its guidelines and checkpoints Other types of disabilities (e.g., mobility, auditory, cognitive) are considered, but only to a small extent This bias is disconcerting because it leads web developers to focus on the visually handicapped users in their work, when they should take a broader view

51 Testing Accessibility Various approaches to testing accessibility Usability testing with disabled users Accessibility checking software Test the website in a text-only browser (Lynx), in multiple browsers (new and old), as well as with a screen reader Spelling and grammar checking Turn off CSS, frames (if used), Javascript, and Java applets

52 Testing Accessibility Various approaches to testing accessibility View with images turned off, view in grayscale, view with a small display Save as text only - does it produce word salad? Is your text short and simple? Use the website without a mouse (primarily tabbing through the page)

53 Accessibility Checking Software These programs function at the page level, analyzing each page based on either WCAG 1.0 or Section 508 Programs available: WebXACT ( Cynthia Says (

54 The Limits of Accessibility Checkers Most items need to be verified by humans The software simply cannot tell! Sometimes 5 legitimate issues are identified and 95 user checks are noted. Most sites will trigger the exact same user checks so what is the point of the tool? Example of tables - most assume that tables are not accessible or they give numerous warnings for a human to check