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

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

WCAG at a glance • Understanding the POUR principle

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 • 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 material • Keyboard navigation • Navigation and providing context to the user • Input assistance

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 your page structure • The anatomy of a good web page

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)

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> <title>Home / Examples in Accessibility / State of Minnesota</title> <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" /> <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> <a href="#content">Skip to: Content</a> </div>

Page anatomy: body – header/nav <div id="header"> <h1>Examples in accessibility: images in content</h1> <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"> <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)

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

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

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” /> • 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> • ANSWERS: B & C

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)

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. • d. Check out our list of services available to our customers. • ANSWER: C

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 <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? ANSWER: <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>

Practicum • How to apply and integrate accessibility

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 )

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

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

Creating accessible jQuery & JavaScript • Dispelling the myths about inaccessibility

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

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

The accessible web developer