- The real world is messy when it comes to a lot of things including accessibility.
- Build things that follow the guidelines but ensure a good experience for everyone.
- Checklist syndrome – people know they need to be accessible, but always turn to guidelines. They don’t know why they need to comply. They just want to be able to state they are compliant.
- This removes the person from the equation and just follows the ‘rules’.
- The checklist is a means to get to accessibility, but not the endpoint.
- Small usability barriers for average users can become huge issues for a person with a disability.
- Advanced search page:
- Differentiation between like elements: simple search box in the header vs. advanced search in the main content area of the site.
- Poses a usability issue for everyone.
- News items:
- “News for September 22, 2007”
- Users expect current/daily news
- Also expect to see an news archive elsewhere on the site
- Changed wording to “Highlights for September 22, 2007”
- This changes the expectation for the user
- Real people need to be involved in testing to identify these issues.
- Dopplr:
- Sharing your trips with another user: notification appears out of context of the clicked action.
- The notification could be displayed near the action link in source order, but use CSS to move notification visually.
- Question: “does this change if you’re using a full page refresh vs. an ajax call?” On page refresh, give the focus of the page to the notification. Possibly include an indication of the notification in the tag.</li>
<li>The most important thing to remember is to remember that the interaction should have a logical (linear) path.</li>
</ul>
</li>
<li>Dopplr:
<ul>
<li>Managing notifications.</li>
<li>Clicking with the mouse maintains context (ajax functionality maintains context). Good for sighted users.</li>
<li>Click using the keyboard shifts focus back to the top of the page. Loses context for keyboard users.</li>
<li>Clicking with keyboard should reset focus to where the click occurred.</li>
<li>You won’t find this issue in any checklist or guideline. Will only find this by seeing how real users interact with the application.</li>
</ul>
</li>
<li>Custom Map Widgets (Google Maps):
<ul>
<li>Need to provide the controls in an accessible way.</li>
<li>Voice recognition software can’t identify the map controls as a link or a button.</li>
<li>Requires many steps to use mouse grids to narrow down the screen to click a map control.</li>
<li>Keyboard users can’t tab to any of the map controls.</li>
<li>Replace Google map controls with custom controls (button elements). Use image replacement and <span class="caps"><span class="caps">CSS</span></span> to make them look nice.</li>
<li>Now, VR software can recognize these controls and keyboard users can easily tab to the controls.</li>
<li>Makes this interface accessible to all users.</li>
</ul>
</li>
<li>Amazon.com:
<ul>
<li>Tagging mechanism</li>
<li>Clicking an existing tag’s checkbox adds the tag to a text box.</li>
<li>Checkboxes aren’t real checkboxes, they’re just emulated with images/Javascript/CSS</li>
<li>Not keyboard focusable, not visible to VR software as a checkbox. If it looks like a checkbox, it should be a checkbox.</li>
</ul>
</li>
<li>British Rail (Alternate accessible versions):
<ul>
<li>Toilet sign: text and braille.</li>
<li>Flush sign – braille for title, but not for the additional description (could be a critical instruction that’s not available to non-sighted users).</li>
<li>Another caution sticker, critical instructions, but no braille available.</li>
</ul>
</li>
<li>Flickr:
<ul>
<li>Inline text editing.</li>
<li>Instruction only appears when hovering over title with mouse.</li>
<li>Keyboard users can’t hover with the mouse.</li>
<li>They provide an alternate link (version), that provides the functionality for keyboard users.</li>
</li>
</ul>
</li>
<li>Create user stylesheets specific for users that helps them with specific issues; e.g. enlarging radio buttons for touch screen users.</li>
<li>Basecamp:
<ul>
<li>Inline editing</li>
<li>Hovering over list item displays a ‘nubbin’ (37signals term) – edit/delete/reorder list items.</li>
<li>There is no way to interact with them with a keyboard.</li>
<li>Created a user script (Greasemonkey) that will go through the page and expose all the ‘nubbins’. Allows keyboard users to interact with them.</li>
<li>A viable one-off solution.</li>
</ul>
</li>
<li>Basecamp:
<ul>
<li>Live updates</li>
<li>VR software can’t always keep in sync with live updates on the page.</li>
<li>Created another user script to refresh the page on live update to allow VR software to keep up.</li>
<li>Another viable one-off solution.</li>
</ul>
</li>
<li>Bathtub at hotel:
<ul>
<li>Proximity</li>
<li>Instructions are placed away from where action is occurring.</li>
<li>Error messages often have the same problem, not placed in context of where the error occurred.</li>
</ul>
</li>
<li><span class="caps">WAI</span>:ARIA – accessible rich internet applications:
<ul>
<li>The future is emulation.</li>
<li>role=”menu” – <ul role="menu"></li>
<li>Roles as an identifier for widgets.</li>
<li>Backed up with plain old <span class="caps"><span class="caps">HTML</span></span>, but role added for emulation.</li>
<li>Beds example: “It still matters what’s under the covers.”</li>
</ul>
</li>
</ul>
<p class="postmetadata alt">
Posted by Jeff on 30/01/08 at 11:45 am </p>
</div>
</div>
<!-- You can start editing here. -->
<!-- If comments are open, but there are no comments. -->
<div class="summary alternating">
<div class="wrap">
<h3 id="respond">Leave a Reply</h3>
<form action="http://north08.webdirections.org/wp-comments-post.php" method="post" id="commentform">
<p><input type="text" name="author" id="author" value="" size="22" tabindex="1" />
<label for="author">Name (required)</label></p>
<p><input type="text" name="email" id="email" value="" size="22" tabindex="2" />
<label for="email">Mail (will not be published) (required)</label></p>
<p><input type="text" name="url" id="url" value="" size="22" tabindex="3" />
<label for="url">Website</label></p>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> </code></small></p>-->
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" class="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="77" />
</p>
</form>
</div>
</div>
</div>
</div><!-- /main-col -->
<div id="secondary-col">
<ul id="icon-list">
<li class="cp"><a href="http://www.cafepress.com/wdn08">WDN Cafepress Store</a></li>
<li class="me"><a href="http://wdn08.meetweaver.com/">Meetweaver</a></li>
<li class="fb"><a href="http://www.facebook.com/group.php?gid=5035219774">WDN Facebook Group</a></li>
<li class="up"><a href="http://upcoming.yahoo.com/event/265375/">WDN08 on Upcoming</a></li>
<li class="fl"><a href="http://www.flickr.com/groups/374158@N21/pool/">WDN08 Flickr Group</a></li>
</ul>
<div id="sponsors">
<h3>WDN thanks its key sponsors</h3>
<div class="wrapper">
<a href="http://adobe.com/"><img src="/wp-content/themes/wdn08/i/sponsors/adobe.gif" alt="Adobe" width="112" height="141" /></a>
<a href="http://mediatemple.net/"><img src="/wp-content/themes/wdn08/i/sponsors/mt.gif" alt="mediatemple" width="166" height="66" /></a>
<a href="http://microsoft.com/"><img src="/wp-content/themes/wdn08/i/sponsors/microsoft.gif" alt="Microsoft" width="206" height="59" /></a>
</div>
<h3>And its significant sponsors</h3>
<div class="wrapper">
<a href="http://www.ngenworks.com/"><img src="/wp-content/themes/wdn08/i/sponsors/ngen.gif" alt="nGen Works" width="157" height="85" /></a>
<a href="http://www.opera.com/"><img src="/wp-content/themes/wdn08/i/sponsors/opera.gif" alt="Opera Software" width="122" height="48" /></a>
</div>
</div>
<div id="media-partners">
<h3>WDN media partners</h3>
<div class="wrapper">
<a href="http://agentic.ca/"><img src="/wp-content/themes/wdn08/i/sponsors/agentic.gif" alt="Agentic" width="153" height="42" /></a>
<a href="http://sitepoint.com/"><img src="/wp-content/themes/wdn08/i/sponsors/sitepoint.gif" alt="SitePoint" width="155" height="47" /></a>
<a href="http://techvibes.com/"><img src="/wp-content/themes/wdn08/i/sponsors/techvibes.gif" alt="TechVibes" width="136" height="47" /></a>
</div>
</div>
</div><!-- /secondary-col -->
</div></div><!-- /main-content -->
<hr class="hide" />
<div id="footer"><div class="wrapper">
<p>Web Directions North is a joint production by Web Directions Conference Pty Ltd <span class="amp">&</span> Meetspace Inc.</p>
<p>© Web Directions Ltd <span class="amp">&</span> Meetspace Inc. <span>|</span> GST # 844533521 <span>|</span> <a href="/terms-and-conditions/">Terms and conditions</a> <span>|</span> <a href="/privacy-policy/">Privacy policy</a> <span>|</span> <a href="/contact/">Contact</a></p>
</div></div><!-- /footer -->
</div><!-- /container -->
</body>
</html>