1. The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen

2. Seminar overview The web accessibility standards Minnesota has adopted WCAG at a glance: POUR Web page/document structure Do’s and don’ts of building accessible layouts and content Creating accessible Javascript/AJAX Resources for testing and development

3. Making Minnesota accessible Minnesota has adopted WCAG 2.0 for web standards WCAG 2.0 is accepted world-wide and considered standard Compliance at the AA level No need to “re-invent the wheel” with our own standards Everyone benefits from these improvements and standards

4. WCAG at a glance: POUR Developing with accessibility in mind: POUR Perceivable Operable Understandable Robust

5. WCAG at a glance: POUR The POUR principle: perceivable Non-text elements must have a text alternative Provide alternatives for time-based media Create content that can be presented in different ways without losing structure or information Give sufficient distinction between foreground and background (not just text and images of text, but audio and video as well)

6. WCAG at a glance: POUR The POUR principle: operable Make all functionality available from a keyboard Provide sufficient time to read and use content Do not design in ways that cause seizures Provide clear and consistent navigation and context

7. WCAG at a glance: POUR The POUR principle: understandable Set the language of your website Make text readable and understandable Avoid unusual words, spell out abbreviations / acronyms Make your website appear and operate predictably Help your users avoid and correct their mistakes Error prevention (especially with legal, financial, and data)

8. WCAG at a glance: POUR The POUR principle: robust Maximize compatibility with current and future user agents Avoid custom mark-up not universally supported Proper mark-up, closing out all opened tags Support for assistive technologies Bi-product: increased extensibility and a wider user base

9. Knowing the difference: A and AA AA level implies conformance to A and AA AA has additional requirements beyond the A level Key examples: Time-based media Color, contrast and text Page structure and navigation Focus, input and consistent navigation/identification Error identification, suggestion and prevention

10. Exercise one: WCAG at a glance 1.What are the four principles and what do they imply? 2.What are some examples of non-text elements? 3.Why is it important for non-text elements to have a text alternative? 4.What are some benefits of separating content from presentation? 5.True/False: It’s OK to require the user to navigate with a mouse 6.Name three things you can use in your website to increase contextual awareness 7.Name three things you do to make your website more understandable 8.Name three user agents. Explain what WCAG means when it states to maximize compatibility with future agents.

11. Improving page structure The anatomy of your web page Header Body Skip links Consistent heading and navigation Breadcrumb navigation Structured content block Consistent footer with utility links (site map, contact, etc)

12. Page anatomy: header Home / Examples in Accessibility / State of Minnesota

13. Page anatomy: body – skip links Skip to: Menu Content Footer links

14. Page anatomy: body – header/nav Examples in accessibility: images in content Index CSS-controlled layout Document Structure Form elements

15. Page anatomy: body – breadcrumb Home > About > Our Vision Home About Our Vision

16. Page anatomy: body – content My top level of information This is my page content. My secondary level of information Content pertaining to that section. A third level within this second level That third level content. An additional secondary level of H1 Content within this level.

17. Page anatomy: content structure Illustration of heading/document structure Heading one Heading two Heading three Example document structure

18. Conveying relationship A few tags that help convey structure and relationship through /

19. Page anatomy: body – footer Contact us Privacy notice Site map

20. Exercise two: improving structure In this exercise we will review five websites and ask the question: what could be done to improve the page structure, navigability and to better convey the relationship of this page to the rest of the website?

21. Exercise two: improving structure Sample one: Department of Admin (State of Wisconsin)Department of Admin

22. Exercise two: improving structure Sample two: Department of Management (State of Iowa)Department of Management

23. Exercise two: improving structure Sample three: Department of Human Services (State of South Dakota)Department of Human Services

24. Exercise two: improving structure Sample four: State Portal (State of North Dakota)State Portal

25. Exercise two: improving structure Sample five: Atlantic Pilotage Authority (Canada)Atlantic Pilotage Authority

26. Do’s and don’ts: format neutral Layers of separation for web content Content is format neutral CSS Formatting unique to end use Easier to migrate and re-tool Benefits of re-use of content /code Example of CSS-controlled layouts

27. Do’s and don’ts: Forms Label tags for all input points Correct tab sequence Avoid tables for presenting your form, use CSS Must be navigable by keyboard Give sufficient instructions and offer error prevention Example form structure )

28. Do’s and don’ts: navigation & links Consistency from page to page Multiple options to give context and find content Descriptive links – click here is not sufficient Sufficient contrast between background / links Navigable by keyboard

29. Do’s and don’ts: images If using images to convey information, provide alternative Decorative images should be handled by stylesheets Do not use color, size, shape to convey information Avoid excessive flashing (3 flashes per second) Example comparison and usage

30. Do’s and don’ts: tables Tables are meant for tabular data, not layouts Use special table tags to convey data relationship Example tag usage

31. Exercise three: layouts & content 1. Which of the following four sets of HTML is the correct way to present an input field? A: First name: B. First name: (CORRECT) C: First name: D: First name:

32. Exercise three: layouts & content 2. Name three things you can do to reduce user input error in forms: Clearly label each point of input – a label for every field Provide instructions where your request could create some confusion Clearly mark required fields If you require a specific format to an input, call it out and use both client/server-side functionality to enforce the format. (e.g. date formatting set to MM/DD/YYYY) Do not use or rely upon color, size or shape (visuals) to convey meaning (e.g. do not rely upon the color red to indicate a required field or an error, call it out)

33. Exercise three: layouts & content 3. Which of the following is the best use of a hyperlink: a.For more information on our services, click here.click here b.Our list of services is quite extensive, and we invite you to read them. More…More… c.Check out our list of services available to our customers. (CORRECT)list of services d.Check out our list of services available to our customers.Check out

34. Exercise three: layouts & content 4. Name three ways you can make finding and navigating to content easier while improving the overall user experience and accessibility: Consistent navigation on every page Breadcrumb trail Provide a sitemap Include the “path” or site structure in your tag In your content headings (h1) include some level of context

35. Exercise three: layouts & content 5. Of these four images, are they informative or decorative? How else might you present the informative images?

36. Exercise three: layouts & content 6. How would you fix this simple table layout to make it more accessible? Month Income January $15,000 February $14,575

37. Working with client-side scripting Considerations for working with Javascript Javascript is OK, but there are associated risks There is no perfect solution, but can strive for it Number one issue: awareness of changes in the DOM If CSS is hiding it, chances are JAWS won’t know it’s there Return: false – renders anchor tag navigation useless (example 1, example 2)example 1example 2 Provide instructions or clues if you cannot use anchor tag navigation Don’t rely on client-side validation (use server-side as your foundation) Rather use client-side to aid user input

38. WCAG 2.0 resources Resources WCAG 2.0 http://www.w3.org/TR/WCAG20/ WebAIM accessibility testing http://wave.webaim.org/ How people with disabilities use the web http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/ Examples used in this presentation http://accessibility.designbymichael.com/examples/

39. WCAG 2.0 resources Tools and testing: Firefox https://addons.mozilla.org/en-US/firefox/extensions/web-development/ https://addons.mozilla.org/en-US/firefox/extensions/web-development/ WAVE toolbar Web Developer Toolbar WCAG Contrast Checker Fangs Screen Reader Emulator

40. WCAG 2.0 resources Tools and testing: Safari https://extensions.apple.com/#developer https://extensions.apple.com/#developer BetterSource (by Awarepixel)BetterSource Firebug Lite (by Slice Factory)Firebug Lite Unicorn HTML/CSS validator (by Ocoder)Unicorn HTML/CSS validator Validator (by Jerome Danthinne)Validator

41. WCAG 2.0 resources Tools and testing: Google Chrome https://chrome.google.com/extensions/featured/web_dev?hl=en-US https://chrome.google.com/extensions/featured/web_dev?hl=en-US Web Developer View Selection Source HTML Validator

42. WCAG 2.0 resources Tools and testing: Internet Explorer IE developer toolbar native to version 7.0+ Not a widely accessible list of developer add-ons

43. WCAG 2.0 resources Tools and testing: Client-side apps Color Contrast AnalyzerColor Contrast Analyzer (stand-alone contrast checker for Windows) TotalValidator (test for valid HTML, WCAG compliance, spelling, etc) Basic desktop applicationBasic desktop application (free, single-page testing) Pro desktop applicationPro desktop application (inexpensive, site-wide testing) Web-based testingWeb-based testing (free single-page testing) Firefox add-onFirefox add-on (free, single-page testing) WebbIEWebbIE (free browser for those with little or no sight abilities, great for testing) System Access To GoSystem Access To Go (free Windows-based screen reader utility)

44. WCAG 2.0 Q&A Questions? Michael Tangen | web interface designer-developer Office of Enterprise Technology michael.tangen@state.mn.us (651) 201-1045 This presentation was developed in 2010. Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported LicenseCreative Commons Attribution-ShareAlike 3.0 Unported License Rev 2010-12.06.1407