Complex interaction and accessibility

We’ve completed a new version of the course page of the RINO site, with several dates blocks. To improve legibility, they are not all displayed (when you have both CSS and JavaScript installed). However, in order to maintain a high level of accessibility, we want to offer both the possibility of having anchors to navigate within dates, and a system that is as unobstrusive and unsurprising as possible.

So we’ve got a bulleted list of dates, and one block for each date with a bit of detail. The list comes first, with each item clickable, triggering (with JS+CSS) the display of the appropriate block.

This actually required us to tweak the default behavior of the HTML link element. When you click on a date link with CSS and JS enabled, the date block is displayed, without any other changes to the page’s position, nor to the URL. This is achieved through adding a return false to the onclick event. However, if you haven’t got CSS or JS, all blocks being displayed by default, so clicking on the link must make you jump down to the appropriate block: it’s a simple anchor.

Without JS enabled, it’s simple: the href property of the links is an anchor, so it simply works. When you’ve got CSS disabled, and JS enabled, on the other hand, it’s a little more tricky.

The solution I found was to check the height of an element hidden using CSS. Typically, these are navigation tools used to skip the navigation bar when you’re using a non-CSS browser. They are assigned a class which specifies the following rule: display: none;.

The interesting property is their offsetHeight: when display: none; is honored (i.e. when CSS are used), the offsetHeight is 0. So the piece of javascript which used to say return false; is replaced by return (testObj.offsetHeight > 0); with textObj the paragraph that should be hidden.

The page then remains very user-friendly, no matter which combination of CSS and JS is used (yes+yes, yes+no, no+yes, no+no).

Demo soon online.