The accessible web developer

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

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

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

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

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)

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

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)

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

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

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

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)

Page anatomy: header <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="en" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Home / Examples in Accessibility / State of Minnesota</title> <link rel="stylesheet" type="text/css" media="screen"href="css/screen.css" /> <script language="javascript" type="text/javascript" src="js/myjsfile.js"></script> </head>

Page anatomy: body – skip links <body> <div id="skiplinks"> <a name="top"></a> Skip to: <ul> <li><a href="#menu">Menu</a></li> <li><a href="#content">Content</a></li> <li><a href="#footer">Footer links</a></li> </ul> </div>

Page anatomy: body – header/nav <div id="header"> <h1>Examples in accessibility: images in content</h1> <a name="menu"></a> <ul> <li><a href="index.html" class="currentpage">Index</a></li> <li><a href="css-layout.html">CSS-controlled layout</a></li> <li><a href="document-structure.html">Document Structure</a></li> <li><a href="form-elements.html">Form elements</a></li> </ul> </div>

Page anatomy: body – breadcrumb Home > About > Our Vision <div id="breadcrumb"> <ul> <li><a href="index.html">Home</a></li> <li><a href="/about/index.html">About</a></li> <li><a href="/about/ourvision.html" class="current">Our Vision</a></li> </ul> </div>

Page anatomy: body – content <div id="content"> <a name="content"></a> <h1>My top level of information</h1> <p>This is my page content.</p> <h2>My secondary level of information</h2> <p>Content pertaining to that section.</p> <h3>A third level within this second level</h3> <p>That third level content.</p> <h2>An additional secondary level of H1</h2> <p>Content within this level.</p> </div>

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

Conveying relationship • A few tags that help convey structure and relationship • <abbv> <acronym> • <dl> <dt> <dd> • <dfn> • <thead> <tfoot> <tbody> • <h1> through <h6> • <ul> / <ol> <li>

Page anatomy: body – footer <div id="footer"> <a name="footer-menu"></a> <ul> <li><a href="contact.html">Contact us</a></li> <li><a href="privacy.html">Privacy notice</a></li> <li><a href="sitemap.html">Site map</a></li> </ul> </div>

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?

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

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

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

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

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

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

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 )

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

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

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

Exercise three: layouts & content 1. Which of the following four sets of HTML is the correct way to present an input field? A: <div>First name:</div> <input type=”text” name=”firstname” id=”firstname” /> B. <label for=”firstname”>First name:</label> <input type=”text” name=”firstname” id=”firstname” /> (CORRECT) C: <label>First name: <input type=”text” name=”firstname” id=”firstname” /></label> D: <table><tr> <td>First name:</td> <td><input type=”text” name=”firstname” id=”firstname” /></td> </tr></table>

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)

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. • 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. (CORRECT) • d. Check out our list of services available to our customers.

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 <title> tag • In your content headings (h1) include some level of context

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

Exercise three: layouts & content 6. How would you fix this simple table layout to make it more accessible? <table> <thead> <tr> <td><b>Month</b></td> <td><b>Income</b></td> </tr> </thead> <tbody> <tr> <td>January</td> <td>$15,000</td> </tr> <tr> <td>February</td> <td>$14,575</td> </tr> </tbody> </table>

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) • 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

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/

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

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

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

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

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

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 License Rev 2010-12.06.1407

The accessible web developer