WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to give a short accessibility improvement summary on a very complex and messy webpage

for

From: Birkir R. Gunnarsson
Date: Sep 2, 2011 4:48PM

Steve/all

My apologies, I was tired and groudgy when I was looking at the page,
and it is better than I initially tought itwas.
A problem does remain though, the carousel/animation messes with the
screen reader focus, both in Jaws and Hal (with IE9 and IE8
respectively), and the users need to be able to use the page out of
the box, even users who are not advanced enough to do things like
turning off Javascript (and I don't think it should be necessary).
I am not saying it is not the screen readers fault, for not handling
it better, but I have issues both with Jaws 12 and Hal 11 and Hal 12
on this page in terms of the focus jumping around when the picture
switches.
Is there a way to hide this item from the screen readers somehow?
In my search for a more accessible Carousel I came across this page:
http://nxtbgthng.com/
It gives me no trouble with Jaws, Ihave yet to test it with NVDA.
Are there any good/recommended techniques to hide Javascript animation
from screen readers, something similar to accessible Flash gidelines
http://webaim.org/techniques/flash/

I don't think the animation adds anything for the user, so hiding it
from a screen reader user seems fully justified to me.
Thanks for the feedback, much appreciated.
-B

On 9/2/11, Steve Green < <EMAIL REMOVED> > wrote:
> There is indeed a small carousel containing five items that autorotate and a
> 'hero' image that cycles through a number of alternatives, each of which
> links to a different page. Apart from that, the page is totally static, and
> I would not say that it is complex or fancy at all. That said, there are a
> number of issues.
>
> They have used tabindex attributes on a few elements so that the login form
> receives focus when the page loads. This form comes after all the important
> content in the source order, and a screen reader user may not understand
> that they need to navigate backwards to find the content.
>
> Parts of the page are marked up well with headings, lists and fieldsets, but
> the last quarter of the page contains no semantic structure at all.
>
> The "um okkur" and "English" links are commented out, which is why you don't
> see them on screen. There is nothing wrong with that.
>
> You will probably find the page easy to use if you turn off JavaScript. The
> links in the carousel are still accessible, and all you lose are the 'hero'
> images and links, which disappear completely. That ought to be fixed.
>
> The JavaScript should not slow down your screen reader because there is very
> little of it and it is not doing much. It may be possible to optimise it to
> use less CPU. Dynamic content like that often causes screen readers' virtual
> object model to become corrupted but this is less of an issue in newer
> versions.
>
> I personally would not use tabindex but I understand why they have done so.
> If they remove the tabindex, optimise the JavaScript and add some semantic
> structure to the latter part of the page, this page could be very easy to
> use with a screen reader and very accessible in general.
>
> Steve Green
> Test Partners Ltd
>
>
> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R.
> Gunnarsson
> Sent: 02 September 2011 04:28
> To: WebAIM Discussion List
> Subject: [WebAIM] How to give a short accessibility improvement summary on a
> very complex and messy webpage
>
> Yea wise people.
>
> I certainly will not (and havenot in the past) post questions for every
> individual page I come across.
> My job is somewhat unique in that I am asked to check quickly if a page is
> ok, as a screen reader user, if not, to give some recommendations to quickly
> fix the issues and improve the situation.
> Neither my sallary/work percentage or position allows me to dig extremely
> deep into the code. I run Sitesifter (which is often a good tool, though it
> is just crashing on this particular page), and I check for basic html and
> Javascript issues.
> Generally this works very well, and I manage to get considerable
> improvements with a relatively short list of recommended reading and
> descriptionof specific issues. But now I've met my match.
>
> I have been asked to give an evaluation of
>
> http://www.okbeint.is (Icelandic dealer for HP) This is an extremely fancy
> JQuery/AJAX page with, what seems to be some sort of animation, at least it
> slows down my screen reader a lot and there seems to be a carosel of photos
> that move or switch randomly (correct me I am wrong, I am blind, and
> therefore have to interpret the source code).
> I also do not see part of the page, indicated in the Source, links such as
> "um okkur" and "English" appear in the code, but I don't see them.
>
> Basically, this page is very bad, I am sure it is very good looking, but I
> am not sure, in this scenario, where to begin recommending changes.
> There are a few simple issues, such as better use of headings, better usage
> of alt tags for images etc. But those are not really the heart of the issue.
>
> Should I point them to reading up on all sorts of accessibility (probably
> not effective, there is a lot to know), should I point them directly to ARIA
> (it would solve some of these problems), or do you have any rule of thumb as
> to how to pick out the most pressing issues and start with them.
> If anyone has useful input on how I could get maximum improvement by giving
> them a summary of 2 pages or less, what to concentrate on, and how to
> suggest improvements, without suggesting they write the blessed thing from
> scratch, it would be a very useful input to me. :) Does the screen reader
> emulator plug in for Firefox
> https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/
>
>
> give an accurate picture of how confusing this page is, in other words, does
> it handle AJAX code sufficiently well to give an accurate presentation of
> the screen reading experience?
>
> Thanks very much
> -B
>