[bcab] Re: Web Accessibility Issue

    I've come across something similar before. It tends to get a bit complex
as a rule, but the first thing I'd try is clearing the virtual buffer after
you activate the dynamic link.
 
    In Jaws, this can be done by hitting the Jaws key + Escape. I know
Window Eyes uses a virtual buffer, but can't find out how to force a refresh
of it. I'm sure one of the other WE users on list will be able to help here
though.
 
    Essentially, what you should find is that the overlay content is now
visible to the screen reader. You may have to  hunt around for it on the
page though, which on some pages can be quite time consuming.
 
 
    The following article could be worth passing on to the development team:
http://juicystudio.com/article/making-ajax-work-with-screen-readers.php
 
    As a general rule, causing overlays to appear is likely to pose problems
for all kinds of people. Depending on the aims of the functionality though,
there are often alternative options available.
 
Léonie.
 


  _____  

From: bcab-bounce@xxxxxxxxxxxxx [mailto:bcab-bounce@xxxxxxxxxxxxx] On Behalf
Of tim.pennick@xxxxxx
Sent: 24 February 2009 17:21
To: bcab@xxxxxxxxxxxxx
Subject: [bcab] Web Accessibility Issue



All, 

I've been asked to assess a website which isn't currently available outside
our corporate intranet, but which exhibits some problems for which I
wondered if anyone could offer some pointers.  The site uses Javascript to
construct a 'floating box', which overlays an initial screen following a
click on a link.  For me, using the JAWS virtual buffer, the overlay is
completely invisible, and the initial screen is unchanged.  If I swap to the
JAWS cursor, the overlay is partially visible, but not usable.

I'm wondering if there's a standard way of getting around this problem, or
if its just the case that this type of approach isn't going to be accessible
to a screen reader.

The following quote describes the problem further: 

*** Quote Begins *** 
"? To summarise how the floating box works: 

When the user clicks on certain links in the page ? javascript is used to
add an element to the page covering the entire screen. This element is a
semi-transparent grey colour so has the effect of being and overlay that
greys out the whole page (the underlying content is not completely obscured
and still shows through). Then, we use javascript to add a new HTML "div"
element to the page that contains a HTML "iframe". This element is added
right at the end of the HTML source, but is positioned with CSS to be
central on the screen. The iframe loads a separate web page from our server
(e.g. a form to rename your tab, or the "add stuff" gadget catalogue for you
to pick new gadgets).

I suspect that the problem is caused because we are using javascript to
modify the source of the page dynamically to add new HTML elements rather
than reloading the whole page. We need a way of modifying the page in a way
that the screen reader can detect."

*** Quote Ends *** 

I have to admit that this is all a bit beyond my web-design skills.  Well
rather a lot beyond them really, but if anyone can help, I'd be grateful.

Regards, 

Tim Pennick

Other related posts: