[thelist] Help with providing a backup to javascript solution

[Ian Anderson]

April wrote:
> The content in his URL wasn't the typical scenario you have in mind. 
> When you click on the exclamation mark graphic, it greys out the 
> existing content and makes a large popup appear in the center of the 
> screen.  He wouldn't want this to be visible by default to users without 
> JavaScript, since it'd render the site unusable.

Well, sounds like one answer would be to put a standard link on the 
image in question to a new page containing the same material that is 
shown in the DIV, and prevent the link from firing using return false.

For example, using Obtrusive JavaScript (tm)

<a href="fallback.asp" onclick="foo(); return false;"><image in here></a>

where foo() is the fancy fading DIV thing.

But looking at the page in question, it looks very much like the content 
revealed in the fancy fading div is actually part of the normal source 
of the page, not generated content through DOM manipulation or anything 
else.

So, the page is actually highly accessible for screen reader users as it 
stands; they don't *need* the link, though many modern screen readers 
will read the onclick as an available action. Putting a proper link will 
actually read a whole lot better for those users, and they can either 
tab past it to the form, or press enter to get a copy of the form on a 
new page.

The page is indeed broken without JavaScript but with CSS on, as there 
is no way to show the form. The link technique above would fix this, as 
would using JS to hide the content in the first instance as recommended 
by Christian.

The only other (rather more urgent)accessibility issue I can see here is 
that there is no way to access the hidden forms for users who have JS 
and CSS on but who use the keyboard or other equivalent means of 
interacting with the site.

<div id="passion" title="Becoming a BePrivy client" 
onclick="Effect.toggle('redformbg', 'blind');" 
onmouseup="Effect.toggle('redform', 'appear');">

You can't give a div focus. The same event handlers on an A tag would be 
fine.

I think the link on the trigger image is essential, therefore. The 
reason for this is that there must be an actual link on the image so 
that the keyboard user can tab to it, press enter once it has focus, and 
then interact with the form that's revealed. Unless, of course, there is 
another link on the page to similar functionality.

Hope this helps

Cheers

ian

PS - For Christian, the link was to http://www.beprivy.com/how-we-do-it/


-- 
_________________________________________________
zStudio - Web development and accessibility
http://zStudio.co.uk

Snippetz.net - Online code library
File, manage and re-use your code snippets & links
http://snippetz.net