{"id":31,"date":"2007-03-12T12:38:59","date_gmt":"2007-03-12T18:38:59","guid":{"rendered":"http:\/\/techory.com\/sxsw\/?p=31"},"modified":"2014-02-27T14:13:06","modified_gmt":"2014-02-27T20:13:06","slug":"ajax-kung-fu-meets-accessibility-feng-sui","status":"publish","type":"post","link":"http:\/\/techory.com\/sxsw\/?p=31","title":{"rendered":"AJAX Kung Fu Meets Accessibility Feng Sui"},"content":{"rendered":"

Monday, March 12th @ 10:00 am<\/em><\/p>\n

Jeremy Keith\u00a0\u00a0 Web Developer,\u00a0\u00a0 Clearleft Ltd
\nDerek Featherstone<\/p>\n

Accessibility in AJAX<\/strong>
\n2 Kinds
\nDirected at custom people or technologies
\nGeneral universal accessibility (best)
\n-a site that can adapt to anyone and any device using that site<\/p>\n

Progressive Enhancement <\/strong>(order to do things)
\n1. Content
\n2. Structure it – what does this mean? – NOT how does this look?
\n3. Presentation – how does this look
\n4. Behavior – how does this work?<\/p>\n

You should be able to strip away any of these w\/out any problems
\nWhat you can use for these:
\n2. HTML (content)
\n3. CSS (structure)
\n4. AJAX (behavior)<\/p>\n

Many times the AJAX comes first – this is bad.<\/p>\n

What is AJAX?<\/strong>
\nAsynchronism is cool – don’t need to refresh page to get info from the server – not just pretty expand out boxes<\/p>\n

Web = Thin Client<\/p>\n

Browser<\/span><\/strong>
\nDisplay<\/p>\n

Server<\/span><\/strong>
\nstore
\nprocess<\/p>\n

Web = Rich Client<\/p>\n

Browser<\/span><\/strong>
\ndisplay<\/p>\n

**AJAX** use ajax to process – bad because AJAX is required<\/p>\n

Server<\/span><\/strong>
\nstore<\/p>\n

HIJAX<\/strong>
\nprogressive enhancement
\ncontent
\nstructure
\nbehavior<\/p>\n

Browser (links\/forms) -> Server (returns\/serves whole page back no mater what the link\/form)<\/p>\n

Browser (links\/forms) -> AJAX -> Server (just sends back via AJAX what is needed) -> Browser just shows the changed elements<\/p>\n

Deceptively rich content – AJAX is just the dumb waiter. It just delivers the stuff between the browser and the server. If the AJAX layer is stripped out it is OK because you’re going back to the old way of the server delivering an entire page.<\/p>\n

Paradox
\nplan for AJAX from the start but implement AJAX at the end<\/p>\n

Watch for: <a href=”javascript:…”> or <a href=”#” onclick =…><\/p>\n

Patterns good for AJAX<\/strong>
\nrating things
\nregister (user name is taken)
\ncomments (more blogs should use this)
\nshopping carts<\/p>\n

Feng Shui<\/strong>
\nFind a way where things can peacefully coexist.<\/p>\n

Feng Shui means Wind & Water – Wind and water can be peaceful or very destructive<\/p>\n

Accessible Scripting:
\n’99 – site works w\/ or w\/out javascript
\n’04-’05 – accessibility scripting something different
\n’06 – HIJAX (http:\/\/chapters.ca)<\/a>
\nis AJAX pop-up worse than a real browser window pop up – a screen reader doesn’t see the AJAX pop up. Maybe better to keep on page w\/anchor hidden w\/css at bottom<\/p>\n

Create a linear pathway through pages if one exists.<\/p>\n

Examples<\/strong>
\nForm advisories
\ntables prevent screen readers to get them – not part of form
\njust style <em> to pus it to the side as part of form
\nif there is an error style a <strong> to indicate
\nScreen readers will see this as part of <label><\/p>\n

A <label> can also be added to submit bottom saying there is a problem<\/p>\n

Where Next?<\/strong>
\nhref=”#nextstop”
\nTabIndex = “-1”<\/p>\n

Always an option not to use AJAX – consider alternatives or possibly make a “no ajax” preference<\/p>\n

“Accessibility is just as seXy!”<\/p>\n

Questions<\/strong>
\nHow do you deal with this when using a CMS or server language that doesn’t handle this?
\nMaybe find something that does or build your own if accessibility is important to you<\/p>\n

Where are screen readers headed and why are they so slow to keep up?
\nThey are getting better, but they are slow, they have to stay backwards compatible. Standards bodies are helping in this. Just a wait and see thing.<\/p>\n","protected":false},"excerpt":{"rendered":"

Monday, March 12th @ 10:00 am Jeremy Keith\u00a0\u00a0 Web Developer,\u00a0\u00a0 Clearleft Ltd Derek Featherstone Accessibility in AJAX 2 Kinds Directed at custom people or technologies General universal accessibility (best) -a site that can adapt to anyone and any device using that site Progressive Enhancement (order to do things) 1. Content 2. Structure it – what […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/31"}],"collection":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":1,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":695,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/31\/revisions\/695"}],"wp:attachment":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}