SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inline popups using JavaScript

    Hi,

    I have an inline popup that fades out the rest of the screen apart from the popup and displays a confirmation when a user adds an item to their basket.

    This does cause some confusion for screen reader users as AJAX is used to write the HTML at the very top of the page. It needs to be in that place in order to insure the whole screen is faded out.

    My solution is to move the page focus to the close link on the popup when it is activated and when the close link is pressed to return the focus to the original.

    Is this the best solution? I can't remove the inline popup and there is an alternative page for users that do not have javascript enabled.

    Thanks

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I have an inline popup that fades out the rest of the screen apart from the popup and displays a confirmation when a user adds an item to their basket.
    Are they buying Jumbo jets?? Usually we see people using AJAX to update the number of items after they add something to the basket.

    This does cause some confusion for screen reader users as AJAX is used to write the HTML at the very top of the page.
    AJAX is inserting this new popup text at the top of the source? Does this happen on a screen refresh? Because at least JAWS gets sent back to the top of a page that gets refreshed (often annoying, but might just be the best in this case).

    Is the text in this popup box very clear, saying something like Are You Sure You Want To Add This To Your Cart? Yes/No (a form? an alert?) because it seems like it would flow normally. User clicks something to select it, gets immediately the question Are You Sure? User affirms or denies and goes (hopefully) right back to the page they were on? (maybe even right back to the section they were in with a #inpagelink?)

    This thing is like a LightBox, right?

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Are they buying Jumbo jets?? Usually we see people using AJAX to update the number of items after they add something to the basket.
    Hi, thanks for your reply. Ha! Yes I'm not a fan of the confirmaton box for low ticket items but its what the client wants.
    AJAX is inserting this new popup text at the top of the source? Does this happen on a screen refresh? Because at least JAWS gets sent back to the top of a page that gets refreshed (often annoying, but might just be the best in this case).

    Is the text in this popup box very clear, saying something like Are You Sure You Want To Add This To Your Cart? Yes/No (a form? an alert?) because it seems like it would flow normally. User clicks something to select it, gets immediately the question Are You Sure? User affirms or denies and goes (hopefully) right back to the page they were on? (maybe even right back to the section they were in with a #inpagelink?)

    This thing is like a LightBox, right?
    Yes its like a light box. It comprises of a close icon, a title 'You have just added the following to your basket' & links to checkout or view the entire basket. No the page does not get refreshed. So a jaws user would continue browsing the site unaware that an inline popup has been opened. They are not aware of it as the add button is below the very start of the body tag and this is where the html for the popup is placed. What I want to do is make the screen reader cusor start at the top of the page so that they are aware of this popup.

    Is the best thing to set the focus to the close box in the popup when it is opened?

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yeah that's at least the first thing I'd think of doing.

    BTW I happened to read something about some tests with the Big Two and Javascript (esp for AJAXy stuff) that you may want to read, because I do remember them discussing a similar problem (a popup that isn't noticed). Esp since the popup only appears when folks have scripting on, using scripting to move the focus makes sense. Lemme see if I can find that article, it was in one of the big article bloggities...

    Ah, it was this one:
    http://northtemple.com/2008/10/07/ja...screen-readers

    but while searching for it I saw many others discussing JAWS7.1 and W-E-- they made a "hack" after JAWS7.1 but the current version (10) has lots of updates + iTunes support (as does the newest W-E) and so I'm fairly sure they've made changes regarding JS and onFocus as well. Another possibility that crossed my mind was tabIndex but those be dangerous waters, esp when dealing with the scripted and the scriptless.

    I'm actually going to either upgrade or maybe this weekend get a USB stick so I can have JAWS10... maybe keep 7.0 for testing. It's expensive so I would expect a lot of people to be using old versions. Versions of JAWS prior to 7.1 don't update the page dynamically at all (well, the user has to DO something and then the script has to kick in really fast-- usually isn't fast enough). A screen reader is really a screen copier and it doesn't keep recopying except on user action or a refresh.

    *note what's awesome is if you buy a version of W-E you can get the next three major upgrades free. So W-E users might be more up to date.

    Sorry I don't know anything much about the Mac VoiceOver (apparently comes with every Mac OSx) which works totally differently than the Windoze readers, nor the IBM one that some people just love.

    If you know anyone with some screen readers (there's a blogger I read who has like 4 of them, lawlz) get some testing done because this is tricky. I'll bet that guy could make cool cash just for testing people's stuff in his readers.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for all your help, that link was very useful.

    I did not know that pre JAWS 8 had such issues with reading dynamically changed page content.

    In the end I decided apon not moving the focus (as this had a visual impact and was unreliable in testing) but dynamically adding a skip link. I much prefer the idea of adding an optional link rather than trying to move the cursor. I'm working on the assumption that users of assistive technilogy that do have problems re-reading the screen when content has changed dynamically will disable JavaScript.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hmm, I would assume opposite-- that they are like everyone else and don't know the difference between Javascript and not, different browsers, or whatever. People just open whatever browser sits on their computer and JAWS users just have JAWS on top of all the other Windows software.

    I've learned two assumptions not to make: that I use JAWS like a blind person, and that they all rock at using JAWS. If I went blind, based on how I use software now, I'd learn like 2% of what it can do, just enough to get by, and no further. I'm just not adventurous... and apparently many other computer users aren't either.


    Best you can do I think is try to get some user testing, if possible (usually not, but...).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •