tag:blogger.com,1999:blog-374269962024-02-19T23:32:26.532-08:00AccessWebUBuzz, thoughts, and observations on the ongoing efforts to build information technologies that work for all people at the University of Washington. A blog of the AccessibleWeb@U interest group.Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.comBlogger42125tag:blogger.com,1999:blog-37426996.post-37991295284899970122015-09-29T10:31:00.002-07:002015-09-29T10:31:34.025-07:00Accessibility Evaluations With Cheap, Readily Available Tools<h2>
<div style="font-size: medium; font-weight: normal;">
Next Meeting: Thursday, October 22. The topic will be captioning videos</div>
</h2>
<h2>
Your Keyboard – Unplug Your Mouse and Don’t Touch Your Touchpad</h2>
<h2>
<div style="font-size: medium; font-weight: normal;">
Navigating With Your Keyboard (from <a href="http://uw.edu/acccessibility/checklist/keyboard/">http://uw.edu/acccessibility/checklist/keyboard/</a>)</div>
<ul style="font-size: medium; font-weight: normal;">
<li><strong>Tab</strong> – move to the next link, form element or button.</li>
<li><strong>Shift+Tab</strong> – move to the previous link, form element, or button.</li>
<li><strong>Enter</strong> – activate the current link or button.</li>
<li><strong>Space</strong> – check or uncheck a checkbox form element. Will also activate a button that currently has focus.</li>
<li><strong>Up/Down arrow keys</strong> – move between radio buttons or, in some cases, menu links.</li>
<li><strong>Right/Left arrow keys</strong> – in some cases, move between menu links or adjust sliders in audio and video plugins.</li>
<li><strong>Escape</strong> – Close the current modal dialog or dropdown menu and return focus to the element that spawned it.</li>
</ul>
<div style="font-size: medium; font-weight: normal;">
Just exploring a webpage or website with your keyboard (no mouse, no touchpad) can reveal the following:</div>
<ul style="font-size: medium; font-weight: normal;">
<li>Is the location of focus indicated somehow, such as by a change in color or a border around the element with focus?</li>
<li>Is the sequence of content coherent?</li>
<li>Are the link texts understandable and not repetitive?</li>
<li>Is the menu navigable by the keyboard (tabs, arrow keys, escape key)</li>
</ul>
</h2>
<h2>
Colour Contrast Analyser – Paciello Group</h2>
<h2>
<ul style="font-size: medium; font-weight: normal;">
<li>Available for Mac and Windows at <a href="http://www.paciellogroup.com/resources/contrastanalyser/">http://www.paciellogroup.com/resources/contrastanalyser/</a></li>
<li>Goal (level AA): Text (and images of text) have a contrast ration of at least 4.5:1, except where the text is pure decoration. Large scale test (at least 18 point or 14 point bold) or images of text can have a contrast ratio of 3:1.</li>
</ul>
<div style="font-size: medium; font-weight: normal;">
The Colour Contrast Analyser (note the Aussie spelling) is a very capable tool for assessing color choices</div>
<ul style="font-size: medium; font-weight: normal;">
<li>Contrast between text color and its background; the smaller the text, the greater should be the contrast</li>
<li>Color choices that may not be very discernable by people with color blindness</li>
<li>Developing an understanding of the relationship between design ideas and visibility for people with various kinds of visual limitations</li>
<li>Information on Contrast can be found at <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html</a></li>
</ul>
</h2>
<h2>
Web Developer Toolbar – Chris Pederick</h2>
<h2>
<ul style="font-size: medium; font-weight: normal;">
<li>Available for Chrome, Firefox, and Opera at <a href="http://chrispederick.com/work/web-developer/help/">http://chrispederick.com/work/web-developer/help/</a>)</li>
<li>Use the Toolbar to evaluate the use of headings in the page, the presence and use of ARIA roles, the sequence of text in the page, and the division structure of the page.</li>
</ul>
<div style="font-size: medium; font-weight: normal;">
The Toolbar has a whole set of tools you can use to figure out what is going on on a webpage</div>
<ul style="font-size: medium; font-weight: normal;">
<li>Use "Information -> View Document Outline" to see the structure of headings in the page. Are there appropriate headings and subheadings and are they hierarchical?</li>
<li>Use "Outline -> Headings" to draw outlines around headings on the page. Are all headings on the page outlined? Headings that are not outlined have been created without using the <h> tags and will not be interpreted as headings by assistive software.</li>
<li> Use "Information -> Display ARIA roles" to see how ARIA attributes have been used on the pages. Are there any ARIA attributes? If so, have they been used to identify the role of each of the major segments of the page?</li>
<li>Use "CSS -> Disable All Styles" to see what the page content is like without the color, font and layout provided by CSS. Is the text in a coherent sequence?</li>
</ul>
</h2>
<h2>
Free Voice Browsers</h2>
<h2>
<ul style="font-size: medium; font-weight: normal;">
<li>Apple VoiceOver screen browser is on every Apple desktop, laptop, tablet, and smartphone. Learn it. Use it to experience listening to and navigating your pages by feel alone.</li>
<ul>
<li>VoiceOver Getting Started - <a href="https://www.apple.com/voiceover/info/guide/">https://www.apple.com/voiceover/info/guide/</a></li>
<li>VoiceOver for OSX - <a href="http://www.apple.com/accessibility/osx/voiceover/">http://www.apple.com/accessibility/osx/voiceover/</a></li>
<li>VoiceOver for iOS - <a href="http://www.apple.com/accessibility/osx/voiceover/">http://www.apple.com/accessibility/osx/voiceover/</a></li>
</ul>
<li>NVDA Screen Reader (<a href="http://www.nvaccess.org/">http://www.nvaccess.org/</a>) is free and quite capable screen reader for Windows</li>
</ul>
</h2>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-75651694547216373892015-08-31T11:02:00.003-07:002015-08-31T11:02:23.494-07:00Screen Readers on Touchscreen Devices<div class="MsoNormal">
Nielsen/Norman Group’s Katie Sherwin just posted an article
discussing the experience of a blind person trying to interact with a
touchscreen device and its rich vocabulary of gestures. The complexity of the
interface, plus the many gestures available can create quite a “cognitive load”
as the blind user tries to maintain an idea of what is happening on the screen
to know what gestures to use. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
While some products have experimented with tactile/haptic
interfaces that give physical feedback, the potential of such designs is limited.
The better answer, Sherwin argues, to simplify content and workflow so people
can accomplish their goals more efficiently. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Screen Readers on Touchscreen devices<o:p></o:p></div>
<br />
<div class="MsoNormal">
<a href="http://www.nngroup.com/articles/touchscreen-screen-readers/">http://www.nngroup.com/articles/touchscreen-screen-readers/</a><o:p></o:p></div>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-71301723777580024042015-08-31T11:01:00.001-07:002015-08-31T11:04:58.353-07:00AccessibleWeb@U August 27 Meeting Notes<div class="MsoNormal">
<span style="font-size: 14.0pt;">We had a small group but a
good discussion:<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-left: 15.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">Windows
10 Edge browser</span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 30.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level2 lfo1; tab-stops: list 1.0in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">If
you have not switched to Windows 10 yet, Microsoft offers a virtual machine
version of Edge that you can download for testing at <a href="http://dev.modern.ie/tools/vms/windows/">http://dev.modern.ie/tools/vms/windows/</a>
(Pointed out by Anna Marie Golden)</span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 30.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level2 lfo1; tab-stops: list 1.0in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">The
SSB Bart Group has evaluated Edge and sees it as a much improved replacement
for IE, which will be deprecated. See <a href="http://www.ssbbartgroup.com/blog/release-of-the-windows-10-edge-browser-what-it-means-for-accessibility-and-aria-support-in-ie/">http://www.ssbbartgroup.com/blog/release-of-the-windows-10-edge-browser-what-it-means-for-accessibility-and-aria-support-in-ie/</a>
(Pointed out by Jonathan Swanson</span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 15.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">Basic
accessibility evaluation tools</span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 30.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level2 lfo1; tab-stops: list 1.0in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">Chris
Pederick's Web Developer Toolbar, available for Chrome, FireFox, and Opera at <a href="http://chrispederick.com/work/web-developer/">http://chrispederick.com/work/web-developer/</a></span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 45.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level3 lfo1; tab-stops: list 1.5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">Use
"Information -> View Document Outline" to see the structure of
headings in the page. Are there appropriate headings and subheadings and are
they hierarchical?</span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 45.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level3 lfo1; tab-stops: list 1.5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">Use
"Outline -> Headings" to draw outlines around headings on the
page. Are all headings on the page outlined? Headings that are not outlined
have been created without using the <h> tags and will not be interpreted
as headings by assistive software.</span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 45.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level3 lfo1; tab-stops: list 1.5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">Use
"Information -> Display ARIA roles" to see how ARIA attributes
have been used on the pages. Are there any ARIA attributes? If so, have they
been used to identify the role of each of the major segments of the page?</span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 45.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level3 lfo1; tab-stops: list 1.5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">Use
"CSS -> Disable All Styles" to see what the page content is like
without the color, font and layout provided by CSS. Is the text in a coherent
sequence? </span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 30.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level2 lfo1; tab-stops: list 1.0in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">Apple
VoiceOver screen browser is on every Apple desktop, laptop, tablet, and
smartphone. Learn it. Use it to experience listening to and navigating your
pages by feel alone.</span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 45.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level3 lfo1; tab-stops: list 1.5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">VoiceOver
Getting Started - <a href="https://www.apple.com/voiceover/info/guide/">https://www.apple.com/voiceover/info/guide/</a></span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 45.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level3 lfo1; tab-stops: list 1.5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">VoiceOver
for OSX - <a href="http://www.apple.com/accessibility/osx/voiceover/">http://www.apple.com/accessibility/osx/voiceover/</a></span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 45.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level3 lfo1; tab-stops: list 1.5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">VoiceOver
for iOS - <a href="http://www.apple.com/accessibility/osx/voiceover/">http://www.apple.com/accessibility/osx/voiceover/</a></span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<ul style="margin-top: 0in;" type="disc">
<li class="MsoNormal" style="color: #333333; mso-line-height-alt: 12.75pt; mso-list: l0 level1 lfo1; tab-stops: list .5in; vertical-align: baseline;"><span style="font-size: 14.0pt; mso-fareast-font-family: "Times New Roman";">NVDA
Screen Reader (<a href="http://www.nvaccess.org/">http://www.nvaccess.org/</a>)
is free and quite capable screen reader for Windows<o:p></o:p></span></li>
</ul>
<div class="MsoNormal" style="margin-left: 30.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level2 lfo1; tab-stops: list 1.0in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">Your
keyboard, without mouse or touchpad</span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 45.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level3 lfo1; tab-stops: list 1.5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">WebAIM's
Keyboard Accessibility - <a href="http://webaim.org/techniques/keyboard/">http://webaim.org/techniques/keyboard/</a></span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-left: 45.0pt; mso-line-height-alt: 12.75pt; mso-list: l0 level3 lfo1; tab-stops: list 1.5in; text-indent: -.25in; vertical-align: baseline;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Symbol; font-size: 10.0pt; mso-bidi-font-family: Symbol; mso-bidi-font-size: 14.0pt; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="border: none windowtext 1.0pt; color: #333333; font-size: 14.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">Social
Security's Accessibility Help - <a href="http://www.ssa.gov/accessibility/keyboard_nav.html">http://www.ssa.gov/accessibility/keyboard_nav.html</a>
</span><span style="color: #333333; font-size: 14.0pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal">
<br /></div>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-11225630636205678452015-08-14T14:11:00.003-07:002015-08-14T14:11:57.709-07:00Accessibility of Front-end TechnologiesOn Friday, August 7, I gave a quick talk to the Front-end Technologies Community of Practice meeting. About 40 interface developers from UW campuses were in attendance.<br />
<br />
My slidedeck is available as a PDF at <a href="http://staff.washington.edu/rells/accessibility/front-end-technologies.pdf">http://staff.washington.edu/rells/accessibility/front-end-technologies.pdf</a><br />
<br />
<div class="MsoNormal">
Special thanks to Jeane Marty for organizing the Front-end
Technologies CoP and lining up a great program. I am looking forward to future
programs. <u5:p></u5:p><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The CoP web site is at <a href="http://depts.washington.edu/frontend/">http://depts.washington.edu/frontend/</a>
Meetings are generally on the first Friday of each month. See the website for
specifics.<u5:p></u5:p><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
The CoP email list is at <a href="https://mailman1.u.washington.edu/mailman/listinfo/frontenddev">https://mailman1.u.washington.edu/mailman/listinfo/frontenddev</a><u5:p></u5:p><o:p></o:p></div>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-21012444132631832922015-08-14T08:45:00.000-07:002015-08-14T08:45:37.331-07:00Info-graphics About Topics Related to Disabilities<div class="MsoNormal">
Home Healthcare Adaptations, a company based in Dublin
Ireland, likes to create info-graphics about topics related to disabilities:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Best Mobile Apps for Sensory Impairment<o:p></o:p></div>
<div class="MsoNormal">
<a href="http://www.home-healthcare-adaptations.ie/best-mobile-apps-sensory-impairment/">http://www.home-healthcare-adaptations.ie/best-mobile-apps-sensory-impairment/</a><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
World Disability Facts<o:p></o:p></div>
<div class="MsoNormal">
<a href="http://www.home-healthcare-adaptations.ie/world-disability-facts-infographic/">http://www.home-healthcare-adaptations.ie/world-disability-facts-infographic/</a><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Assistive Technology Gadgets That Could Change Your Life<o:p></o:p></div>
<div class="MsoNormal">
<a href="http://www.home-healthcare-adaptations.ie/assistive-technology-gadgets/">http://www.home-healthcare-adaptations.ie/assistive-technology-gadgets/</a><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Interesting info about some clever technologies.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
Of course, the infographics have only brief alt texts and no
longdesc texts. Sigh. <o:p></o:p></div>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-30665123950454584342015-06-26T09:43:00.004-07:002015-06-26T09:43:25.756-07:00Creating Accessible Documents With Office 365 Word Online<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-left: .25in; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: 'Times New Roman', serif; font-size: 13.5pt;">General Conclusions:
Word Online has potential since everyone working on a document through Word
Online is running the same program. If good methods are followed (see below)
the result is a Word document that is generally accessible. Export to PDF works
relatively well, but not perfectly. <o:p></o:p></span></div>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 18pt;">Accessible Documents<o:p></o:p></span></b></div>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 13.5pt;">The Basics<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Use
headings<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Use
lists<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Add
alternate text to images<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Identify
document language<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Use
tables wisely<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Understand
how to export to other formats<o:p></o:p></span></li>
</ul>
<div class="MsoNormal">
<span style="font-family: 'Times New Roman', serif; font-size: 13.5pt;">http://www.washington.edu/accessibility/documents/<o:p></o:p></span></div>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 18pt;">Goals<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Structured
content<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Tagged
elements in the structure<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Tags have “semantic” meaning to help assistive
software understand what the element is<o:p></o:p></span></li>
</ul>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">More
than just looking good<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Looking good does not help if you can’t see it<o:p></o:p></span></li>
</ul>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Meta
information, such as language and alt text<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Structure
and tags transfer when document is exported to other formats<o:p></o:p></span></li>
</ul>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 18pt;">Challenges<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Habitual
use of visual approach<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Multiple
versions of Word<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Members of the team developing the document may each
have different Word versions with different abilities<o:p></o:p></span></li>
</ul>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Providing
comment and edit features<o:p></o:p></span></li>
</ul>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 18pt;">Methods<o:p></o:p></span></b></div>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 13.5pt;">Headings<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Use
Heading styles in Styles menu<o:p></o:p></span></li>
</ul>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 13.5pt;">Lists<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Use
bulleted and numbered lists from Paragraph menu<o:p></o:p></span></li>
</ul>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 13.5pt;">Adding Alt text to
images<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Place
graphic, right mouse click, select Format Picture, select Alt Text from
popup, enter text into Title field and Description field, Close<o:p></o:p></span></li>
</ul>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 13.5pt;">Identify document
language<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Click
Review, then Language, then Set Proofing Language, then select language
(you may want to click Set As Default)<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Otherwise the language is only set for selected text<o:p></o:p></span></li>
</ul>
</ul>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 13.5pt;">Use tables wisely<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Keep
them simple<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Identify
the column header row<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Select the header row<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Right click on the row and select Table Properties<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Click Row tab<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Check “Repeat as header row at top of each page”<o:p></o:p></span></li>
</ul>
</ul>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 13.5pt;">Exporting to other
formats while preserving tabs and structure<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Method
depends on Word version<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Do
not print to PDF (tags will be lost)<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">On
Word 2013 and Word 2010<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Use File Save As, selecting PDF<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Click on Options, make sure Document Structure Tags
for Accessibility is checked<o:p></o:p></span></li>
</ul>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Mac
Word 2011 does not export accessible PDFs<o:p></o:p></span></li>
</ul>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 18pt;">Office 365 Word Online<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Microsoft
Office 365 ProPlus available at no charge to all students, faculty, and
staff
(https://www.washington.edu/itconnect/wares/uware/microsoft/microsoft-office-365-proplus/)<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Online
distribution (in the cloud)<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Works
on PC, Mac, iPad, iPhone, and Windows and Android phones<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Avoids
the problem of people working on different versions<o:p></o:p></span></li>
</ul>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 18pt;">Giving Word Online a Try<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Microsoft
wants you to download their complete set of Office software to your local
computer and use it in conjunction with Office 365 and all of its cloud
based components.<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">All
of the functionality described above is available in Word Online, although
the specifics of where they are in the menus vary a bit<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">The
accessibility checker that is part of later versions of the Word app does
not seem to be in Word Online, but you can open your current file in your
Word app to run a check.<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Saving
the document to PDF using Save As -> Download as PDF produced a PDF
file that passed Adobe Acrobat Pro's accessibility scan with few problems.<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Word Online does not seem to offer a way to associate
a Title with the document that Adobe Acrobat Pro recognizes.<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">The ALT text given to the image was not recognized by
Adobe Acrobat Pro. When I saved the image to PDF from the Word 2010 app,
the same thing happened.<o:p></o:p></span></li>
</ul>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">If
everyone on a team uses Word Online to develop a document, they all have
the same version of software, they can use the same features, and the
result is a document that is itself accessible and which can export to an
accessible PDF file.<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Files
are stored in your account space in the cloud and can be shared to other
people.<o:p></o:p></span></li>
</ul>
<div class="MsoNormal">
<b><span style="font-family: 'Times New Roman', serif; font-size: 18pt;">Discussion<o:p></o:p></span></b></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">How
well will it work to create text in Word Online, then select/copy/paste it
into Canvas?<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Can
multiple people edit the same Word Online document at the same time, as in
Google Docs?<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Are
there other tools for assessing the accessibility of a Word file and PDF
file?<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Which
is the better choice, Google Docs or Word Online?<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";">Can
Word Online be used to prepare footnotes?<o:p></o:p></span></li>
</ul>
<br />
<div class="MsoNormal">
<br /></div>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-3154821845008841382015-06-05T08:30:00.003-07:002015-06-05T08:30:15.716-07:00AccessibleWeb@U May 28 Meeting NotesSome quick notes on last week’s AccessibleWeb@U meeting<br />
<br />
<b>University of Washington Information Technology Accessibility Guidelines (<a href="http://www.washington.edu/accessibility/guidelines/">http://www.washington.edu/accessibility/guidelines/</a>)</b><br />
<ul>
<li>Signed on May 1 by Kelli Trosvig, VP of UW Information Technology and UW Chief Information Officer</li>
<li>They are guidelines, not policies</li>
<li>Affirms UW commitment to "in its services, programs, activities, education, and employment for individuals with disabilities." This commitment includes access to information technology (IT) that the UW develops, procures, or uses, such as websites, software, hardware, and media.”</li>
<li>States that “The UW looks to the Web Content Accessibility Guidelines (WCAG) 2.0 developed by the World Wide Web Consortium (W3C) Level AA for guidance in meeting its IT accessibility commitments. WCAG 2.0 provides success criteria for measuring web accessibility.”</li>
<li>Points to the UW IT Accessibility Checklist (<a href="http://www.washington.edu/accessibility/checklist/">http://www.washington.edu/accessibility/checklist/</a>) for specifics.</li>
<li>PDF version available at <a href="http://www.washington.edu/accessibility/files/2015/04/UW_IT_Accessibility_Guidelines.pdf">http://www.washington.edu/accessibility/files/2015/04/UW_IT_Accessibility_Guidelines.pdf</a></li>
</ul>
<b>IT Accessibility Checklist (<a href="http://www.washington.edu/accessibility/checklist/">http://www.washington.edu/accessibility/checklist/</a>)</b><br />
<ul>
<li>Organized by Perceivable, Operable, Understandable, Robust categories</li>
<li>Closely coordinated with the WCAG 2 level AA criteria</li>
</ul>
<b>Discussion</b><br />
<ul>
<li>Demonstrated how the Checklist can be used to find guidance on specific questions, such as how to do a Skip to Content link</li>
<li>Also discussed the No Mouse campaign (<a href="http://nomouse.org/">http://nomouse.org/</a>)</li>
</ul>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-38344937929469519542015-03-04T10:47:00.001-08:002015-03-04T10:47:04.568-08:00Feb. 26 AccessibleWeb@U Meeting Notes<div class="MsoNormal">
Below is a link to the slides Sheryl used in her talk on
Thursday, February 26. A special thanks to Sheryl for all her work and for her
presentation.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt;">Topic: <b>Overview
of IT Accessibility Issues & Our UW Journey</b><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt;">
Speaker: Sheryl Burgstahler, Director,
UW-IT Accessible Technology Services<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoPlainText">
Sheryl will guide us through the current state of IT
accessibility issues in higher education and describe the steps being taken at
the UW to address those issues. Topics with include defining what
"accessible" means, lessons learned from legal cases, defining our IT
accessibility goals, and work currently underway to take us toward those goals.
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt;"> <a href="http://staff.washington.edu/rells/accessibleweb/burgstahler0226.pdf">http://staff.washington.edu/rells/accessibleweb/burgstahler0226.pdf</a><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<br /></div>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-13263618515945626722015-02-23T13:10:00.003-08:002015-02-24T11:12:19.989-08:00February 26 Meeting: Overview of IT Accessibility Issues & Our UW JourneyTopic: <b>Overview of IT Accessibility Issues & Our UW Journey</b><br />
Speaker: Sheryl Burgstahler, Director, UW-IT Accessible Technology Services<br />
Date: Thursday, February 26, 2015<br />
Time 11:30 a.m. to 1:00 p.m.<br />
Location: Allen Auditorium<br />
<p>Sheryl will guide us through the current state of IT accessibility issues in higher education and describe the steps being taken at the UW to address those issues. Topics with include defining what "accessible" means, lessons learned from legal cases, defining our IT accessibility goals, and work currently underway to take us toward those goals.</p><hr /><p><i>AccessibleWeb@U meetings are held on the fourth Thursday of each month in Allen Auditorium. You can subscribe to (or unsubscribe from) the AccessibleWeb@U mailing list at <a href="https://mailman2.u.washington.edu/mailman/listinfo/accessibleweb">https://mailman2.u.washington.edu/mailman/listinfo/accessibleweb</a>. Notes from past AccessibleWeb@U meetings are available on our funky AccessWebU blog at <a href="http://accesswebu.blogspot.com/">http://accesswebu.blogspot.com/</a>.</i></p><p><i>The Allen Auditorium is located in the part of the Allen Library directly attached to Suzzallo Library, on the northeast corner of the room with the help desk and the crows.</i></p>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-37160111661596365952015-01-28T11:52:00.002-08:002015-02-23T13:22:32.144-08:00Creating Accessible PDFs With Adobe InDesign<span class="name" style="background: rgb(255, 255, 255); border: 0px; color: #333333; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">AccessibleWeb - Creating Accessible PDFs With Adobe InDesign</span><br />
<span class="name" style="background: rgb(255, 255, 255); border: 0px; color: #333333; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">January 22, 2015, Rick Ells</span><br />
<ul style="background: rgb(255, 255, 255); border: 0px; color: #333333; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; line-height: 17px; list-style-image: initial; list-style-position: initial; margin: 15px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>Making Them Right to Begin With</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Making a PDF accessible after it has been created is difficult, sometimes impossible</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Use the capabilities of your publishing program to enable it to generate accessible PDFs</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>What Assistive Technology Needs</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Language</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Structure</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Flow</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Tagged Text</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Headers</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Alt text for graphics</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>The InDesign-to-Accessible-PDF Workflow</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">In InDesign</span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Define paragraph styles, including headers</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Paragraph Styles mapped to Export Tags</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Thread text into a flow</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Anchor images in text flow</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Give images alt text</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Create any bookmarks, table of contents, hyperlinks, or cross-references</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Define content order in Articles panel</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Add file metadata</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">In Adobe Acrobat Pro</span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Assign language</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Set tab order to Use Document Structure</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Run Accessibility Check and do further tweaks as needed</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">The advantage of this workflow is that you are setting up structure, order and alt texts in InDesign, and then simply using that document structure, rather than trying to define that structure in Adobe Acrobat. From personal experience I can say that doing all that in Acrobat is very difficult.</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>Why InDesign Generated PDFs Are Often Not Very Accessible</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">InDesign is essentially a graphical layout engine with lots of additional abilities. It is easy to create blocks of text and place graphics, move them around, and create a reasonably good looking layout without thinking about styles, text flow, alt texts or content order. The temptation is to just do the layout, generate the PDF, and go on to the text project. </span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">The steps to improve accessibility of PDFs are just good professional practice for an InDesign user. Defining styles, and applying them as text is entered, ensures consistent presentation of text. Threading text into flows makes it simpler to adjust how text is presented as various layouts are considered.</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">The hardcopy orientation of InDesign and its very flexibility tempt the designer into layouts that will be difficult to make intelligible with assistive technology. For example, a document layout that has independent text flows breaking across multiple pages is going to be hard to navigate and follow for a person using a voice browser.</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>Setup Paragraph Styles</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Type -> Paragraph Styles brings up the window for defining paragraph styles and group of styles</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Clicking on each paragraph style will bring up the Paragraph Style Options, with has menus for setting fonts, spacing, indents, and much more for the style</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">You can create a paragraph style group by clicking on the little folder icon on the bottom margin of the window. Then you create your styles into that group. Typically, you would define all the styles you expect to use in a project in a group.</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">At least you should define the following styles: Paragraph, Header 1, Header 2, and Header 3</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>Set Export Tagging for Each Paragraph Style</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">For each style, go to Paragraph Style Options -> Export Tagging</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Set export tagging for both PDF by selecting the appropriate tag from the drop down list. It would be a good idea to also select the appropriate tag for export to EPUB and HTML at the same time.</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>Thread Text Blocks Into a Flow</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Connect the out port from each text block to the in port of the following text block</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Defining the flow helps define the linear structure of the text in the document</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>Anchor Graphics in the Text Flow</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">The simplest way to do this to simply drag and drop the graphic into the appropriate location in the text flow</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>Give Each Graphic Alt Text</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Select the graphic, go to Object -> Object Export Options</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">If the graphic is purely decorative and contains no meaningful content, leave the text field blank for each of the types of alternative text (Alt Text, Tagged PDF, and EPUB and HTML)</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">If the graphic has meaning, enter the appropriate text in the alternative text field for each type of export.</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>Export the Document to a PDF File</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">File -> Export... , then select Save As Type to "Adobe PDF (Interactive)"</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Be sure the "Use Structure for Tab Order" option is checked in the Export to Interactive PDF window.</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>Final Steps in Adobe Acrobat Pro</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Set the document language by going to File -> Properties -> Advanced -> Reading Options</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Review and tweak the reading order with the TouchUp Reading Order tool at View -> Tools -> Accessibility -> Accessibility right column menu</span></li>
</ul>
</li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><b>Resources</b></span><ul style="background: transparent; border: 0px; list-style: disc; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Penn State: InDesign Accessibility - http://accessibility.psu.edu/indesign</span></li>
<li style="background: transparent; border: 0px; margin: 4px 0px 4px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="name" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">Adobe: InDesign Accessibility - http://wwwimages.adobe.com/content/dam/Adobe/en/accessibility/products/indesign/pdfs/indesign-cs55-accessibility-whitepaper.pdf</span></li>
</ul>
</li>
</ul>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-8515676102423287482014-05-27T16:03:00.003-07:002014-05-27T16:04:44.858-07:00Setting and Achieving Doable Accessibility Goals<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>X-NONE</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:EnableOpenTypeKerning/>
<w:DontFlipMirrorIndents/>
<w:OverrideTableStyleHps/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]--><br />
<!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="false"
DefSemiHidden="false" DefQFormat="false" DefPriority="99"
LatentStyleCount="371">
<w:LsdException Locked="false" Priority="0" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 2"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 3"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 4"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 5"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 6"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 7"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 8"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 9"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 9"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 1"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 2"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 3"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 4"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 5"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 6"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 7"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 8"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 9"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Normal Indent"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="footnote text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="annotation text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="header"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="footer"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index heading"/>
<w:LsdException Locked="false" Priority="35" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="caption"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="table of figures"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="envelope address"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="envelope return"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="footnote reference"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="annotation reference"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="line number"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="page number"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="endnote reference"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="endnote text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="table of authorities"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="macro"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="toa heading"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 5"/>
<w:LsdException Locked="false" Priority="10" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Closing"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Signature"/>
<w:LsdException Locked="false" Priority="1" SemiHidden="true"
UnhideWhenUsed="true" Name="Default Paragraph Font"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text Indent"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Message Header"/>
<w:LsdException Locked="false" Priority="11" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Salutation"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Date"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text First Indent"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text First Indent 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Heading"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text Indent 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text Indent 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Block Text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Hyperlink"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="FollowedHyperlink"/>
<w:LsdException Locked="false" Priority="22" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Document Map"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Plain Text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="E-mail Signature"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Top of Form"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Bottom of Form"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Normal (Web)"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Acronym"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Address"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Cite"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Code"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Definition"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Keyboard"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Preformatted"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Sample"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Typewriter"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Variable"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Normal Table"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="annotation subject"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="No List"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Outline List 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Outline List 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Outline List 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Simple 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Simple 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Simple 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Colorful 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Colorful 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Colorful 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table 3D effects 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table 3D effects 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table 3D effects 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Contemporary"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Elegant"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Professional"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Subtle 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Subtle 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Web 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Web 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Web 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Balloon Text"/>
<w:LsdException Locked="false" Priority="39" Name="Table Grid"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Theme"/>
<w:LsdException Locked="false" SemiHidden="true" Name="Placeholder Text"/>
<w:LsdException Locked="false" Priority="1" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" SemiHidden="true" Name="Revision"/>
<w:LsdException Locked="false" Priority="34" QFormat="true"
Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" QFormat="true"
Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" QFormat="true"
Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" QFormat="true"
Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" QFormat="true"
Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" QFormat="true"
Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" SemiHidden="true"
UnhideWhenUsed="true" Name="Bibliography"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="TOC Heading"/>
<w:LsdException Locked="false" Priority="41" Name="Plain Table 1"/>
<w:LsdException Locked="false" Priority="42" Name="Plain Table 2"/>
<w:LsdException Locked="false" Priority="43" Name="Plain Table 3"/>
<w:LsdException Locked="false" Priority="44" Name="Plain Table 4"/>
<w:LsdException Locked="false" Priority="45" Name="Plain Table 5"/>
<w:LsdException Locked="false" Priority="40" Name="Grid Table Light"/>
<w:LsdException Locked="false" Priority="46" Name="Grid Table 1 Light"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark"/>
<w:LsdException Locked="false" Priority="51" Name="Grid Table 6 Colorful"/>
<w:LsdException Locked="false" Priority="52" Name="Grid Table 7 Colorful"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 1"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 1"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 1"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 1"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 1"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 2"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 2"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 2"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 2"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 2"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 3"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 3"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 3"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 3"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 3"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 4"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 4"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 4"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 4"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 4"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 5"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 5"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 5"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 5"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 5"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 6"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 6"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 6"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 6"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 6"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 6"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 6"/>
<w:LsdException Locked="false" Priority="46" Name="List Table 1 Light"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark"/>
<w:LsdException Locked="false" Priority="51" Name="List Table 6 Colorful"/>
<w:LsdException Locked="false" Priority="52" Name="List Table 7 Colorful"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 1"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 1"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 1"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 1"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 1"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 2"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 2"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 2"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 2"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 2"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 3"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 3"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 3"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 3"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 3"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 4"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 4"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 4"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 4"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 4"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 5"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 5"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 5"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 5"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 5"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 6"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 6"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 6"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 6"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 6"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 6"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 6"/>
</w:LatentStyles>
</xml><![endif]--><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman","serif";}
</style>
<![endif]--><span class="name">AccessibleWeb@U - May 22, 2014</span><br />
<div>
<h2>
<span class="name"></span></h2>
<ul>
<li><span class="name">Meet Hadi Rangin</span><ul>
<li><span class="name">Studied computer science at University of Karlsruhe in Network Management</span></li>
<li><span class="name">Studied Computer Science and human computer interface at Oregon State University</span></li>
<li><span class="name">Spent last 25 years working on IT accessibility</span></li>
<li><span class="name">Worked for the past 10 years with University of Illinois at Urbana/Champaign</span></li>
<li><span class="name">Recently hired by UW-IT Accessible Technology </span></li>
</ul>
</li>
<li><span class="name">Components of web accessibility</span><ul>
<li><span class="name">three components</span><ul>
<li><span class="name">application framework</span></li>
<li><span class="name">content</span></li>
<li><span class="name">assistive technology</span></li>
</ul>
</li>
<li><span class="name">All components must work together to get the job done</span></li>
<li><span class="name">Accessibility is a chain with interconnected rings/path with many possible barriers</span></li>
</ul>
</li>
<li><span class="name">Web Accessibility problems we are facing</span><ul>
<li><span class="name">Websites/application developed by our on-campus developers</span></li>
<li><span class="name">Content created by various entities, departments, or people</span></li>
<li><span class="name">Third-party applications purchased from various vendors</span><ul>
<li><span class="name">Applications we are using here at the UW do not give positive experiences</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="name">Problems with publishing content</span><ul>
<li><span class="name">Publishing on the web is very easy</span></li>
<li><span class="name">People publish content without knowing anything about HTML; they use the technology at their disposal</span></li>
<li><span class="name">Documents often published as images, inaccessible PDFs, Word, Flash, other proprietary formats</span></li>
<li><span class="name">Content creators do not have formal training in creating accessible content</span><ul>
<li><span class="name">Accessible design is often not included in the curriculum of college courses</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="name">Problems with locally developer websites/applications</span><ul>
<li><span class="name">Website/application developers do not have any formal training in universal design</span></li>
<li><span class="name">Accessibility is not on their radar</span></li>
<li><span class="name">They do not know about accessibility of the technology they use.</span></li>
<li><span class="name">Not every developer follows Best Practices</span></li>
<li><span class="name">Not many developers know how to test for accessibility</span><ul>
<li><span class="name">Do not know which tools to use to test, or how to use them</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="name">Problems with third-party applications</span><ul>
<li><span class="name">There is no formal accessibility requirement for purchasing a product</span></li>
<li><span class="name">Administrators/purchasing officers are not aware of accessibility or not comfortable with it</span></li>
<li><span class="name">VPATS (Volunteer Product Accessibility Template) are misleading and confusing</span></li>
<li><span class="name">No formal verification of accessibility claims</span></li>
<li><span class="name">No fully accessible product in the market</span></li>
</ul>
</li>
<li><span class="name">Accessibility versus usability</span><ul>
<li><span class="name">Most problems we are facing are usability issues</span></li>
<li><span class="name">Keyboard accessibility, focus management (so you can tell where focus is)</span></li>
<li><span class="name">Examples</span><ul>
<li><span class="name">Focus location indication often turned off</span></li>
<li><span class="name">Submitting a form with no confirmation/verification</span></li>
<li><span class="name">ProctorU (http://www.proctoru.com) provides proctored online testing, but forms do not provide confirmation messages</span></li>
</ul>
</li>
<li><span class="name">Accessibility is much more than a touch-up or after the fact fix</span></li>
<li><span class="name">No magic automated testing tool that can fix all problems</span></li>
<li><span class="name">Accessibility must be considered in design, implementation and quality assessment</span></li>
<li><span class="name">Accessibility is free if you consider it from the beginning</span></li>
<li><span class="name">The after-the-fact approach is wishy-washy, incomplete, and too expensive</span></li>
</ul>
</li>
<li><span class="name">Collective approach</span><ul>
<li><span class="name">Bottom-up approach; begin with you, the people who make the stuff</span></li>
<li><span class="name">Collaborating with the developers</span></li>
<li><span class="name">Collaborating with content creators</span></li>
<li><span class="name">Top-down approach; work with decision makers at the same time</span></li>
<li><span class="name">Collaborating with administrators and vendors</span></li>
</ul>
</li>
<li><span class="name">Collaborating with developers</span><ul>
<li><span class="name">UW-IT Accessible Technology is at your disposal</span><ul>
<li><span class="name">Send email to hadir@uw.edu or danc@uw.edu</span></li>
</ul>
</li>
<li><span class="name">We can meet in person and help with accessibility considerations of your project during its development phases</span></li>
<li><span class="name">We can help with accessibility of your templates for your content creators</span></li>
<li><span class="name">We offer a workshop on accessible design</span></li>
<li><span class="name">We offer workshop on how to test for accessibility including with screen readers</span></li>
<li><span class="name">Or just meet and explore with Hadi (coffee provided)</span></li>
<li><b><span class="name">Goal: To make you all accessibility experts</span></b></li>
<li><span class="name">At
Illinois, Hadi conducted developer meetings every Tuesday. People could
participate online. Do we want a similar series of meeting here at the
UW?</span></li>
</ul>
</li>
<li><span class="name">Collaborating with Instructors, Instructional Designers, and Content Creators</span><ul>
<li><span class="name">Instructional designers have a key role in accessibility of course contents</span></li>
<li><span class="name">An online course on "Universal Design for Online Learning" will be offered</span></li>
<li><span class="name">Customized workshops for departments/colleges will be offered</span></li>
<li><span class="name">We can meet in person and help with accessibility of the course contents (coffee provided)</span></li>
<li><b><span class="name">Goal: To have at least one accessibility expert/liaison in each department</span></b></li>
</ul>
</li>
<li><span class="name">Collaborating with Administrators/Vendors</span><ul>
<li><span class="name">Accessibility can sometimes be too abstract</span></li>
<li><span class="name">Awareness is the key; we need to educate them</span><ul>
<li><span class="name">Often think accessibility is something you do after the fact</span></li>
</ul>
</li>
<li><span class="name">Accessibility is as important as security and personalization</span></li>
<li><span class="name">Making accessibility part of their agenda is not easy and takes time</span></li>
<li><span class="name">Demo of accessibility problems with the application are extremely helpful</span></li>
<li><span class="name">Support of people managing the product is very essential for vendor collaboration</span></li>
<li><span class="name">Vendors must be asked for accessibility features in the bidding process</span></li>
<li><span class="name">Vendors claims must be verified by local experts</span><ul>
<li><span class="name">Identify show-stopper issues; must be fixed before deployment</span></li>
</ul>
</li>
<li><span class="name">No lip service, please</span></li>
<li><span class="name">We need to collaborate with vendors on enhancing their applications</span><ul>
<li><span class="name">At Illinois, Hadi had ten years of positive response from vendors</span></li>
</ul>
</li>
<li><b><span class="name">Goal: Define and agree on minimum Accessibility Requirements especially for high impact applications</span></b></li>
<li><b><span class="name">Goal: Contractual time-lined agreement with vendor to resolve issues</span></b></li>
</ul>
</li>
<li><span class="name">Conclusion</span><ul>
<li><span class="name">Accessibility is an approach</span></li>
<li><span class="name">Depends on many dynamic factors</span></li>
<li><span class="name">Very impressed with the level of accessibility support at UW</span></li>
<li><span class="name">I am positive that we collectively can take UW to the next level</span></li>
<li><span class="name">Let's develop a roadmap we can all agree on?</span></li>
</ul>
</li>
</ul>
</div>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-82765361997177203132014-03-28T11:02:00.001-07:002014-03-28T11:02:18.249-07:00Accessibility and InclusivityOn Tuesday, March 25, Dan, Terrill, and I presented at the TechConnect conference here on campus at the University of Washington. We walked through the following material:<br />
<br />
<h2>
Accessible Technology at the UW</h2>
Visit the <a href="http://uw.edu/accessibility/">Accessible
Technology at the UW</a> site and learn all about what is
happening at the UW in making technology work for everyone.<br />
<h2>
The Basic Methods for Accessible Websites</h2>
<ol>
<li>Validated HTML</li>
<li>Semantic element types (headings, paragraphs, lists,
tables, etc.)</li>
<li>Headings and sub-headings used hierarchically</li>
<li>ALT texts on images, where meaningful</li>
<li>Page titles</li>
<li>Meaningful link texts</li>
<li>Form labels</li>
<li>Table headers and captions</li>
<li>Captioning on videos</li>
</ol>
<h2>
Useful Tools</h2>
<h3>
Websites</h3>
<ul>
<li><a href="http://www.washington.edu/accesscomputing/AU/">
Accessible University</a> —
http://www.washington.edu/accesscomputing/AU/</li>
<li><a href="http://www.color-blindness.com/">All About Color
Blindness</a> — http://www.color-blindness.com/</li>
<li><a href="http://www.dasplankton.de/ContrastA/">Contrast-A: Find
Accessible Color Combinations</a> —
http://www.dasplankton.de/ContrastA/</li>
<li><a href="http://webaim.org/resources/contrastchecker/">WebAIM Color
Contrast Checker</a> —
http://webaim.org/resources/contrastchecker/</li>
<li><a href="http://validator.nu/">Living Validator</a>
— http://validator.nu/</li>
<li><a href="http://www.validome.org/">Validome Validator</a>
— http://www.validome.org/</li>
<li><a href="http://wave.webaim.org/">WebAIM WAVE</a> accessibility
evaluation tool — http://wave.webaim.org/</li>
</ul>
<h3>
Download-ables and Plug-in-ables</h3>
<ul>
<li><a href="http://colororacle.org/">Color Oracle: Color
Blindness Simulator</a> — http://colororacle.org/</li>
<li><a href="http://www.paciellogroup.com/resources/contrastAnalyser">
Paciello Color Contrast Analyzer</a> —
http://www.paciellogroup.com/resources/contrastAnalyser
</li>
<li><a href="http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-to-download/colour-contrast-analyser-2-2-for-web-pages">
Colour Contrast Analyzer</a> —
http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-to-download/colour-contrast-analyser-2-2-for-web-pages</li>
<li><a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US">
Web Develolper Toolbar (for Chrome)</a> —
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US</li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">
Web Developer Toolbar (for Firefox)</a> — https://addons.mozilla.org/en-US/firefox/addon/web-developer/</li>
</ul>
<h2>
Accessibility Problem Examples</h2>
<h3>
Problems With Focus Indicator</h3>
<h4>
No Focus Indicator</h4>
<ul>
<li><a href="http://www.fixedbyvonnie.com/2013/06/how-to-turn-your-galaxy-s4-into-a-mobile-hotspot/">
Galaxy S4 Mobile Hotspot</a> —
http://www.fixedbyvonnie.com/2013/06/how-to-turn-your-galaxy-s4-into-a-mobile-hotspot/</li>
<li><a href="http://www.uky.edu/">University of Kentucky</a>
— http://www.uky.edu/</li>
<li><a href="http://www.nyu.edu/">New York University</a>
— http://www.nyu.edu/</li>
</ul>
<h4>
Reverse Focus Indicator (for mouse)</h4>
<ul>
<li><a href="http://www.debian.org/distrib/">Debian
Distribution</a> — http://www.debian.org/distrib/</li>
</ul>
<h4>
Mystery Focus Indicator</h4>
<ul>
<li><a href="http://espn.go.com/">ESPN</a> — http://espn.go.com/</li>
</ul>
<h4>
Enhanced Focus Indicator</h4>
<ul>
<li><a href="http://webaim.org/">WebAIM</a>: Good use of focus indicator — http://webaim.org/</li>
<li><a href="http://www.washington.edu/">University of Washington</a>:
Focus indicator changes — http://www.washington.edu/</li>
<li><a href="http://www.psu.edu/">Penn State</a>: Enhanced default —
http://www.psu.edu</li>
</ul>
<h3>
Skipnav</h3>
<ul>
<li>Visible On focus — <a href="http://www.osu.edu/">Ohio State University</a> —
http://www.osu.edu/<br />
<a href="http://www.usf.edu/">University of Southern
Florida</a> — http://www.usf.edu/</li>
<li>Always visible — <a href="http://www.washington.edu/doit/Stem/">AccessSTEM</a> —
http://www.washington.edu/doit/Stem/</li>
<li>Not visible — <a href="http://www.whitehouse.gov/">White House</a> —
http://www.whitehouse.gov/<br />
<a href="http://www.nyu.edu/">New York University</a>
— www.nyu.edu</li>
<li>Broken — <a href="http://www.columbiabasin.edu/index.aspx?page=6">Columbia
Basin College</a> —
http://www.columbiabasin.edu/index.aspx?page=6</li>
</ul>
<h3>
Tab Order</h3>
<ul>
<li><a href="http://www.olympic.edu/index.htm">Olympic
College</a>: Unexpected, goes to central pane first —
http://www.olympic.edu/index.htm</li>
<li><a href="https://www.yahoo.com/">Yahoo</a>; Left nav
first, skips top nav: — (due to cursor in search
box by default, something to discuss, is this a good
technique? On most pages, probably not, but on portal/search
pages, it's probably appropriate, esp. with proper form label
in place) — https://www.yahoo.com/</li>
<li><a href="http://go.okstate.edu/">Oklahoma State
University</a>: Lots and lots and lots of menu items to tab
through — http://go.okstate.edu/</li>
</ul>
<h3>
Contrast and color</h3>
<ul>
<li><a href="https://www.yahoo.com/">Yahoo</a>: High contrast
by default (except purple nav bar) —
https://www.yahoo.com/<br />
<a href="http://go.okstate.edu/">Oklahoma State
University</a> — http://go.okstate.edu/</li>
<li><a href="http://www.martinsburgpd.org/">Martinsburg
Police Department</a>: Too much contrast? Does it hurt?
— http://www.martinsburgpd.org/</li>
<li><a href="http://csszengarden.com/213/">CSS Teagarden</a>:
Where is nav, where is content? —
http://csszengarden.com/213/</li>
<li><a href="http://www.csszengarden.com/204/">CSS 204</a>:
Foreground vs background problems —
http://www.csszengarden.com/204/<</li></li>
<li><a href="http://www.csszengarden.com/186/">CSS 186</a>:
Fade to invisible —
http://www.csszengarden.com/186/</li>
</ul>
<h3>
Menus</h3>
<ul>
<li><a href="http://www.uw.edu/">University of Washington</a>: Good — http://www.uw.edu</li>
<li><a href="http://wsu.edu/">Washington State University</a>: Mouseover vs keyboard focus, what do you get? — http://wsu.edu/
</li>
</ul>
<h3>
Default Text Size</h3>
<ul>
<li><a href="http://wsu.edu/">Washington State
University</a>: Too small? — http://wsu.edu/</li>
</ul>
<h3>
Headings</h3>
<ul>
<li><a href="http://wsu.edu/">Washington State
University</a>: Limited, all H1 — http://wsu.edu/</li>
<li><a href="http://www.uky.edu/">University of Kentucky</a>:
Mysterious use of headings — http://www.uky.edu/</li>
<li><a href="http://www.wvstateu.edu/">West Virginia State
University</a>: Only one heading on page, in home graphic
— http://www.wvstateu.edu/<br />
<a href="http://go.okstate.edu/">Oklahoma State
University</a> — http://go.okstate.edu/</li>
<li><a href="http://www.nyu.edu/">New York University</a>:
Some text is not in heading tag? — www.nyu.edu (NVDA is
not reading all of the "University Life" header)</li>
</ul>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-60884666288159603192013-10-14T10:59:00.000-07:002013-10-14T11:01:42.910-07:00Building an Accessible CMS SiteNotes from the September 25, 2013 AccessibleWeb@U meeting<br />
<br />
<ul>
<li><b>How a CMS Works</b></li>
<ul>
<li>Content management system (CMS) engine, such as Drupal or WordPress</li>
<li>A database, often MySQL</li>
<li>A theme to structure and present content</li>
<li>Plug-ins to add functionality</li>
</ul>
<li><b>Accessibility Principles</b></li>
<ul>
<li>Perceivable</li>
<li>Operable</li>
<li>Understandable</li>
<li>Robust</li>
<li>From Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/</li>
</ul>
<li><b>Goals</b></li>
<ul>
<li>Create an inclusive University</li>
<li>Building a site that <b>works with assistive technologies</b></li>
<li>NVDA Screen Reader - http://www.nvaccess.org/</li>
<li>FireVox - http://firevox.clcworld.net/</li>
<li>VoiceOver - http://www.apple.com/accessibility/osx/voiceover/</li>
<li>Building a site that is intelligible to people using assistive technologies</li>
</ul>
<li><b>Methods for building accessible CMS sites</b></li>
<ul>
<li>Adhere to standards</li>
<li>Use semantic elements</li>
<li>Follow WCAG 2.0</li>
<li>Apply Accessible Rich Internet Applications (ARIA) attributes</li>
<li>Use ECMA Standard Scripting</li>
<li>Use Progressive enhancement methods in scripting</li>
</ul>
<li><b>Page Design Access Blockers - Addressed by theme designer</b></li>
<ul>
<li>Contrast and luminosity</li>
<li>Color issues</li>
<li>Font legibility</li>
<li>Reading order</li>
<li>Scalability (user-scalable=yes)</li>
</ul>
<li><b>Content Access Blockers - Addressed by the people who enter content into the pages</b></li>
<ul>
<li>No page <title/></li>
<li>No heading elements <h1/>…<h6/></li>
<li>No link element text or title=“” attributes</li>
<li>No form element label elements</li>
<li>No caption elements and <table/> summary attributes</li>
<li>No scope and id attributes to relate column and row headers to data</li>
<li>No useful alt text for images, or are missing the alt attributes altogether</li>
<li>No captions for videos</li>
</ul>
<li><b>CMSs, Out of the Box, Start With Good Accessibility</b></li>
<ul>
<li>WordPress http://make.wordpress.org/themes/guidelines/guidelines-accessibility/</li>
<li>Drupal https://drupal.org/about/accessibility</li>
<li>Understand what they have done</li>
<li>Don’t mess it up</li>
</ul>
<li><b>Themes</b></li>
<ul>
<li>Pre-built set of code that defines page layout, colors, functionality, fonts and font sizes, and navigation</li>
<li>Many are built on frameworks such as Bootstrap, which provide libraries of code</li>
</ul>
<li><b>Examples of Accessible Themes</b></li>
<ul>
<li>Blaskan – http://wordpress.org/themes/blaskan</li>
<li>Badeyes Skeleton – http://www.badeyes.com/services/</li>
<li>Ambrosia – http://wordpress.org/extend/themes/ambrosia</li>
<li>Scrapbook – http://wordpress.org/extend/themes/scrapbook</li>
<li>Twenty-Twelve Child Theme – http://daniemon.com/blog/accessible-wp-theme-twenty-twelve/</li>
<li>Examine them closely, perfection has not yet been achieved</li>
</ul>
<li><b>Frameworks</b></li>
<ul>
<li>Themes are generally built on existing frameworks, which may or may not have been created with accessibility in mind</li>
<li>Example frameworks:</li>
<ul>
<li>Bootstrap - http://getbootstrap.com/</li>
<li>Skeleton Boilerplate - http://www.getskeleton.com/</li>
<li>Whiteboard - http://whiteboardframework.com/</li>
</ul>
<li>Most frameworks are created without much consideration of accessibility</li>
<ul>
<li>Non-semantic coding</li>
<li>Forms without labels</li>
</ul>
</ul>
<li><b>Give Content Maintainers an Environment That Lets The Do The Right Thing</b></li>
<ul>
<li>Carleton CMS Training video on accessibility considerations when entering content in the Carleton WordPress site - http://www.youtube.com/watch?v=H5N57Kwjx9s</li>
</ul>
<li><b>Resources</b></li>
<ul>
<li>Accessibility With WordPress - http://www.slideshare.net/joedolson/accessibility-with-wordpress</li>
<li>Accessibility, WordPress Codex - http://codex.wordpress.org/Accessibility</li>
<li>25 Ways to Make Your WordPress Site More Accessible - http://wpmu.org/25-ways-to-make-your-wordpress-website-more-accessible/</li>
<li>WP Accessibility Plug-in http://wordpress.org/plugins/wp-accessibility/</li>
</ul>
</ul>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com1tag:blogger.com,1999:blog-37426996.post-39463012236048972112013-08-23T09:09:00.003-07:002013-08-23T09:09:36.264-07:00ARIA Basics<div class="previewWindow hasHtml">
<div>
<span class="name">AccessibleWeb@U - August 22, 2013</span><ul>
<li><span class="name">Announcements</span><ul>
<li><span class="name">ACM SIGACCESS ASSETS 2013 Conference on Computers and Accessibility, October 21-23 in Bellevue, WA</span><ul>
<li><span class="name">http://www.sigaccess.org/assets13/</span></li>
<li><span class="name">This
conference has top-notch speakers, including UW's Richard Ladner, and
it is the first time since 2006 that it has been held on the West coast</span></li>
</ul>
</li>
<li><span class="name">Accessibility Camp Seattle Oct 19-20, in Seattle Public Library's downtown Central Library</span><ul>
<li><span class="name">http://accessibilitycampseattle.org/blog/</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="name">ARIA Basics</span><ul>
<li><span class="name">Rick Ells, presenter</span><ul>
<li><span class="name">UW-IT Web Guy rells@uw.edu</span></li>
</ul>
</li>
<li><span class="name">Semantic Web</span><ul>
<li><span class="name">Communication
is not just letters clumped into words. The words are assembled into
sentences, with particular words playing roles such as subject, verb,
and object.</span></li>
<li><span class="name">Structure and role are part of communication</span></li>
<li><span class="name">ARIA is a way to declare the roles of elements on a page.</span></li>
</ul>
</li>
<li><span class="name">What is ARIA</span><ul>
<li><span class="name">Accessible Rich Internet Applications (ARIA)</span></li>
<li><span class="name">Associating meta information to page elements that helps assistive technologies “understand” and interact with the page</span></li>
<li><span class="name">ARIA landmarks are added to HTML/XHTML/HTML5 as element attributes</span></li>
<li><span class="name">ARIA landmarks do not change the elements, they just associate information with them</span></li>
</ul>
</li>
<li><span class="name">Disadvantage of ARIA</span><ul>
<li><span class="name">ARIA is not part of the specifications for HTML 4.01 or XHTML.</span><ul>
<li><span class="name">Such pages with ARIA attributes will not validate</span></li>
<li><span class="name">The ARIA attributes will be flagged as non-complying</span></li>
</ul>
</li>
<li><span class="name">Validation is important, but advantages of adding ARIA outweigh the disadvantage of seeing error messages</span></li>
</ul>
</li>
<li><span class="name">Using ARIA</span><ul>
<li><span class="name">To enhance accessibility of your pages with ARIA</span><ul>
<li><span class="name">Build standards-based validated pages</span><ul>
<li><span class="name">Use semantic types correctly</span></li>
<li><span class="name">Use headings hierarchically</span></li>
<li><span class="name">Provide alt texts and labels</span></li>
</ul>
</li>
<li><span class="name">lApply appropriate ARIA landmarks</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="name">How ARIA Landmarks Work</span><ul>
<li><span class="name">Video</span><ul>
<li><span class="name">http://www.webmonkey.com/2013/02/video-how-arias-landmark-roles-work/</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="name">Types of ARIA Landmarks</span><ul>
<li><span class="name">Banner role</span></li>
<li><span class="name">Contentinfo role</span></li>
<li><span class="name">Main role</span></li>
<li><span class="name">Complementary role</span></li>
<li><span class="name">Form role</span></li>
<li><span class="name">Search role</span></li>
<li><span class="name">Navigation role</span></li>
<li><span class="name">Information in this section is from North Carolina State University http://accessibility.oit.ncsu.edu/training/aria/</span></li>
</ul>
</li>
<li><span class="name">Banner Landmark</span><ul>
<li><span class="name">The ARIA role "banner" is used to indicate mostly site-oriented content rather than page specific content.</span></li>
<li><span class="name">Add the attribute role="banner" to the encompassing <div>.</span></li>
<li><span class="name">Add
the attribute aria-labelledby="bannerHeading" to the encompassing
<div> to explicitly say what the heading is for this section.</span></li>
<li><span class="name">http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#banner</span></li>
</ul>
</li>
<li><span class="name">Contentinfo Landmark</span><ul>
<li><span class="name">The
ARIA role "contentinfo" indicates a region that contains information
about the parent document. It often contains information like copyright
and privacy statements.</span></li>
<li><span class="name">Add the attribute role="contentinfo" to the encompassing <div>.</span></li>
<li><span class="name">You should use the role "contentinfo" only once per page.</span></li>
<li><span class="name">http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#contentinfo</span></li>
</ul>
</li>
<li><span class="name">Main Content Landmark</span><ul>
<li><span class="name">The ARIA role "main" is used to indicate the content that relates directly to the central topic of the document.</span></li>
<li><span class="name">Add the attribute role="main" to the encompassing <div>.</span></li>
<li><span class="name">Add
the attribute aria-labelledby="mainContentLabel" to the encompassing
<div> to explicitly say what the heading is for this section.</span></li>
<li><span class="name">http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#main</span></li>
</ul>
</li>
<li><span class="name">Complementary Landmark</span><ul>
<li><span class="name">The
ARIA role "complementary" is used to indicate content that is
complementary to the main content, yet has meaning when separated from
the main content.</span></li>
<li><span class="name">Add the attribute role="complementary" to the encompassing <div>.</span></li>
<li><span class="name">Add
the attribute aria-labelledby="validationLabel" to the encompassing
<div> to explicitly say what the heading is for this section.</span></li>
<li><span class="name">http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#complementary</span></li>
</ul>
</li>
<li><span class="name">Form Landmark</span><ul>
<li><span class="name">The ARIA role "form" is used to indicate a section that contains a form.</span></li>
<li><span class="name">Add the attribute role="form" to the encompassing <div>.</span></li>
<li><span class="name">Add
the attribute aria-labelledby="newsletterLabel" to the encompassing
<div> to explicitly say what the heading is for this section.</span></li>
<li><span class="name">Using the role="form" still requires you to use the <form> tag and accompanying <label> and <input> tags.</span></li>
<li><span class="name">http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#form</span></li>
</ul>
</li>
<li><span class="name">Search Landmark</span><ul>
<li><span class="name">The
ARIA role "search" is used to define a region where search
functionality is located. The role "search" is a specialized version of
"form" so you do not need to label this section with the role of "form."</span></li>
<li><span class="name">Add the attribute role="search" to the encompassing <div>.</span></li>
<li><span class="name">Add
the attribute aria-labelledby="searchLabel" to the encompassing
<div> to explicitly say what the heading is for this section.</span></li>
<li><span class="name">http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#search</span></li>
</ul>
</li>
<li><span class="name">Site Navigation Landmark</span><ul>
<li><span class="name">The ARIA role "navigation" is used to indicate a collection of links to navigate the document or related documents.</span></li>
<li><span class="name">Add the attribute role="navigation" to the encompassing <div>.</span></li>
<li><span class="name">Add the attribute aria-label="Site Navigation" to add a descriptive label to this section</span></li>
<li><span class="name">http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#navigation</span></li>
</ul>
</li>
<li><span class="name">Application Landmark</span><ul>
<li><span class="name">Declares a region as a web application, as opposed to a web document</span></li>
<li><span class="name">Tells
assistive technologies to switch to an application browsing mode and
pass keyboard events directly through to the web application</span></li>
<li><span class="name">http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#application</span></li>
</ul>
</li>
<li><span class="name">The ARIA Specification has many more roles</span><ul>
<li><span class="name">http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#role_definitions</span></li>
</ul>
</li>
<li><span class="name">Looking At ARIA Markup</span><ul>
<li><span class="name">The Web Developer Toolbar for Chrome and FireFox has a Display ARIA Roles item in its Information menu.</span><ul>
<li><span class="name">http://chrispederick.com/work/web-developer/</span></li>
</ul>
</li>
<li><span class="name">Firebug add-on for FireFox makes it easy to hop into the code of a page and see what ARIA attributes it contains</span><ul>
<li><span class="name">https://addons.mozilla.org/en-us/firefox/addon/firebug/</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="name">Examples of Using ARIA</span><ul>
<li><span class="name">OpenAjax Accessibility Task Force examples</span><ul>
<li><span class="name">http://oaa-accessibility.org/examples/</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-79038451604114446132013-07-26T08:52:00.001-07:002013-07-26T08:59:04.857-07:00Colors & Contrast<p>Notes from the July 25 meeting of the AccessibleWeb@U interest group</p><br />
<ul><li>Presenter - Rick Ells UW-IT </li>
<li>Vision </li>
<ul><li>Normal - Has red, green, and blue sensors </li>
<li>Protanopia – Red/green color blindness, less sensitive to red light </li>
<li>Deuteranopia – Red/green color blindness, less sensitive to green light </li>
<li>Tritanopia – Blue/ yellow color blindness, confuse blue with green and yellow with light violet </li>
<li>Cataracts </li>
<li>http://www.color-blindness.com </li>
</ul><li>Color Combinations </li>
<ul><li>Use orange only for large text or highlight </li>
<li>Avoid red on green or green red </li>
<li>Avoid using red and green to convey information, such as red text is a warning, green text is a recommendation </li>
<li>Avoid putting bright colors at the opposite end of the spectrum together </li>
<li>Avoid putting text on textured backgrounds </li>
</ul><li>Contrast and Luminosity </li>
<ul><li>Contrast is the difference in brighness (luminosity) between two colors, such as between the color of text and the color of the background </li>
<ul><li>More contrast is needed for smaller text </li>
<li>4.5:1 for content text (Level AA) </li>
<li>3:1 for large text (Level AA) </li>
</ul></ul><li>Guidelines </li>
<ul><li>1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: </li>
<ul><li>Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; </li>
<li>Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. </li>
<li>Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement. </li>
</ul></ul><li>Example Site </li>
<ul><li>http://staff.washington.edu/rells/accessibility/contrast/low.htm </li>
<li>Evaluate the example site using the Colour Contrast Analyzer - http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-to-download/colour-contrast-analyser-2-2-for-web-pages </li>
</ul><li>Maintaining Hue </li>
<ul><li>When you need to darken or lighten a hue, maintain the same relative ratios between the red, green and blue values. </li>
<li>Example: The following are the same hue, but different luminosities </li>
<ul><li>RGB 50, 75, 100 - darkest </li>
<li>RGB 75, 112, 150 - medium </li>
<li>RGB 100, 150, 200 - lightest </li>
</ul></ul><li>Tools </li>
<ul><li>Contrast-A http:// www.dasplankton.de/ContrastA/ </li>
<li>Color Oracle - http://colororacle.org </li>
<li>WebAim Contrast Checker - http://webaim.org/ resources/contrastchecker/ </li>
<li>ColorHexa - http://www.colorhexa.com </li>
<li>Colour Contrast Analyzer - http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-to-download/colour-contrast-analyser-2-2-for-web-pages </li>
</ul></ul>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-29135018704297828222013-01-28T16:31:00.000-08:002013-01-28T16:38:02.683-08:00Survey and Planning<div class="previewWindow">
<div>
<h4>
<span class="name">AccessibleWeb@U Meeting Notes Jan 24, 2013</span></h4>
<ul>
<li><span class="name">Survey results</span><ul>
<li><span class="name">22 people responded, most were webmasters or people maintaining content</span></li>
<li><span class="name">Ranking by sum of "Strong interest" and "Very strong interest"</span><ol>
<li><span class="name">75% - Creating accessible websites: Instructions, tips, and resources </span></li>
<li><span class="name">64% - Accessible UW templates and themes for WordPress and Drupal </span></li>
<li><span class="name">59% - Accessible plug-ins and modules for WordPress and Drupal </span></li>
<li><span class="name">53% - Authoring accessible documents in Word, PDF, and other formats: Instructions, tips, and resources </span></li>
<li><span class="name">50% - Disability-related resources and services available at the UW </span></li>
<li><span class="name">45% - Getting help with accessible technology problems and issues </span></li>
<li><span class="name">41% - Captioning video: Instruction, tips, and resources </span></li>
<li><span class="name">41% - Legal requirements and policies related to technology accessibility at the UW </span></li>
<li><span class="name">28% - Opportunities for getting involved with efforts to improved accessibility of technology at the UW </span></li>
<li><span class="name">27% - Procuring accessible technology products </span></li>
</ol>
</li>
<li><span class="name">In comments, respondents suggested more task oriented content, better structure, shorter and clearer text</span></li>
<li><span class="name">Summary of what the results seem to mean</span><ul>
<li><span class="name">Basics of how to create accessible websites is most important</span></li>
<li><span class="name">Strong interest in prebuilt environments (CMSs and plug-ins) that have accessibility built-in</span></li>
<li><span class="name">Moderate interest in authoring accessible documents</span></li>
<li><span class="name">Site needs to more engaging, better organized, and task oriented</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="name">Reviewing the website (http://uw.edu/accessibility/)</span><ul>
<li><span class="name">About the site as a whole</span><ul>
<li><span class="name">Could there be a site search for just this site?</span><ul>
<li><span class="name">An alternative could be a site map</span></li>
<li><span class="name">If site is in its own WordPress instance, it would have a site-specific search</span></li>
</ul>
</li>
<li><span class="name">Could there be an accessibility news blog?</span><ul>
<li><span class="name">Important to prepare items carefully and get review</span><ul>
<li><span class="name">Consistent quality and relevance is important for giving visitors a reason to come back</span></li>
<li><span class="name">Should be a steady flow of items, at least a couple a week</span></li>
</ul>
</li>
<li><span class="name">Items should be written with consistent role, voice, and style</span></li>
<li><span class="name">If we can find a news source we respect, we could simply put its news feed on the site</span><ul>
<li><span class="name">WebAIM (http://webaim.org/) might be a source </span></li>
</ul>
</li>
<li><span class="name">We could also link to forums where good discussions are occuring</span></li>
<li><span class="name">A blog could be used to foster discussions on topics</span></li>
</ul>
</li>
<li><span class="name">How could we offer training on accessible design?</span><ul>
<li><span class="name">WebAIM
offers training in Utah (http://webaim.org/services/training/). They
sometimes travel. Could we find money for a workshop here at the UW?</span></li>
<li><span class="name">UW-IT
Learning and Scholarly Technologies (LST) offers workshops
(http://www.washington.edu/lst/workshops). Could LST host an accessible
design workshop?</span></li>
<li><span class="name">Could we develop training videos, perhaps using Tegrity?</span><ul>
<li><span class="name">Developing a polished training video can be time consuming.</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="name">Could the site have demonstrations of accessible and inaccessible designs?</span><ul>
<li><span class="name">Demonstrating lack of accessibility might best be done with videos of people trying to use the site</span></li>
</ul>
</li>
<li><span class="name">Could the site have explanations and videos of converting an inaccessible site to become accessible?</span></li>
</ul>
</li>
<li><span class="name">Current topics</span><ul>
<li><span class="name">Historical Highlights </span><ul>
<li><span class="name">Should be moved to the bottom; interesting but not what people come for most of the time</span></li>
</ul>
</li>
<li><span class="name">Policies & Standards</span><ul>
<li><span class="name">We
have many good quotes from the UW President in the "IT Accessibility:
What Campus Leaders Have to Say" video
(http://www.washington.edu/doit/Video/index.php?vid=55), which is linked
to from the home page</span></li>
<li><span class="name">Using those
quotes, we could convey that the UW has chosen a shared intention of
being accessible; would help to localize; we are not just doing this
because external entities have ordered us to.</span></li>
</ul>
</li>
<li><span class="name">Web Accessibility</span><ul>
<li><span class="name">Move the "why be accessible" stuff down on the page</span></li>
<li><span class="name">Put the "getting started" or "is my site accessible" stuff at the top</span></li>
<li><span class="name">Checklists for evaluation of accessibility and step-by-step procedures would be helpful</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><span class="name">Discussion</span><ul>
<li><span class="name">We should build a list of possible things we could do and then sort them out by priority and timing</span></li>
<li><span class="name">One key role for the site might be to help people connect with mentors who could be there as they learn accessible design</span><ul>
<li><span class="name">Who would be the mentors?</span></li>
</ul>
</li>
<li><span class="name">Simply building up a network of practitioners, facilitating their cooperation and sharing would be valuable</span></li>
<li><span class="name">The survey showed strong interest in pre-built solutions such as accessible themes and plugins</span><ul>
<li><span class="name">How do we know which themes and plugins to point people to?</span></li>
</ul>
</li>
<li><span class="name">Is it time to host another Capacity Building Institute? </span><ul>
<li><span class="name">We hosted a CBI in 2008 (http://www.washington.edu/accessibility/cbi2008.html)</span></li>
<li><span class="name">Defining the problem well is an essential step</span></li>
<li><span class="name">In a CBI, speakers give short presentations and then work with the audience to develop solutions</span></li>
<li><span class="name">Everyone is involved in the discussion through the day</span></li>
<li><span class="name">Everyone is assumed to be part of the problem and and important member of the community that will develop solutions</span></li>
</ul>
</li>
<li><span class="name">Connecting with the Web developers is challenging</span><ul>
<li><span class="name">Often working on tight deadlines</span></li>
<li><span class="name">Generally
work from their own toolset of skills, favorite code libraries,
javascript libraries, code management methods, and project management
methods, all of which may or may not have been developed to support
accessible design</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-41216772936268545322012-09-28T15:23:00.000-07:002012-09-28T16:05:24.432-07:00Creating an Accessible Web Design Community of PracticeThursday, September 27, 2012<br />
<ul>
<li>Present: Anna Golden, DO-IT; Terrill Thompson, DO-IT; Katherine
Turner; UW Marketing; Joel Walters, Admissions; Dan Druliner,
Facilities; Kyle Russell, Education; Heather Wozniak, A&S; Conrad
Kuehn, Rehab Medicine; Krista Greear, Disabilities Resources for
Students; Melinda McRae, Social Work; Amanda Paye, ADA coordinator;
Char Easter, HCD alumni</li>
<li>Announcements
<ul>
<li>The D-Center will open in December; will centralize services related to disabilities</li>
<li>Kyle Russell, a grad student in Education is looking for
people "willing to help me by being participants in my dissertation
project focusing on how accessibilty is considered as part of Web
development." If you are interested in volunteering, send email to
kyle.russell@gmail.com .</li>
</ul>
</li>
<li>Given the growing interest in accessible Web design, how can we work together to improve our websites?</li>
<ul>
<li>An Accessibility Intiative is being planned. First steps are </li>
<ul>
<li>Enhancement of online resources, including the <a href="http://uw.edu/accessibility/" rel="nofollow" target="_blank">Accessible Technology at the UW</a> site</li>
<li>Promotion of Accessible IT, including AccessibleWeb@U speakers and events</li>
<li>Exploration of policies and processes to develop an approach appropriate to the UW</li>
</ul>
</ul>
<li>How many UW sites are there?
<ul>
<li>720 sites are using the URL forwarding service offered by UW-IT. Many other sites exist that do not use that service</li>
<li>A wild estimate is that we are dealing with approximately 2500 official UW sites
<ul>
<li>How many are on the "critical path" for our faculty, staff, and students with disabilities?</li>
</ul>
</li>
</ul>
</li>
<li>Needs
<ul>
<li>New technologies keep coming; whatever approach we use needs to accommodate constant change</li>
<li>ARIA is important as interfaces are given more features that respond to user behaviors
<ul>
<li>With increasing use of scripting and AJAX, ARIA is critical to making things accessible</li>
</ul>
</li>
<li>Economical captioning is an important need as more classes use video</li>
<li>Giving support people resources they can use to explain the need for accessible design and to explain how to do it.
<ul>
<li>Having campus-wide policies are helpful to support people</li>
</ul>
</li>
<li>Accessible templates that people can use in their sites and CMSs</li>
<li>Procurement process should effectively include accessibility considerations
<ul>
<li>Give preference to products that produce accessible documents and sites right out of the box.</li>
</ul>
</li>
<li>Mobile devices are big. We need to understand accessible mobile design.
<ul>
<li>If a site works with Apple VoiceOver, can it be considered accessible?</li>
</ul>
</li>
</ul>
</li>
<li>How should we begin?
<ul>
<li>We should begin our accessibility initiative by evaluating where we are:
<ul>
<li>In the real world, what are people experiencing as they try to use our sites and services</li>
<li>The SiteImprove scanner only gives you information on explicit criteria. What problems are people actually having?</li>
<li>We could systematically interview people working with and supporting people with disabilities. The results could help us plan.</li>
</ul>
</li>
<li>Rules, process and structure can help us make progress, but
they should not be too confining; they could squelch progress without
improving the situation</li>
<li>We need to define what is good enough; What are the standards we work to, which are primary, which are secondary?</li>
<li>Accessibility requirements are not as intuitive as safety requirements
<ul>
<li>Easy to ask compliance for safety; "Wear a helmet"</li>
</ul>
</li>
<li>Standards are changing; older standards were prescriptive
<ul>
<li>Technologies are changing rapidly</li>
</ul>
</li>
<li>What can we actually achieve?</li>
</ul>
</li>
<li>Role of the "Accessible Web Design Community of Practice"
<ul>
<li>Helping communities form and interconnect</li>
<li>Presentation about what people are experiencing at the UW</li>
<li>Organize accessibility testing sessions
<ul>
<li>In usability testing, watching somebody struggle with your design can be very educational
<ul>
<li>How can we do that kind of thing for accessibility</li>
</ul>
</li>
</ul>
</li>
<li>We could connect with UW departments interested in accessibility
<ul>
<li>Human Centered Design & Engineering (http://www.hcde.washington.edu/)</li>
<li>iSchool (http://ischool.uw.edu/)</li>
<li>College of Education (http://education.washington.edu/)</li>
<li>Computer Science & Engineering (http://www.cs.washington.edu/)
<ul>
<li>Richard Ladner is conducting an Accessibility Research seminar this quarter</li>
</ul>
</li>
</ul>
</li>
<li>We could host speakers on accessibility related projects at the UW</li>
<li>Serve as a place to encourage careful planning and effective actions to address accessibility issues</li>
</ul>
</li>
<li>Shared designs give leverage
<ul>
<li>UW Marketing Web team is developing a Wordpress template
that is being carefully designed to be accessible. Many central sites
can/will be moved into this system.</li>
<li>The same design is being converted into a Drupal theme</li>
<li>Parts of the design will also be available in the Header/Footer wizard for those maintaining static or hand-coded sites.</li>
<li>The result is that a large number of key sites will be using the same carefully vetted design</li>
<li>What other opportunities for shared designs are there?</li>
</ul>
</li>
</ul>
Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-20238821290463347082012-07-27T11:11:00.000-07:002012-07-27T11:18:18.134-07:00Web Accessibility Policy and the Penn State Experience<br />
<h2 class="MsoNormal">
Terrill Thompson – Technology Accessibility Specialist</h2>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Web and IT Accessibility Policy in Higher Education</div>
<div class="MsoNormal">
<a href="http://staff.washington.edu/tft/talks/ahg11/Policies.pdf">http://staff.washington.edu/tft/talks/ahg11/Policies.pdf</a></div>
<div class="MsoNormal">
<br /></div>
<h3 class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol;">·<span style="font: 7pt "Times New Roman";">
</span></span>Discussion</h3>
<ul>
<li>National Federation of the Blind is actively suing universities. One of their goals, apparently, is to use universities (which must address accessibility) to pressure vendors (which are not included in accessibility laws) to improve accessibility in their products</li>
<li>Generally, NFB will not sue an institution that has a plan for addressing accessibility and is working on it. They are more likely to focus on institutions that have drifted toward environments that are inaccessible through lack of policy and planning.</li>
</ul>
<div class="MsoNormal">
<br /></div>
<h2 class="MsoNormal">
Rick Ells – UW-IT Web Guy</h2>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The Penn State Experience</div>
<div class="MsoNormal">
<a href="http://staff.washington.edu/rells/accessibility/PennState.pdf">http://staff.washington.edu/rells/accessibility/PennState.pdf</a></div>
<div class="MsoNormal">
<br /></div>
<h3 class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol;">·<span style="font: 7pt "Times New Roman";">
</span></span>Discussion</h3>
<ul>
<li>Viewpoints expressed </li>
<ul>
<li> It would be good to avoid a lawsuit.</li>
<li>We need top down push that accessibility is important, everyone is expected to comply with standards</li>
<li>Much work on accessibility is already going on at many levels. Much could be achieved by making people aware of each other’s good work</li>
<li>We need to decide what standard we are shooting for: WCAG 2 Level AA, updated 508, or what?</li>
<li>There needs to be a Web site people can go to that says how to test your site’s accessibility and how to fix its problems.</li>
<li>How about some events? Perhaps some coding competitions to address puzzles, or a un-conference of Web developers addressing accessibility</li>
<li>How can we do this that we do not over specify and thus squish innovation and creative designs?</li>
</ul>
</ul>
<div class="MsoNormal">
<br /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-77898283881611770492012-06-01T09:47:00.001-07:002012-06-01T09:49:04.791-07:00Accessibility of Mobile Devices and Accessible Mobile Web Site Design<b>AccessibleWeb@U Meeting Notes</b><br /><br />
Thursday, May 24, 2012<br />
<br />
<ul type="disc">
<li><b>VoiceOver Basics - Rick Ells (<a href="mailto:rells@uw.edu">rells@uw.edu</a>)</b></li>
<ul type="circle">
<li>The VoiceOver voice browser is on Apple iPhones, iPads, and OSX laptop and desktop computers</li>
<ul type="square">
<li>On iPhones and iPads, go to Settings -> General -> Accessibility -> VoiceOver</li>
<li>On OSX laptops and desktops, go to Finder -> Go -> Applications -> Utilities -> VoiceOver Utility</li>
</ul>
<li>VoiceOver is highly respected by people with disabilities and is a mature, polished product. It is also free (or at least it comes at no extra cost with many Apple products, which are not free). </li>
<li>Using VoiceOver to interact with your site will give you an understanding of how usable your site is to a person using assistive technology.</li>
<ul type="square">
<li>Exploring your pages with VoiceOver can give you a basic evaluation of how useful it will be to people who use assistive technologies.</li>
<li>Many developers only think visually as they design the user interface (UI) and user interaction. A sighted person can see and use any part of the display directly. A person using assistive technology probably has to explore the interface linearly, item by item, one item at a time.</li>
<li>Good UI design can provide both a good visual experience and a good linear (audio) experience.</li>
</ul>
<li>Turning on / turning off VoiceOver on iPhones and iPads</li>
<ul type="square">
<li>Turning on VoiceOver</li>
<ul type="square">
<li>Go to Settings -> General -> Accessibility -> VoiceOver</li>
<li>Once VoiceOver is on you are in a different interaction mode: First you find an item, then you double-tap anywhere on the screen to evoke it. </li>
<li>You move to items by sliding your finger around on the screen. As your finger goes over items, VoiceOver will speak their name or description. </li>
<li>You can also navigate among items with left, right, up, and down flicks. </li>
</ul>
<li>Turning off VoiceOver</li>
<ul type="square">
<li>Double-tap the Settings icon on your homepage.</li>
<li>Use three fingers to scroll down to the General menu, and double-click on it. Click for image.</li>
<li>Use three fingers to scroll down to the Accessibility menu, and double-click on it. Click for image.</li>
<li>Double-tap on the VoiceOver menu item. Click for image.</li>
<li>Turn VoiceOver off</li>
</ul>
<li>Mute and un-mute</li>
<ul type="square">
<li>Three finger double-tap mutes or unmutes the sound</li>
</ul>
</ul>
<li>Using a bluetooth keyboard</li>
<ul type="square">
<li>Entering text or numbers can be tedious. For each character to find the character then double tap.</li>
<li>If you have a bluetooth keyboard, you can directly enter characters as you normally would</li>
</ul>
<li>Apple manual on VoiceOver for OSX devices is at <a href="http://www.apple.com/accessibility/voiceover/downloads.html">http://www.apple.com/accessibility/voiceover/downloads.html</a></li>
<li>Getting Started with VoiceOver on iOS devices is at <a href="http://support.apple.com/kb/HT3598">http://support.apple.com/kb/HT3598</a></li>
</ul>
<li><b>Mobile Design Examples - Terrill Thompson (<a href="mailto:tft@uw.edu">tft@uw.edu</a>)</b></li>
<ul type="circle">
<li>Test site with four annotated example mobile page designs - <a href="http://terrillthompson.com/tests/mobile">http://terrillthompson.com/tests/mobile</a></li>
<li>These are tests, you are welcome to visit them, but they will change</li>
<li>The examples are in HTML5</li>
<ul type="square">
<li>How well is HTML5 supported by assistive technology?</li>
<ul type="square">
<li>JAWS 13 supports HTML5 elements as landmarks</li>
<ul type="square">
<li>You can skip among landmarks</li>
<li>Do not need to use "skip to content"</li>
</ul>
<li>VoiceOver does not recognize HTML5 elements as landmarks</li>
<ul type="square">
<li>VoiceOver does support ARIA landmarks</li>
<li>You can use ARIA to mark up areas of page with "roles" (banner, main, navigation, etc.) (<a href="http://www.w3.org/WAI/aria/faq">http://www.w3.org/WAI/aria/faq</a>)</li>
</ul>
</ul>
</ul>
<li>Use your smartphone to try out these examples. To better understand how they work, view them with a laptop/desktop browser and view their source code. </li>
<li>Example 1</li>
<ul type="square">
<li>Demonstrates width and font-size change when you double tap on a block of text.</li>
<li>The recommendation is to set column widths between 30-60% to get a reasonable enlargement effect</li>
</ul>
<li>Example 2</li>
<ul type="square">
<li>Demonstrates the effect of constraining width with absolute units.</li>
<li>The recommendation is to use relative widths ( percents or ems)</li>
</ul>
<li>Example 3</li>
<ul type="square">
<li>Demonstrates supplementing HTML5 with ARIA roles</li>
<li>Each element that has an ARIA landmark role also needs an aria-label attribute</li>
</ul>
<li>Example 4</li>
<ul type="square">
<li>Demonstrates problems with dropdown items evoked by image icons in the header</li>
<ul type="square">
<li>"search image" "menu image" - a visitor might not recognize that they are clickable</li>
<ul type="square">
<li>In this example, they are simple images with javascript</li>
<li>Could add "role=button" ARIA</li>
</ul>
</ul>
<li>Pop-ups can be given an ARIA role of alert, will be announced by screenreaders</li>
<ul type="square">
<li>Focus stays where the pop-up was evoked</li>
<li>Text is read</li>
<li>role="alert"</li>
</ul>
<li>Go to more accessible version at bottom of page</li>
<ul type="square">
<li>Uses the ARIA button role; announces as "show search" </li>
<li>When the user evokes search, button becomes "hide search"</li>
<li>Better to use ARIA button instead of link, which people might assume goes to a different page</li>
</ul>
</ul>
</ul>
<li><b>Android Assistive Technologies - Dan Comden (<a href="mailto:danc@uw.edu">danc@uw.edu</a>)</b></li>
<ul type="circle">
<li>Android Accessibility</li>
<ul type="square">
<li>Major problem is the variety of forms and manufacturers</li>
<ul type="square">
<li>Physical buttons</li>
<li>Physical keyboards</li>
</ul>
<li><a href="http://weba.im/droids">http://weba.im/droids</a> has list of Android phones that work best <a href="http://eyes-free.googlecode.com/svn/trunk/documentation/android_access/phones.html">http://eyes-free.googlecode.com/svn/trunk/documentation/android_access/phones.html</a></li>
</ul>
<li>Talkback, Soundback, and Kickback - developed by Google for Android</li>
<ul type="square">
<li>Talkback - talks as you click on things</li>
<li>soundback - makes a noise whe you click on something </li>
<li>kickback - vibrates when you press something</li>
</ul>
<li>Eyes-Free Shell (<a href="http://google-opensource.blogspot.com/2009/04/announcing-eyes-free-shell-for-android.html">http://google-opensource.blogspot.com/2009/04/announcing-eyes-free-shell-for-android.html</a>)</li>
<li>Talking Dialer (<a href="https://play.google.com/store/apps/details?id=com.google.marvin.talkingdialer&hl=en">https://play.google.com/store/apps/details?id=com.google.marvin.talkingdialer&hl=en</a>)</li>
<li>Walky Talky - Periodically announces your current location (<a href="http://www.androidzoom.com/android_applications/travel_and_local/walkytalky_lrri.html">http://www.androidzoom.com/android_applications/travel_and_local/walkytalky_lrri.html</a>)</li>
<li>Rock Lock - Simple, eyes-free music player (<a href="http://www.androidzoom.com/android_applications/media_and_video/rock-lock_hdhk.html">http://www.androidzoom.com/android_applications/media_and_video/rock-lock_hdhk.html</a>)</li>
<li>Magnifier Camera - make your Android into a magnifying glass (<a href="http://www.androidzoom.com/android_applications/camera+magnifier">http://www.androidzoom.com/android_applications/camera+magnifier</a>)</li>
<li>Eyes-Free Talking Compass - Speaks your current heading (<a href="https://play.google.com/store/apps/details?id=com.google.marvin.compass&hl=en">https://play.google.com/store/apps/details?id=com.google.marvin.compass&hl=en</a>)</li>
<li>The vOICe for Android (<a href="http://www.artificialvision.com/android.htm">http://www.artificialvision.com/android.htm</a>)</li>
<ul type="square">
<li>Augmented reality viewer</li>
<li>Audio describing visual</li>
</ul>
<li>Pay options</li>
<ul type="square">
<li>Mobile Accessibility US (<a href="https://play.google.com/store/apps">https://play.google.com/store/apps</a> and search for Mobile Accessibility by Code Factory)</li>
<li>Costs $99</li>
</ul>
<li>Mobile Web experience</li>
<ul type="square">
<li>Flash is supported</li>
<li>Double tap to zoom</li>
<li>Multiple windows</li>
<li>Browser alternatives</li>
<ul type="square">
<li>Chrome for Android 4 in beta</li>
<li>Opera mini, Dolphin, and more</li>
</ul>
</ul>
</ul>
</ul>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com1tag:blogger.com,1999:blog-37426996.post-28203565999254683042012-03-26T15:13:00.001-07:002012-03-26T15:14:01.300-07:00Access Technology and the Web<div style="font-family: Verdana,sans-serif;">
</div>
<h4 style="font-family: Verdana,sans-serif; text-align: center;">
AccessibleWeb@U Meeting Notes<br />
March 22, 2012</h4>
<div style="font-family: Verdana,sans-serif;">
Dan Comden<br />
Access Technology Center<br />
Mary Gates Hall 064<br />
danc@uw.edu</div>
<h2 style="font-family: Verdana,sans-serif;">
Presentation Slide Deck</h2>
<div style="font-family: Verdana,sans-serif;">
<a href="http://uw.edu/accessibility/accessibleweb/minutes/AT_Web.pdf">Access
Technology and the Web</a> (PDF)</div>
<h2 style="font-family: Verdana,sans-serif;">
Products Demonstrated</h2>
<ul style="font-family: Verdana,sans-serif;">
<li>ZoomText screen enlarger (free 60 day demo) for
Windows<br />
<a href="http://www.aisquared.com/">www.aisquared.com</a></li>
<li>Free Text-To-Speech - NaturalReader<br />
<a href="http://www.naturalreaders.com/">www.naturalreaders.com</a></li>
<li>Paid Text-To-Speech - ClaroRead (15 day demo)<br />
<a href="http://www.clarosoftware.com/">www.clarosoftware.com</a></li>
<li>NVDA - Free Screen Reader for Windows<br />
<a href="http://www.nvda-project.org/">www.nvda-project.org/</a></li>
<li>Color Contrast Analyzer<br />
<a href="http://www.paciellogroup.com/resources/contrast-analyser.html">
www.paciellogroup.com/resources/contrast-analyser.html</a></li>
</ul>
<h2 style="font-family: Verdana,sans-serif;">
More Information</h2>
<ul style="font-family: Verdana,sans-serif;">
<li>Windows Accessibility<br />
<a href="http://www.microsoft.com/enable/products/windows7/">www.microsoft.com/enable/products/windows7/</a></li>
<li>Apple Accessibility<br />
<a href="http://www.apple.com/accessibility/">www.apple.com/accessibility/</a></li>
</ul>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-844932208497674602012-02-24T15:47:00.000-08:002012-02-24T15:47:35.914-08:00Accessibility Lessons Learned in the Kuali Rice Project<br />
<div align="center">
<strong>AccessibleWeb@U</strong><br />
<strong>February 23, 2012 Meeting Notes</strong></div>
<ul>
<li>Meetings will continue to be on the fourth Thursday of each month</li>
<ul>
<li>Is meeting on the same day as the Web Council a problem?</li>
<li>Since most of the meetings are during lunch hour, continuing to meet on the same day is not a big burden for people on campus</li>
<li>Having both meetings on the same day is helpful to people coming from off-campus (from Tacoma or Bothell)</li>
</ul>
<li>Guest Speaker: <b>Candace Soderston</b>, a User Experience Architect for the Kuali Rice Project</li>
<ul>
<li>The Kuali Rice wiki is at <a href="https://wiki.kuali.org/display/KULRICE/Home">https://wiki.kuali.org/display/KULRICE/Home</a></li>
<ul>
<li>“The Kuali Rice effort will provide an enterprise class
middleware suite of integrated products that will allow both Kuali and
non-Kuali applications to be built in an agile fashion, such that
developers will be able to react to end-user business requirements in
an efficient and productive manner, so that they can produce high
quality business applications.”</li>
</ul>
<li>Information on the Kuali Rice approach to accessibility, maintained by Candace, is located at <a href="https://wiki.kuali.org/display/KULRICE/Rice+Accessibility">https://wiki.kuali.org/display/KULRICE/Rice+Accessibility</a></li>
<li>Candace’s Powerpoint slide deck is at <a href="http://uw.edu/accessibility/accessibleweb/minutes/Accessibility_lessons_Kuali.pdf">http://uw.edu/accessibility/accessibleweb/minutes/Accessibility_lessons_Kuali.pdf</a></li>
<ul>
<li>The slides are very clear and detailed – take a look!</li>
</ul>
<li>Many thanks to Candace for her presentation.</li>
</ul>
<li>Next Meeting: Thursday, March 22 in Allen Auditorium (as usual)</li>
<ul>
<li>Dan Comden, Access Technology Consultant of the Access
Technology Center will talk on “Assistive Technologies in Use at the
UW”</li>
</ul>
</ul>
<br />
Remember you can always send your questions about accessible design to the AccessibleWeb@U email list (<a href="mailto:accessibleweb@uw.edu">accessibleweb@uw.edu</a>).<br />
Minutes from meetings are also posted on our blog at <a href="http://accesswebu.blogspot.com/">http://accesswebu.blogspot.com/</a>. An more comprehensive archive of past minutes (going back to 2003) is located at <a href="http://uw.edu/accessibility/accessibleweb/minutes/">http://uw.edu/accessibility/accessibleweb/minutes/</a><br />Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-26673137723448769042011-10-28T08:44:00.000-07:002011-11-04T10:34:26.154-07:00Accessible Web Design OverviewRick Ells<br />
UW-IT Web Guy<br />
rells@uw.edu<br />
<h2>
AccessibleWeb@U</h2>
<ul>
<li>An interest group that advocates for inclusive Web
design</li>
<li>A working group of the UW Web Council</li>
<li>You do not work for us. You decide how much of this is
relevant to your situation.</li>
<li>You can add yourself to the email list<br />
<a href="https://mailman2.u.washington.edu/mailman/listinfo/accessibleweb">https://mailman2.u.washington.edu/mailman/listinfo/accessibleweb</a></li>
<li>Blog is at<br /> <a href="http://accesswebu.blogspot.com/">http://accesswebu.blogspot.com/</a></li>
<li>Archive of meeting notes is at<br />
<a href="http://www.washington.edu/accessibility/accessibleweb/minutes/">http://www.washington.edu/accessibility/accessibleweb/minutes/</a></li>
</ul>
<h2>
The Goals of Accessible Web Design</h2>
<ul>
<li>Be usable and intelligible to as many people as possible,
including
<ul>
<li>People not able to use a mouse</li>
<li>People not navigating by touch</li>
</ul>
</li>
<li>Be interpretable by assistive technologies
<ul>
<li>Structured</li>
<li>Semantic</li>
<li>Standard</li>
</ul>
</li>
</ul>
<h2>
Quick Evaluation</h2>
<ul>
<li>Tools
<ul>
<li>Firefox Web Developer browser extension<br />
<a href="http://chrispederick.com/work/web-developer/">http://chrispederick.com/work/web-developer/</a></li>
<li>Firefox WCAG Contrast Checker<br />
<a href="https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/">https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/</a></li>
</ul>
</li>
</ul>
<h2>
QE: headers</h2>
<ul>
<li>Are header elements being used semantically and are they
organized hierarchically?
<ul>
<li>Pseudo headers created with bolding and sizing will
not be recognized as headers</li>
</ul>
</li>
<li>Check headers with the Web Developer toolbar Information
item; pull it down to "View Document Outline".</li>
</ul>
<h2>
QE: layout</h2>
<ul>
<li>Are tables being used for page layout?
<ul>
<li>Tables layout makes navigation much more complex</li>
</ul>
</li>
<li>Check for tables with the Web Developer toolbar Outline
item; pull down to "Outline Tables" and then "Table
Cells".</li>
<li>Can content be interpreted intelligibly without layout
(when CSS is turned off)?
<ul>
<li>Check content without layout with the Web Developer
toolbar CSS item; pull down to "Disable Styles" and then
"All Styles". Scroll down through bare-bones content;
could you make sense of it in the sequence it is
presented.</li>
</ul>
</li>
</ul>
<h2>
QE: alternative text</h2>
<pre> <img src="gw.jpg" alt="George Washington">
</pre>
Alternative text should be...<br />
<ul>
<li>Accurate and equivalent</li>
<li>Be succinct</li>
<li>Not be redundant</li>
<li>Not use phrases like "image of..."</li>
</ul>
(Example from WebAIM (<a href="http://webaim.org/">http://webaim.org</a>)<br />
Check alternative text with the Web Developer toolbar Images
item; pull down to "Display Alt Attributes".<br />
<h2>
QE: labelling</h2>
The label element associates a name (for="first"with the
input element with an id of that name (id="first")<br />
<pre><form action="form_action.asp" method="get">
<label for="first">First name:</label>
<input type="text" name="fname" id="first"/><br />
<label for="last">Last name:</label>
<input type="text" name="lname" id="last" /><br />
<input type="submit" value="Submit" />
</form>
</pre>
Check labelling in a form with the Web Developer toolbar
View Source item; Search in the source for "<label"<br />
<h2>
QE: colors</h2>
Color choice and the contrast between adjacent colors are
important for determining reability. Contrast levels should be
higher for small characters than for larger.<br />
Evaluate colors and contrast with WCAG Contrast Checker.
Check the "Text selector" and move your cursor around the
page.<br />
<h2>
QE: semantic markup</h2>
Assistive technologies use semantic element types to help in
presenting content.<br />
<dl>
<dt>Semantic:</dt>
<dd><h2 style="font: medium bold verdana, sans-serif">
New Technology</h2></dd>
<dt>Non-Semantic:</dt>
<dd><div style="font: medium bold verdana, sans-serif">
New Technology</div></dd>
</dl>
There is nothing wrong with using DIVs for structural elements
such as navigation, content, header, and footer.<br />
Recognize that semantic element types have to do with
structuring the content. Presentation (font size, font family,
font size, etc.) of the types is controlled by the CSS.<br />
<h2>
QE: problem areas</h2>
<ul>
<li>Tables layout</li>
<li>Essential information in graphics without alt text</li>
<li>Content buried in scripts
<ul>
<li>Not using progressive enhancement methods</li>
</ul>
</li>
<li>Content added after page load (Ajax)
<ul>
<li>ARIA roles needed to signal assistive technology
which areas might receive updates</li>
</ul>
</li>
</ul>
<h2>
Accessibility at the UW</h2>
<ul>
<li>DO-IT<br />
<a href="http://uw.edu/doit">http://uw.edu/doit</a></li>
<li>Information Technology Accessibility<br />
<a href="http://uw.edu/accessibility/">http://uw.edu/accessibility/</a></li>
<li>Access Technology Center<br />
<a href="http://uw.edu/itconnect/accessibility/atl">http://uw.edu/itconnect/accessibility/atl</a></li>
<li>WebInSight<br />
<a href="http://webinsight.cs.washington.edu/">http://webinsight.cs.washington.edu/</a></li>
<li>AccessComputing<br />
<a href="http://www.washington.edu/accesscomputing/">http://www.washington.edu/accesscomputing/</a></li>
</ul>
<h2>
Accessibility Research at the UW</h2>
<ul>
<li>AIM Research Group<br />
<a href="http://depts.washington.edu/aimgroup/">http://depts.washington.edu/aimgroup/</a></li>
<li>Project Access<br />
<a href="http://cognitivetech.washington.edu/">http://cognitivetech.washington.edu/</a></li>
<li>Enable<br />
<a href="http://enable.cs.washington.edu/index.php/Main_Page">http://enable.cs.washington.edu/index.php/Main_Page</a></li>
<li>Center for Technology and Disability Studies<br />
<a href="http://uwctds.washington.edu/">http://uwctds.washington.edu/</a></li>
<li>Design, Use, Build (DUB)<br />
<a href="http://dub.washington.edu/">http://dub.washington.edu/</a></li>
</ul>
<h2>
Web Accessibility Guidelines</h2>
<ul>
<li>W3C Web Content Accessibility Guidelines (WCAG) 2.0<br />
<a href="http://www.w3.org/TR/WCAG20/">http://www.w3.org/TR/WCAG20/</a></li>
<li>Section 508<br />
<a href="http://www.section508.gov/">http://www.section508.gov/</a></li>
<li>Section 508 Tutorials<br />
<a href="http://www.access-board.gov/sec508/software-tutorial.htm">http://www.access-board.gov/sec508/software-tutorial.htm</a></li>
</ul>
<h2>
Motivations</h2>
<ul>
<li>Personal</li>
<li>Community</li>
<li>Added value to our institution</li>
<li>Legal guidelines and requirements</li>
<li>Public relations</li>
<li>The baby-boomers are coming (and they have money)</li>
</ul>
<h2>
The Legal Situation</h2>
<ul>
<li>Are UW Web sites a “public accomodation”
under the Americans with Disabilities Act?</li>
<li>Do Washington state guidelines apply?<br />
<a href="http://ofm.wa.gov/ocio/policies/documents/1000g.pdf">http://ofm.wa.gov/ocio/policies/documents/1000g.pdf</a></li>
<li>Do you have a contractual agreement with students?</li>
<li>Do you have obligations to your funding sources?</li>
</ul>
<h2>
Walk the Path</h2>
Welcome to the Basics 201 class! Today in class you
will...<br />
<ol>
<li>Login with your UW NetID</li>
<li>View a course page</li>
<li>Download a PDF article</li>
<li>Submit a question</li>
<li>Use an online Web tool to take a test</li>
<li>Watch a video</li>
</ol>
<h2>
Where Are the Obstacles?</h2>
<ul>
<li>The login form might not have labels</li>
<li>The class Web page may not make use of semantic
headings</li>
<li>The PDF article may be a scanned graphic image that
assistive technology cannot interpret</li>
<li>The Ask a Professor IM interface may use Ajax, rewriting
the display without a way for the assistive technology to
know the rewrite has occurred</li>
<li>The online test tool may use tables layout</li>
<li>The video may not have captioning</li>
<li>Participating in the class requires that all steps can be
done reasonably well.</li>
<li>Steps that are difficult are costs or "sacrifices" for
the user, as they impose burdens that others in the class may
not have to deal with.</li>
</ul>
<h2>
Goals/Principles/Patterns</h2>
A good way to work toward comprehensive accessibility is to
use the Goals/Principles/Patterns way of thinking.<br />
<ul>
<li>Goals – Why are we doing this</li>
<li>Principles – How are we going to reach the
goals</li>
<li>Patterns - What we are going to do to solve specific
problems that come up as we implement the principles</li>
<li>As the patterns are chosen and developed, keeping the
higher goals and principles in mind will encourage keeping
accessibility in mind through the project</li>
<li>From Luke Wrobelski “Design Principles”,
(<a href="http://www.lukew.com/ff/entry.asp?1292">http://www.lukew.com/ff/entry.asp?1292</a>), which he derived from
Service Oriented Architecture literature</li>
</ul>
<h2>
Accessibility Goals</h2>
<ul>
<li>Inclusive</li>
<li>Effective</li>
<li>Efficient</li>
<li>Supportive</li>
</ul>
<h2>
Accessibility Principles</h2>
We will design our Web services so they are…<br />
<ul>
<li>Perceivable</li>
<li>Operable</li>
<li>Understandable</li>
<li>Robust</li>
</ul>
<h2>
Accessibility Patterns</h2>
<ul>
<li>Adhere to standards</li>
<li>Use semantic elements</li>
<li>WCAG 2.0</li>
<li>Accessible Rich Internet Applications (ARIA)</li>
<li>ECMA Standard Scripting</li>
<li>Progressive enhancement methods in scripting</li>
</ul>
<h2>
Content Management Systems</h2>
Most CMSs come out-of-the-box with good accessibility;
don’t ruin it<br />
<ul>
<li>Drupal Accessibility Group<br />
<a href="http://groups.drupal.org/accessibility">http://groups.drupal.org/accessibility</a></li>
<li>Plone Accessibility<br />
<a href="http://plone.org/accessibility-info">http://plone.org/accessibility-info</a></li>
<li>WordPress Accessibility<br />
<a href="http://codex.wordpress.org/Accessibility">http://codex.wordpress.org/Accessibility</a></li>
<li>Joomla Accessibility<br />
<a href="http://www.joomla.org/accessibility-statement.html">http://www.joomla.org/accessibility-statement.html</a></li>
</ul>
<h2>
Vendors Invest in Accessibility</h2>
<ul>
<li>Apple Accessibility<br />
<a href="http://www.apple.com/accessibility/">http://www.apple.com/accessibility/</a></li>
<li>VoiceOver<br />
<a href="http://www.apple.com/accessibility/voiceover/">http://www.apple.com/accessibility/voiceover/</a></li>
<li>Microsoft Accessibility<br />
<a href="http://www.microsoft.com/enable/">http://www.microsoft.com/enable/</a>
<ul>
<li>Accessibility Guide for Educators<br />
<a href="http://www.microsoft.com/enable/education/">http://www.microsoft.com/enable/education/</a>
</li>
</ul>
</li>
<li>Adobe Accessibility<br />
<a href="http://www.adobe.com/accessibility/">http://www.adobe.com/accessibility/</a></li>
</ul>
<h2>
HTML5</h2>
<ul>
<li>Capable of very good accessibility</li>
<li>Structured</li>
<li>Semantic</li>
<li>Roles</li>
<li>Validatable</li>
<li>HTML5 Accessibility<br />
http://html5accessibility.com/</li>
</ul>
<h2>
Trends Going Forward</h2>
<ul>
<li>Rapid change</li>
<li>Mobile devices – smartphones to tablets – do
it now, here, get immediate results</li>
<li>Web sites and apps need to work with wide range of sizes
– smartphone, tablet, laptop, desktop</li>
<li>Pressure for simplification – Keep It Seriously
Succinct</li>
</ul>
<h2>
Mobile First</h2>
<ul>
<li>Start with designing for the mobile device, then
supplement the design for laptops and desktops</li>
<li>Priority of mobile is rising</li>
<li>Mobile design forces you to focus</li>
<li>Mobile offers new capabilities (knows location,
direction, talks to the cloud)</li>
<li>Mobile First – Luke Wroblewski<br />
<a href="http://www.abookapart.com/products/mobile-first">http://www.abookapart.com/products/mobile-first</a></li>
</ul>
<h2>
Responsive Web Design</h2>
<ul>
<li>Web pages that themselves adapt to the capabilities of
the device viewing them</li>
<li>Responsive Web Design – Ethan Marcotte<br />
<a href="http://www.alistapart.com/articles/responsive-web-design/">http://www.alistapart.com/articles/responsive-web-design/</a></li>
<li>Examples</li>
<li>Sample Page – Robot or Not<br />
<a href="http://responsivewebdesign.com/robot/">http://responsivewebdesign.com/robot/</a></li>
<li>Responsive & Responsible – Scott Jehl<br />
<a href="http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf">http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf</a></li>
</ul>
<h2>
Resources</h2>
<ul>
<li>Blogs
<ul>
<li>WebAxe<br />
<a href="http://webaxe.blogspot.com/">http://webaxe.blogspot.com</a></li>
</ul>
</li>
<li>Presentations
<ul>
<li>Top Mistakes in Web Accessibility – Wojtek
Zajac<br />
<a href="http://www.slideshare.net/wojciechzajac/top-mistakes-in-web-accessibility">http://www.slideshare.net/wojciechzajac/top-mistakes-in-web-accessibility</a></li>
</ul>
</li>
<li>Facebook
<ul>
<li>Mike Paciello<br />
<a href="http://www.facebook.com/mike.paciello">http://www.facebook.com/mike.paciello</a></li>
</ul>
</li>
<li>Reports
<ul>
<li>Digital Inclusion of People With Disabilities<br />
<a href="http://www.disabled-world.com/editorials/technology/digital-inclusion.php">http://www.disabled-world.com/editorials/technology/digital-inclusion.php</a></li>
</ul>
</li>
<li>Sites
<ul>
<li>UW Information Technology Accessibility<br />
<a href="http://uw.edu/accessibility">http://uw.edu/accessibility</a></li>
<li>Web Accessibility in Mind (WebAIM)<br />
<a href="http://webaim.org/">http://webaim.org/</a></li>
<li>Accessible Technology Coalition<br />
<a href="http://atcoalition.org/">http://atcoalition.org/</a></li>
<li>W3C Web Accessibility Initiative
<ul>
<li>Web Accessibility Presentations and Tutorials
<a href="http://www.w3.org/WAI/train.html">http://www.w3.org/WAI/train.html</a></li>
<li>WAI Guidelines and Techniques
<a href="http://www.w3.org/WAI/guid-tech.html">http://www.w3.org/WAI/guid-tech.html</a></li>
</ul>
</li>
</ul>
</li>
</ul>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com2tag:blogger.com,1999:blog-37426996.post-67060256513295756372011-07-08T16:09:00.000-07:002011-07-08T16:10:09.957-07:00Adobe PDF AccessibilityAccessibleWeb@U Meeting, June 30, 2011<br />
<ul class="subexp">
<li class="col" id="FMID_101427114FM"><div class="nodecontent">
Terrill Thompson, tft@uw.edu, Technology Accessibility Specialist</div>
<ul class="subexp">
<li class="basic" id="FMID_1804130588FM"><div class="nodecontent">
Slides are at http://staff.washington.edu/tft, along with slides of other presentations by Terrill</div>
</li>
</ul>
</li>
<li class="col" id="FMID_880699299FM"><div class="nodecontent">
Lawsuits relating to accessibility</div>
<ul class="subexp">
<li class="basic" id="FMID_1403702068FM"><div class="nodecontent">
The goal of lawsuits is to clarify what is required by law</div>
</li>
<li class="col" id="FMID_1993206488FM"><div class="nodecontent">
NFB actively advocating and services</div>
<ul class="subexp">
<li class="basic" id="FMID_777414400FM"><div class="nodecontent">
Actually aiming a vendors, which are not covered by law, while public institutions are</div>
</li>
<li class="col" id="FMID_1305240855FM"><div class="nodecontent">
California State University actively screening products to be sure they are accessible before allowing them to be purchased</div>
<ul class="subexp">
<li class="basic" id="FMID_70029369FM"><div class="nodecontent">
CSU Accessible Electronic and Information Technology Procurement - http://www.calstate.edu/Accessibility/EIT_Procurement/</div>
</li>
<li class="basic" id="FMID_602481479FM"><div class="nodecontent">
Accessible Technology Initiative, June 10, 2011 - http://www.calstate.edu/AcadAff/codedmemos/AA-2010-13.shtml</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_1822725728FM"><div class="nodecontent">
What makes an electronic document accessible?</div>
<ul class="subexp">
<li class="basic" id="FMID_422061757FM"><div class="nodecontent">
Text alternatives to non-text content</div>
</li>
<li class="col" id="FMID_732912311FM"><div class="nodecontent">
Information, structure (good semantic markup), and relationships</div>
<ul class="subexp">
<li class="basic" id="FMID_917891988FM"><div class="nodecontent">
Headings</div>
</li>
<li class="basic" id="FMID_1053073104FM"><div class="nodecontent">
Lists</div>
</li>
<li class="basic" id="FMID_153987273FM"><div class="nodecontent">
Good structure gets passed on to assistive technology, which uses it to effectively present the information</div>
</li>
</ul>
</li>
<li class="basic" id="FMID_1577571286FM"><div class="nodecontent">
HTML, Word, and PDF all support these features</div>
</li>
<li class="col" id="FMID_200822739FM"><div class="nodecontent">
Example: Accessible University Web site</div>
<ul class="subexp">
<li class="basic" id="FMID_450182897FM"><div class="nodecontent">
http://staff.washington.edu/tft/talks/fileformats/syllabus.html</div>
</li>
<li class="col" id="FMID_959381847FM"><div class="nodecontent">
Because page is structured, voice browser (JAWS) can describe structure</div>
<ul class="subexp">
<li class="col" id="FMID_1267625549FM"><div class="nodecontent">
CTRL- H lists headings</div>
<ul class="subexp">
<li class="basic" id="FMID_423837094FM"><div class="nodecontent">
With JAWS you can jump by heading levels, thus using headings as a map of the page's content</div>
</li>
</ul>
</li>
<li class="basic" id="FMID_139900906FM"><div class="nodecontent">
JAWS identifies lists before speaking the list contents (if it is marked up as a lists)</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_1876529308FM"><div class="nodecontent">
Example: Word document - same page</div>
<ul class="subexp">
<li class="col" id="FMID_1906220539FM"><div class="nodecontent">
To make a Word document accessible</div>
<ul class="subexp">
<li class="basic" id="FMID_623824465FM"><div class="nodecontent">
Use the predefined styles for headings</div>
</li>
<li class="col" id="FMID_1465184987FM"><div class="nodecontent">
To put alt text on an image - have alt text as one of the options</div>
<ul class="subexp">
<li class="basic" id="FMID_1742528607FM"><div class="nodecontent">
Recent versions of Word offer two fields, use the Description field (not the Title field)</div>
</li>
<li class="basic" id="FMID_737944866FM"><div class="nodecontent">
Keep the alt text short and sweet</div>
</li>
</ul>
</li>
<li class="basic" id="FMID_1218406694FM"><div class="nodecontent">
When making lists, use the list button</div>
</li>
</ul>
</li>
<li class="col" id="FMID_1523434962FM"><div class="nodecontent">
When you create a PDF, the structure can be passed to the PDF file by creating a "tagged PDF" file</div>
<ul class="subexp">
<li class="col" id="FMID_1378738035FM"><div class="nodecontent">
Office 2010 will create a tagged PDF (When saving, click on options, and check the tagged markup box)</div>
<ul class="subexp">
<li class="basic" id="FMID_1991422804FM"><div class="nodecontent">
Mac Word does not generate tagged PDF. Have to go in afterwards with Adobe Acrobat Pro</div>
</li>
<li class="basic" id="FMID_1578134487FM"><div class="nodecontent">
In older versions of Office, can obtain add-ons that help to create tagged PDF</div>
</li>
</ul>
</li>
<li class="col" id="FMID_481930722FM"><div class="nodecontent">
To create a tagged PDF, use "Save As PDF"</div>
<ul class="subexp">
<li class="basic" id="FMID_150002222FM"><div class="nodecontent">
Using "Print" to a PDF will not created a tagged PDF</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_174286282FM"><div class="nodecontent">
Three different types of PDFs</div>
<ul class="subexp">
<li class="basic" id="FMID_1849590963FM"><div class="nodecontent">
Image</div>
</li>
<li class="col" id="FMID_982892951FM"><div class="nodecontent">
Image with embedded fonts</div>
<ul class="subexp">
<li class="basic" id="FMID_1565961679FM"><div class="nodecontent">
Content could be all scrambled, has no tagging</div>
</li>
</ul>
</li>
<li class="col" id="FMID_1713139317FM"><div class="nodecontent">
Tagged (optimized for accessibility)</div>
<ul class="subexp">
<li class="basic" id="FMID_420822785FM"><div class="nodecontent">
Tagged PDF has been around for a while, developed in response to federal requirement that files be accessible</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_222854512FM"><div class="nodecontent">
To Create an Accessible PDF</div>
<ul class="subexp">
<li class="col" id="FMID_1126143800FM"><div class="nodecontent">
Use an authoring tool that supports...</div>
<ul class="subexp">
<li class="basic" id="FMID_1891518861FM"><div class="nodecontent">
Creating documents with headings and subheadings</div>
</li>
<li class="basic" id="FMID_1608723394FM"><div class="nodecontent">
Adding alt text to images</div>
</li>
<li class="basic" id="FMID_374052301FM"><div class="nodecontent">
Exporting to tagged PDF</div>
</li>
</ul>
</li>
<li class="basic" id="FMID_471177451FM"><div class="nodecontent">
Use these accessibility features anytime you create a document</div>
</li>
<li class="col" id="FMID_608643957FM"><div class="nodecontent">
Can tools be configured to be required to do the right thing?</div>
<ul class="subexp">
<li class="basic" id="FMID_444590321FM"><div class="nodecontent">
Some
HTML tools require alt text, headings, etc., but most other tools only
offer the ability; you have to know about it and use it</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_1878930299FM"><div class="nodecontent">
Is sitechecker available to other campuses?</div>
<ul class="subexp">
<li class="basic" id="FMID_1291108810FM"><div class="nodecontent">
Can scan 50,000 pages</div>
</li>
<li class="basic" id="FMID_1336388279FM"><div class="nodecontent">
Contact Gina Hills about using the service</div>
</li>
</ul>
</li>
<li class="col" id="FMID_1246854975FM"><div class="nodecontent">
What tools support tagged PDF</div>
<ul class="subexp">
<li class="col" id="FMID_875497844FM"><div class="nodecontent">
Microsoft Word and Powerpoint 2010 (windows only)</div>
<ul class="subexp">
<li class="basic" id="FMID_1634014020FM"><div class="nodecontent">
Save As PDF</div>
</li>
</ul>
</li>
<li class="col" id="FMID_1471458758FM"><div class="nodecontent">
Microsoft Word and PowerPoint prior to 2010</div>
<ul class="subexp">
<li class="basic" id="FMID_8622634FM"><div class="nodecontent">
Use Adobe Acrobat Pro</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_1327939743FM"><div class="nodecontent">
PDF Accessibility Check</div>
<ul class="subexp">
<li class="col" id="FMID_517102663FM"><div class="nodecontent">
Check whether document contents are an image</div>
<ul class="subexp">
<li class="basic" id="FMID_1592212233FM"><div class="nodecontent">
Is the document skewed?</div>
</li>
<li class="basic" id="FMID_804514454FM"><div class="nodecontent">
Is the font clear or fuzzy</div>
</li>
<li class="basic" id="FMID_170781410FM"><div class="nodecontent">
Try to select text on the page</div>
</li>
<li class="basic" id="FMID_435999514FM"><div class="nodecontent">
If the content is skewed, the text fuzzy, or you cannot select text, the content is an image and will not be accessible</div>
</li>
</ul>
</li>
<li class="col" id="FMID_1377843038FM"><div class="nodecontent">
Check whether document is tagged</div>
<ul class="subexp">
<li class="col" id="FMID_181476643FM"><div class="nodecontent">
Using Acrobat Reader (a free tool)</div>
<ul class="subexp">
<li class="col" id="FMID_1937996230FM"><div class="nodecontent">
Go to File > Properties (CTRL-D) and look for Tagged PDF</div>
<ul class="subexp">
<li class="basic" id="FMID_657161615FM"><div class="nodecontent">
Even if says Yes, content may not be structured well enough</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="basic" id="FMID_211133944FM"><div class="nodecontent">
File > Properties (Ctrl-D) in any version of Acrobat; will say Tagged PDF: yes or no</div>
</li>
</ul>
</li>
<li class="col" id="FMID_1277431809FM"><div class="nodecontent">
Run an accessibility check</div>
<ul class="subexp">
<li class="basic" id="FMID_473289052FM"><div class="nodecontent">
Using Adobe X Reader: Edit > Accessibility</div>
</li>
<li class="basic" id="FMID_938204066FM"><div class="nodecontent">
Using Adobe X Pro: View > Tools > Accessiblity</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_1596236709FM"><div class="nodecontent">
PDF Accessibility Repair</div>
<ul class="subexp">
<li class="col" id="FMID_452496315FM"><div class="nodecontent">
Using Acrobat Pro</div>
<ul class="subexp">
<li class="col" id="FMID_146344691FM"><div class="nodecontent">
Recognize text (if needed)</div>
<ul class="subexp">
<li class="basic" id="FMID_687122122FM"><div class="nodecontent">
Can you select words within the page</div>
</li>
</ul>
</li>
<li class="col" id="FMID_497856244FM"><div class="nodecontent">
Tag document (if needed)</div>
<ul class="subexp">
<li class="basic" id="FMID_1270369039FM"><div class="nodecontent">
In Acrobat Pro: View > Tools > Accessibility</div>
</li>
</ul>
</li>
<li class="col" id="FMID_1704353918FM"><div class="nodecontent">
Touch up reading order</div>
<ul class="subexp">
<li class="basic" id="FMID_1409069485FM"><div class="nodecontent">
In Acrobat Pro, can change reading order of elements</div>
</li>
</ul>
</li>
<li class="col" id="FMID_417457035FM"><div class="nodecontent">
Touch up structure (if needed)</div>
<ul class="subexp">
<li class="basic" id="FMID_400690609FM"><div class="nodecontent">
Can scroll through document, select item, change tag for the items</div>
</li>
<li class="basic" id="FMID_765868474FM"><div class="nodecontent">
Can add alt text to any element</div>
</li>
</ul>
</li>
<li class="basic" id="FMID_166049294FM"><div class="nodecontent">
Sometimes easier to delete all tagging and go through and retag it</div>
</li>
<li class="basic" id="FMID_1294107748FM"><div class="nodecontent">
Acrobat Pro has "Recognize Text" tool that scans images with text and generates text</div>
</li>
</ul>
</li>
<li class="col" id="FMID_738216354FM"><div class="nodecontent">
Where to find Acrobat Pro's accessibility features</div>
<ul class="subexp">
<li class="col" id="FMID_1143296084FM"><div class="nodecontent">
Recognize Text</div>
<ul class="subexp">
<li class="basic" id="FMID_896950068FM"><div class="nodecontent">
View > Tools > Recognize Text</div>
</li>
</ul>
</li>
<li class="col" id="FMID_744744217FM"><div class="nodecontent">
Read Out Loud (built-in screen reader; not very useful for blind users but may help to spot problems)</div>
<ul class="subexp">
<li class="basic" id="FMID_1425073961FM"><div class="nodecontent">
View > Read Outloud</div>
</li>
</ul>
</li>
<li class="col" id="FMID_1566955314FM"><div class="nodecontent">
Accessibility Tools</div>
<ul class="subexp">
<li class="col" id="FMID_567603489FM"><div class="nodecontent">
View > Tools > Accessibility</div>
<ul class="subexp">
<li class="basic" id="FMID_856849828FM"><div class="nodecontent">
Prior to Adobe X: Advanced > Accessibility</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_782816908FM"><div class="nodecontent">
Discussion</div>
<ul class="subexp">
<li class="col" id="FMID_1603220801FM"><div class="nodecontent">
PDF is way overused</div>
<ul class="subexp">
<li class="basic" id="FMID_1367751885FM"><div class="nodecontent">
Many times people create PDF by default</div>
</li>
<li class="basic" id="FMID_115809895FM"><div class="nodecontent">
PDF is useful if you need the document to look the same for all users</div>
</li>
<li class="basic_active" id="FMID_1168066479FM"><div class="nodecontent">
Otherwise likely to be better off creating document in HTML</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com4tag:blogger.com,1999:blog-37426996.post-43953359309489258792011-05-26T15:23:00.000-07:002011-05-26T15:23:54.310-07:00Mobile Accessibility<br />
<div class="basetext" id="base">
Mobile Accessibility<br />
An open discussion<br />
<ul class="subexp">
<li class="col" id="FMID_42874378FM">Accessibility
Features</li>
<ul>
<li class="col" id="FMID_1333786589FM">Mobile devices offer
features to support users with various disabilities
<ul class="subexp">
<li class="basic" id="FMID_956167587FM">Text zoom,
screen zoom, cursor magnification and highlighting,
on-screen keyboard, text-to-speech, audio, high
visibility visual display modes</li>
</ul>
</li>
<li class="col" id="FMID_82699835FM">Apps can add
specialized functionality
<ul class="subexp">
<li class="col" id="FMID_569105383FM">QuestVisual's
Word Lens reads signs and translates them to a
different language
<ul class="subexp">
<li class="basic" id="FMID_929349094FM">
http://questvisual.com/</li>
</ul>
</li>
<li class="col" id="FMID_350479702FM">Humanware's
Oratio screen reader
<ul class="subexp">
<li class="basic" id="FMID_76680085FM">
http://www.humanware.com/en-usa/products/blindness/oratio_for_blackberry_smartphones/_details/id_131/oratio_for_blackberry_smartphones.html</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
<ul class="noindent">
<li class="col" id="FMID_1905856544FM">The challenge of the
touch interface
<ul class="subexp">
<li class="col" id="FMID_1160171195FM">Smartphones and
tablets generally are designed with "natural user
interfaces"
<ul class="subexp">
<li class="basic" id="FMID_569218516FM">By using
touch gestures your can manipulate the user
interface</li>
</ul>
</li>
<li class="col" id="FMID_1698451483FM">What does touch
interaction mean to people with various
disabilities?</li>
</ul>
</li>
<li class="col" id="FMID_1619305798FM">Current state of
mobile accessibility
<ul class="subexp">
<li class="col" id="FMID_1471639894FM">Summarized in an
IBM presentation at CSUN 2011
<ul class="subexp">
<li class="basic" id="FMID_1001163681FM">
http://www-03.ibm.com/able/news/downloads/IBM_Advancing_Mobile_Usability_for_Everyone_CSUN_2011.pdf</li>
</ul>
</li>
<li class="basic" id="FMID_327694030FM">Smartphone
market as of 8/2010 consists of 24% iPhone, 20%
Android, 38% RIM (Blackberry)</li>
<li class="basic" id="FMID_246885998FM">iPhone has
VoiceOver voice browser built in, other smartphones
require a 3rd party app</li>
<li class="basic" id="FMID_1034956143FM">iPhone
supports ARIA, somewhat</li>
<li class="basic" id="FMID_1689541995FM">iPhone and
Android support HTML5, somewhat</li>
<li class="basic" id="FMID_119239135FM">Andoid offers
tactile (haptic) feedback</li>
</ul>
</li>
<li class="col" id="FMID_680924945FM">Mobile Apps
<ul class="subexp">
<li class="col" id="FMID_1664701957FM">Native apps
<ul class="subexp">
<li class="basic" id="FMID_1928983730FM">Run on the
mobile device</li>
<li class="basic" id="FMID_516169079FM">Need to be
written for specific device type using that devices
toolset</li>
<li class="basic" id="FMID_338826824FM">Often draw
content from information services elsewhere, such
as RSS feeds</li>
<li class="col" id="FMID_1291092933FM">Native App
Resources
<ul class="subexp">
<li class="col" id="FMID_1992648966FM">
Designing for Accessibility - Android
Developers
<ul class="subexp">
<li class="basic" id="FMID_1198314496FM">
http://developer.android.com/guide/practices/design/accessibility.html</li>
</ul>
</li>
<li class="col" id="FMID_915150619FM">iOS
Accessibility
<ul class="subexp">
<li class="basic" id="FMID_45729645FM">
http://developer.apple.com/technologies/ios/accessibility.html</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_433588033FM">Web apps
<ul class="subexp">
<li class="col" id="FMID_72044721FM">Types of Web
sites
<ul class="subexp">
<li class="col" id="FMID_232812352FM">Standard
Web pages
<ul class="subexp">
<li class="basic" id="FMID_529854337FM">
Often have wide fixed widths, small fonts,
low contrast, complex navigation</li>
<li class="basic" id="FMID_327062051FM">
Difficult to use on a mobile; much zooming,
scrolling, hitting the wrong links</li>
</ul>
</li>
<li class="col" id="FMID_1823701998FM">Mobile
friendly sites
<ul class="subexp">
<li class="basic" id="FMID_714532190FM">
Usually have flex designs, thorough use of
relative size measures, large "tappable"
links, simple navigation menus, simple
hierarchical site structure</li>
<li class="basic" id="FMID_1077283903FM">
Could have a user interface for interaction
(example: make a restaurant reservation),
but takes some close attention to use
it</li>
</ul>
</li>
<li class="col" id="FMID_1267020481FM">Mobile
optimized sites
<ul class="subexp">
<li class="basic" id="FMID_1502118790FM">
Very simplified page design, flex design or
auto-sizing to mobile screen size, very
simple navigation, large tappable links and
buttons.</li>
<li class="basic" id="FMID_1921532877FM">If
written with HTML5 can have many user
interface features that are designed for
use on mobiles, such as spinners, sliders,
and forms that automatically evoke the
appropriate keyboard</li>
<li class="basic" id="FMID_573090676FM">
Could have functional interaction
interfaces, to the extent care is taken to
design for mobile devices</li>
</ul>
</li>
</ul>
</li>
<li class="basic" id="FMID_472497016FM">Can also
draw content from Web services</li>
<li class="col" id="FMID_345414537FM">May use HTML5
<ul class="subexp">
<li class="basic" id="FMID_1682191108FM">HTML5
is not standardized yet, variation among
implementations</li>
<li class="basic" id="FMID_558707814FM">Many
devices do not understand HTML5, but iPhones
and recent Androids do, each in their own
way</li>
</ul>
</li>
<li class="col" id="FMID_1681894492FM">Different
from mobile friendly Web pages, which are Web pages
that display well and are reasonably usable on
mobile browsers
<ul class="subexp">
<li class="basic" id="FMID_487082294FM">Usually
have flex designs, large tappable links, simple
navigation</li>
</ul>
</li>
<li class="col" id="FMID_788723869FM">Web App
Resources
<ul class="subexp">
<li class="col" id="FMID_914717245FM">Luke
Wrobelwski
<ul class="subexp">
<li class="basic" id="FMID_1925362756FM">
http://www.lukew.com/</li>
</ul>
</li>
<li class="col" id="FMID_1785029941FM">Mobile
Safari Web Application Tutorial
<ul class="subexp">
<li class="basic" id="FMID_1009911485FM">
http://developer.apple.com/library/mac/#documentation/AppleApplications/Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/MakingaWebApp/MakingaWebApp.html</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_1628594840FM">iOS Native App
Accessibility Support
<ul class="subexp">
<li class="col" id="FMID_1745776644FM">Apple things
supporting accessibility is good business
<ul class="subexp">
<li class="col" id="FMID_1803200270FM">Apple's
Commitment to Accessibility
<ul class="subexp">
<li class="basic" id="FMID_56564234FM">
http://www.apple.com/accessibility/</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_400758682FM">Matt Legend
Gemmell, an independent Apple OSX and iOS developer,
says it is easy to add accessibility support to your
app
<ul class="subexp">
<li class="basic" id="FMID_1329558980FM">
http://mattgemmell.com/2010/12/19/accessibility-for-iphone-and-ipad-apps</li>
<li class="basic" id="FMID_1883196004FM">Built-in
VoiceOver support in UIKit gives you 80%
accessibility support</li>
<li class="basic" id="FMID_1956555430FM">You can up
that to 95% by configuring Interface Builder</li>
<li class="col" id="FMID_86016329FM">You ccan up it
to 100% support by using some "incredibly trivial
methods"
<ul class="subexp">
<li class="basic" id="FMID_521778523FM">Doubt
was expressed about Deep Geeks who say
something is trivially simple</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="col" id="FMID_1230947712FM">Android
Accessibility Support
<ul class="subexp">
<li class="col" id="FMID_699937720FM">Android Developer
site says Androids have an accessibility layer that
helps users navigate their devices more easily
<ul class="subexp">
<li class="basic" id="FMID_1339852070FM">
http://developer.android.com/guide/practices/design/accessibility.html</li>
</ul>
</li>
<li class="col" id="FMID_1255216875FM">Apps are
specifically available for people who are blind or have
low vision
<ul class="subexp">
<li class="col" id="FMID_1248659688FM">
<div class="nodecontent">
Mobile Accessibility for Android - a suite of
programs
</div>
<ul class="subexp">
<li class="basic" id="FMID_1921344837FM">
http://www.codefactory.es/en/products.asp?id=415</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li style="list-style: none;">
</li>
</ul>
</div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-29149932949656440212011-05-05T14:49:00.000-07:002011-05-05T14:55:04.432-07:00Defense Against the Dark Arts<ul>
</ul>
Rick Ells, UW-IT <br />
AccessibleWeb@U Meeting, April 28, 2011<br />
<ul>
<li>Approach of this study
<ul>
<li>Dark Patterns Project
<ul>
<li><a href="http://wiki.darkpatterns.org/">http://wiki.darkpatterns.org</a></li>
<li>A project led by Harry Brignull
(<a href="http://www.90percentofeverything.com/">http://www.90percentofeverything.com/</a>)</li>
<li>Focuses on examples of user experience design
that are misleading, manipulative, or deceptive</li>
<li>Provides many of the ideas and examples for this
talk</li>
</ul>
</li>
<li>Review of a number of user experience (UX) and user
interface (UI) sites for information on good practices
<ul>
<li><a href="http://www.sylvantech.com/%7Etalin/projects/ui_design.html">
Principles for User Interface Design</a> by
Talin</li>
<li><a href="http://www.useit.com/papers/heuristic/heuristic_list.html">
Ten Usability Heuristics</a> by Jakob Nielsen</li>
<li><a href="http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/">
Ten Principles of Effective Web Design</a> by Vitaly
Friedman</li>
</ul>
</li>
<li>Review of several consumer complaint sites. Most
focused on the experience of the consumer in the overall
business transaction and did not provide much information
about deceptive Web designs</li>
</ul>
</li>
<li>Some Terminology
<ul>
<li>Terminology from Service Oriented Architecture
(SOA)</li>
<li>Goals – Strategic objectives</li>
<li>Principles – Design characteristics that
support goals</li>
<li>Patterns – Solutions to common problems
encountered when applying principles</li>
</ul>
</li>
<li>Dark Art Spells and Incantations
<ul>
<li>Dark patterns are coding, design, and layout
practices deliberately chosen to mislead the user into
doing something other than what they came to do or giving
up information they do not need to provide to achieve the
purpose of their visit</li>
</ul>
</li>
<li>So What Does This Have to Do With Accessibility?
<ul>
<li>A person working through assistive technology is even
more vulnerable to being misled by dark patterns.</li>
<li>It is easy to inadvertantly engage in dark patterns,
even if you are a white knight. Being aware of dark
patterns can help you avoid them in your own work.</li>
<li>If you find yourself feeling indignant as you
see these examples, think how you would feel if you had a
disability that made it even more difficult to realize
you were being manipulated or deceived.</li>
</ul>
</li>
<li>Let Me Out!
<ul>
<li>Packaged fees, but no simple way to opt-out of
specific fees in the package ("I do not want your service
plan!")</li>
<li>Sign-up online, but canceling requires snail mail to
corporate headquarters</li>
<li>Automatically signing you up for multiple email
lists, while hiding how to select the ones you want or
deselect the ones you do not want</li>
</ul>
</li>
<li>Promises, Promises
<ul>
<li>You are invited to contribute your articles to the
site for all to see, but does not mention that fees will
be charged to people trying to see them.</li>
<li>Promising free access to information, but only giving
it to people who register.</li>
<li>Saying the information you seek has been found, now
please pay upfront to see it. So you pay and the
information is not what you asked for.</li>
</ul>
</li>
<li>Role Swapping
<ul>
<li>Placing one type of question where another typically
is located</li>
<li>On software download pages, have other "Download"
boxes for other software, without clear labelling to
distinguish them from the download box of the
product</li>
<li>Placing “Buy enhanced support plan”
checkbox where “Send me marketing email”
checkbox is usually located (down by submit button)</li>
</ul>
</li>
<li>Unitless Offers
<ul>
<li>Recurring fee looks like a single fee</li>
<li>Displayed rate is only for first month, subsequent
monthly rate is not shown</li>
<li>Ambiguous units</li>
<li>What is “Weekend rate”? Is that the rate
for the whole weekend or for each day in the
weekend?</li>
</ul>
</li>
<li>Forced Continuity
<ul>
<li>Free trial silently rolls over into a periodic
charge</li>
<li>Turning off the periodic charge requires going to
some other site or even contacting the company by other
means than the Web</li>
</ul>
</li>
<li>Intuition Flipping
<ul>
<li>Reverse intuitive questions — “Check if
you do not want extra insurance”</li>
<li>Opt flipping — Counter intuitive opt-in/opt-out
questions — “Do you not want to receive our
marketing messages”</li>
</ul>
</li>
<li>Comparison Squelching
<ul>
<li>Price revealed only on the very last screen, perhaps
after you have enter identification and credit card
information</li>
<li>Only show rates without other fees that will be
added</li>
<li>Only state prices in the form of “As low
as…”</li>
</ul>
</li>
<li>Whispered Exceptions
<ul>
<li>Exceptions and other qualifications of an offer are
at the bottom of the page in low contrast text</li>
<li>Such text may be elsewhere in the site in an
un-intuitive location, such as in the Statement of Terms
and Conditions</li>
</ul>
</li>
<li>Other Dark Art Power Practices
<ul>
<li>Discontinuities in decision trees so that choices
important to the user are not encountered in the course
of the interaction</li>
<li>Needed information not available in context</li>
<li>Misleading high visibility offers, hidden or low
visibility qualifications on the offers</li>
<li>Massive default opt-ins</li>
<li>Hidden paywalls (you are in far enough that you do
not want to quit, so you pay)</li>
<li>Burying choices that are disadvantageous to the site
owner — out of sight, out of mind</li>
</ul>
</li>
<li>White Art Practices
<ul>
<li>The WCAG 2.0 Four — Perceivable, Operable,
Understandable, Robust</li>
<li>Empower — Let user know choices up-front so
they can make informed choices</li>
<li>Decision Points — Present decision options
clearly as a set</li>
<li>User Perspective — Support user expectations
and habits</li>
</ul>
</li>
<li>When Dark Patterns Are Used By Good Guys
<ul>
<li>The vendor may be aware that customers base their
choices on incorrect understandings of the products. For
example, many computer vendors do not put the CPU speed
up front because now that many computers have multi-core
processors, the CPU speed is not a good indicator of
responsiveness of applications running on the
computer.</li>
<li>The buying style of the vendor's customers may be
less based on price and more based on the features of the
product.</li>
</ul>
</li>
<li>Defending Against the Dark Arts
<ul>
<li>WCAG and 508 as your technology foundation</li>
<li>Build the user interaction based on user expectations
and perceptions</li>
<li>Keep key choices and information in-path and
in-view</li>
<li>Give the user control of what is theirs</li>
<li>Simplicity, clarity, integrity</li>
<li>Design your site to support upfront negotiation of
options, a square deal making it clear what has been
chosen and its costs, and conclude with a handshake
clarifying your commitments to your customer</li>
</ul>
</li>
</ul>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0