<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>My Little Black Book &#187; accessibility</title>
	<atom:link href="http://blog.williegoosen.com/tag/accessibility/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.williegoosen.com</link>
	<description></description>
	<lastBuildDate>Tue, 24 Aug 2010 11:42:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>Day Three Accessibility and Ajax</title>
		<link>http://blog.williegoosen.com/2009/02/day_three_accessibility_and_ajax/</link>
		<comments>http://blog.williegoosen.com/2009/02/day_three_accessibility_and_ajax/#comments</comments>
		<pubDate>Wed, 18 Feb 2009 10:53:16 +0000</pubDate>
		<dc:creator>Willie Goosen</dc:creator>
				<category><![CDATA[Webstock2009]]></category>
		<category><![CDATA[accessibility]]></category>
		<category><![CDATA[day3]]></category>
		<category><![CDATA[workshop]]></category>

		<guid isPermaLink="false">http://blog.williegoosen.com/?p=51</guid>
		<description><![CDATA[Derek Featherstone Real world Accessibility for Ajax and Web Apps Sites : www.boxofchocolates.ca www.furtherahead.com Right so i got caught out by the title like the typical buzzword try-er-outer. So first thing i read going through the workshops, was &#8230;. AJAX. So wow that&#8217;s like so now and everyone is doing it so the more AJAX [...]]]></description>
			<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop --><!-- End Shareaholic LikeButtonSetTop --><p>Derek Featherstone<br />
Real world Accessibility for Ajax and Web Apps<br />
Sites : <a href="http://www.boxofchocolates.ca">www.boxofchocolates.ca</a> <a href="http://www.furtherahead.com">www.furtherahead.com</a></p>
<p><a class="flickr-image alignright" title="Derek Featherstone and the class" href="http://www.flickr.com/photos/greendott/3303362102/"><img src="http://farm4.static.flickr.com/3312/3303362102_dce60f91a9_m.jpg" alt="Derek Featherstone and the class" /></a></p>
<p>Right so i got caught out by the title like the typical buzzword try-er-outer. So first thing i read going through the workshops, was &#8230;. AJAX. So wow that&#8217;s like so now and everyone is doing it so the more AJAX the better right?</p>
<p>Upon closer inspection the workshop was more around the _accessibility_ part. And the first 10 min I thought whoops not quite what I intended to spend a day on, but i was captivated after the intro.</p>
<p>Quick key points<br />
1. Forms<br />
- Watch out for Visual labeling, use <label> element<br />
- &#8220;em&#8221; inside the &#8220;label&#8221; and position with CSS<br />
- Replace &#8220;em&#8221; with a &#8220;strong&#8221; if its an error.<br />
- Plan error/advisory information carefully (keep in flow or shift focus to it if not in flow)<br />
- Dual purpose interfaces can cause issues.</label></p>
<p>2. Linear Flow<br />
- feedback on an action should be where your focus is going<br />
- have elements linear in HTML and position with CSS for visual organisation</p>
<p>3. Proximity<br />
- when injecting content with ajax place do so in context.<br />
- avoid injecting content at the end of the document if possible<br />
- best yet avoid ajax if it can be hidden with CSS and revealed</p>
<p>4. Backup plan<br />
- have a fall back option, multiple ways of achieving same goal<br />
- use headings for &#8220;rescue point&#8221; if user gets lost in document</p>
<p>5. Visual Design vs Structure<br />
- check that your visual design and un-styled document is telling the same story<br />
- turn your CSS off see if site still makes sense<br />
- build linear flow into your wire frames</p>
<p>6. Development  Testing<br />
- Test for accessibility from the start.<br />
Design Stage: Color contrasts, general layout<br />
Functional Testing: must work with keyboard<br />
Demo Testing: all alt must be accurate, screen reader emulators, turn off css<br />
Final Test: real people varied needs.<br />
- test success error AND corrective paths<br />
- check for alt tags and that they make sence.</p>
<p>A Tools and Links<br />
- Screen readers Shark and Dragon Natural speaking<br />
- HTML Tidy in Firefox is a good start<br />
- <a href="http://www.standards-schmandards.com/projects/fangs/">Fangs</a> Firefox plug-in screen reader emulator<br />
- Juicy Studio Firefox plug-in for <a href="http://juicystudio.com/services/luminositycontrastratio.php">Luminosity Colour Contrast Ratio Analyser</a><br />
- <a href="http://www.simplyaccessible.org">www.simplyaccessible.org</a> for some examples<br />
- WCAG the accessibility bible</p>
<p>Soo once again to make some sence of all the random jucy tidbits of knowledge, its definitely something i will be promoting from now on.</p>
<p>At a basic level it costs nothing. Its up to the UX designer and Developers to just take a bit more care in element placement and thinking about the project not just from you users perspective but also the less able users. As a by product this will produce a much higher quality product and the HTML is bound to be more semantic and efficient.</p>
<p>A quote from Derek that summed it up quite well :</p>
<blockquote><p><em>Its about whats under the covers</em></p></blockquote>
<div class="shr-publisher-51"></div><!-- Start Shareaholic LikeButtonSetBottom --><!-- End Shareaholic LikeButtonSetBottom -->]]></content:encoded>
			<wfw:commentRss>http://blog.williegoosen.com/2009/02/day_three_accessibility_and_ajax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

