1. Accessible Website Design Building Complex Web Sites (SI539) Mike Elledge Assistant Director Usability & Accessibility Center (UAC) Michigan State University

2. Topics -2- Topics I.Introduction (:05)Introduction II.Context of Accessibility (:15)Context of Accessibility III.Use of Adaptive Technology (:15)Use of Adaptive Technology V.Creating Accessible Websites (:90)Creating Accessible Websites I.Criteria (:45) II.Design (:45) VI.Evaluating Websites for Accessibility (:30)Evaluating Websites for Accessibility VII.Questions & Wrap-up (:25)Questions & Wrap-up VIII.ResourcesResources

3. Topics -3- Introduction Mike Elledge, Assistant Director, UAC, MSU –MSI School of Information, U of M –MBA Columbia University, New York –8+ years usability testing and accessibility evaluation; 18+ years consumer marketing and research Usability & Accessibility Center, MSU –State-of-art purpose-built center: training, focus group, and testing rooms; digital audio/video capture; remote viewing –Director: Sarah Swierenga, PhD Human Factors, U South Dakota; 20+ years human factors, usability testing; Lexis/Nexis, UDRI, University of Dayton faculty –Visit: http://usability.msu.eduhttp://usability.msu.edu

4. Topics -4- Context of Web Accessibility Key aspects of Web Accessibility –Economic –Social –Legal –Practical Use of Adaptive Technology

5. Topics -5- Economic Context Persons with disabilities represent a large group –Twenty percent of population has some form of impairment 54 million people –One in ten severe –One in two over 65 have reduced capabilities –The number will grow with aging Boomers Estimated disposable income is between $175 and $220 Billion –Plus what they influence

6. Topics -6- Social Context Disabilities cover a broad range of impairments and conditions –Temporary and permanent –Congenital and onset Hearing—Conductive, sensorineural Visual—Color blindness, low vision, blindness Cognitive Impairments—ADD, TBI, Dyslexia Physiological Impairments—MS, MD, CP, injuries, Carpal Tunnel

7. Topics -7- Share of Disabilities

8. Topics -8- Legal Context Federal government must meet Section 508 requirements for its websites and applications –Provide persons with disabilities equal access to Federal information, and employees with disabilities equal access to electronic and information technology ADA requirements being extended to e-commerce sites –Sexton and NFB vs. Target class-action suit –“The 'ordinary meaning' of the ADA's prohibition against discrimination…is that whatever goods or services the place provides, it cannot discriminate on the basis of disability in providing enjoyment of those goods and services."

9. Topics -9- Practical Context 1 Persons with disabilities benefit –Adults with disabilities spend, on average, twice as much time online as adults without disabilities- 20 hours per week compared to 10 hours per week. –Adults with disabilities are much more likely than adults without disabilities to report that the Internet has significantly improved the quality of their lives (48% vs. 27%) “How the Internet is Improving the Lives of Americans with Disabilities,” Humphrey Taylor, Harris Poll #30, June 7, 2000

10. Topics -10- Practical Context 2 “Non-impaired” users benefit –“Curb-cut Analogy” –Usability improvements Business benefits –Paying attention to content = “Staying On-Message” –Minimizing Clutter = Emphasizes Branding –Expanded customer base –Legal protection –Good will

11. Topics -11- Use of Adaptive Technology Persons with disabilities use websites differently –Blind persons listen to sites –Persons with low vision enlarge their screens –Color blind persons can’t differentiate some colors –Deaf persons read sites –Physically impaired persons use tools –Persons with cognitive issues need help understanding and focusing

12. Topics -12- Adaptive Technology Users Kyle (Blind person): www.webaim.org/media/video/kyle/kyle.asx www.webaim.org/media/video/kyle/kyle.asx Curtis (Deaf person): www.webaim.org/media/video/curtis/curtis.asx www.webaim.org/media/video/curtis/curtis.asx Gordon (Quadraplegic): www.webaim.org/media/video/gordon/gordon.asx

13. Topics -13- Creating Accessible Websites--Criteria Section 508 WCAG 2.0 ARIA 1.0

14. Topics -14- Section 508 vs. WCAG 1.0--Definitions Section 508 –Required for websites and software developed by, and for, Federal government –Often used in U.S. as standard –Derived in consultation with W3C WCAG 1.0 –Voluntary guidelines developed by Web Accessibility Initiative (WAI) of the W3C (World Wide Web Consortium) –Used outside U.S. as standard

15. Topics -15- Section 508 vs. WCAG 1.0--Characteristics Section 508 –Descriptive—Not so much “how,” but “what” www.access-board.gov/sec508/guide/ 1194.22.htm WCAG 1.0 –Prescriptive—”How” –HTML-focused –Can be more comprehensive than 508, depending on priority level chosen (I, II or III) www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

16. Topics -16- Section 508: Hybrid of WCAG 1.0 a)Text equivalent for images (A) b)Synchronized multimedia captioning (A) c)Information not color dependant (A) d)Readable without style sheet (A) e)Redundant text links for image maps (A) f)Client-side image maps (A) g)Row and column headers for data tables (A) h)Associate data with headers in complex tables (A) i)Title frames with text (A) j)No page flicker (A) k)A text-only version only when no alternative (A) l)Accessible alternative to scripting (A) m) Links to accessible plug-ins or applets (AA) n)Make forms accessible (AA) o)Ability to skip repetitive navigation links (AAA) p)Notification of timed response and ability to notify if more time is needed (not in WCAG 1.0) http://www.jimthatcher.com/sidebyside.htm#WCAGView

17. Topics -17- WCAG 1.0 Web Accessibility Initiative (WAI) –Web Content Accessibility Guidelines Priority One: MUST be done Priority Two: SHOULD be done Priority Three: MAY be done (helpful) Based on specific html-based standards

18. Topics -18- Approach WCAG 1.0 –Primarily HTML-oriented –Elements Guidelines > Checkpoints: Must (Priority One), should (Two) and may (Three) > Conformance: “A,” “AA”, and “AAA” WCAG 2.0 –Technology-independent –Elements Conformance and Success Criteria Requirements Principles: Perceivable, Operable, Understandable, Robust (POUR) > Guidelines > Success criteria: Levels “A”, “AA” and “AAA” > Techniques: Sufficient, Advisory

19. Topics -19- WCAG 2.0 Released December 2008 More streamlined & guidelines broader in scope to accommodate variety of technologies

20. Topics -20- Why WCAG 2.0? Experience providing accessibility has grown –Some requirements outdated (“must work with JS turned off”) –Some requirements reconsidered (“Skip to Main Content” OR headings) –Requests for greater specificity, more technical guidance for HTML, non-HTML Web has evolved –HTML is no longer only game in town –AJAX, DHTML, XML, Flash –User agents have more control over content (“Until user agents…”) Standards have changed –XHTML 1.0 (August 2002) –CSS 2.0 > CSS 2.1 > CSS 3.0 (mostly working drafts) –HTML 4.01 > HTML 5.0 (in process) Adaptive technology has improved –Support PDF, JavaScript, ARIA, Flash –Adobe, Microsoft text-to-speech built-ins Browsers more advanced –Firefox 3, IE 8 support ARIA, CSS

21. Topics -21- What is WCAG 2.0? Web Content Accessibility Guidelines (W3C) –1.0: May, 1999 –2.0: December, 2008 Related documents –Understanding WCAG 2.0: http://www.w3.org/TR/UNDERSTANDING- WCAG20/http://www.w3.org/TR/UNDERSTANDING- WCAG20/ –Techniques for WCAG 2.0: http://www.w3.org/TR/WCAG20-TECHS/http://www.w3.org/TR/WCAG20-TECHS/ Four principles of accessibility –Perceivable –Operable –Understandable –Robust Twelve guidelines (4, 4, 3, 1) –61 success criteria (22, 20, 17, 2) Level A, Level AA, Level AAA –264 Sufficient and advisory techniques, failures

22. Topics -22- WCAG 2.0 Principles Perceivable –Provide text alternatives for non-text content. –Provide captions and alternatives for audio and video content. –Make content adaptable; and make it available to assistive technologies. –Use sufficient contrast to make things easy to see and hear. Operable –Make all functionality keyboard accessible. –Give users enough time to read and use content. –Do not use content that causes seizures. –Help users navigate and find content. Understandable –Make text readable and understandable. –Make content appear and operate in predictable ways. –Help users avoid and correct mistakes. Robust –Maximize compatibility with current and future technologies.

23. Topics -23- WCAG 2.0 Guidelines 1.1 Text Alternatives Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols or simpler language 1.2 Time-based Media Provide alternatives for time-based media 1.3 Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure. 1.4 Distinguishable Make it easier for users to see and hear content including separating foreground from background. 2.1 Keyboard Accessible Make all functionality available from a keyboard. 2.2 Enough Time Provide users enough time to read and use content.

24. Topics -24- WCAG 2.0 Guidelines 2.3 Seizures Do not design content in a way that is known to cause seizures. 2.4 Navigable Provide ways to help users navigate, find content and determine where they are. 3.1 Readable Make text content readable and understandable. 3.2 Predictable Make Web pages appear and operate in predictable ways. 3.3 Input Assistance Help users avoid and correct mistakes. 4.1 Compatible Maximize compatibility with current and future user agents, including assistive technologies.

25. Topics -25- What does it mean for me? Designers/Developers –Greater freedom –Greater responsibility –Higher expectations Evaluators –Requirements more precisely testable –Past evaluations using WCAG 1.0 still applicable –Future evaluations using WCAG 2.0 Most tests still relevant Some no longer necessary Some additional

26. Topics -26- Keywords and Concepts Accessibility-supported –Technology that is accessibility-supported works with assistive technologies (AT) and the accessibility features of operating systems, browsers, and other user agents. Technology features can be relied upon to conform to WCAG 2.0 success criteria only if they are used in a way that is "accessibility supported".relied uponaccessibility supported Change of context –Major changes in the content of the Web page that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously.Web page Conformance –Satisfying all the requirements of a given standard, guideline or specification. Info and relationships –Information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes. For example, the presentation format changes when the content is read by a screen reader or when a user style sheet is substituted for the style sheet provided by the author.

27. Topics -27- Keywords and Concepts (continued) Meaningful sequence –Enables a user agent to provide an alternative presentation of content while preserving the reading order needed to understand the meaning. It is important that it be possible to programmatically determine at least one sequence of the content that makes sense. Name, role, value –Text (or number) by which software can identify a component, function or value within Web content to a user. Example: A number that indicates whether an image functions as a hyperlink, command button, or check box. Programmatically-determined –Content is authored in such a way that user agents, including assistive technologies, can access the information. User interface component –A part of the content that is perceived by users as a single control for a distinct function. Web page –Encompasses both static and dynamic representations of content.

28. Topics -28- Underlying Conformance There are five Conformance Requirements that must be achieved for each Web page to be compliant with WCAG 2.0 1.Conformance levels –Levels A, AA, or AAA must be attained or an alternate conforming version be provided –Authors are encouraged to report any progress toward meeting success criteria from all levels beyond the achieved level of conformance. –Not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content. 2.Full pages only –No excluding portions of page 3.Complete processes –All Web pages in a process must conform 4.Only accessibility-supported ways of using technologies –Can satisfy success criteria 5.Non-interference –If technologies are not accessibility supported or are non-compliant they do not block access to the rest of the page

29. Topics -29- General Success Criteria All content must also meet these success criteria: –Audio control Mechanism for pausing, stopping or controlling volume if audio plays automatically for more than three seconds. –No keyboard trap If focus can be moved to component using keyboard, it can also be moved away using keyboard. Tell user of non-standard keystrokes. –Three flashes or below threshold Nothing flashes more than three times in any one second period; flash is below general flash and red flash thresholds. –Pause, stop hide Any moving, blinking, scrolling or auto-updating information that 1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, has mechanism for user to pause, stop or hide it unless it is essential to an activity.

30. Topics -30- Technical Detail There is far more detail about how guidelines can be met. –WCAG 1.0 7.1: Until user agents allow users to control flickering, avoid causing the screen to flicker. [Priority 1]7.1 –WCAG 2.0 2.3.1 Three Flashes or Below Threshold: Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A)Web pages flashgeneral flash and red flash thresholds –Note: Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.Conformance Requirement 5: Non-Interference 2.3.2 Three Flashes: Web pages do not contain anything that flashes more than three times in any one second period. (Level AAA)Web pagesflashes

31. Topics -31- Examples

32. Topics -32- WCAG 2.0 See Handout

33. Topics -33- Creating Accessible Websites--Design Components of website accessibility –OrganizationOrganization –NavigationNavigation –PresentationPresentation –ContentContent

34. Topics -34- Organization Provides context for persons with disabilities, by describing organization of page and content –Metadata –Page Title –Divs –Lists –Headings –Frame Attributes Also improves search engine indexing

35. Topics -35- Organization--Metadata Describes page content and can be used to navigate –Search bots use metadata for indexing –“Link” relationship tag: “Alternate,” “Index,” “Next,” “Prev,” “Home”, etc. recognized by Lynx, Opera, iCab, Firefox* –“Meta” tag within section: “Description,” “Keywords,” “Author” Example: * “Dive Into Accessibility,” http://diveintoaccessibility.org/day_9_providing_additional_navigation_aid s.html http://diveintoaccessibility.org/day_9_providing_additional_navigation_aid s.html

36. Topics -36- Organization--Page Titles First item announced by a screen reader –Can be spoken on request –Press “ plus t” to hear title –Provide contextual information in breadcrumb format “Travelers By Design: Registration” –“Title” tag within section Example: Main Page--Accessibility and Website Design Website Table Formatting—Formats Section--Accessibility and Website Design Website

37. Topics -37- Organization--Div Adds structure and semantic meaning to page content –Is not parsed by screen reader, but enables (for example) content to be read before navigation; facilitates clean code –Can also be a hook for JavaScript operations –“Div” tag within section Example: Zeldman.com turns 10 Another milestone for Jeffrey as zeldman.com turns 10 today More news about zeldman.com

38. Topics -38- Organization--Lists Add structure and semantic meaning to page content –Is announced as “List of x items” –“Ul” and “li” tags within Example: Expert Review User Experience Evaluation Research Training Facility Rental

39. Topics -39- Organization--Headings Provide context and can be used to navigate –Press “h” to move through page –Headings are read aloud along with their level: “Accessible design matters, heading level one” –Press + F6 to see/hear list –“h1,” “h2”, etc. within tag Example: Accessible Design Matters! This Site and You This site has been developed to help you design accessible websites and web-based software.

40. Topics -40- Organization--Frame Attributes Best to avoid frames –Accesskeys don’t work across frames, violates user mental construct of “page” Users may be confused about “page” (frame) they are on or where they are on page –But if you use them… Include “title,” “name,” “% sizing” within tag Use “title” and “name” to describe content Duplicate content in sections Use heading tags (, etc.) for cross-frame navigation

41. Topics -41- Organization—Tips Retrofitting a site –Always work on a duplicate site, not your live site –Validate your code and convert your site to XHTML 1.0 –If you are using Dreamweaver, activate Accessibility prompts –Frequently review your changes, especially changes to CSS Use headings to complement site architecture –Make sure hierarchy (h1, h2) is consistent page to page Avoid using nested lists (i.e., multi-level dropdown menus)

42. Topics -42- Navigation Helps users move easily through site by tabbing or skipping repetitive links Uses screen reader features and browser capabilities –Page Links –Skip Links –Accesskeys –Tab Ordering

43. Topics -43- Navigation--Page Links Users surf by tabbing through links –Can also list links with + f7 –Will read: “Link about this site” Must make sense out of context –Include the “title” attribute User can set screen reader to read longest text Sighted users can see title with mouseover Example: About this site

44. Topics -44- Navigation--Skip Links Enable users to skip over navigation bar –To avoid repetition on each page –Will read: “Skip to main content same page link” Ideally should be visible to help all keyboard users Often used in combination with accesskey –Top of page: ; where content begins: Example: Skip to Main Content Welcome...

45. Topics -45- Navigation--Accesskeys Enable users to go directly to link or form input –Will read: “Destinations link alt plus d” –User presses Alt key plus accesskey to set focus Then press to implement –Should be used sparingly—some say not at all because of browser conflicts If you want to us them, we recommend: –Numeric keys, as suggested by UK eCommerce Dept.

46. Topics -46- Navigation--UK Accesskey Standard UK standard for non-letter-based accesskeys: 1 - Home page 2 - What's new 3 - Site map 4 - Search 5 - Frequently Asked Questions (FAQ) 6 - Help 7 - Complaints procedure 8 - Terms and conditions 9 - Feedback form 0 - Access key details plus S - Skip navigation http://www.cabinetoffice.gov.uk/e- government/resources/handbook/html/2-4.asp

47. Topics -47- Navigation--Accesskey Implementation Example: Accessibility page (0)

48. Topics -48- Navigation--Tab Ordering Enables user to tab through site in logical way –Creates reading order for links and inputs (from “0” to “32767”) –“Taborder” within the tag –Not necessary if web page linearizes (tabs) properly –Tab = “0” enables part of page to receive focus, even if it is not a link or form field Example: About this site (A)

49. Topics -49- Navigation—Tips Ensure navigation text matches destination page titles Accesskeys –Don’t overdo it; 3-4 numeric keys –Include an accesskey to an Accessibility page on your site that tells screen reader users how to navigate your site Make navigation headings clickable and provide a destination page with meaningful content

50. Topics -50- Presentation Not everyone “sees” the same page Blindness, color blindness and visual impairments affect millions of people Meaningful descriptions, adequate contrast and “safe” color combinations help level the playing field –Alt tags –Text images –Links –Relative sizing –Color –Contrast

51. Topics -51- Presentation--Alt Attributes Read by screen readers when image encountered –Concise, relevant description of image –“Alt” attribute within the tag –For more information, provide link to a separate page and add “Longdesc” –Use alt=“” when image does not contain meaningful content Example:

52. Topics -52- Presentation--Text Images CSS or Scalar images can be enlarged without losing definition –Pixel based images (.gif or.jpg), lose clarity when enlarged Examples: HTML text modified by CSS instead –Relative values for text (i.e., “ems”) Scalar vectors (.svg) –Freehand, Illustrator

53. Topics -53- Presentation--Links Use CSS to differentiate: –Visited and unvisited links –Focused and non-focused links (i.e., “hover”) Mirror hyperlinks to destination text –Duplicate the color and intensity of hyperlinks with how they appear in destination pages –Use CSS :hover and the attribute

54. Topics -54- Presentation--Relative Sizing Sites created with relative sizing can be enlarged and retain their shape –Relative sizing allows users to enlarge site to their needs –Use “em,” “%” in style sheets Example:.Title {font-family: Arial, Helvetica, sans-serif; font-size: 1.25em; font-weight: bold; margin-left: 5%; }

55. Topics -55- Presentation--Color Color won’t differentiate objects for everyone 10% of male population is color-blind –Green and red are brown –Bad Example: “Required fields are shown in red”

56. Topics -56- Presentation--Color Acuity To a person without color blindness… …these circles look different.

57. Topics -57- Presentation--Color Acuity To a person with color blindness… …these circles look quite similar.

58. Topics -58- Presentation--Contrast Persons with low vision benefit from Use saturation and not color alone to highlight text –Ensure screen reader emphasis with or attributes high contrast

59. Topics -59- Presentation--Tips Make sure your site is consistent –Visited and unvisited link styles –Layout, navigation, headings Watch out for redundant page titles –Use alt=“” for image logos –Make sure page titles contain the site name Be judicious with images –Include them only if they provide content and caption them –Make them static: change only with page refreshes or give users control over a series of them –Don’t use them for text Use or rather than attribute

60. Topics -60- Content Persons with cognitive issues struggle with meaning and focus Blind persons can’t see data relationships Make your site easy to read –Words and Phrases –Sentence and Paragraph Structure Make your site easy to understand –Table Mark-up –Form Mark-up –Abbreviation and acronym attributes

61. Topics -61- Content--Words and Phrases Your goal is to communicate –Use common words and phrases –Write simply and clearly Let screen reader users skim –Headings –Meaningful phrases for links

62. Topics -62- Content—Sentence and Paragraph Structure Be consistent in style and formatting –Start sentences with the subject –Use lead-in sentences to paragraphs –Have consistent paragraph structure

63. Topics -63- Content--Table Mark-up Blind persons can’t see column or row headings or table structure Context has to be provided for them “Summary,” “Id” and “Headers,” and “Scope” provide information about tables 1.Tell blind users about table structure 2.Associate cell information with headings –Row and column headers, or Scope

64. Topics -64- Table Content—Summary Attribute Is invisible on page, spoken by screen readers before table to give information about data structure –Press “Ctrl + Shift” + t –Will read: “This three by three table…” –“Summary” attribute within tag Example:

65. Topics -65- Table Content--ID and Header Attributes Screen readers can read table column and row headers –Press “Alt + Ctrl” with arrow or with numpad 5 –Will read “Tutorial Introduction,” “Formats Stylesheets” Example: Tutorial Formats Introduction Stylesheets

66. Topics -66- Table Content--Scope Attribute Scope attribute can be used in place of “id” and “headers” Example: Tutorial Formats Introduction Stylesheets

67. Topics -67- Table Content—Caption Tag Caption tag provides additional context Example : Accessibility and User Satisfaction Data=Tables, Layout=CSS

68. Topics -68- Content--Form Mark-up Like table attributes, form mark-up provides screen readers with information about form structure and content “Label For” and “I D”; “Fieldset” and “Legend” Benefits: 1) Associate a label with its input, and 2) Provide context for users.

69. Topics -69- Form Content--Label For and ID Screen readers read labels when text box receives focus –“First name form input” Example: First name:

70. Topics -70- Form Content--Fieldset and Legend Screen readers read legend before form content Use Fieldset and Legend to group questions or sections logically Example: Contact Information

71. Topics -71- Content—Abbreviations & Acronyms Screen readers read titles for abbreviations and acronyms –So users understand reference –Using and attributes Acronyms read letter by letter; SIMS = “S” “I” “M” “S” Abbreviations will (usually) be treated as words: “Sims” Some browsers will also identify them with dotted underlines and mouseover popups Example: abbrev. W3C

72. Topics -72- Content—Tips Keep content concise Keep content consistent Tables –Use attribute to minimize cell coding Forms –Provide additional context for month/day/year forms by including a hidden label before each input box –Add a colon to each legend tag to create a break between headings –Put text in input boxes to add context

73. Topics -73- Evaluating Websites for Accessibility Process –AIS Toolbar + Protocol (http://www.visionaustralia.org.au/info.aspx?page=614)http://www.visionaustralia.org.au/info.aspx?page=614 –Accessibility Evaluation Tools Overview: WAVE 4.0 In-Depth: aChecker (University of Toronto) –JAWS Review

74. Topics -74- AIS Web Accessibility Toolbar HTML, CSS, Links Disable, Show Style Sheets List, Toggle, Show, Maps, Flicker Greyscale, Contrast, Vizcheck Headings, Lists, JavaScript, Accesskeys, Taborder, Tables, Frames, Divs WAVE, Bobby, Lynx, Reading Levels, Analyzers, Simulators Page Info, Metadata, Titles, Frames, Links, Applets/ Scripts Toggle: Images, JS*, ActiveX*, CSS, Text Size, Formatting View Source*, Highlight Source*, Deprec. HTML* Magnify

75. Topics -75- Accessibility Evaluation Tools WAVE 4.0 (http://dev.wave.webaim.org)http://dev.wave.webaim.org –Benefits: Visual, concise, reviews both websites and files –Drawbacks: Limited detail, may overlook some items Web Accessibility Checker (http://achecker.ca/checker/index.php)http://achecker.ca/checker/index.php –Benefits: Thorough, lists errors/alerts by line number, recommends repairs, can drill down for explanations –Drawbacks: Significant level of detail can be daunting, can be slow

76. Topics -76- WAVE 4.0 Demo

77. Topics -77- Web Accessibility Checker Demo

78. Topics -78- Web Accessibility Checklist Beyond compliance, extra step with focus on website usability for persons with disabilities Encapsulates key manual checks

79. Topics -79- Accessibility Checklist--Example SubjectStatusRecommendations ImagesOKImages presenting meaningful content have and/or elements containing useful descriptions. Non-essential images have null tags (“”). LinksOKLinks have unique and meaningful descriptions. Where text descriptions are redundant, title attributes provide differentiation. HeadingsOKHeadings appear in a logical hierarchy, have meaningful labels and there are no levels missing. AccesskeysOKAccesskeys are present and functional. Page TitleOKPage title is descriptive and unique. Tab OrderOKTabbing takes you through document in a logical order. FunctionalityOKTabbing takes you through document without triggering action. Controls work using only keyboard. Style Sheets/ LinearizationOKDocument is useable, readable and sensible with style sheets turned off. ColorsOKSufficient contrast between foreground and background colors; content not differentiated by color alone Text ZoomOKPage is readable and functional at 4X magnification. WAVE ReviewOKPage contains 0 accessibility errors and 10 warnings are accounted for. W3C ValidationOKPage is XHTML 1.0 Transitional compliant.

80. Topics -80- Accessibility Checklist—Home Page SubjectStatusRecommendations ImagesFixRepair images with missing alt tags. Check contrast of LinksFixMost links have unique and meaningful descriptions. Eliminate redundant links wherever possible. HeadingsFixNo headings present. Should be added for main content areas and key subcategories. AccesskeysFixConsider adding accesskeys for: search, skip to content, shopping cart. Page TitleFixPage titles are redundant and do not describe page content. Tab OrderFixSubcategories precede categories in left hand navigation. FunctionalityFixTabbing takes you through document without triggering action. Controls work using only keyboard. Controls do not work with JavaScript turned off. Style Sheets/ LinearizationFixStyle sheets are used minimally. Page appears to linearize okay despite use of nested tables. Text ZoomFixReliance on tables and text images reduces accessibility. WAVE ReviewFixPage contains 3 types of accessibility errors and 3 types of warnings. W3C ValidationFixPage is based on HTML 4.01, and contains invalid and deprecated code.

81. Topics -81- JAWS Demo—Home Page Surf to this address: http://usability.msu.edu Listen for: –Navigation scheme –Page structure –Sentence formatting Experience the UAC site using JAWS: –Listen to page (ins + down arrow) –Check page title (insert + t) –Tab through links and link phrases (tab) –Scan through headings (h) –Search for item (ctrl + f, type “item”) –Review link phrases (insert + f7) –Review headings (insert +f6) –Go to different pages Quit JAWS

82. Topics -82- Questions and Wrap-up

83. Topics -83- Resources A List Apart: http://alistapart.com/http://alistapart.com/ Firefox Add-ons (https://addons.mozilla.org/firefox/):https://addons.mozilla.org/firefox/ –Developers Extension –FANGS (Screen Reader Emulator) –Mozilla Accessibility Extension W3C: http://www.w3c.orghttp://www.w3c.org – WCAG 2.0 Recommendations: http://www.w3.org/TR/UAAG20/http://www.w3.org/TR/UAAG20/ –ARIA 1.0: http://www.w3.org/TR/wai-aria/http://www.w3.org/TR/wai-aria/ Best Practices: http://www.w3.org/TR/2009/WD-wai-aria-practices- 20090224/http://www.w3.org/TR/2009/WD-wai-aria-practices- 20090224/ WAT Add-on: http://www.paciellogroup.com/resources/wat-ie- about.htmlhttp://www.paciellogroup.com/resources/wat-ie- about.html

84. Topics -84- Questions?