tag:blogger.com,1999:blog-374269962012-02-06T08:35:49.262-08:00Buzz, thoughts, and observations on the ongoing efforts to build information technologies that work for all people at the University of Washington.Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.comBlogger211100tag:blogger.com,1999:blog-37426996.post-26673137723448769042011-10-28T08:44:00.000-07:002011-11-04T10:34:26.154-07:00Rick 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> &lt;img src="gw.jpg" alt="George Washington"&gt; </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>&lt;form action="form_action.asp" method="get"&gt; &lt;label for="first"&gt;First name:&lt;/label&gt; &lt;input type="text" name="fname" id="first"/&gt;&lt;br /&gt; &lt;label for="last"&gt;Last name:&lt;/label&gt; &lt;input type="text" name="lname" id="last" /&gt;&lt;br /&gt; &lt;input type="submit" value="Submit" /&gt; &lt;/form&gt; </pre> Check labelling in a form with the Web Developer toolbar View Source item; Search in the source for "&lt;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>&lt;h2 style="font: medium bold verdana, sans-serif"&gt; New Technology&lt;/h2&gt;</dd> <dt>Non-Semantic:</dt> <dd>&lt;div style="font: medium bold verdana, sans-serif"&gt; New Technology&lt;/div&gt;</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 &amp; 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><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-2667313772344876904?l=accesswebu.blogspot.com' alt='' /></div>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:00AccessibleWeb@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 &gt; 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 &gt; 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 &gt; Accessibility</div> </li> <li class="basic" id="FMID_938204066FM"><div class="nodecontent"> Using Adobe X Pro: View &gt; Tools &gt; 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 &gt; Tools &gt; 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 &gt; Tools &gt; 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 &gt; 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 &gt; Tools &gt; Accessibility</div> <ul class="subexp"> <li class="basic" id="FMID_856849828FM"><div class="nodecontent"> Prior to Adobe X: Advanced &gt; 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><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-6706025651329575637?l=accesswebu.blogspot.com' alt='' /></div>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:00<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><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-4395335930948925879?l=accesswebu.blogspot.com' alt='' /></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:00<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><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-2914993294965644021?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-61842663231949980832011-04-01T15:55:00.001-07:002011-04-01T15:55:55.116-07:00<!--[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:DontVertAlignCellWithSp/> <w:DontBreakConstrainedForcedTables/> <w:DontVertAlignInTxbx/> <w:Word11KerningPairs/> <w:CachedColBalance/> </w:Compatibility> <w:DoNotOptimizeForBrowser/> <m:mathPr> <m:mathFont m:val="Cambria Math"/> <m:brkBin m:val="before"/> <m:brkBinSub m:val="&#45;-"/> <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]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true" DefSemiHidden="true" DefQFormat="false" DefPriority="99" LatentStyleCount="267"> <w:LsdException Locked="false" Priority="0" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Normal"/> <w:LsdException Locked="false" Priority="9" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="heading 1"/> <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 2"/> <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 3"/> <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 4"/> <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 5"/> <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 6"/> <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 7"/> <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 8"/> <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 9"/> <w:LsdException Locked="false" Priority="39" Name="toc 1"/> <w:LsdException Locked="false" Priority="39" Name="toc 2"/> <w:LsdException Locked="false" Priority="39" Name="toc 3"/> <w:LsdException Locked="false" Priority="39" Name="toc 4"/> <w:LsdException Locked="false" Priority="39" Name="toc 5"/> <w:LsdException Locked="false" Priority="39" Name="toc 6"/> <w:LsdException Locked="false" Priority="39" Name="toc 7"/> <w:LsdException Locked="false" Priority="39" Name="toc 8"/> <w:LsdException Locked="false" Priority="39" Name="toc 9"/> <w:LsdException Locked="false" Priority="35" QFormat="true" Name="caption"/> <w:LsdException Locked="false" Priority="10" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Title"/> <w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"/> <w:LsdException Locked="false" Priority="11" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/> <w:LsdException Locked="false" Priority="22" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Strong"/> <w:LsdException Locked="false" Priority="20" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/> <w:LsdException Locked="false" Priority="59" SemiHidden="false" UnhideWhenUsed="false" Name="Table Grid"/> <w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text"/> <w:LsdException Locked="false" Priority="1" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="No Spacing"/> <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading"/> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List"/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid"/> <w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1"/> <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2"/> <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1"/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2"/> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2"/> <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3"/> <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List"/> <w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading"/> <w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List"/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid"/> <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 1"/> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 1"/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 1"/> <w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1"/> <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1"/> <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 1"/> <w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision"/> <w:LsdException Locked="false" Priority="34" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="List Paragraph"/> <w:LsdException Locked="false" Priority="29" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Quote"/> <w:LsdException Locked="false" Priority="30" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Intense Quote"/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 1"/> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/> <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/> <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 1"/> <w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/> <w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 1"/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/> <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 2"/> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 2"/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 2"/> <w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/> <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/> <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 2"/> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/> <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/> <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 2"/> <w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/> <w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 2"/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/> <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 3"/> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 3"/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 3"/> <w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/> <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/> <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/> <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/> <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 3"/> <w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/> <w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 3"/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/> <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 4"/> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 4"/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 4"/> <w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/> <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/> <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/> <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/> <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 4"/> <w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/> <w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 4"/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/> <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 5"/> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 5"/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 5"/> <w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/> <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/> <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/> <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/> <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 5"/> <w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/> <w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 5"/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 5"/> <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 6"/> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 6"/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 6"/> <w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6"/> <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6"/> <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 6"/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 6"/> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6"/> <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6"/> <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 6"/> <w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 6"/> <w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 6"/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 6"/> <w:LsdException Locked="false" Priority="19" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis"/> <w:LsdException Locked="false" Priority="21" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis"/> <w:LsdException Locked="false" Priority="31" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference"/> <w:LsdException Locked="false" Priority="32" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/> <w:LsdException Locked="false" Priority="33" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Book Title"/> <w:LsdException Locked="false" Priority="37" Name="Bibliography"/> <w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading"/> </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-qformat:yes; 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:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin;} </style> <![endif]--> <br /> <div class="MsoPlainText"> Are Google Apps accessible enough to be relied on as the primary tools for your class or office?</div> <div class="MsoPlainText"> <br /></div> <div class="MsoPlainText"> The National Federation of the Blind (NFB) feels they are not and has asked the Department of Justice to investigate the reliance of New York University (NYU) and Northwestern University on Google apps as a violation of the civil rights of blind faculty and students. See...</div> <div class="MsoPlainText"> <span style="mso-spacerun: yes;">&nbsp; </span><a href="http://www.nfb.org/NewsBot.asp?MODE=VIEW&amp;ID=771">http://www.nfb.org/NewsBot.asp?MODE=VIEW&amp;ID=771</a></div> <div class="MsoPlainText"> <br /></div> <div class="MsoPlainText"> The Chronicle of Higher Education had a short article on the topic that drew a lot of comments:</div> <div class="MsoPlainText"> <span style="mso-spacerun: yes;">&nbsp; </span><a href="http://chronicle.com/blogs/wiredcampus/colleges-discriminate-against-the-blind-with-google-apps-advocates-say/30394">http://chronicle.com/blogs/wiredcampus/colleges-discriminate-against-the-blind-with-google-apps-advocates-say/30394</a></div> <div class="MsoPlainText"> <br /></div> <div class="MsoPlainText"> Just how accessible are the various Google Apps? The Web2Access site, which evaluates interactive and collaborative e-learning tools, has been looking at the Google Apps. You can see their evaluations by going to the Web2Access site at...</div> <div class="MsoPlainText"> <span style="mso-spacerun: yes;">&nbsp;&nbsp;&nbsp; </span><a href="http://web2access.org.uk/">http://web2access.org.uk/</a></div> <div class="MsoPlainText"> ...and entering "google" in the search box. Readability and accessibility of text editors seem to be common weak points. </div> <div class="MsoPlainText"> <br /></div> <div class="MsoPlainText"> NFB has created a set of accessibility demonstration videos to show the kinds of problems they feel raise concern. You can see the videos at...</div> <div class="MsoPlainText"> <span style="mso-spacerun: yes;">&nbsp; </span><a href="http://www.nfb.org/nfb/googleaccessibilityvideos.asp">http://www.nfb.org/nfb/googleaccessibilityvideos.asp</a></div> <div class="MsoPlainText"> <br /></div> <div class="MsoPlainText"> Google itself says it is committed to improving accessibility of its products. See...</div> <div class="MsoPlainText"> <span style="mso-spacerun: yes;">&nbsp; </span><a href="http://www.google.com/accessibility/products/">http://www.google.com/accessibility/products/</a></div> <div class="MsoPlainText"> and</div> <div class="MsoPlainText"> <span style="mso-spacerun: yes;">&nbsp; </span><a href="http://www.google.com/accessibility/">http://www.google.com/accessibility/</a></div> <div class="MsoPlainText"> <br /></div> <div class="MsoPlainText"> One response to all this buzz is to let Google know how important accessibility is for the higher education environment. Back when Apple started pushing iTunes U, the California State University system (which has 23 campuses) refused to get on board because of serious accessibility problems with the iTunes interface. CSU even sent delegations to the Apple headquarters to advocate for improvements. Apple responded by making significant improvements. So, letting the vendor know how you feel can bring about real change.</div> <div class="MsoPlainText"> <br /></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-6184266323194998083?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-71823887553330353082011-03-04T15:33:00.000-08:002011-03-04T15:35:31.078-08:00On Thursday, Yahoo's Ted Drake gave a presentation of CSE students about accessible design to kick off the coming week's HackU event (<a href="http://developer.yahoo.com/hacku/uw.html" rel="nofollow">http://developer.yahoo.com/hacku/uw.html</a>). Below are slightly cryptic notes of all the things Ted talked about<br /> <h3> <a href="http://www.blogger.com/post-create.g?blogID=37426996" name="TedDrake-AccessibilityInnovationsandChallenges"></a>Accessibility Innovations and Challenges</h3> Ted Drake, Yahoo Accessibility Lab<br /> Facebook: YahooAccessibility<br /> Yahoo Accessibility Lab Blog: <a href="http://yaccessibilityblog.com/" rel="nofollow">http://yaccessibilityblog.com/</a><br /> Drake's Blog: <a href="http://developer.yahoo.com/blogs/ydn/posts/author/tdrake/" rel="nofollow">http://developer.yahoo.com/blogs/ydn/posts/author/tdrake/</a><br /> Presentation: <a href="http://www.slideshare.net/7mary4/yahoo-hack-university-accessiblie-innovations-and-challenges" rel="nofollow">http://www.slideshare.net/7mary4/yahoo-hack-university-accessiblie-innovations-and-challenges</a><br /> <ul> <li>Yahoo <ul> <li>Has history of front end engineers working with back end engineers</li> <li>Front end team has task of making it accessible <ul> <li>Web developers do most of the accessibility work</li> </ul> </li> </ul> </li> </ul> <ul> <li>Accessibility HackU competitions (<a href="http://developer.yahoo.com/hacku/uw.html" rel="nofollow">http://developer.yahoo.com/hacku/uw.html</a>). <ul> <li>Students build tools that make things more accessible</li> <li>Team with the best hack gets a prize</li> </ul> </li> </ul> <ul> <li>What is accessibility? <ul> <li>Addressing the needs of people with disabilities and their friends and families</li> <li>About leveling the playing field</li> <li>A major goal is to remove barriers - if your UI requires a mouse, you are already excluding people</li> <li>Thinking about universal design, from the start, all the way through <ul> <li>You want designs that work for people whether they are abled or disabled</li> </ul> </li> </ul> </li> <li>Who makes it accessible? <ul> <li>Lawsuit against Target for the inaccessibility of their<br /> commercial site design emphasizes the importance of accessible<br /> design</li> <li>Accessibility is built by advocates and champions <ul> <li>Advocate refuses to go around things that are inadequate</li> <li>Champions make accessible design happen</li> </ul> </li> </ul> </li> <li>Make it accessible <ul> <li>Contrast - There are several good contrast evaluation tools<br /> out there, just search for "contrast checker"</li> <li>Do not rely solely on color to convey meaning ("click on the red button")</li> <li>Alt text for graphics needs to be explanatory, do not just repeat the headline <ul> <li>alt="" appropriate if image is decorative</li> <li>ARIA has a role="presentation"</li> </ul> </li> <li>Title attribute - does not replace the Alt attribute</li> <li>Images may be disabled <ul> <li>If using background images in CSS and you have text on that background,<br /> check for contrast of text on background without image. White lettering<br /> that no longer has a dark background is hard to read.</li> </ul> </li> <li>Off-screen text <ul> <li>A method sometimes used to make text available to people<br /> using screen readers but not visible to others by placing it<br /> way off screen</li> <li>A problem in countries with text flow from right to left</li> </ul> </li> <li>Using wrong element type in HTML can confuse things. Use the most<br /> semantically correct element type <ul> <li>Example: using button for sign-in, then using anchor for cancel<br /> because you want cancel to look like a link <ul> <li>Confusing because cancel is an action, not a link to somewhere</li> <li>Instead, make the cancel a button and style it as a link</li> </ul> </li> <li>ARIA role role="button" can be used to clarify things for the screen reader</li> </ul> </li> <li>Use th in tables for row and column headings</li> <li>Command + allows you to zoom the page <ul> <li>Web designers are getting lazy about accessibility implications</li> <li>A person who zooms in ends up with scroll bars</li> <li>On Firefox, go to zoom text only (View -&gt; Zoom - Zoom Text Only</li> <li>Use YUI CSS packages <ul> <li>Example: YUI Grids CSS (<a href="http://developer.yahoo.com/yui/grids/" rel="nofollow">http://developer.yahoo.com/yui/grids/</a>) takes care of all the basics for you</li> <li>All based on standards</li> </ul> </li> <li>Proportional sizing is nice, but your situation may require fixed widths</li> </ul> </li> <li>Forms need labeling - every form field should have a text associated<br /> with it and the label attribute should be used to associate the field and<br /> the text.</li> <li>ARIA <ul> <li>Can be used today</li> <li>Works in almost all browsers</li> <li>How to do it <ul> <li>Landmarks role="search"</li> <li>Function role="button"</li> <li>Labels aria-label="Search Term"</li> <li>State aria-invalid="true"</li> </ul> </li> </ul> </li> <li>HTML5 <ul> <li>Firefox 4 will have the ability to use HTML5 roles, but most other browsers are not there yet</li> </ul> </li> </ul> </li> </ul> <ul> <li>Innovative Solutions - Things student developers can work on <ul> <li>Traumatic brain injuries <ul> <li>Be careful about grayed out parts of your UI</li> <li>Planning and execution assistant and trainer (PEAT)<br /> (<a href="http://www.brainaid.com/" rel="nofollow">http://www.brainaid.com/</a>) manages timeline events, notifying<br /> patient of what needs to be done when</li> </ul> </li> <li>Short term memory loss hacks <ul> <li>Re-education tools</li> </ul> </li> <li>Cognitive disabilities <ul> <li>Syntax simplifiers</li> </ul> </li> <li>Presentation transformation <ul> <li>Readability.com <ul> <li>Simplifies presentation of Web pages</li> </ul> </li> </ul> </li> <li>Icon identification of options <ul> <li>Enables visual based search, such as for phone numbers<br /> for people who have difficulty reading</li> </ul> </li> <li>Memory loss <ul> <li>What will help a person remember?</li> <li>Mental games, seems to help short term memory loss</li> <li>Journals</li> </ul> </li> <li>Non-visual people <ul> <li>Texture recognition</li> <li>Converting visual to plain text <ul> <li>Photograph a street sign and it tells you want the sign says</li> </ul> </li> <li>Directions <ul> <li>Phone Wand tells you are going in the right directions</li> </ul> </li> <li>Games <ul> <li>Game for the blind that uses stereo sound</li> </ul> </li> </ul> </li> <li>Deaf hacks <ul> <li>Sound detector, warns of sirens, etc.</li> <li>Deaf twitter - take video, send it to twitter</li> </ul> </li> <li>Physical challenges <ul> <li>Web site scanner, moves through Web page section by section,<br /> bringing up sections that contain actions <ul> <li>Designed for someone who navigates with a single finger</li> </ul> </li> <li>Picture based communication devices <ul> <li>Buttons for specific messages (no, yes, help, etc.)</li> <li>Need a service on the cloud that remembers your settings</li> </ul> </li> </ul> </li> <li>Support social network <ul> <li>Giving feedback to support people</li> </ul> </li> <li>If it ain't broke, fix it anyway <ul> <li>Cool little apps can really enhance people's lives even<br /> if initially people are not sure they need them</li> </ul> </li> </ul> </li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-7182388755333035308?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-89418336120779887962011-01-28T14:52:00.000-08:002011-01-28T14:52:19.163-08:00<b>AccessibleWeb@U Meeting &mdash; January 27, 2011</b> <ul class="subexp"> <li class="col" id="FMID_596844574FM">Rolf Johnson <ul class="subexp"> <li class="basic" id="FMID_909442723FM">Assistant Attorney General in the UW Division of the Attorney General's Office (http://uw.edu/admin/ago/) - Guest Speaker</li> </ul> </li> <li class="col" id="FMID_1830985452FM">Web Accessibility &amp; The Proposed New DOJ Regulations: The Federal Rulemaking Process <ul class="subexp"> <li class="basic" id="FMID_458549195FM"><a href= "http://uw.edu/accessibility/accessibleweb/rolfbj_rule_process.pdf"> Presentation available at http://uw.edu/accessibility/accessibleweb/rolfbj_rule_process.pdf</a> <a href= "http://uw.edu/accessibility/accessibleweb/rolfbj_rule_process.pdf"> </a></li> <li class="col" id="FMID_816180377FM">Summary <ul class="subexp"> <li class="col" id="FMID_1301915001FM">Positive law heirarchy <ul class="subexp"> <li class="col" id="FMID_1354324422FM"> Constitutions <ul class="subexp"> <li class="basic" id="FMID_844968889FM"> Written at broad level of abstraction</li> </ul> </li> <li class="col" id="FMID_1946351388FM"> Statutes <ul class="subexp"> <li class="basic" id= "FMID_1751230420FM">Also written at broad level</li> <li class="col" id="FMID_262256441FM"> May give agency specific authorities <ul class="subexp"> <li class="basic" id= "FMID_90545779FM">DOJ is elaborating on what the ADA means and how it works</li> <li class="basic" id= "FMID_220034121FM">In this case Department of Justice has authority to make rules</li> </ul> </li> </ul> </li> <li class="col" id="FMID_1509870628FM"> Regulations <ul class="subexp"> <li class="basic" id= "FMID_1729211439FM">Legislative - implementing statutes</li> <li class="col" id="FMID_343595886FM"> Non-legislative - guidance <ul class="subexp"> <li class="basic" id= "FMID_858079255FM">State how laws will be interpreted</li> <li class="basic" id= "FMID_570100044FM">Policy statements - how the agency intends to exercise its discretionaly authority</li> </ul> </li> <li class="basic" id= "FMID_1119455691FM">Management and procedural</li> </ul> </li> <li class="col" id="FMID_615333367FM"> Legistative rules require Administrative Procedures Act (APA) process <ul class="subexp"> <li class="basic" id="FMID_219726670FM"> These rules often called regulations</li> </ul> </li> </ul> </li> <li class="col" id="FMID_1254889612FM">APA process generally <ul class="subexp"> <li class="basic" id="FMID_462992002FM">APA rulemaking also called "informal" or "notice-and-comment" rulemaking</li> <li class="col" id="FMID_1706620788FM">Basic APA rulemaking rpcoess <ul class="subexp"> <li class="basic" id= "FMID_1495391237FM">NPRM - Notice of Proposed Rulemaking</li> </ul> </li> <li class="col" id="FMID_889602298FM">Other Procedures <ul class="subexp"> <li class="basic" id= "FMID_1601659760FM">ANPRM - Advanced Notice of Proposed Rulemaking</li> <li class="basic" id= "FMID_1206357034FM">SNPRM - Supplemental Notice of Proposed Rulemaking</li> <li class="basic" id="FMID_401113704FM"> IFR - Interim Final Rule</li> </ul> </li> </ul> </li> <li class="col" id="FMID_1138102141FM">ADA Design Standards Revision <ul class="subexp"> <li class="basic" id="FMID_307544841FM"> General physical and architectural standards were updated first</li> <li class="col" id="FMID_1086788480FM"> Timeline <ul class="subexp"> <li class="basic" id="FMID_263934633FM"> Sept. 30, 2004 - ANRPM published</li> <li class="basic" id= "FMID_1411965497FM">June 17, 2008 - NPRM published</li> <li class="basic" id="FMID_575722839FM"> September 15, 2010 - final rule published</li> </ul> </li> </ul> </li> <li class="col" id="FMID_411608057FM">Proposed Web Accessibility Rules <ul class="subexp"> <li class="col" id="FMID_966214995FM"> Results of comments received during ADA design standards <ul class="subexp"> <li class="basic" id="FMID_853693641FM"> June 26, 2010 - ANPRM published</li> <li class="basic" id="FMID_76645653FM"> Nov - Jan 2010/11 - Three hearings held</li> <li class="basic" id= "FMID_1320858060FM">Jan 24 2011 - ANPRM comment period closed</li> <li class="col" id="FMID_1158243746FM"> Jan 2012 - NPRM to be published <ul class="subexp"> <li class="basic" id= "FMID_1284147108FM">Typically comment period is 60-90 days</li> </ul> </li> <li class="col" id="FMID_836575961FM"> ??? - NPRM comment period closes <ul class="subexp"> <li class="basic" id= "FMID_35512451FM">Nothing dictates that rules must be issued on any fixed timeline</li> </ul> </li> <li class="col" id="FMID_1254429011FM"> ??? - final rule published <ul class="subexp"> <li class="basic" id= "FMID_1078396817FM">Maybe sometime in mid-2013</li> <li class="basic" id= "FMID_128838730FM">6 months later - New rule goes into effect for new pages</li> <li class="basic" id= "FMID_1606883410FM">Two years later - Rules go into effect for old pages and sites</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li class="col" id="FMID_524474209FM">Discussion <ul class="subexp"> <li class="col" id="FMID_302516410FM">Interesting aspects of the ANPRM <ul class="subexp"> <li class="basic" id="FMID_213343602FM">Rules will apply to the UW both through ADA Title II in that we are a state entity and through Title III in that we are a public accomodation</li> <li class="col" id="FMID_670397075FM"> Limitations of responsiblity <ul class="subexp"> <li class="basic" id="FMID_114548823FM">Not responsible for content posted or uploaded to site by persons outside or your control</li> <li class="basic" id="FMID_1478308406FM">Do not cover informal or occasional trading, selling or bartering, but would cover larger commercial enterprises</li> <li class="col" id="FMID_357733193FM">Not responsible for accessibility of sites that are linked to, but would be responsible if using the services on those sites are required to successfully use your site <ul class="subexp"> <li class="basic" id= "FMID_1629572613FM">Credit card transitions are often done by external services - are the service providers you are using accessible?</li> </ul> </li> </ul> </li> <li class="col" id="FMID_1246804739FM">Final rules are not likely to be in place before mid-2013, possibly later than that <ul class="subexp"> <li class="basic" id="FMID_287377446FM">Once they are in place, there will be additional time to bring your sites into compliance</li> <li class="basic" id="FMID_420270429FM">DOJ does not have to follow a fixed timeline. They may decide that the proposed rules are not practical and not release any rules.</li> </ul> </li> </ul> </li> <li class="col" id="FMID_1247362540FM">Enforcement <ul class="subexp"> <li class="basic" id="FMID_576831535FM"> Complaint based</li> <li class="basic" id="FMID_1868402406FM"> Proactive enforcement not likely for a while</li> </ul> </li> <li class="basic" id="FMID_283746110FM">DOJ already assumes we are covered by ADA requirements under Section 504 of the Rehabilitation Act</li> <li class="col" id="FMID_600754947FM">Cloud services <ul class="subexp"> <li class="basic" id="FMID_396994267FM">To the extent we use cloud services to provide services, we become responsible for whether the cloud service is accessible</li> <li class="basic" id="FMID_1049106782FM"> Typically we deal with accessibility, security, and privacy of cloud services through contracts</li> <li class="col" id="FMID_1549122336FM">Language about accessibility should be in any contract we have <ul class="subexp"> <li class="basic" id="FMID_1840517468FM"> Including indemnification clause</li> <li class="basic" id="FMID_1256763176FM"> Examples of language that should be in procurement contracts can be found at http://www.washington.edu/accessibility/procurement.html</li> </ul> </li> </ul> </li> <li class="col" id="FMID_1976958540FM">It is up to us how strongly we work for accessibility, at least at the moment <ul class="subexp"> <li class="basic" id="FMID_709326705FM">The ADA already applies to us through Section 504</li> <li class="basic" id="FMID_295690204FM">National Federal for the Blind is trying to build up case law relating to accessibility in higher education</li> <li class="col" id="FMID_480943298FM"> Expectation of accessibility is a rising tide, more and more people thinking about it <ul class="subexp"> <li class="basic" id="FMID_1927946932FM">It is a dormant liability out there we need to be aware of</li> <li class="col" id="FMID_1597863058FM">How big is the danger? <ul class="subexp"> <li class="basic" id="FMID_77595983FM"> Bad publicity</li> <li class="basic" id= "FMID_1379142680FM">Lawsuits</li> <li class="basic" id="FMID_331963948FM"> Not delivering a quality work or education experience</li> </ul> </li> </ul> </li> <li class="basic" id="FMID_976243914FM">AG's office was pleased to see us looking into this topic, they like the proactive energy</li> </ul> </li> <li class="col" id="FMID_844964103FM">Will standards apply to distance learning programs the UW offers? <ul class="subexp"> <li class="basic" id="FMID_79849744FM">There is no out, exceptions are rare, so yes, our distance learning programs are covered</li> <li class="basic" id="FMID_1700306502FM">Rules do not seem very granular in the details</li> </ul> </li> <li class="col" id="FMID_914975181FM">The UW comes under Title II, public accomdation talk is about Title III <ul class="subexp"> <li class="basic" id="FMID_548938203FM">General saying "are you a public accomodation, if yes, then this applies to you"</li> </ul> </li> <li class="col" id="FMID_76649068FM">Risk management <ul class="subexp"> <li class="basic" id="FMID_1626721032FM">Taking steps to avoid possibilities of suits, enforcement actions, bad publicity</li> <li class="col" id="FMID_216598656FM">What is the risk before the rules are in place <ul class="subexp"> <li class="basic" id="FMID_138298358FM">Not a huge risk, certainly a rising one</li> </ul> </li> <li class="col" id="FMID_893695215FM">Core question is "what will the standards be?" <ul class="subexp"> <li class="basic" id="FMID_56803373FM">In the ANPRM, DOJ seems to be basically asking "is this practical, will people really be able to do this stuff"</li> <li class="basic" id="FMID_712032220FM">The current somewhat vague situation means we are less likely to be sued now than in the future when more specific rules are in place</li> <li class="col" id="FMID_449315160FM"> Complying with all the WCAG 2 Level AAA is very difficult <ul class="subexp"> <li class="basic" id="FMID_141621819FM"> Jim Thatcher recommends WCAG2 Level A</li> <li class="basic" id= "FMID_1156926844FM">If there is uninimity on level A, we should do it now simply as good professional practice</li> </ul> </li> </ul> </li> <li class="col" id="FMID_1750187211FM">When people come looking for information that might be used in a lawsuit <ul class="subexp"> <li class="col" id="FMID_67713409FM">Worth thinking about how we respond to such requests <ul class="subexp"> <li class="basic" id= "FMID_1119121697FM">Might be good to view such inquiries as the equivalent to discovery events; pass the request on to appropriate authorities</li> </ul> </li> </ul> </li> </ul> </li> <li class="col" id="FMID_1725380782FM">What should our general strategy be? <ul class="subexp"> <li class="col" id="FMID_1002082779FM">Not good to be an outlier, more likely to be targeted <ul class="subexp"> <li class="basic" id="FMID_690236983FM">Our overall compliance should be as good as our peers</li> </ul> </li> <li class="col" id="FMID_181477738FM">Enforcing standards only one method <ul class="subexp"> <li class="basic" id="FMID_1135994388FM">May actually make us more vulnerable because we may be held to our own standards</li> </ul> </li> <li class="col" id="FMID_255185060FM">Encourage accessible design as a basic part of professional competence <ul class="subexp"> <li class="col" id="FMID_1959175340FM">Be professionally proactive and bring our stuff into compliance with WCAG 2.0 Level A <ul class="subexp"> <li class="basic" id= "FMID_1557393266FM">See http://webaim.org/standards/wcag/checklist, look for the success criteria that say Level A</li> </ul> </li> <li class="basic" id="FMID_895818243FM"> Encourage competition and cooperation among peers</li> </ul> </li> <li class="col" id="FMID_880844406FM">Recognize that accessible design makes things work for everyone <ul class="subexp"> <li class="basic" id="FMID_1245103975FM"> Lowers costs and hassles for all customers</li> </ul> </li> <li class="basic" id="FMID_513278424FM">Need to watch for discontinuities and black holes in the processes we expect people to participate in; one missing link can prevent them from using a much larger system</li> </ul> </li> </ul> </li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-8941833612077988796?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-23814371299850181342010-10-29T11:54:00.000-07:002010-10-29T11:54:52.626-07:00<ul> <li>Looking Ahead: What Topics Could We Focus On In the Coming Year? <ul> <li>Menus <ul> <li>Seem to be a major puzzle area. How do you design a menu that works for mouse-users, voice browser users, speech recognition users, and keyboard only users?</li> </ul> </li> <li>Video accessibility <ul> <li>IBM's Pawan Khera is still interested in coming to the UW to talk about IBM's AbilityLab Media Captioner and Editor</li> <li>3Play Media (<a href="http://www.3playmedia.com/" rel="nofollow">http://www.3playmedia.com/</a>) offers some nice transcription and captioning services</li> <li>How can we help make captioning a normal step in the workflow of video creation?</li> </ul> </li> <li>User testing for accessibility <ul> <li>iSchool as putting together a portable usability lab and would like to include accessibility as one of the things they test for</li> </ul> </li> <li>Other Higher Ed Web sites <ul> <li>How are we doing in comparison with our peers?</li> <li>Terrill Thompson's study of the accessibility of higher education Web sites should become available on the Web in a few months</li> </ul> </li> <li>Central UW tool to check accessibilty and usability <ul> <li>SiteCheck being evaluated</li> <li>Could AccessibleWeb@U help explain results and process?</li> </ul> </li> </ul> </li> </ul> <ul> <li>Using the Superfish Menus in Drupal - Ryan Ositis, iSchool Web Administrator and Developer <ul> <li>iSchool site is at <a href="http://ischool.uw.edu/" rel="nofollow">http://ischool.uw.edu/</a></li> <li>iSchool needed to update their custom CMS <ul> <li>Wanted more and more features, hard to keep up</li> <li>Decided in February it was time, partly in response to RBI initiative</li> </ul> </li> <li>Wanted a new CMS <ul> <li>Need something that will do everything they already had with their old system</li> <li>What additional features can a new system provide?</li> <li>Can our developers work with it with a minimum or retraining? <ul> <li>Drupal is built on PHP, which the iSchool Web staff was already familiar with</li> </ul> </li> <li>Drupal (<a href="http://drupal.org" rel="nofollow">http://drupal.org</a> ) looked good <ul> <li>Strong, active community</li> <li>Modular structure</li> <li>Feature rich</li> <li>Commitment to accessibility and security <ul> <li>Have strong statement on commitment to accessibility (<a href="http://drupal.org/about/accessibility" rel="nofollow">http://drupal.org/about/accessibility</a> ) on their Web site</li> </ul> </li> </ul> </li> <li>Decided to go with Drupal</li> </ul> </li> <li>Superfish Menus Module (<a href="http://drupal.org/project/superfish" rel="nofollow">http://drupal.org/project/superfish</a>) <ul> <li>Derived from Suckerfish menu originally published by Patrick Griffiths and Dan Web on <a href="http://www.alistapart.com/" rel="nofollow">A List Apart</a> (<a href="http://www.alistapart.com/" rel="nofollow">http://www.alistapart.com/</a>) in 2003</li> <li>In working with Drupal modules, had already learned that, if you want a new feature, you should first go look for a module that already contains the feature, rather than trying to hack code.</li> <li>Installation <ul> <li>Simple to install</li> <li>Does not require any other modules</li> <li>Unpack and copy folder into /sites/all modules folder <ul> <li>Versions available for Drupal 6 and Drupal 7</li> </ul> </li> <li>Run update.php (standard procedure for adding modules)</li> <li>Go to modules menu, turn on Superfish menu</li> <li>Configure menu</li> <li>Go to Blocks menu to put the menu in a content block <ul> <li>You can have multiple menus, iSchool has a dozen different menus</li> <li>For each Superfish menu, many configuration options are available - menu type (navbar, horizontal, vertical, mouse delay, drop shadows, etc.</li> </ul> </li> <li>Can control which pages a given menu appears on; useful for larger sites</li> </ul> </li> <li>Behavior <ul> <li>Users like menus, but most are dependent on mouse. Superfish can be navigated entirely with keyboard by using tabs and back-tabs</li> <li>With Safari, did not work that well unless you change the settings <ul> <li>See "<a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/" rel="nofollow">Enabling keyboard nvaigation in Mac OS X Web Browsers" 456bereastreet.com</a> (<a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/" rel="nofollow">http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/</a>)</li> </ul> </li> </ul> </li> </ul> </li> <li>Pitfalls <ul> <li>Its a menu, not a panacea</li> <li>Issues with jQuery plugin can impact module. Especially true with Internet Explorer and the z-index, but solutions are readily available in the Drupal community.</li> <li>CSS for customizing can be tricky and takes time. Make sure to budget extra time for customizing</li> </ul> </li> </ul> </li> </ul> <ul> <li>Discussion <ul> <li>Would be nice to have more controls, such as being able to navigate with arrow keys <ul> <li>Some screen reader software uses arrow keys, easy to step on toes</li> <li>Code to make it work with arrow keys can break</li> </ul> </li> <li>Top level of menu items are all h4s, which most screen readers can find and go directly to</li> <li>Could define access keys (<a href="http://webaim.org/techniques/keyboard/accesskey" rel="nofollow">http://webaim.org/techniques/keyboard/accesskey</a> ), but there are no real standards <ul> <li>How do you tell users what access keys are available</li> <li>Whatever you set up is likely to conflict with keys assigned by software</li> </ul> </li> <li>Carousel on the iSchool home page(<a href="http://ischool.uw.edu/" rel="nofollow">http://ischool.uw.edu/</a> ) <ul> <li>Custom coded in jQuery, it is a version 1.0; the team still has many more ideas they want to implement</li> <li>Want to make it more accessible; already can tab through news stories</li> <li>Do provide an All Features link to a simple list of the news items; could be put in front of carousel in tab order</li> <li>Carousels are in general a "weird accessibility gap"; none of the readily available versions do well</li> <li>There is a need for cool things on home pages, but tend to be used for pictures and other stuff that does not have much value <ul> <li>Do people really use carousels? Apparently not much.</li> </ul> </li> <li>Some carousels are connected to direct actions (apply now, buy this) <ul> <li>Example: Lethbridge College drupal site <a href="http://www.lethbridgecollege.ca/" rel="nofollow">http://www.lethbridgecollege.ca/</a> <ul> <li>Much more action focused</li> </ul> </li> </ul> </li> </ul> </li> <li>iSchool site to a degree is experimental, always trying things</li> <li>Statistics <ul> <li>Drupal has modules that will give you all sorts of statistics; search keywords, referrers, performance statistics, accesslogs</li> <li>There is a Drupal module that hooks everything into Google Analytics, generating the proper code for each page</li> </ul> </li> <li>Relying on UW Groups service (<a href="https://wiki.cac.washington.edu/display/infra/Groups+Service" rel="nofollow">https://wiki.cac.washington.edu/display/infra/Groups Service</a> ) for who can do what on the Web site</li> <li>Evaluating Accessibility <ul> <li>Have a couple of tools similar to W3C validator <ul> <li>Need to work on use of headings</li> </ul> </li> </ul> </li> <li>Had Drupal Interest Group meeting in Fall; 40 people attended, <ul> <li>iSchool Web team wants to work with that group</li> <li>Particularly interested in accessibility of Drupal sites</li> </ul> </li> <li>Adopting a CMS <ul> <li>Moving school onto a CMS is a huge shift in thinking <ul> <li>Old method is to have static page templates, give out copies</li> <li>Have moved to a distributed authorship model; has changed workflow and roles for many groups</li> <li>Content providers get a window they can put content into; more limited role, but creates accessible pages if set up right</li> </ul> </li> </ul> </li> <li>For image management; one reason for going to Drupal is there were people who wanted to add images on the fly <ul> <li>Modules can be set up to enforce requirement for alt text</li> <li>TinyMCE (<a href="http://drupal.org/project/tinymce" rel="nofollow">http://drupal.org/project/tinymce</a> ) and IMCE (<a href="http://drupal.org/project/imce" rel="nofollow">http://drupal.org/project/imce</a> ) together can be configured to prompt for alt texts</li> </ul> </li> </ul> </li> </ul> <ul> <li>Go Around <ul> <li>Global Health (<a href="http://depts.washington.edu/deptgh/index.php" rel="nofollow">http://depts.washington.edu/deptgh/index.php</a>) is going to Drupal and WordPress</li> <li>Interest in mobile designs <ul> <li>Can it help push sites to simple functionality? <ul> <li>Dylan Wilbanks reports that he has heard several talks by top Web designers recommending that all new Web sites should be built first to work with mobile devices, then secondarily for big screens.</li> </ul> </li> <li>What does mobile design mean? <ul> <li>What are the criteria of a site designed for mobile access?</li> <li>Fully readable and navigable without zooming? <ul> <li>Seems to involve flex designs (designs built with relative sizing) to give mobile device greatest flexibility to display page</li> </ul> </li> </ul> </li> <li>Are there guidelines to mobile design? <ul> <li>A lot of stuff out there is woefully out of date, particularly the stuff that recommends hacking out most of your content</li> <li>Current smartphones have very good browsers, can easily display full pages; how readable the pages are depends on the site design. <ul> <li>Rigid designs (wide, fixed width, fixed font sizes) will require a lot of zooming and scrolling</li> </ul> </li> </ul> </li> <li>How does Mobile design relate to accessible design? <ul> <li>Simple navigation and content organization</li> <li>What else?</li> </ul> </li> </ul> </li> </ul> </li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-2381437129985018134?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-53656948214283986802010-05-27T16:17:00.000-07:002010-05-27T16:17:27.787-07:00<br /> AccessibleWeb@U Meeting<br /> May 26, 2010<br /> <ul> <li>What should be on the http://uw.edu/accessibility/ site? <ul> <li>First we took a tour through the current site <ul> <li>Need to update W3C and 508 information</li> <li>Some controversy whether the DIS guidelines apply to us</li> <li>Accessibility policies at other higher education needs review and update. List currently on site is a bit old</li> <li>Web Accessibility page defines what accessible Web design is about. </li> <li>Procurement information is a bit out-of-date. Purchasing has not taken much interest.</li> <li>IT Tools and Resources page is fairly up-to-date (Terry has been working on it). <ul> <li>We have an ARIA page but it is out-of-date</li> </ul> </li> <li>Link to other disability resources on campus</li> <li>Frequently asked questions, mostly about how someone gets accessibility support</li> <li>Getting Help - repeats much of what is in the FAQ page</li> </ul> </li> <li>Discussion <ul> <li>Need to review the Procurement information because of the new eProcurement system, which does offer energy efficient hardware, but not accessibility</li> <li>Be nice to have AccessibleWeb@U more visible <ul> <li>UW Inclusion Network email list was just created. Might want to connect/include them</li> </ul> </li> <li>Who is the audience for this site? <ul> <li>People who do not understand accessibility</li> <li>Technical people who want to know more about it</li> <li>People who are sent here because they want to buy accessible stuff</li> <li>Intent was to be the go-to resource for information, particularly technology <ul> <li>A resource that could be useful as a place to send people</li> </ul> </li> <li>More people are building sites with WordPress, Plone, or Drupal <ul> <li>Standard designs are being created that can be shared access the systems</li> <li>Many people simply put content into an existing environment</li> </ul> </li> <li>There are still many people at college and school level hand managing their Web sites <ul> <li>Pharmacy still does not have a Web person</li> <li>The new model of centrally administered CMS with distributed people providing and maintaining content is only just arriving.</li> </ul> </li> <li>We should visit the major ones at least every couple of years <ul> <li>Drupal</li> <li>Plone</li> <li>SharePoint</li> <li>WordPress</li> </ul> </li> <li>Need to connect with people who are making decisions on how to set up CMSs and blog sites <ul> <li>Want to have ideas on which templates, widgets are more accessible</li> <li>Would break into two groups - people setting up CMSs and blogs and people managing content in CMSs and blogs</li> </ul> </li> <li>Could we connect better with other people working on accessibility at the UW <ul> <li>Get feedback from UW Inclusion Network people</li> <li>Groups are meeting regularly, meeting on Thursdays at 7pm seem to be the most active, but has a big social aspect</li> <li>Planning is underway for an accessibility camp, but when is not clear</li> </ul> </li> <li>Should uw.edu/accessibility be a portal for accessibility for the entire campus? <ul> <li>Different groups addressing accessibility all have their own Web sites, each from their own perspective</li> <li>What could this site be in the way of a general accessibility portal for all of the UW?</li> </ul> </li> <li>Could we be one of the first sites into the new Plone site? We should talk to Gina.</li> </ul> </li> <li>Topic for discussion: Accessibility issues of information architecture of page templates (including their site level navigation), the content placed within the template, and the relationship between the two</li> <li>Short term project: Can we fit the YUI keyboard navigable menu into the Marketing page template.</li> </ul> </li> </ul> </li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-5365694821428398680?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-74808111591677733642010-04-30T09:30:00.000-07:002010-04-30T09:30:40.109-07:00Topic: Reviewing <a href="http://www.access-board.gov/sec508/refresh/draft-rule.htm">proposed updates in the Section 508 guidelines and standards</a> <br /> (http://www.access-board.gov/sec508/refresh/draft-rule.htm)<br /> <br /> Speaker: Terrill Thompson, Technology Accessibility Specialist, UW-IT<br /> <ul> <li>Section 508 is an amendment in 1998 to the Rehabilitation Act <br /> <br /> <ul> <li>Requires access to electronic and information provided by the Federal government</li> <li>Standards were written by the Access Board to clarify what it meant, published in Federal Register on December 21, 2000 <br /> <br /> <ul> <li>http://www.access-board.gov/sec508/standards.html</li> <li>Clear, consistent, rule expressed language</li> <li>Web accessibility included <br /> <br /> <ul> <li>Informed by the WCAG priority 1 checkpoints</li> <li>16 standards statements</li> <li>Very HTML-centric</li> </ul> </li> <li>Comparing with WCAG guidelines <br /> <br /> <ul> <li><a href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines</a> (WCAG) </li> <li><a href="http://www.w3.org/TR/WAI-AUTOOLS/">Authoring Tool Accessibility Guidelines</a> (ATAG) </li> <li><a href="http://www.w3.org/TR/WAI-USERAGENT/">User Agent Accessibility Guidelines</a> (UAAG) </li> </ul> </li> <li>WCAG 2.0 has <a href="http://www.w3.org/TR/WCAG20/#intro-related-docs">supporting documents</a> <br /> <br /> <ul> <li>Techniques for WCAG 2.0</li> <li>How to Meet WCAG 2.0</li> <li>Understanding WCAG 2.0</li> <li>The WCAG 2.0 Documents</li> </ul> </li> </ul> </li> <li>Does 508 apply to us? <br /> <br /> <ul> <li>508 as written applies explicitly to federal agencies</li> <li><a href="http://isb.wa.gov/policies/1000g.doc">State Guidelines - Accessibility to Information Technology for Individuals With Disabilities</a> - http://isb.wa.gov/policies/1000g.doc (Word) <br /> <br /> <ul> <li>Adopted by ISB, May 2005</li> <li>Says it applies to educational institutions</li> <li>Adopts Section 508 standards + WCAG 2.0 for Web</li> </ul> </li> </ul> </li> <li>We are required to provide accessible programs and services for other reasons <br /> <br /> <ul> <li><a href="http://www.hhs.gov/ocr/civilrights/understanding/disability/">Section 504 of the Rehabilitation Act of 1973</a></li> <li><a href="http://www.hhs.gov/ocr/civilrights/understanding/disability/">Americans with Disabilities Act of 1990</a></li> <li>Section 508 is a standard written into law that might be used by courts as a gauge of current practice</li> <li>The UW does recognize that being sued over accessibility is a potential risk for the university</li> <li><a href="http://www.fcc.gov/cgb/consumerfacts/section255.html">Section 255 of Telecom Act of 1996</a> <br /> <br /> <ul> <li>Requires telecommunications equipment manufacturers and service providers to make their products and services accessible</li> </ul> </li> </ul> </li> </ul> </li> <li>The refresh of 508 guidelines and standards <br /> <br /> <ul> <li>Access Board assembled the Telecommunications and Electronic and Information Technology Advisory Committee (TEITAC) to update 508 and 255 standards and guidlines</li> <li>TEITAC recommendations presented April 2008</li> <li>Accepting public comment through June 21, 2010</li> <li>More info at www.access-board.gov/508.htm</li> </ul> </li> <li><a href="http://www.access-board.gov/sec508/refresh/draft-rule.htm">Information and Communication Technology (ICT) Standards &amp; Guidelines</a> <br /> <br /> <ul> <li>Reviewing chapter organization, it is not clear which are the operative parts and which are explanatory</li> <li>Hard to extract the standards from the text and translate it to how it would apply to what we are doing</li> <li>Significantly changed how it is organized - original version was much easier to point to specific rules</li> <li>Level of detail is higher but consistency of editing is worse</li> <li>Numbering and organization takes getting use to; some items are recursive, lowest levels referring to higher levels</li> <li>Advisory content boxes help explain rules and give many examples, but sometimes occur before the rules they explain</li> <li>Each of the two introductory chapters (one for ICT and one for telecommunications and VoIP) have detailed glossaries</li> </ul> </li> <li><a href="http://www.access-board.gov/sec508/refresh/draft-rule.htm#e107">Section E107: Harmonization with W3C Guidelines</a> <br /> <br /> <ul> <li>Section E107 states that goal is harmonization with WCAG 2.0</li> <li>If web pages meets WCAG 2.0 then they comply, as long as they also conform with 409, 413, 606.4, 604.5, 607, 608 <br /> <br /> <ul> <li>user platform preferences (409)</li> <li>authoring tool standards ( 413)</li> <li>real-time video description (604.4 and 604.5)</li> <li>user controls for captions and video descritption (607)</li> <li>user controls to adjust foreground and background sound independently (608) - not widely supported at this time</li> </ul> </li> <li>Authoring Tool and User Agent guidelines are integrated throughout, but ATAG and UAAG are not explicitly referenced (both are under revision at W3C)</li> </ul> </li> <li><a href="http://www.access-board.gov/sec508/refresh/draft-rule.htm#e108">Section E108: Best Meets</a> <br /> <br /> <ul> <li>Odd title, an example of occasionally creative language use in the document</li> <li>"agency must produce the product that <b>best meets</b> the provisions of this part, consistent with the business needs of the agency"</li> <li>Essentially an exception or loophole</li> </ul> </li> <li>What can we do? <br /> <br /> <ul> <li>Terry is working on a <a href="http://staff.washington.edu/tft/508.html">First Impressions of ICT Accessibility Standards and Guidelines</a> statement that he hopes to submit as a comment on the draft guidelines before June. Please review his statement and post any comments to the AccessibleWeb@U email list.</li> <li>With so few exceptions, we could just focus on WCAG 2.0 since it seems better documented, at least so far</li> </ul> </li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-7480811159167773364?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-3750283505804929412010-03-29T17:14:00.000-07:002010-03-29T17:14:56.492-07:00<h2> Disability Studies at UW: What is it, How did it Develop, and What We Hope To Do?</h2> Dennis Lang, Associate Director, Disability Studies<br /> <ul> <li>The Disability Studies program is a multi-campus, interdisciplinary program exploring society's understanding of disability <br /> <ul> <li>Web site is at http://depts.washington.edu/disstud/</li> <li>Inspired in part by the Society for Disability Studies http://www.disstudies.org/</li> <li>Topics studied include "the cultural construct of disability, social justice, and disability policy, and the intersections of disability, race, gender, sex, age, class and other markers of diversity and difference." <br /> <ul> <li>Social justice</li> <li>Policy</li> <li>Law, society, and justice</li> <li>Comparative ideas</li> <li>Dance</li> <li>Business</li> </ul> </li> <li>Currently, Disability Studies offers two courses of study: <br /> <ul> <li>Disability Studies Minor</li> <li>Individualized Studies Major in Disability Studies</li> </ul> </li> <li>The program has recently received a limited amount of permanent funding. </li> <li>Faculty participating in the program are from many departments <br /> <ul> <li>Rehabilitation Medicine, Law, Slavic Languages and Literature, American Sign Language, Philosophy, Social Work, Education, Civil and Environmental Engineering, History, Comparative History of Ideas (CHID)</li> </ul> </li> <li>Currently has about 20 students a quarter</li> </ul> </li> <li>Disability Studies is currently exploring moving their Web site to Drupal <br /> <ul> <li>Hoping for easier site management, accessible design, and tools that will help build social connections</li> <li>Discussion: <br /> <ul> <li>Drupal out-of-the-box is very standards compliant and thus generally starts out as reasonably accessible and intelligible to assistive technologies <br /> <ul> <li>However, it is easy to add modules or make modifications that interfere with accessibility</li> </ul> </li> <li>Drupal offers many modules supporting social interactions, such as new feed generators and news feed readers. You can weave interconnections with other sites that go beyond simple links.</li> <li>Drupal does require management. Security updates come out regularly. The site manager is informed about the updates and it is wise to install them.</li> <li>Drupal has a customization system based on "intercept and override" where the default site settings and configurations are intercepted and overridden by customizations, leaving the core installation unmodified. This approaches allows core installation updates without disturbing the customizations (usually). </li> <li>A large number of themes are available. They are installed by placing them in specific subdirectories and then selecting them from the administrator menus</li> <li>The Zen theme (http://drupal.org/project/zen) is a very standards-compliant Drupal them that is well documented and flexible</li> </ul> </li> </ul> </li> <li>The UW Standing Committee on Disability Issues is being rejuvenated. Dennis is looking for people who are interested in serving on the committee. Contact him at 206-522-3104 or dlang@u.washington.edu for more information.</li> <li>Sushil K. Oswal, Ph.D. Assistant Professor of Rhetoric and Technical Communication in the Interdisciplinary Arts and Sciences Program at UW Tacoma is interested in studying the topic of accessibility. Anyone interested in working with him can contact him at 253-692-4308 or oswal@u.washington.edu. </li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-375028350580492941?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-85447878919165294862010-02-26T11:15:00.000-08:002010-02-26T11:18:23.561-08:00Our lunch group was small but the sharing was spirited. Here are some of the topics we discussed:<br /> <ol> <li>Thoroughly Updated VoiceOver for Macs <br /> <br /> <ul> <li>VoiceOver in Mac OSX Snow Leopard is much improved over previous versions and includes lots of new features.</li> <li>Why buy expensive software like JAWS when in many cases VoiceOver will give you good workable accessibility to a wide range of sites?</li> <li>http://www.apple.com/accessibility/voiceover/</li> </ul> </li> <li>Conferencing Software is Not Very Accessible <br /> <br /> <ul> <li>Conrad Kuehn of CEC/IT, Rehabilitation Medicine is exploring the use of conferencing software for instruction and is finding that most are not designed with the disabled in mind.</li> <li>Basic paradigm of interactive video conferencing is hard to translate into an accessible form. Would you want voice software to be reading the text a PowerPoint slide at the same time a speaker is talking about the slide?</li> <li>Some basic conferencing software such as Talking Communities (http://talkingcommunities.com/) works, but functionality is limited.</li> </ul> </li> <li>Time for a UW Accessibility Gathering? <br /> <br /> <ul> <li>Many groups on campus are doing very good work in the area of accessibility: <br /> <br /> <ul> <li>Disability Services Office http://www.washington.edu/admin/dso/</li> <li>DO-IT http://www.washington.edu/doit/</li> <li>Computer Science and Engineering projects <br /> <br /> <ul> <li>MobileASL - http://mobileasl.cs.washington.edu/</li> <li>MobileAccessibility - http://mobileaccessibility.cs.washington.edu/</li> <li>Tactile Graphics - http://tactilegraphics.cs.washington.edu/</li> <li>WebInSight - http://webinsight.cs.washington.edu/</li> </ul> </li> <li>Rehabilitation Medicine Center for Technology and Disability Studies http://uwctds.washington.edu/index.asp</li> <li>Disability Studies Program http://depts.washington.edu/disstud/</li> <li>UW Change http://change.washington.edu/</li> <li>Disability Advocacy Student Alliance - http://students.washington.edu/dasa/</li> <li>Disability Law Alliance http://www.law.washington.edu/dla/</li> </ul> </li> <li>We don't have to import world class experts, they already are here!</li> <li>How could we bring people together, help make connections, and ignite some synergy?</li> </ul> </li> <li>HTML5 Struggles to Include Accessibility <br /> <br /> <ul> <li>Wendy Chisholm is following the HTML5 discussions</li> <li>One point of contention is whether summary attributes in table elements should exist. Many developers do not use them, the information they contain is hidden from most users.</li> <li>Editor of HTML5 project does not seem to have an inclusive mindset</li> <li>Apple is betting the farm on HTML5 (as opposed to Flash). Apple has a fairly good record on accessibility; maybe Apple could take some stands on including accessibility in HTML5</li> <li>Important to get the HTML5 features right before it develops installed inertia</li> </ul> </li> <li>Noise to Signal Ratio Going Up on Tools <br /> <br /> <ul> <li>Tools once noted for their simplicity and usefulness are being subverted, raising the noise level <br /> <br /> <ul> <li>Google searchs get large numbers of aggregator sites (tripadvisor, yelp, etc) rather than what you are actually looking for. Many of the intermediary sites have no meaningful content, but they know to rank high.</li> <li>Social networking tools are easily subverted by meaningless postings.</li> </ul> </li> </ul> </li> </ol><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-8544787891916529486?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-32443529366749148072010-02-01T10:10:00.000-08:002010-02-01T10:10:08.019-08:00<p>January 28, 2010</p> <p></p> <p>Topic: Using Free Voice Browsers to Evaluate the Accessibility of Web Sites<br /> Speaker: Wendy Chisholm, Technology Research Consultant, DO-IT<br /> Date: Thursday, January 28, 2009<br /> Time: 11:30a.m. - 1:00p.m.<br /> Location: Allen Auditorium</p> <p></p> <p>Wendy Chisholm demonstrated the use of two free voice browsers, WebAnywhere (http://webanywhere.cs.washington.edu/wa.php) and NVDA (http://www.nvda-project.org/) to evaluate the accessibility of Web sites.</p> <ul> <li>NVDA <ul> <li>Non Visual Desktop Access (http://www.nvda-project.org/) <ul> <li>Documentation is at http://www.nvda-project.org/wiki/Documentation</li> </ul> </li> <li>Runs on Windows</li> <li>Free to download</li> <li>Using FireFox 3, has support of ARIA <ul> <li>On sites that use ARIA, Firefox and NVDA can communicate on what is on the page</li> <li>ARIA - Accessible Rich Interface Application (http://www.w3.org/WAI/intro/aria) <ul> <li>Useful when using Javascript to define roles</li> <li>By using ARIA in setting up a Javascript-based menu, can have standard interaction practice (moving around in menus with arrow keys, leaving menu with ESC, etc.). </li> </ul> </li> </ul> </li> <li>NVDA is in active development <ul> <li>ARIA features are comparable to those in JAWS and WindowEyes</li> </ul> </li> <li>Users have many different techniques for using a voice browser on a page <ul> <li>Can configure NVDA to set how much information it should give you about each element you visit (clickable, etc.) <ul> <li>Useful to get maximum information when you are developer, but may want less info when just browsing</li> </ul> </li> <li>At any time a user can hear the headings on a page; each time you press H you go to the next heading <ul> <li>Page developers can negate the headings feature; often headings are created just visually, not as h-elements, so not recognizable as headings</li> </ul> </li> <li>Can jump down through lists on a page; press L to go to next list</li> <li>For sighted users (such as people with dyslexia) using mouse, NVDA speaks elements as the user mouseovers them</li> <li>Text must be in markup to be read; NVDA cannot read text in graphics</li> </ul> </li> <li>Reads ALT tags on graphics</li> <li>Does not seem to have a way to highlight element that currently has focus</li> <li>Can select among various voices for the voice synthesizer</li> </ul> </li> <li>WebAnywhere <ul> <li>Located at http://webanywhere.cs.washington.edu/wa.php <ul> <li>Can be used from anywhere you have a Internet connection to view most sites</li> <li>WebAnywhere is a proxy; your connection to a site is routed through WebAnywhere, processed, and the result passed to your browser</li> <li>WebAnywhere can't do Flash, yet</li> <li>WebAnywhere can only communicate with what the browser gives it through the DOM</li> </ul> </li> <li>Wendy is working on the team continuing to develop WebAnywhere <ul> <li>Feature set is fairly simple</li> <li>No ARIA support yet</li> </ul> </li> <li>Designed to make it very obvious where you are on a page <ul> <li>Creates high contrast, large font experience</li> <li>Very nice for demonstrating to people what is happening when a person is browsing a Web page with a voice browser</li> </ul> </li> <li>Most of the WebAnywhere features are in NVDA, but NVDA has many more features</li> </ul> </li> <li>General Discussion <ul> <li>On search fields that offer multiple scoped searches, why do we always put radio buttons for selecting which search below the search field; to use it you select which search and then put text in the search field, but the code is in the opposite sequence</li> <li>Enough people are using headings within their Web pages that it is becoming a common way to navigate people using screen readers navigate pages <ul> <li>Most Web design is based on Graphical User Interface (GUI); we do not have a Audio User Interface (AUI) set of concepts articulated yet (We need a grad student to pull together a AUI)</li> </ul> </li> <li>NVDA is rapidly gaining popularity; the hope is that people will use NVDA use it instead of JAWS, which is expensive. </li> <li>VoiceOver on Apple stuff <ul> <li>VoiceOver on the iPhone is very good, one of the best AUIs out there; http://www.apple.com/accessibility/iphone/vision.html</li> <li>VoiceOver on Macs is also very good; http://www.apple.com/accessibility/voiceover/</li> </ul> </li> </ul> </li> <li>New Toolbar <ul> <li>E.A. Draffan invites us to try the JISC TechDis Toolbar; http://access.ecs.soton.ac.uk/ToolBar/</li> <li>Available as a downloaded app or as a temporary toolbar you can load anytime by going to a URL</li> <li>Speaks with a Scottish accent</li> </ul> </li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-3244352936674914807?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-29259643665376449312009-11-10T08:38:00.000-08:002009-11-10T08:39:29.360-08:00<p>October 22, 2009 AccessibleWeb@U meeting notes, prepared by Rick Ells </p><p>Following the morning's <a href="https://wiki.cac.washington.edu/display/uwweb/Web+Council+Meeting+-+October+22+2009" title="Web Council Meeting - October 22 2009">presentation by the Content Management System Working Group at the Web Council meeting</a>, it seemed appropriate for the topic of today's AccessibleWeb@U meeting to be a quick assessment of the accessibility of UW sites discussed in the presentation.</p> <h2><a name="October22,2009-EvaluatingCMSAccessibility-Criteria"></a>Criteria</h2> <p>Evaluations were done with the FireFox browser equipped with the <a href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="nofollow">Web Developer Tools add-on</a> (WDT). In addition, the UW <a href="http://www.washington.edu/webinfo/tidy.cgi" rel="nofollow">HTML Tidy Web Interface</a> and the <a href="http://www.paciellogroup.com/resources/contrast-analyser.html" rel="nofollow">Paciello Color Contrast Analyzer</a> were available.</p> <table class="confluenceTable"><tbody> <tr> <th class="confluenceTh"> Criteria </th> <th class="confluenceTh"> Explanation </th> <th class="confluenceTh"> Procedure (most involve using Web Developer tools) </th> </tr> <tr> <td class="confluenceTd"> Presence of <b>Skip to Content</b> or similar method </td> <td class="confluenceTd"> Help non visual or mouse only visitor get directly to page content </td> <td class="confluenceTd"> By tabbing and by inspection of page HTML </td> </tr> <tr> <td class="confluenceTd"> Use of <b>semantic heirarchical headings</b> to identify page topic, subtopics, subsubtopics, etc. </td> <td class="confluenceTd"> Voice browsers often can use headings to navigate page </td> <td class="confluenceTd"> WDT: "Outline -> Outline Headings" and "Information -> Display Element Information" </td> </tr> <tr> <td class="confluenceTd"> <b>Linearization</b>,. does sequence of page content make sense to a person encountering the content linearly? </td> <td class="confluenceTd"> When using a voice browser or navigating a page without a mouse, the sequence in which content will be encountered can determine whether the page is usable. </td> <td class="confluenceTd"> WDT: "CSS -> Disable All Styles" Turn off CSS and evaluate what displays </td> </tr> <tr> <td class="confluenceTd"> Use of <b>semantic markup</b> to enable more meaningful interpretation of content </td> <td class="confluenceTd"> Semantic element types (paragraph, heading, list, etc.) can be used to better present and navigate through the content. </td> <td class="confluenceTd"> Visual inspection of content HTML. WDT: "View Source" </td> </tr> <tr> <td class="confluenceTd"> <b>Keyboard navigable</b> - Can you effectively navigate the page content without using the mouse </td> <td class="confluenceTd"> A person with limited dexterity or poor (or no) vision will not be able to use the mouse. Can they still use the site? </td> <td class="confluenceTd"> Set aside the mouse and try to navigate through site content just using the tab, arrows and space keys </td> </tr> <tr> <td class="confluenceTd"> <b>Focus highlighting</b> to make it apparent which element has focus is on the screen </td> <td class="confluenceTd"> A person navigating without a mouse has to tab to the link they want. Without focus highlighting, knowing where the focus is can be difficult. </td> <td class="confluenceTd"> Tab through the pages trying to identify where the focus is </td> </tr> <tr> <td class="confluenceTd"> <b>Menu functionality</b> without using mouse </td> <td class="confluenceTd"> Menus that require use of the mouse to select are unusable by people who have vision limitations or dexterity problems </td> <td class="confluenceTd"> Attempt to navigate menus using tabs, arrow keys, and cursor </td> </tr> <tr> <td class="confluenceTd"> <b>Validated HTML</b> </td> <td class="confluenceTd"> Syntax errors in HTML can produce unpredictable behaviors in assistive and adaptive technologies, not to mention CSS and scripts </td> <td class="confluenceTd"> Process page with a validator or HTML Tidy </td> </tr> <tr> <td class="confluenceTd"> <b>Alternative text</b> associated with graphics, particularly when graphics are used as buttons </td> <td class="confluenceTd"> Alternative text is displayed or read when the graphic itself cannot be displayed or seen. Purely decorative images can have empty ALT attributes (alt="") </td> <td class="confluenceTd"> WDT: "Images -> Display Alt Attributes" </td> </tr> <tr> <td class="confluenceTd"> <b>ALT Text and Visible text</b> congruence </td> <td class="confluenceTd"> Voice controlled browing is becoming common. If the text on a graphical object (for example, "Contribute Today") is different from the ALT text for the object ("Give by Friday") the user has no way to go directly to that object. </td> <td class="confluenceTd"> WDT: "Image -> Display Alt Attributes" and compare text in the graphic to ALT text </td> </tr> <tr> <td class="confluenceTd"> <b>Contrast</b> of color combinations </td> <td class="confluenceTd"> Contrast between text and background should be at least 4:1 for it to be readable by most people. A higher contrast is even better </td> <td class="confluenceTd"> Evaluate with the Color Contrast Analyzer </td> </tr> </tbody></table> <h4><a name="October22,2009-EvaluatingCMSAccessibility-OurProcedure"></a>Our Procedure</h4> <p>At our October 22 meeting we visited seven Web sites mentioned in the panel presentation, walking through the above criteria with each. The sites visited were the following:</p> <ul><li><a href="http://www.uwb.edu/" rel="nofollow">http://www.uwb.edu/</a> - University of Washington Bothell home site (CMS: Kentico)</li><li><a href="http://www.foster.washington.edu/" rel="nofollow">http://www.foster.washington.edu/</a> - Foster School of Business home site (CMS: Sharepoint)</li><li><a href="http://wiaproject.org/" rel="nofollow">http://wiaproject.org/</a> - World Information Access project (CMS: WordPress)</li><li><a href="http://ethnomed.org/" rel="nofollow">http://ethnomed.org/</a> - EthnoMed site - Integrating cultural information into clinical practice CMS: WordPress)</li><li><a href="http://www.rad.washington.edu/" rel="nofollow">http://www.rad.washington.edu/</a> - Department of Radiology home site (CMS: Plone)</li><li><a href="http://engr.washington.edu/" rel="nofollow">http://engr.washington.edu</a> - College of Engineering home site (CMS: Drupal)</li><li><a href="http://f2.washington.edu/" rel="nofollow">http://f2.washington.edu</a>- UW Finance &amp; Facilities home site (CMS: Drupal)</li></ul> <h4><a name="October22,2009-EvaluatingCMSAccessibility-Important\!"></a>Important!</h4> <p>The critiques below relate to specific implementations done on the CMS systems, not necessarily to the CMSs themselves. Most CMSs offer many themes, skins, CSS stylesheets, and templates that have widely varying degrees of accessibility. All of these sites reflect a large amount of careful, professional work, often done under considerable time pressure, and we have deep respect for their work. The goal here is to highlight the issues in selecting among all those alternatives for your CMS.</p> <h4><a name="October22,2009-EvaluatingCMSAccessibility-HowDidWeDo?"></a>How Did We Do?</h4> <ul><li><b>General observations</b> <ul><li>Implementations of Skip-to-Content links varied greatly. The Engineering, Radiology, EthnoMed, and Bothell sites had Skip-to-Contents (EthnoMed and Radiology also defined access keys). The WIA and Foster sites did not have any Skip-to-Content implemented in their headers.</li><li>Use of semantic heirarchical headings was spotty. The WIA and Engineering sites made good heirarchical use of headings. The Facilities site was inconsistent in its use of headings across pages within the site, with some pages have good h1-h2-h3 heirarchies, some having all h1 headings, and some having no headings in their content.</li><li>Linearization was good (you could generally view the content only and make good sense of what was going on) but the sites tend to have large amounts of navigation in their headers that would have to be tabbed through if no Skip-to-Content link is provided. The Foster site uses tables for layout, but only at a simple level, providing reasonable linearization.</li><li>Use of semantic markup varied. The Drupal, WordPress, and Kentico sites made reasonable use of a variety of semantic types. The Foster site pretty much only used tables and unordered lists, with most other content being enclosed in divs identified with the site's own arbitrary system of id and class names.</li><li>Keyboard navigabiity varied greatly, with several sites have black holes that would swallow anyone trying to use the site without a mouse. In the Foster site, scripting relies on mouseover events. No allowance is made for onfocus events. The EthnoMed and Radiology sites had a common problem: As you tab into the page you reach the Search button. When you trying to tab beyond the search it evokes the search producing a Live Search pop-up box that you can't get out of with just keyboard commands. Search should only be evoked with a Return, not with a Tab.</li><li>Focus highlighting is turned off on the WIA and Bothell sites (which is done with outline:0 or outline:none styles on anchors), making them difficult for people navigating without a mouse or by voice command to know where they are on a page. The other sites all had focus highlighting on.</li><li>Menus were variable. Those menus built with simple links worked well. Menus involving scripted or CSS pulldowns had shortcomings. Engineering's menus are almost keyboard navigable, but not quite. Engineering and Foster both have menu systems that work for mouse users but not so well for no-mouse people. Both however have maintained consistent structure within each of the topics so that the items in the left nav of a topic page are the same was in the pulldown menus for the topic. Both sites can therefore be navigated nicely without using a mouse. In that sense you could consider their approach a good example of progressive enhancement methods.</li></ul> </li><li><b>Recommendations</b> <ul><li><b>The importance of Skip-to-Content links:</b> Evaluating the sites did make clear the fundamental importance of Skip-to-Content links as the first links on the page. Many of these sites have large sets of navigation links in their headers (one has more than fifty links in its system of pulldown menus). A keyboard user would have to click through all fifty ON EVERY PAGE to find the page content.</li><li><b>Focus highlighting is important:</b> Turning off highlighting makes it hard for keyboard and voice command users to know where they are on the page. We are designing dynamic interfaces here, not hardcopy books.</li><li><b>We can do better on menus:</b> Good accessible menu systems are available out there that we can use in our CMSs. A good example of a progressive enhancement menu system that works well without a mouse is the Yahoo User Interface library's "Website Top Nav With Submenus Built From Markup" at <a href="http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup.html" rel="nofollow">http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup.html</a></li></ul> </li></ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-2925964366537644931?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-41934726868964536492009-07-23T10:37:00.000-07:002009-11-12T10:37:30.125-08:00<p>AccessibleWeb@U Meeting, July 23, 2009, Allen Auditorium</p> <p>This meeting was a Talkabout; an agenda created on the spot (and modified dynamically) and discussions that go where they needed to go.</p> <ul> <li>Reviewed new DOIT video about accessible design <ul> <li>Draft version is at http://uwtvftp.cac.washington.edu/3267DOIT?login=UWTVFTPUser:getmyfile</li> <li>We felt it was a good overall statement of what accessible design is about</li> <li>The final movie will be available through DOIT and UWTV soon</li> </ul> </li> <li>New UW templates are coming <ul> <li>The Web Council met this morning to hear progress on the new Web look for UW sites. HTML and CSS should be available by sometime in September.</li> </ul> </li> <li>Puzzle of site design development process: Why are accessibility considerations coming so late in the process? <ul> <li>Professional design process now often involves doing mockups with Photoshop, getting approval, then handing the Photoshop file to a coder <ul> <li>A variety of PSD to HTML conversion software and methods are available. See... http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/</li> </ul> </li> <li>The method can work if both the designer and the coder are knowledgeable in accessibility and usability considerations in Web design</li> <li>On the other hand, the process can produce fiat accompli designs that are hard to make usable or accessible <ul> <li>Narrow scope thinking in each step can miss opportunities for better design or deliver non-negotiable features to the next stage in the process</li> <li>Design thinking insensitive to Web technology can result in features that can only be created with coding kludges (non-semantic markup, place-holder objects, complex div structures, etc.) which defeat accessibility and usability goals</li> <li>Design conventions (habits) tend to be used to justify less usable/accessible design; it is safer to do what other people are doing (such as fixed width, fixed font-size, low contrast design) rather than use a goal-oriented criteria-based design process</li> <li>Best design process has the following: <ul> <li>Clearly stated usability and accessibility goals, such as contrast, semantic markup, intelligible flow of content, and simple structure</li> <li>Good, on-going communication between customer, designer, coder, and tester </li> <li>People in the team with good knowledge of usability/accessibility who are empowered to direct attention to any problems and work with team toward good solutions</li> </ul> </li> </ul> </li> </ul> </li> <li>"Flexible Web Design: Creating Liquid and Elastic Layouts with CSS" by Zoe Gillenwater <ul> <li>Dylan is currently working his way through the book and recommends it</li> <li>Flexible designs work better on a wider range of devices and allow the user more control of how they interact with the site, such as by scaling to an appropriate font size for their needs</li> </ul> </li> <li>Scripting issues and developments <ul> <li>Designing for mobile devices <ul> <li>Good structural flow helps; zooming in and out and scrolling around is time consuming</li> <li>Buttons and other clickable areas should have sufficent size</li> <li>Scripting needs to consider limited scripting feature set of many phones <ul> <li>Google is now offering the iPhone User Interface (http://code.google.com/p/iui/) to faciliate creating sites with Google features for iPhones</li> </ul> </li> </ul> </li> <li>Progressive enhancement (PE) scripting has major accessibility benefits <ul> <li>PE methods usually involve scripting that operates on html content, such as displaying content in an unordered list as a menu. If the scripting cannot be read, the content is still available in the HTML, which everything can read</li> <li>Yahoo User Interface library (developer.yahoo.com/yui) offers PE versions of many of its scripts for menus, collapsible lists, and other functionality</li> <li>JQuery (jquery.com) has PE methods (for an example, see http://www.kelvinluck.com/2009/02/progressive-enhancement-with-jquery-example/</li> </ul> </li> </ul> </li> <li>Future AccessibleWeb@U Meetings <ul> <li>August - No meeting currently planned</li> <li>September - Libraries AccHack</li> <li>October - Accessible scripting principles and examples</li> <li>Social Networking with Accessiblity people </li> </ul> </li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-4193472686896453649?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-10234323953849620902009-06-25T10:35:00.000-07:002009-11-12T10:36:03.179-08:00<p>AccessibleWeb@U &mdash; June 25, 2009</p> <ul> <li>Special thanks to Christine Tawatao and University Libraries for making the Allen Auditorium available for our meetings. The Auditorium is reserved for AccessibleWeb@U the fourth Thursday of each month, 11:30am to 1:00pm. </li> <li>Projects <ul> <li>Dylan looking into use of ARIA in pulldown menus. Hopes to be able to report by Fall</li> <li>Dan interested in testing scripting packages, such as menus, with JAWS</li> </ul> </li> </ul> <hr /> <h1>Making Accessible Drupal Sites</h1> <p>Rick Ells UW Technology</p> <h2>About Drupal</h2> <ul> <li>Standards Based; xhtml, css, PHP</li> <li>Large user community</li> <li>Many templates to choose from</li> <li>Many modules to choose from</li> </ul> <h2>Drupal Is Cool</h2> <ul> <li>Centralized management <ul> <li>Templates and modules</li> <li>Styles</li> <li>Scripting</li> </ul> </li> <li>Content creation, editing, and maintenance can be done without technical Web knowledge</li> <li>Changes in styles, layout can be done across the site without content maintainers involvement</li> </ul> <h2>More Cool</h2> <ul> <li>Information management <ul> <li>Categories</li> <li>Taxonomies</li> <li>Keywords</li> </ul> </li> <li>Navigation structures generated for you</li> <li>Easy to add Web2.0 features</li> </ul> <h2>Even More Cool</h2> <ul> <li>Authentication, roles</li> <li>Workflow</li> <li>Customization based on default designs, templates, styles <ul> <li>Intercepts, overrides, and subthemes</li> </ul> </li> </ul> <h2>Being Accessible</h2> <p>WCAG 2.0 Guidelines</p> <ul> <li>Perceivable</li> <li>Operable</li> <li>Understandable</li> <li>Robust</li> </ul> <p>Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/</p> <h2>Accessible Design Efficiency</h2> <ul> <li>Templates, stylesheets, modules can address many aspects of accessible design</li> <li>Content authors and editors do not have to know as much about? <ul> <li>Skip to content</li> <li>Font sizing</li> <li>Color choices</li> <li>Labeling, Alt texts</li> <li>Semantic markup</li> <li>Page layout</li> </ul> </li> </ul> <h2>Steps to Accessible Design</h2> <ol> <li>Install</li> <li>Update</li> <li>Select theme</li> <li>Add modules</li> <li>Build blocks</li> <li>Apply your design</li> </ol> <h2>1. Install</h2> <ul> <li>Installing Drupal http://www.washington.edu/computing/web/publishing/drupal.html</li> <li>SQL Database http://www.washington.edu/computing/web/publishing/mysql.html</li> </ul> <h2>2. Update</h2> <ul> <li>Updates are essential</li> <li>Each time the administrator logs in Drupal will display messages of needed updates</li> <li>Do them promptly</li> </ul> <h2>3. Select Theme</h2> <p>Tables or tableless?</p> <ul> <li>Tableless layouts best, especially if fluid <ul> <li>Controllable with CSS</li> <li>Reading order can be independent of layout position</li> <li>Fluid sizing allows scaling by user as needed</li> </ul> </li> <li>Table layout not so good <ul> <li>Imposes reading sequence</li> <li>Presentation only somewhat controllable with CSS</li> </ul> </li> <li>Nested tables bad <ul> <li>Navigation nightmare</li> </ul> </li> <li>Many theme design philosophies, which is why so many themes are available</li> </ul> <h2>Managing Themes</h2> <h2>Accessible Themes</h2> <p>Box_grey Theme, Blue Bars Theme, Blue Lake Theme, Celju Theme, Clean Theme, CWS Theme</p> <p>The Eleven Most Accessible Drupal 6 Themes http://openconcept.ca/blog/mgifford/function_assessment_of_valid_drupal_6_themes</p> <h2>Theme Problems</h2> <ul> <li>Non-nested use of h-elements <ul> <li>One h1 per page; main topic</li> <li>h2; subtopics</li> <li>h3; subsubtopics, etc.</li> </ul> </li> <li>Inconsistencies among modules in how headings are done</li> <li>Deeply nested tables</li> <li>Not specifying default language</li> </ul> <h2>4. Add Modules</h2> <ul> <li>Hundreds of modules are available</li> <li>Offer a wide range of functionality <ul> <li>Editors, games, feeds, tools</li> </ul> </li> <li>Most are standards compliant <ul> <li>Problem: Inconsistent implementations among modules</li> </ul> </li> <li>Frequently updated</li> </ul> <h2>Managing Modules</h2> <h2>5. Build Blocks</h2> <ul> <li>Blocks contain the code fragments for the different areas of your layout</li> <li>Blocks are placed in page regions</li> <li>Must be well-formed and strictly compliant to fit in context <ul> <li>Structured, semantic markup very desireable to get CSS to work</li> </ul> </li> <li>How you add things like "Skip to Content"</li> </ul> <h2>Semantic Markup</h2> <ul> <li>Use elements according to their logical type <ul> <li>Make headings with h-elements, not big bold paragraphs</li> </ul> </li> <li>Properly nest h-elements <ul> <li>H1 is the main page topic, h2s are subtopics, h3s are subsubtopics, etc.</li> </ul> </li> <li>Choose a content editor that makes semantic markup possible, even if you have to go into html mode sometimes</li> </ul> <h2>6. Apply Your Design</h2> <ul> <li>Use subtheme, intercept, and override methods <ul> <li>Never modify original templates, stylesheets</li> </ul> </li> <li>Customize templates</li> <li>Customize CSS <ul> <li>Layout adjustments</li> <li>Color scheme</li> <li>Font size</li> <li>Contrast</li> </ul> </li> </ul> <h2>Color Scheme</h2> <h3>Color Selection</h3> <ul> <li>Consider the colorblind; about 9% of men and 1% of women are colorblind in some way</li> <li>Wickline Colorlab makes it easy to see hour your color set will appear to people with different kinds of colorblindness &mdash; http://colorlab.wickline.org/colorblind/colorlab/</li> </ul> <h2>Color Scheme</h2> <h3>Contrast</h3> <ul> <li>5:1 contrast ratio between text and background is recommended</li> <li>Paciello Group Color Contrast Analyzer can be used to quickly evaluate color combinations &mdash; http://www.paciellogroup.com/resources/contrast-analyser.html</li> <li>Minimum Color Contrast Ratio &mdash; http://www.joedolson.com/articles/2008/12/minimum-color-contrast-ratio-changed-in-wcag-2/</li> </ul> <h2>Maintaining Accessibility</h2> <h3>Do</h3> <ul> <li>Validate all modifications &mdash; be sure everything is strictly compliant</li> <li>Choose editor that makes semantic HTML</li> <li>Consider content flow in page structure</li> <li>Add aids such as "Skip to Content"</li> <li>Use semantic markup</li> <li>Use scripting libraries and methods that support accessibility</li> </ul> <h3>Don't</h3> <ul> <li>Invent non-semantic elements (divs) when appropriate semantic elements are available</li> <li>Use fixed sizes</li> <li>Reduce contrast for artistic effect</li> <li>Put essential content exclusively in media</li> <li>Have visual media without captioning</li> </ul> <h2>Drupal Accessibility Activity</h2> <ul> <li>Accessibility Group &mdash; http://groups.drupal.org/accessibility</li> <li>The Eleven Most Accessible Drupal 6 Themes &mdash; http://openconcept.ca/blog/mgifford/function_assessment_of_valid_drupal_6_themes</li> <li>Accessibility Best Practices in Drupal Theming &mdash; http://szeged2008.drupalcon.org/program/sessions/accessibility-best-practices-drupal-theming</li> </ul> <h2>Evaluating Your Drupal Site</h2> <ul> <li>WAVE &mdash; http://wave.webaim.org/</li> <li>Functional Accessibility Evaluator &mdash; http://fae.cita.uiuc.edu/</li> <li>WebAnywhere &mdash; http://wa.cs.washington.edu</li> <li>Yellowpipe Lynx Viewer &mdash; https://addons.mozilla.org/en-US/firefox/addon/1944</li> <li>Wickline Colorlab &mdash; http://colorlab.wickline.org/colorblind/colorlab/</li> <li>Paciello Group Color Contrast Analyzer &mdash; http://www.paciellogroup.com/resources/contrast-analyser.html</li> </ul> <h2>Discussion</h2> <ul> <li>Editors available for Drupal <ul> <li>A variety of editors are available as modules that are easy to add to Drupal.</li> <li>FCKedit &mdash; http://drupal.org/project/fckeditor</li> <li>YUI Ric Text Editor &dash; http://drupal.org/project/yui_editor</li> </ul> </li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-1023432395384962090?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-78526691020131263152009-04-29T10:33:00.000-07:002009-11-12T10:33:58.355-08:00AccessibleWeb@U - April 29, 2009<br /> Present: Terrill Thompson, Bill Corrigan, Wendy Chisholm, Chris Whip, Dylan Wilbanks, Ryan Benson, Karen Rosenstiel, Rick Ells<br /> <h2> Quick Items</h2> <ul> <li>We need a larger meeting room for our monthly AccessibleWeb@U meetings. MGH 015L is central, well equipped, free thanks to UW Technology, and usually available, but attendance has been up and we need more space. If you know an appropriate room we can reserve, or if your department is interested in sponsoring the AccessibleWeb@U meetings, please send a message to the rells@u.washington.edu or to the accessibleweb@u.washington.edu list.</li> <li>May's AccessibleWeb@U topic will be "Creating Accessible Sites With Drupal." If you are interested in the topic and want to participate in the discussion as we develop the talk, send email to rells@u.washington.edu.</li> </ul> <h2> Visual cues for keyboard users</h2> Ryan Benson demonstrated CSS methods for highlighting links when they have focus to help keyboard-only users know where they are on a page.<br /> <ul> <li>Most designers have some kind of highlighting when mouse users hover over a link, but do not provide highlighting for keyboard who tab to a link</li> <li>CSS style could be<br /> <tt>a:hover, a:visited:hover, a:focus, a:visited:focus, a:active,<br /> a:visited:active { <i>whatever style makes anchor clearly visible</i> }</tt></li> <li>Highlighting effect for hover and focus can be different since hover is for mouseovers and focus is for keyboard users who tab through anchors.</li> <li>IE behavior for focus different <br /> <br /> <ul> <li>Focus works on most browsers, active is what works on IE</li> </ul> <br /> <br /> </li> <li>Border of an anchor that wraps looks broken - border is open at end of one line and beginning of next line <br /> <br /> <ul> <li>Could add more padding so that the text can wrap within the anchor</li> <li>Could enclose anchor in a div and put the border on that</li> </ul> <br /> <br /> </li> <li>Dan Comden prefers use of a border instead of a background for the focus effect because other access technologies use a border to highlight your location on a page.</li> <li>Keyboard users could have their own stylesheet with styles for their particular needs <br /> <br /> <ul> <li>Wayne Dick offers stylesheets for people with disabilities http://www.calstate.edu/Accessibility/webaccessibility/evaluation/lowvis.css</li> </ul> <br /> <br /> </li> <li>How visible should the border be <br /> <br /> <ul> <li>Strong or dark color?</li> <li>Subtle color?</li> <li>Looking for an effect that is not jarring to non-keyboard users but works well for people who are keyboard users</li> </ul> <br /> <br /> </li> </ul> <h2> Longitudinal Research Project Looking at Home Pages of Higher Education Institutions - Terrill Thompson</h2> Terrill is looking at Higher Education home pages as a followup to a study he conducted in 2004-2005.<br /> <h3> Issues</h3> <ul> <li>Alt tags for images; Menus built with images that have no alt text become unnavigable if images cannot be displayed <br /> <br /> <ul> <li>DreamWeaver now prompts for alt text</li> <li>Evaulation Method: Used Web Accessibility Toolbar (WAT) on IE http://www.paciellogroup.com/resources/wat-ie-about.html to generate a list of images and their alt texts; critiqued the use of alt texts for meaningful texts, proper use of null texts. (A similar toolbar is available for FireFox at http://firefox.cita.uiuc.edu/)</li> <li>Survey of alt text usage in 2004-05 was 27% proper; current survey found rate of proper use has risen to 41%</li> </ul> <br /> <br /> </li> <li>'Skip Navigation' link <br /> <br /> <ul> <li>Western Washington University (http://www.wwu.edu/) has a 'Skip to News' link</li> <li>Skip-to's usually are styled to become visible when they have focus</li> <li>How many skip links do you want (Skip to menu, skip to content, skip to news)? Too many skip-tos become a menu to the page content structure.</li> <li>Many people do not know that some browsers have skip navigation built in (such as skipping to headings) <br /> <br /> <ul> <li>Good heading structure helps meets the need for people finding different parts of the page, even if there are no skip-to links</li> </ul> <br /> <br /> </li> <li>Evaluating Coded Navigation (navigation within the page) <br /> <br /> <ul> <li>Used WAT to show internal links, display heading structure</li> <li>In 2004-05 7% had skip to content; In current survey 19% of home pages had skip to content</li> <li>'Skip to Main Content' is apparently the preferred phrasing</li> <li>In current survey 45% of sites are correctly using html headings (using headings in logical structure way)</li> </ul> <br /> <br /> </li> </ul> <br /> <br /> </li> <li>Navigation <br /> <br /> <ul> <li>Evaluation - Using IE, mouseover controls to see if there are dynamic behaviors, is there a visible effect to help mouse users, is there a visible effect for keyboard users</li> <li>Menus created with Javascript may not be identified as links in assistive technologies</li> <li>In original study, 78% if pages were keyboard accessible; in this study 65% were keyboard, if visual focus is not considered</li> <li>13% of sites provided visual focus for keyboard users</li> <li>39% of home pages have dynamic scripted menus; often implemented without evaluation of accessibility impacts</li> </ul> <br /> <br /> </li> <li>Use of Flash <br /> <br /> <ul> <li>Can be accessible, if you know what you are doing <br /> <br /> <ul> <li>Go to an object, press Shift-F11, enter label</li> </ul> <br /> <br /> </li> <li>JK Rowling site: http://www.jkrowling.com/accessible/en/ Entirely done with Flash. Nice accessibility features <br /> <br /> <ul> <li>sounds have accompanying texts</li> <li>clues of what to do next</li> <li>accessibility tools, gives keyboard controls for JAWS, WindowEyes</li> <li>exploration model, lots of stuff that you can explore</li> </ul> <br /> <br /> </li> <li>Not so good Flash example <br /> <br /> <ul> <li>Lower Columbia College http://lowercolumbia.edu/ Has nav with buttons buttons to advertise events, but does not say what ad you get to if you click a button. Lots of buttons, no labels</li> </ul> <br /> <br /> </li> <li>In this study, 38% of home pages included Flash; only one site labelled the objects (Lane Community College http://www.lanecc.edu/) but the pages lack a heading structure</li> </ul> <br /> <br /> </li> </ul> <h3> Summary</h3> <ul> <li>Fewer than half of web pages are accessible by any measure</li> <li>Accessibility is improving in some areas (alt texts, headings, validation)</li> <li>Accessibility is getting worse in other areas (navigation)</li> </ul> <h3> Discussion</h3> <ul> <li>Navigation accessibility problems often appear when site uses packaged menu scripts and (1) selects a package not designed for accessibility, (2) improperly configures the menus even if it is, or (3) breaks the accessibility features as the menus are evolved over time. </li> <li>AccessibleWeb@U could hold sessions on accessible menus, accessible use of Flash and SilverLight, and creating accessible sites with content management systems.</li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-7852669102013126315?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-46084292220112802009-03-25T10:28:00.000-07:002009-11-12T10:29:58.191-08:00<p> AccessibleWeb@U Meeting Notes, March 25, 2009</p> <ul> <li>Building an Accessible Site From the Ground Up <br /> <ul> <li>Goal is to create a new Web site for the Development &amp; Behavioral Pediatrics, currently at <a href="http://depts.washington.edu/dbpeds" rel="nofollow">http://depts.washington.edu/dbpeds</a></li> <li>Current site was developed by Dr. Samuel Zinner <br /> <ul> <li>The site built on SimpleSite, which is going away, prompting the need to build a new version.</li> </ul> <br /> </li> <li>Want an improved site <br /> <ul> <li>More usable</li> <li>More visually pleasing</li> <li>More compliant to ADA</li> <li>Take into consideration people with cognitive disabilities</li> <li>Sites Dr. Zinner likes <br /> <ul> <li><a href="http://youthhood.org/" rel="nofollow">http://youthhood.org/</a></li> <li>The <a href="http://dictionary.com/" rel="nofollow">http://dictionary.com/</a> family of sites <br /> <ul> <li>In set of sites, each has a different color</li> <li>Each page is entirely viewable without scrolling</li> </ul> <br /> </li> <li><a href="http://cshcn.org/" rel="nofollow">http://cshcn.org/</a> - Children with Special Needs</li> </ul> <br /> </li> </ul> <br /> </li> <li>Development work on the site will be done by Yuka Tsukamaki and Preethi Dutta, graduate students of the U.W. Information School, as part of the Capstone program (<a href="http://www.ischool.washington.edu/msim/capstone/" rel="nofollow">http://www.ischool.washington.edu/msim/capstone/</a>) <br /> <ul> <li>Working with Yuka and Preethi are Faye Louie (CHDD) and Seiya Urae (Medicine)</li> </ul> <br /> </li> <li>The current site has many links in the left column. Key features of the site are the following: <br /> <ul> <li>Clinics and Activities</li> <li>Schedules</li> <li>Advocacy Opportunities</li> <li>Training Modules at other sites</li> <li>Featured Articles <br /> <ul> <li>Commenting on how press has spun stories, linking to more valid articles</li> </ul> <br /> </li> <li>Resources for Community</li> <li>Screening &amp; Surveillance Tools <br /> <ul> <li>Want to teach physicians better earlier screening and identification</li> <li>Some are copyrighted, protectd by password</li> </ul> <br /> </li> </ul> <br /> </li> </ul> <br /> </li> <li>Discussion <br /> <ul> <li>Find out how the current site is being used <br /> <ul> <li>Catalyst system gives you number of site visits but not page stats</li> <li>People not necessarily going through home page</li> <li>2/3 of School of Public Health site visits do not go through home page</li> </ul> <br /> </li> <li>Could add Google Analytics (<a href="http://www.google.com/analytics/" rel="nofollow">http://www.google.com/analytics/</a>) to the current site to collect data until the new site is built <br /> <ul> <li>Requires adding Javascript at the bottom of each page you want to collect visit data on.</li> <li>Goal is to find out who actually is visiting the site and what they are looking at</li> <li>Google Analytics not only gives page visit counts but also gives breakdowns of who is visiting</li> <li>Who is your real audience at present? How does the current audience compare to the audience you want to reach?</li> </ul> <br /> </li> <li>Evaluate your content <br /> <ul> <li>What are the unique things people might look for on your site?</li> <li>How good is your site technically. For example, are there dead links? <br /> <ul> <li>Xenu's Link Sleuth (<a href="http://home.snafu.de/tilman/xenulink.html" rel="nofollow">http://home.snafu.de/tilman/xenulink.html</a>) is a free tool that can check links</li> </ul> <br /> </li> <li>How well written, edited, and polished is your content <br /> <ul> <li>Is the style consistent throughout the content?</li> <li>Is there consistent voice and role in the writing?</li> </ul> <br /> </li> </ul> <br /> </li> <li>Define the purpose of site <br /> <ul> <li>Be clear about priorities and audiences <br /> <ul> <li>Work on a statement of Priorities and Audiences; put it in writing, pass it around <br /> <ul> <li>Clarify what parts of content are for the department and what parts are for outside audiences (audiences, therapists, parents) <br /> <ul> <li>Separating departmental/staff content from content for outside audiences might be a basic concept in your design</li> </ul> <br /> </li> <li>What types of user needs do you most want to support</li> <li>Articulate priorities and rank them relative to each other</li> </ul> <br /> </li> </ul> <br /> </li> </ul> <br /> </li> <li>State any considerations <br /> <ul> <li>Do HIPAA health information privacy laws apply (<a href="http://www.hhs.gov/ocr/privacy/%29?" rel="nofollow">http://www.hhs.gov/ocr/privacy/)?</a></li> <li>Intellectual property ownership <br /> <ul> <li>Is any content on the site copyrighted? Do you have permission to distribute the content (you do not need permission to just link to things on other sites)</li> </ul> <br /> </li> <li>Privacy <br /> <ul> <li>Doctors' schedules; can they be public?</li> <li>Doctors' contact information; can it be public?</li> </ul> <br /> </li> </ul> <br /> </li> <li>Assess the resources available to maintain the site <br /> <ul> <li>How much manpower will be available to maintain the site once it exists? <br /> <ul> <li>About four people maintain the content of the current site. All four have lots of other things they are involved in.</li> </ul> <br /> </li> <li>What implications does the amount of manpower have on what you want to try to do in building the site?</li> </ul> <br /> </li> <li>Consider a Content Management System <br /> <ul> <li>Drupal (<a href="http://drupal.org/" rel="nofollow">http://drupal.org/</a>) is used by many groups at the UW, including Facilities <br /> <ul> <li>Free, has a good, active support community</li> <li>Relatively simple to install, comes with a variety of designs (themes) which can tweaked easily</li> <li>Drupal can be installed and run on the depts.washington.edu server <br /> <ul> <li>Instructions are at <a href="http://www.washington.edu/computing/web/publishing/drupal.html" rel="nofollow">http://www.washington.edu/computing/web/publishing/drupal.html</a></li> <li>Requires MySQL, which is also available on the depts server (<a href="http://www.washington.edu/computing/web/publishing/mysql.html" rel="nofollow">http://www.washington.edu/computing/web/publishing/mysql.html</a>)</li> </ul> <br /> </li> <li>Drupal is not a centrally supported service. Once it is up your are on your own to maintain it <br /> <ul> <li>Periodically updates must be installed</li> </ul> <br /> </li> <li>Several groups on campus can do Drupal themeing<br /> for you (for a fee) <br /> <ul> <li>UW Creative + Communications; <a href="http://www.washington.edu/admin/pubserv/" rel="nofollow">http://www.washington.edu/admin/pubserv/</a></li> <li>UW Creative; <a href="http://www.uwcreative.com/" rel="nofollow">http://www.uwcreative.com/</a></li> </ul> <br /> </li> </ul> <br /> </li> </ul> <br /> </li> </ul> <br /> </li> <li>Designing a Web site for people with special needs <br /> <ul> <li>Good accessible design resources at on the UW IT Accessibility site at<br /> <a href="http://www.washington.edu/accessibility/" rel="nofollow">http://www.washington.edu/accessibility/</a></li> <li>Topics <br /> <ul> <li>Font size <br /> <ul> <li>Flexible web page designs (sizes and dimensions are set with relative measures such as percents and em-spaces) allow the user to adjust the font size to what is comfortable for them</li> <li>Fixed font sizes, especially if the size is small, can be a big obstacle</li> </ul> <br /> </li> <li>Colors <br /> <ul> <li>Be wary of red/green color combinations; 10% of men are red/green<br /> color blind. You can check color combinations with VisCheck (<a href="http://www.vischeck.com/" rel="nofollow">http://www.vischeck.com/</a>)</li> <li>Provide sufficent contrast (at least 5:1) of words on their background. You can evaluate the contrast of color combinations with the Colour Contrast Analyzer (<a href="http://www.visionaustralia.org.au/info.aspx?page=628" rel="nofollow">http://www.visionaustralia.org.au/info.aspx?page=628</a>)</li> </ul> <br /> </li> </ul> <br /> </li> <li>Basic steps <br /> <ul> <li>Choose a version of html or xhtml and stick to it <br /> <ul> <li>We suggest XHTML</li> <li>Write to the standard, not to a specific browser</li> </ul> <br /> </li> <li>Write compliant code; code that is correct according to the version of html/xhtml you are using. Validate your code frequently as you work on it.</li> <li>Use semantic markup; XHTML has predefined logical element types such<br /> as paragraph, h1 headings, and ordered lists. Using these elements as they are intended to be used means each block of text has a declared logical type that can be help assistive software interpret the page and present it intelligibly to the user.</li> <li>Use a simple page structure; pages are made up of a number of divisions such as header, left-column, content, right-column, and footer.</li> <li>Separate content from presentation; put page content into semantic xhtml and control presentation on the page with CSS stylesheets</li> </ul> <br /> </li> <li>Methods <br /> <ul> <li>Avoid opening in new window</li> <li>ALT tags on each graphic, alt="" (an empty ALT) for non meaningful graphics</li> <li>In forms, use LABEL to relate titles to form fields <br /> <ul> <li>See<br /> <a href="http://www.webaim.org/techniques/forms/controls.php" rel="nofollow">http://www.webaim.org/techniques/forms/controls.php</a></li> </ul> <br /> </li> </ul> <br /> </li> <li>Cognitive disabilities <br /> <ul> <li>General information is available from WebAIM <a href="http://www.webaim.org/articles/cognitive/" rel="nofollow">http://www.webaim.org/articles/cognitive/</a></li> <li>Spacing between lines can help readability; tight text and long text<br /> lines can make reading difficult</li> <li>Addressed in Web Content Accessibility Guidelines v.2 (WCAG2)<br /> <a href="http://www.w3.org/TR/WCAG20/" rel="nofollow">http://www.w3.org/TR/WCAG20/</a></li> <li>Use of language; use simple language with words with few syllables <br /> <ul> <li>Good guidelines on simple writing are on the Plain Talk Web sites <br /> <ul> <li><a href="http://www.accountability.wa.gov/plaintalk/ptguidelines/" rel="nofollow">http://www.accountability.wa.gov/plaintalk/ptguidelines/</a> and <a href="http://www.plainlanguage.gov/" rel="nofollow">http://www.plainlanguage.gov/</a></li> </ul> <br /> </li> </ul> <br /> </li> <li>Use ABBR element (<a href="http://www.w3schools.com/tags/tag_abbr.asp" rel="nofollow">http://www.w3schools.com/tags/tag_abbr.asp</a>) to spell out what an abbreviation stands for, text appears when you hover over the abbreviation</li> <li>Different parts of site may be developed for different audiences, with different vocabularies</li> </ul> <br /> </li> </ul> <br /> </li> <li>Search engine optimization <br /> <ul> <li>Meta elements (<a href="http://www.w3schools.com/tags/tag_meta.asp" rel="nofollow">http://www.w3schools.com/tags/tag_meta.asp</a>) in Head of a Web page helps searches recognize what the page is about, but you want to have the right vocabulary and not too much of it <br /> <ul> <li>Google Search penalizes pages with too many Meta words, particularly if they repeat</li> </ul> <br /> </li> <li>Recognize that Headers (h1, h2, h3, etc.) have significance to assistive technologies, which will interpret<br /> them as the topic, subtopic, subsubtopic, etc. of the page content <br /> <ul> <li>Voice browsers allow the user to navigate the page by the headers. Logical headers help the user go quickly to the content they are looking for</li> </ul> <br /> </li> </ul> <br /> </li> <li>Common problems <br /> <ul> <li>Pages do not have navigation; not clear who owns it, what context it is in <br /> <ul> <li>Have information in page, such as in the header</li> <li>Identification does not have to take up much space; a linked logo in an upper corner may be sufficent</li> </ul> <br /> </li> <li>Important to have consistent layout so people have an idea of what to expect</li> <li>Important information is only in graphics, such as PowerPoint slides; have the information in the page HTML too.</li> <li>When people print a page, is it readable; have a print stylesheet that formats it for hardcopy use <br /> <ul> <li>Be sure the printout has the URL of the page</li> </ul> <br /> </li> <li>Drop down menus can be inaccessible <br /> <ul> <li>There are methods for doing drop-down menus that are accessible and methods that are not accessible <br /> <ul> <li>Generally the most accessible drop-down menus use progressive enhancement coding techniques, such as the Yahoo User Interface (<a href="http://developer.yahoo.com/yui/menu/" rel="nofollow">http://developer.yahoo.com/yui/menu/</a>)</li> </ul> <br /> </li> <li>How do people with cognitive difficulties work with menus is an open questions; research needed!</li> </ul> <br /> </li> </ul> <br /> </li> </ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-4608429222011280?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-78097188455175294742009-02-11T08:25:00.000-08:002009-02-11T08:45:23.758-08:00Many of you know WebAIM (Web Accessibility in Mind) as one of the most complete and best maintained sources of good information on accessible design topics. In December and January, WebAIM conducted a survey of preferences of screen reader users relating to Web design and Web technologies. The survey collected 1121 responses from people with various disabilities. See <a href="http://webaim.org/projects/screenreadersurvey/">WebAIM: Screen Reader Survey Results </a> I found the results to be quite useful: <ul><li>Headings really are important: "It is clear that providing a heading structure is important to screen reader users with 76% always or often navigating by headings when they are available." 90% of the expert users used headings always or often.</li><li>Site maps were not particularly useful: "The majority of respondents seldom or never use site maps."</li><li>Pop-up windows are difficult for less proficient screen readers to deal with. More proficient users had much less difficulty.</li><li>Photos should be identified as such in their alt text, rather than just described with brief text: "It was very clear that the vast majority of screen reader users prefer to have photos identified as such. Interestingly, those that do not have a disability were three times more likely to prefer the briefer alt text than those that do have a disability."</li><li>Flash is difficult for screen reader users: "71.5% of screen reader users reported that Flash is difficult while only 14.2% reported that it is easy."</li><li>Frames are not that big of a problem. "While the majority (58%) of users reported that frames are easy, those that are blind were 3 1/2 times more likely to indicate that they are easy than those with no disability."</li></ul>Clearly, Web accessibility evaluator's rules of thumb (i.e., Frames are not accessible) can be simplistic or misleading . I encourage everyone to read through these results carefully. And I would like to send a hearty thanks to WebAIM for conducting the survey!<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-7809718845517529474?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com2tag:blogger.com,1999:blog-37426996.post-46461254845952010972009-02-03T15:11:00.000-08:002009-02-03T15:20:32.581-08:00For our first Access Hack Session, Dylan Wilbanks of the <a href="http://sph.washington.edu/">School of Public Health</a> gave us a tour of their site, explaining its design and accessibility features. A lively discussion followed about the methods used, issues they raise, and other methods the Dylan might want to explore for the next site update. Detail <a href="http://staff.washington.edu/rells/accesswebu/acc_jan2908.txt">discussion minutes are available</a>.Take a look at the site, review the minutes, and add your thoughts.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-4646125484595201097?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com0tag:blogger.com,1999:blog-37426996.post-88851400308551875462008-06-09T13:28:00.001-07:002008-06-09T14:16:59.730-07:00How can we work together as a community to create information technology that is accessible to people with disabilities? On many campuses, this question is being addressed by creating a "Community of Practice" which uses various forms of communication and sharing (blogs, software libraries, bookmark lists, wikis, shared development projects, etc.) to support efficency and synergy in achieving and maintaining accessibility in IT. <ul><li>What tools would help us share the load?</li><li>What accessibility related activities would you find worth participating in?</li><li>What resources can we build to support our work?</li><li>Where do you find the most useful information about accessibility?</li><li>What challenges and issues loom large in your situation?</li><li>What tools, sites, or services are most useful to you now?</li></ul>Let us know what you think will work here at the UW!<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/37426996-8885140030855187546?l=accesswebu.blogspot.com' alt='' /></div>Rick Ellshttp://www.blogger.com/profile/09882291141664454280noreply@blogger.com2