{"id":185,"date":"2007-06-02T18:05:17","date_gmt":"2007-06-02T18:05:17","guid":{"rendered":"https:\/\/virtualchaos.co.uk\/blog\/2007\/06\/02\/javascript-can-provide-a-richer-user-experience-without-compromising-accessibility\/"},"modified":"2007-06-02T21:58:58","modified_gmt":"2007-06-02T21:58:58","slug":"javascript-can-provide-a-richer-user-experience-without-compromising-accessibility","status":"publish","type":"post","link":"https:\/\/virtualchaos.co.uk\/blog\/2007\/06\/02\/javascript-can-provide-a-richer-user-experience-without-compromising-accessibility\/","title":{"rendered":"JavaScript can provide a richer user experience without compromising Accessibility."},"content":{"rendered":"<p>When Rob and I originally put <a href=\"http:\/\/cenote.talis.com\">Cenote<\/a> together one of the constraints we had to work within was that the&nbsp;application <em>must work without relying on JavaScript<\/em>. This is primarily because relying heavily&nbsp;on JavaScript can introduce some accessibility issues, these issues include:<\/p>\n<ul>\n<li><strong>Making Navigation difficult<\/strong>: Site&#8217;s that rely on JavaScript can make it very difficult to navigate around a site using a keyboard or other assistive technologies, and impossible if JavaScript is disabled in the browser. <\/li>\n<li><strong>Hides Content<\/strong>: Sites that rely heavily on JavaScript can present content and functionality to the user that is not accessible to assistive technologies,&nbsp;such as&nbsp;Text Readers. <\/li>\n<li><strong>Removes User Control<\/strong>: User&#8217;s have no control over automated content changes. For user&#8217;s have no accessibility needs this isn&#8217;t a problem, but for users who rely on assisstive technology there is no way of knowing that content has changed. This can prove to be very confusing\/disorienting since this can also involve altering normal browser functionality and triggering events that the user is not aware of.<\/li>\n<\/ul>\n<p>This doesn&#8217;t necessarily mean that pages that contain JavaScript cannot be fully accessible, such pages can be accessible if the functionality is device independent ( in other words it does not require only a mouse or only a keyboard to work ) and the content is always available to assistive technologies.<\/p>\n<p>So based on this knowledge Rob and I made the conscious decision that what we would do was develop Cenote first without using any JavaScript at all. This would ensure that the content rendered on the pages was always available to assistive technologies. We agreed that we could&nbsp;then use JavaScript to enhance the user experience by&nbsp;using JavaScript&nbsp;to manipulate the DOM of the page in the browser.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.virtualchaos.co.uk\/images\/cenote_js_enabled.gif\" align=\"right\">To see this in action visit <a href=\"http:\/\/cenote.talis.com\/isbn\/0747561079\">this page in Cenote<\/a>, if you scroll to the bottom of the page you&#8217;ll notice a list of libraries that you navigate through using a paging control (pictured).&nbsp;You&#8217;ll also notice that the book jacket in the top left hand corner of the page that has a nice reflection effect.&nbsp;Both these <em>effects<\/em> are made possible through&nbsp;JavaScript, and provide a slightly richer user experience.&nbsp;To see what I mean try turning off JavaScript in your browser<sup><a href=\"#footnote_0_185\" id=\"identifier_0_185\" class=\"footnote-link footnote-identifier-link\" title=\" In Firefox you can achieve this by going to Tools -&gt; Options -&gt; Content and uncheck the box labelled JavaScript. However if you don&rsquo;t already use it I recommend installing the Web Developer extensions for Firefox \">1<\/a><\/sup>, and hit refresh. The page now displays the book jacket without the reflection and the complete list of libraries without the paging control.<\/p>\n<p>So how is all this achieved? Well lets take a closer look at how the paging control. The snippet of html below shows a simplified<sup><a href=\"#footnote_1_185\" id=\"identifier_1_185\" class=\"footnote-link footnote-identifier-link\" title=\" I&rsquo;ve removed the url and the title attribute and the icon image from each link to simplify the example  \">2<\/a><\/sup> version of markup that actually represents the items in the list<sup><a href=\"#footnote_2_185\" id=\"identifier_2_185\" class=\"footnote-link footnote-identifier-link\" title=\" I&rsquo;m using Dean&rsquo;s Syntax Highlighter but specifying html means that the Snap Shots tries to execute against it, so I&rsquo;ve specified XML instead \">3<\/a><\/sup>, take particulare note of the empty div after the unordered list this is the placeholder we inject the paging control into:<\/p>\n<div class=\"dean_ch\" style=\"white-space: wrap;\">\n<ol>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"sc3\"><span class=\"re1\">&lt;ul<\/span> <span class=\"re0\">id<\/span>=<span class=\"st0\">&quot;Libraries&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; <span class=\"sc3\"><span class=\"re1\">&lt;li<span class=\"re2\">&gt;<\/span><\/span><\/span><span class=\"sc3\"><span class=\"re1\">&lt;a<\/span> <span class=\"re0\">class<\/span>=<span class=\"st0\">&quot;item-library&quot;<\/span> <span class=\"re0\">href<\/span>=<span class=\"st0\">&quot;#&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>Aberdeenshire Libraries<span class=\"sc3\"><span class=\"re1\">&lt;\/a<span class=\"re2\">&gt;<\/span><\/span><\/span><span class=\"sc3\"><span class=\"re1\">&lt;\/li<span class=\"re2\">&gt;<\/span><\/span><\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; <span class=\"sc3\"><span class=\"re1\">&lt;li<span class=\"re2\">&gt;<\/span><\/span><\/span><span class=\"sc3\"><span class=\"re1\">&lt;a<\/span> <span class=\"re0\">class<\/span>=<span class=\"st0\">&quot;item-library&quot;<\/span> <span class=\"re0\">href<\/span>=<span class=\"st0\">&quot;#&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>Barnsley MD Library<span class=\"sc3\"><span class=\"re1\">&lt;\/a<span class=\"re2\">&gt;<\/span><\/span><\/span><span class=\"sc3\"><span class=\"re1\">&lt;\/li<span class=\"re2\">&gt;<\/span><\/span><\/span><\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\">&nbsp; <span class=\"sc3\"><span class=\"re1\">&lt;li<span class=\"re2\">&gt;<\/span><\/span><\/span><span class=\"sc3\"><span class=\"re1\">&lt;a<\/span> <span class=\"re0\">class<\/span>=<span class=\"st0\">&quot;item-library&quot;<\/span> <span class=\"re0\">href<\/span>=<span class=\"st0\">&quot;#&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>Blackburn<span class=\"sc3\"><span class=\"re1\">&lt;\/a<span class=\"re2\">&gt;<\/span><\/span><\/span><span class=\"sc3\"><span class=\"re1\">&lt;\/li<span class=\"re2\">&gt;<\/span><\/span><\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"sc3\"><span class=\"re1\">&lt;\/ul<span class=\"re2\">&gt;<\/span><\/span><\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"sc3\"><span class=\"re1\">&lt;div<\/span> <span class=\"re0\">id<\/span>=<span class=\"st0\">&quot;pagingcontrol&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span><span class=\"sc3\"><span class=\"re1\">&lt;\/div<span class=\"re2\">&gt;<\/span><\/span><\/span> <\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp;<\/div>\n<\/li>\n<\/ol>\n<\/div>\n<p>Now when you view the page without JavaScript enabled the browser renders this markup exactly as it is. Accessibility or Assitive technology only use the HTML markup on the page. In the case of Text Readers this HTML is parsed and the software <i>reads<\/i> the content on the page back to the user. Now when JavaScript is enabled the markup on the page does not change, it stays exactly the same. We use JavaScript to manipulate the browsers <a href=\"http:\/\/en.wikipedia.org\/wiki\/Document_Object_Model\">DOM<\/a> which is the model the browser generates internally to represent the page. Now in the example above the Unordered List is identified using  the id &#8220;Libraries&#8221; which makes it easy to find in the DOM as this snippet of code illustrates:<BR\/><\/p>\n<div class=\"dean_ch\" style=\"white-space: wrap;\">\n<ol>\n<li class=\"li1\">\n<div class=\"de1\">span class=&#8221;st0&#8243;>&#8217;Libraries&#8217;<\/span><span class=\"st0\">&#8216;LI&#8217;<\/span<\/div>\n<\/li>\n<\/ol>\n<\/div>\n<p>\nHere we use its identifier to find the unordered list we want to augment with our paging control. Each list element in the unordered list is what we refer to as a <em>holding<\/em>, we simply extract the contents of each of those nodes and temporarily store them in an array called <em>libraries<\/em>. In the case of the page <a href=\"http:\/\/cenote.talis.com\/isbn\/0747561079\">I pointed you to earlier<\/a> this array would contain 50 items.\n<\/p>\n<p>Once we have found and copied the original complete list of libraries we can now proceed with updating the DOM to display to the user only the first 10 libraries, and render a paging navigation control. The function below updates the DOM by removing the original contents of the Libraries node, and replaces it with 10 items indexed from the specified startPosition.<\/p>\n<div class=\"dean_ch\" style=\"white-space: wrap;\">\n<ol>\n<li class=\"li1\">\n<div class=\"de1\">span class=&#8221;st0&#8243;>&quot;Libraries&quot;<\/span><span class=\"st0\">&#8221;<\/span><span class=\"st0\">&#8216;&lt;UL&gt;&#8217;<\/span><span class=\"st0\">&#8216;&lt;LI&gt;&#8217;<\/span> + libraries<span class=\"br0\">&#91;<\/span>x<span class=\"br0\">&#93;<\/span> + <span class=\"st0\">&#8216;&lt;\/LI&gt;&#8217;<\/span><span class=\"st0\">&#8216;&lt;LI&gt; &lt;\/LI&gt;&#8217;<\/span><span class=\"st0\">&#8216;&lt;\/UL&gt;&#8217;<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; renderNavigationControls<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"br0\">&#125;<\/span><\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\">&nbsp;<\/div>\n<\/li>\n<\/ol>\n<\/div>\n<p>The final line in the function above calls a method to render the navigation controls which I&#8217;ve copied below. You&#8217;ll notice that we find the placeholder identified by &#8220;pagingcontrol&#8221;, and render the preview, next and individual page links ( renderPageNumbers() ) into it. <\/p>\n<div class=\"dean_ch\" style=\"white-space: wrap;\">\n<ol>\n<li class=\"li1\">\n<div class=\"de1\">span class=&#8221;st0&#8243;>&#8217;pagingcontrol&#8217;<\/span><span class=\"st0\">&#8221;<\/span><span class=\"st0\">&#8216;&lt;a href=<span class=\"es0\">\\&#8221;<\/span>javascript:printPreviousPage();<span class=\"es0\">\\&#8221;<\/span> alt=<span class=\"es0\">\\&#8221;<\/span>Previous Page<span class=\"es0\">\\&#8221;<\/span> title=<span class=\"es0\">\\&#8221;<\/span>Previous Page<span class=\"es0\">\\&#8221;<\/span>&gt;&lt; previous&lt;\/a&gt;&#8217;<\/span><span class=\"st0\">&#8216;&lt; previous&#8217;<\/span><span class=\"st0\">&#8216; &nbsp;&#8216;<\/span> + renderPageNumbers<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> + <span class=\"st0\">&#8216; &nbsp;&#8216;<\/span><span class=\"st0\">&#8216;&lt;a href=<span class=\"es0\">\\&#8221;<\/span>javascript:printNextPage();<span class=\"es0\">\\&#8221;<\/span> alt=<span class=\"es0\">\\&#8221;<\/span>Next Page<span class=\"es0\">\\&#8221;<\/span> title=<span class=\"es0\">\\&#8221;<\/span>Next Page<span class=\"es0\">\\&#8221;<\/span>&gt;next &gt;&lt;\/a&gt;&#8217;<\/span><span class=\"st0\">&#8216;next &gt;&#8217;<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"br0\">&#125;<\/span><\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\">&nbsp;<\/div>\n<\/li>\n<\/ol>\n<\/div>\n<p>To reiterate, because this technique manipulates the DOM, the original markup isnt changed at all. <a href=\"http:\/\/cenote.talis.com\">Project Cenote<\/a> was recently open sourced you can download the entire source base, which includes the javascript file, pagingcontrol.js, from which I took the extracts above, and get a feeling for how it works and experiment with it. <\/p>\n<p>\nNow the above example might not seem all that impressive, its just a little paging control, right? Well, its a simple example that illustrates the technique which can be very powerful. Consider the following images which show a Calendar that view that was created by one of my colleagues, <a href=\"http:\/\/www.aztecmonkey.com\">Andrew<\/a>, which uses an unordered list to represent a series of events, and that&#8217;s what you see when JavaScript is disabled:<br \/><img decoding=\"async\" src=\"https:\/\/www.virtualchaos.co.uk\/images\/cal_js_disabled.jpg\" align=\"center\"><br \/>\n<br \/>\nHowever with JavaScript enabled the DOM of the page is rewritten and combined with some CSS it looks like this:<br \/>\n<img decoding=\"async\" src=\"https:\/\/www.virtualchaos.co.uk\/images\/cal_js_enabled.jpg\">\n<\/p>\n<p>Now thats more impressive, right? I hope this serves to illustrate how you can use JavaScript to provide richer user experiences without compromising accessibility. It&#8217;s an area I&#8217;ve been thinking about a lot recently and there are wider issues around how to develop better JavaScript libraries that understand how to expose dynamic content that needs to be accessible and whether this needs to be considered a best practise that more developers need to adopt. These issues beginning to have wider implications as my friend <a href=\"http:\/\/www.alandix.com\/blog\/\">Alan<\/a> put it earlier this week:<\/p>\n<blockquote><p>it will address issues of how traditianal HCi changes in the face of web2.0: when people are doing mash-ups (so there are more &#8216;artisan&#8217; interface constructors), or end users configuring their own spaces (as in MySpace), or how you build &#8216;good practice&#8217; into javascript libraries like prototoype or yahoo! YUI\n<\/p><\/blockquote>\n<p>.. when he contacted <a href=\"http:\/\/www.justinleavesley.com\/\">Justin<\/a> and me earlier this week and invited us along with others from Talis to attend this years <a href=\"http:\/\/www.bcs-hci.org.uk\/hci2007\/\">2007 &#8211; British HCi Conference<\/a> taking place at Lancaster University. Recognising how we to develop best practises for the development of truly accessible Javascript libraries is one of the issues I&#8217;ll be raising to the panel when I attend the conference. <\/p>\n<ol class=\"footnotes\"><li id=\"footnote_0_185\" class=\"footnote\"> In Firefox you can achieve this by going to Tools -&gt; Options -&gt; Content and uncheck the box labelled JavaScript. However if you don&#8217;t already use it I recommend installing the Web Developer extensions for Firefox [<a href=\"#identifier_0_185\" class=\"footnote-link footnote-back-link\">back<\/a>]<\/li><li id=\"footnote_1_185\" class=\"footnote\"> I&#8217;ve removed the url and the title attribute and the icon image from each link to simplify the example  [<a href=\"#identifier_1_185\" class=\"footnote-link footnote-back-link\">back<\/a>]<\/li><li id=\"footnote_2_185\" class=\"footnote\"> I&#8217;m using <a href=\"http:\/\/www.deanlee.cn\/wordpress\/code_highlighter_plugin_for_wordpress\/\">Dean&#8217;s Syntax Highlighter<\/a> but specifying html means that the Snap Shots tries to execute against it, so I&#8217;ve specified XML instead [<a href=\"#identifier_2_185\" class=\"footnote-link footnote-back-link\">back<\/a>]<\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>When Rob and I originally put Cenote together one of the constraints we had to work within was that the&nbsp;application must work without relying on JavaScript. This is primarily because relying heavily&nbsp;on JavaScript can introduce some accessibility issues, these issues &hellip; <a href=\"https:\/\/virtualchaos.co.uk\/blog\/2007\/06\/02\/javascript-can-provide-a-richer-user-experience-without-compromising-accessibility\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[64,62,404,67,63,65,399,400,66],"class_list":["post-185","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-accessibility","tag-code","tag-development","tag-dom-manipulation","tag-javascript","tag-project-cenote","tag-talis","tag-usability","tag-user-experience"],"_links":{"self":[{"href":"https:\/\/virtualchaos.co.uk\/blog\/wp-json\/wp\/v2\/posts\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/virtualchaos.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/virtualchaos.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/virtualchaos.co.uk\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/virtualchaos.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":0,"href":"https:\/\/virtualchaos.co.uk\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions"}],"wp:attachment":[{"href":"https:\/\/virtualchaos.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/virtualchaos.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/virtualchaos.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}