The accessible web developer What it takes to make your website accessible Presenter: Michael...
-
date post
18-Dec-2015 -
Category
Documents
-
view
220 -
download
2
Transcript of The accessible web developer What it takes to make your website accessible Presenter: Michael...
![Page 1: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/1.jpg)
The accessible web developerWhat it takes to make your website accessible
Presenter: Michael Tangen
![Page 2: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/2.jpg)
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
![Page 3: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/3.jpg)
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
![Page 4: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/4.jpg)
WCAG at a glance: POUR
Developing with accessibility in mind: POUR
• Perceivable
• Operable
• Understandable
• Robust
![Page 5: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/5.jpg)
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)
![Page 6: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/6.jpg)
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
![Page 7: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/7.jpg)
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)
![Page 8: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/8.jpg)
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
![Page 9: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/9.jpg)
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
![Page 10: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/10.jpg)
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.
![Page 11: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/11.jpg)
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 12: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/12.jpg)
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 13: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/13.jpg)
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 14: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/14.jpg)
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 15: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/15.jpg)
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 16: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/16.jpg)
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 17: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/17.jpg)
Page anatomy: content structure
Illustration of heading/document structure
• Heading one• Heading two
• Heading three• Heading three• Heading three
Example document structure
![Page 18: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/18.jpg)
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 19: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/19.jpg)
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>
![Page 20: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/20.jpg)
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?
![Page 21: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/21.jpg)
Exercise two: improving structure
Sample one: Department of Admin (State of Wisconsin)
![Page 22: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/22.jpg)
Exercise two: improving structure
Sample two: Department of Management (State of Iowa)
![Page 23: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/23.jpg)
Exercise two: improving structure
Sample three: Department of Human Services (State of South Dakota)
![Page 24: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/24.jpg)
Exercise two: improving structure
Sample four: State Portal (State of North Dakota)
![Page 25: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/25.jpg)
Exercise two: improving structure
Sample five: Atlantic Pilotage Authority (Canada)
![Page 26: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/26.jpg)
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
![Page 27: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/27.jpg)
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
)
![Page 28: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/28.jpg)
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
![Page 29: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/29.jpg)
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
![Page 30: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/30.jpg)
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
![Page 31: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/31.jpg)
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>
![Page 32: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/32.jpg)
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)
![Page 33: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/33.jpg)
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.
![Page 34: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/34.jpg)
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
![Page 35: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/35.jpg)
Exercise three: layouts & content
5. Of these four images, are they informative or decorative?
How else might you present the informative images?
![Page 36: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/36.jpg)
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>
![Page 37: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/37.jpg)
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
![Page 38: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/38.jpg)
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/
![Page 39: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/39.jpg)
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
![Page 40: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/40.jpg)
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)
![Page 41: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/41.jpg)
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
![Page 42: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/42.jpg)
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
![Page 43: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/43.jpg)
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)
![Page 44: The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d245503460f949fa912/html5/thumbnails/44.jpg)
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