WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 3 (In chronological order)

From: Birkir R. Gunnarsson
Date: Thu, Sep 01 2011 9:30PM
Subject: How to give a short accessibility improvement summary on a very complex and messy webpage
No previous message | Next message →

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

From: Steve Green
Date: Fri, Sep 02 2011 3:27PM
Subject: Re: How to give a short accessibility improvement summary on a very complex and messy webpage
← Previous message | Next message →

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


From: Birkir R. Gunnarsson
Date: Fri, Sep 02 2011 4:48PM
Subject: Re: How to give a short accessibility improvement summary on a very complex and messy webpage
← Previous message | No next message

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 ADDRESS 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
>
>
>