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 Improving your page structure Do’s and don’ts of building accessible layouts and content Practicum: applying this to your website Testing your website for accessibility Accessible use of jQuery and JavaScript Resources to help you along the way

3. Making Minnesota accessible Minnesota has adopted WCAG 2.0 for web standards 2009 Chapter Law 131/HF 1744 — May 21, 2009 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 Understanding the POUR principle

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

6. 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)

7. 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

8. 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)

9. 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

10. Knowing the difference: A and AA Three standard levels: A (lowest), AA (moderate), AAA (high) AA level implies conformance to A and AA AA has additional requirements beyond the A level Key examples: Time-based media Sufficient contrast for visual and audio materialast for visual and audio material Keyboard navigation Keyboard navig Navigation and providing context to the userr Input assistance Input assistanc

11. 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.

12. Improving your page structure The anatomy of a good web page

13. Improving page structure The anatomy of your web page Header Title Metadata CSS/JS Body Skip links Consistent heading and navigation/breadcrumb Structured content block Consistent footer with utility links (site map, contact, etc)

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

15. Page anatomy: body – skip links Skip to: Content

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

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

18. 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.

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

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

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

22. 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?

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

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

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

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

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

28. The do’s and don’ts of accessibility Making your layouts and content accessible

29. 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

30. Do’s and don’ts: format neutral No formatting in your content or source HTML No font tags No embedded table formatting Avoid embedded style information Source code should render in read-order Stylesheets handle all the formatting

31. 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 )

32. 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

33. 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

34. 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

35. 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: C. First name: D. First name: ANSWERS: B & C

36. Exercise three: layouts & content 2. Name three things you can do to reduce user input error in forms. ANSWERS: 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)

37. 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… c.Check out our list of services available to our customers.Checks available to o d.Check out our list of services available to our customers.available ANSWER: C

38. 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. Answers: 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

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

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

41. Practicum How to apply and integrate accessibility

42. Practically applying accessibility Know what’s required in WCAG 2.0 Build it right from the ground-up Legacy sites: test and modify Integrate accessibility into your process )

43. Testing your website for accessibility Tools and tips to make testing easy

44. Testing for accessibility Test for cross-browser compatibility Test with JavaScript disabled Test with CSS disabled Run your website through validation tools )

45. Creating accessible jQuery & JavaScript Dispelling the myths about inaccessibility

46. Accessible client-side scripting Starting point: page rendered with no JavaScript Manipulating the DOM Working with forms AJAX calls to external data sources Notification issues with changing the DOM

47. 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 webow people with disabili http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/ Examples used in this presentationmples used in this presentation http://acceshttp://accessibility.designbymichael.com/examples/

48. 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 Emulatorreen Reader

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

50. 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

51. 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

52. WCAG 2.0 resources Tools and testing: Client-side apps Color Contrast AnalyzerColor Contrast Analyzer (stand-alone contrast checker for Windows & Mac) TotalValidator (test for valid HTML, WCAG compliance, spelling, etc) Basic desktop application (free, single-page testing)on (free, single-page tes Pro desktop application (inexpensive, site-wide testing)testing) Web-based tesWeb-based testing (free single-page testing) Firefox add-on (free, single-page testing)gle-page testing) WebbIE (free PC browser for those with little or no sight abilities, great for testing)e or no sight System Access To Go (free Windows-based screen reader utility)To Go Mac users: VoiceOver under Universal Access in the System Preferences n the System Prefer

53. 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, updated May 2011. Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported LicenseCreative Commons Attribution-ShareAlike 3.0 Unported License Rev 2011-05.08.2220