Embed Size (px)
Citation preview
The accessible web developerWhat 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
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.
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 resourcesResources
WCAG 2.0http://www.w3.org/TR/WCAG20/
WebAIM accessibility testinghttp://wave.webaim.org/
How people with disabilities use the webhttp://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/ Examples used in this presentationhttp://accessibility.designbymichael.com/examples/
WCAG 2.0 resources
Tools and testing: Firefox https://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-developerOffice of Enterprise [email protected] (651) 201-1045
This presentation was developed in 2010. Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported LicenseRev 2010-12.06.1407
