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: Steve Green
Date: Sep 2, 2011 3:27PM

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