Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
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
• 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 glanceUnderstanding 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
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 your page structureThe 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>
PracticumHow 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 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 & Mac)
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 PC browser for those with little or no sight abilities, great for testing)System Access To Go (free Windows-based screen reader utility)Mac users: VoiceOver under Universal Access in the System Preferences
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, updated May 2011. Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported LicenseRev 2011-05.08.2220
