Common Barriers to Web Accessibility

1. Common Barriers to Web Accessibility Denis Anson – College Misericordia Roger O. Smith – University of Wisconsin - Milwaukee

2. Types of web sites • Art or Entertainment Sites • If the site is primarily about a visual or auditory experience for the visitor, general accessibility rules may not apply. • Expecting a web artist to create meaningful alt-text for a tone-poem would be like expecting a race car to perform in an air show. The medium is part of the experience. • Accessibility does not “handicapping” a situation.

3. Conceptual Issues in Web Design • The old rules still apply! • The web is another print format. • The web is another visual medium. • I need to control your experience on my site.

4. Old Rules Still Apply! • Many web developers received their training (if any) in the print publishing industry. • As such, all of their training in design and layout are firmly rooted in the visual design of documents. • While these rules may be effective when applied to paper design, they bring two problems to web design:

5. Thinking of the Web as a different form of paper • Applying print design rules to web design encourages thinking of the World Wide Web as a printing press. • This limits the possibilities to what could be accomplished in a paper document. • Paper documents are static – once designed, they remain the same. • Even “mail merge” has limited variability.

6. Printed Document Almost entirely visual in nature. “Almost” because some paper documents are produced in Braille. Web document May be “rendered” as printed text, as spoken text, or as tactile layout! A Web page is not an electronic sheet of paper

7. Paper Document The designer has control over the paper texture, glossiness, and weight used. Web Document Will be delivered via the user’s browser, with no control over glossiness or brightness. A Web page is not an electronic sheet of paper

8. Paper Document The designer has control over the ink colors and weight. Web Document Colors on the rendered document depend on the hardware being used by the visitor. Some visitors may have monochrome displays, or shifted colors. A Web page is not an electronic sheet of paper

9. Paper Document The designer has control over the ink colors and weight. Web Document Some visitors may be using an “aural” browser, and having the page read to them! Some may be using a refreshable Braille display, and “view” your page with their fingertips! A Web page is not an electronic sheet of paper

10. Paper Document In print design, the author can select the font used, with subtle (or not) variations in font being used to convey the speaker or emotional tone. The author can specify formatting with underline, strike-through, changing degrees of boldness. Web Document The author may specify a “preferred font,” but is limited to the fonts on the visitor’s computer. Different browsers will render “bold” at different weights, and may not render some variants at all! A Web page is not an electronic sheet of paper

11. Paper Document Formatting method is irrelevant – it’s the result that matters. Any means of producing the same visual result is equivalent! Web Document Formatting is based on logical organization of the page. Formatting that looks exactly the same can “mean” completely different things. Enlarged, bolded text is not the same thing, logically, as a header! A Web page is not an electronic sheet of paper

12. Paper Documents Relatively static – once produced, they are not changed, and generally cannot be customized to the individual reader. Web Documents Can be highly dynamic. Can be created to meet the needs of the individual visitor. Abbreviations and acronyms can be self-explaining, without distracting those who know what they are. A Web page is not an electronic sheet of paper

13. So, What’s the Problem? • Thinking of the web in terms of paper encourages practices that interfere with access by visitors using browsers different from the designers. • This includes blocking access to people with disabilities.

14. A Web site has much in common with a movie. • The script is only one part and only sketchy with organization. • Organizational elements in cinematography include, shot composition, connecting shots into scenes and sequences (editing), integrated use of special effects. • Movie making uses a concept used in web site development -- storyboard.

15. Content Versus Presentation • In the design of HTML, Tim Berners-Lee conceived that, where paper documents primarily use visual organization, the web should use logical organization. • The formatting features of HTML are intended to describe the logical structure of a document, but may be rendered visually.

16. Content Versus Presentation • As web design became more elaborate, designers wanted more visual control, and created HTML tags to provide more control over layout and presentation. • The <FONT> tag is an example. • <FONT> controls presentation, but provides no information about organization.

17. Content Versus Presentation • Other tools intended for one use were co-opted for other uses. • The <Table> tag was developed for presentation of tabular information. • It become common to use tables to position content in specific locations on the page! • In accessible design, HTML should only be used to describe the logical organization of the page, and other tools used for visual presentation.

18. Content Versus Information • This appears to be one of the most difficult concepts for many writers and web designers. • When an element is added to a web page, it is generally intended to convey some specific information. • It is that information, not the specific content, that should be described in multiple formats (see below).

19. Content Versus Information • Unfortunately, many authors appear to include content by instinct rather than deliberate design, and cannot describe the information that is being conveyed! • As a result, even when they are included, many “alternative text descriptions” are of little use.

20. Common Barriers to Accessibility And how to fix them

21. Provide Text Equivalents For All Content • It is commonly asserted that “A picture is worth a thousand words.” • Many web pages use graphics to convey information to the visitor. • An image of a product • An image of a view • Decorative art • Mathematical equations • “Word Art” to present words in a form that cannot be shown as text

22. Provide Text Equivalents For All Content • Other sites use animations or video to display processes or actions. • These images will not be available to visitors who do not use their eyes for page access. • Users of aural browsers. • Users of screen readers or refreshable Braille. • They will also not be visible to the estimated 30% of web users who have graphics loading turned off by default!

23. Provide Text Equivalents For All Content • The author of a web page should provide a text equivalent (alt-text) that conveys the same information as the graphic. • When a graphic is included in a web site, there is generally some information that is intended to for the visitor. • Note: This is not true for “eye-candy;” images whose sole purpose is to be visually attractive.

24. Provide Text Equivalents For All Content • The designer of a web page should consider how to convey the information of the graphic to the user through language. • In most cases, the information of a graphic is very different from the content of the graphic.

25. What does this picture convey?

26. In a Real Estate Listing: • This three bedroom, 2 story house is located on a landscaped, treed lot. Great location.

27. In an architecture course: • Dutch Colonial--A hallmark of the style is a broad gambrelroof with flaring eaves that extend over the porches, creating a barn-like effect. End walls are generally of stone, and the chimney is usually located on one or both ends. Double-hung sash windows with outward swinging wood casements, dormers with shed-like overhangs, and a central Dutch double doorway are also common.

28. On the residents’ personal website: • Our cool new house. Really, it is not new, but new to us. Upstairs and downstairs on quiet street. Small front porch. Here it is on a sunny day. Look! Green grass. It rains here! Uh oh. And shrubs to clip!

29. What does this image convey? •  (This is a custom bullet for a list) • This is another, but not expanded.

30. A description of the graphic might be: • “Small image of a fern frond” • The purpose of the graphic is to indicate a new list item, so the “information” might be “new list item.” • The same information can be conveyed by the shorter “bullet”. • On a more complex page, you might want to indicate “top level bullet”.

31. Failure to Provide Access to Information Through More Than One Medium • Traditional “multimedia” presentations provide some information through words, other information through pictures, and still other information through sound. • Consider a narrated travelogue of a trip up the Amazon river, for example. • This approach works well for the person who can read, who can see, and who can hear.

32. Failure to Provide Access to Information Through More Than One Medium • It doesn’t work as well for the person with limited vision or limited hearing, or who’s reading skill is at a lower level of complexity than the author’s writing. • A more appropriate form of multimedia presents information in a way that accommodates the visual and the auditory learner. • NPR and National Geographic have demonstrated the potential of using audio for universal experience.

33. Failure to Provide Access to Information Through More Than One Medium • The writing level should never be more complex than what is needed to convey the information. • In the movie, “Pirates of the Caribbean, the pirate Captain Barbosa says, at one point, “I’m disinclined to acquiesce to your suggestion… Means no.”

34. Failure to Provide Access to Information Through More Than One Medium • Pictures are often used to convey spatial information (size, scale, structure)

35. Failure to Provide Access to Information Through More Than One Medium • If a non-visual visitor finds this image, they may get the message, “Graphic,” which tells them that they are missing information. • Some browsers will give, instead, the file name and file size. • 18.jpg (39k) • This is also not particularly helpful • Even when alt-text is provided, it may be poorly conceived and written.

36. Failure to Provide Access to Information Through More Than One Medium • A common alt-text might be “This image shows the relative size of the Pacific Spiny Lumpsucker and the human hand” . • This description tells the non-visual viewer what information they would have, if they could see, but doesn’t give them the information.

37. Failure to Provide Access to Information Through More Than One Medium • A better description would be something like: “The adult Pacific Spiny Lumpsucker is about the size of a thumb, has no visible fins, and is covered with small, conical scales.” • This description gives a physical size as well as an idea of the texture of the fish.

38. Failure to Provide Access to Information Through More Than One Medium • Animations may provide a visual representation of the changes taking place over time. • For example:

39. Failure to Provide Access to Information Through More Than One Medium • To the visitor who does not have access to graphics, this animation provide no information. • It should be paired with a text and/or audio narration that describes the information of the animation.

40. Failure to Provide Access to Information Through More Than One Medium • This might include: • “When an action potential reaches the synapse, the axon releases a neurotransmitter into the synapse. The transmitter contacts receptors on the dendrite, and triggers an action potential in the next cell in the chain.” • It wouldn’t have to include the image of the spinning skull, since that is not the information of the animation.

41. Failure to Provide Access to Information Through More Than One Medium • An audio narration may help a low vision visitor, but is not useful to a person who is deaf. • Spoken language should be matched with a text-transcript to provide the information of the dialogue.

42. Failure to Provide Access to Information Through More Than One Medium • Non-language sounds are more difficult to manage, unless you think about the information being conveyed rather than the sound. • When sounds are used to provide an indication of success (cheering) or failure (booing or “splat”), they can be accompanied by visual text. • When sounds provide ambiance, they are similar to eye-candy, and do not provide information.

43. Mouse-Overs are Cool… If You Use A Mouse • Mouse-overs allow the visitor to trigger events by placing the mouse pointer over an element on a web-page. • If the element is an acronym, (e.g., NASA), it might cause the expansion to appear (National Aeronautics and Space Administration).

44. Mouse-Overs are Cool, If You Use A Mouse • Moving the mouse over the name of a bird might cause its picture to appear on another part of the screen, and its call to be heard • If the element is part of the navigation, it might cause a sub-menu to appear

45. Mouse-Overs are Cool, If You Use A Mouse • If the visitor lacks the motor control to move the mouse, s/he may not be able to gain access to that part of the information • In order to make a mouse-over accessible, two things must be possible • The element must be able to accept “focus” • The user must have a way to move the focus to the element

46. Accepting Focus • Some elements can receive focus from the Tab key • Links • Form elements • Controls of some multimedia players • Other elements cannot accept focus • Specific words in a document • Non-link graphics • Server-side image maps

47. Accepting Focus • By creating mouse-overs on elements that cannot accept focus, the designer is making some content inaccessible to users who cannot control a mouse

48. Giving Focus • There are two means of giving focus to an element • Tab Key • Access Key

49. Giving Focus • By failing to specify the Tab Order of elements on the page, the author does not optimize access to the page

50. Giving Focus • Access Keys (keyboard shortcuts for elements) are not interpreted the same by all browsers • In some browsers, an access key activates a link rather than giving focus to the link (“clicks on it”) which bypasses the mouse-over that may have been intended to provide information