where I work we have to do ADA-compliant big-time…
for lists, they’re having me put sthg like
<span class="hidden_text">Item one</span>
in EACH <li>
I tried doing <ol> but the screenreader does not read them as item one, item two, etc…
is there a way around this?? there are long lists in the site I’m working on, it’s very tedious to add
<span class="hidden_text">Item one</span>, <span class="hidden_text">Item two</span>,
etc… for all lists…
thank you…
I assume what you are trying to say; is that you are creating a SPAN as a substitute so that the Screen Reader, reads an OL and pronounces each numbered item in the list and for whatever reason it isn’t.
Which Screen Reading or AT software are you using?
Since they should be able to cope with ordered lists and in either case it is up to the AT vendor to deal with an ‘Ordered List’ pronunciation. The web author shouldn’t need to use an interim solution for such a list.
Plus if I think you doing, what I am suspecting; you are actually using CSS to hide ‘content’ within the SPAN, which defeats the main objective anyway. Something isn’t adding up here at all, and it sounds like - excuse the pun - there is some confusion regarding fulfilling the actual web accessibility criteria.
oh brother… ok, I did a test of lists that we use on the site (did in <ol> instead of <ul>)
http://mayacove.com/dev/lists_test/list.html
I wrote to ADA/QA person to let me know how the screen reader reads these lists… her response:
[INDENT]I reviewed the test in Jaws and the second list worked and said the item # before the text, but I’m guessing this is because there’s actually a “1” in the text.
I reviewed the test in Windows Eyes and the second list didn’t work. In place of the #, it said “I” - like “I Choose the category” - very strange.
With both screenreaders, the first list did not have any item numbers.[/INDENT]
(yes, that <span class=“hidden_text”>Item one</span> code is hidden, but not with display:none; it’s positioned absolute way off the viewport at any rate this solution works for them; what I’m trying to do is avoid having to insert those “item” spans in each and every <li>, it’s really very tedious… and I really would have thought the screenreader(s) would read <ol> lists like what they are: ordered (numbered) lists… )
thank you…
Use this page to test:
http://stommepoes.nl/listtest.html
(*edit: after my tests, I added the hidden span version)
They all will announce the numbers if you leave the default browser numbering in. They won’t if you remove them. The ADA does not state that a list number must be called “item” first. If someone’s telling you that, tell them to show you where in the law it says that. ADA actually doesn’t say anything about the interwebs anyway. You might be talking about section 508, which while verbose and retarded, also does not state anywhere (that I know of) that the word “item” must precede the list number. People aren’t stupid just because they’re blind (that’s a great one to send to any managers being silly). They understand what numbers in a list mean.
Removing the bullets using list-style: none does the same thing for the “bullets” or “numbering” that display: none does for other elements: it removes them completely from the page, and therefore no “bullets” or anything are loaded into anyone’s virtual buffer, nor appears on the page for a reading without a virtual buffer. This actually is done at the browser level… screenshot taken by Steve Faulkner showing Firefox’s accessibility tree, where bullets/numbers removed with display: none are removed entirely from what FF sends any screen reader.
However I don’t have Window-eyes and I read somewhere long ago that W-E cares where you put the list-style: none statement (either on the list itself, or the list-items). This might be more caused by older browsers rather than W-E. The readers I have, however, universally don’t care. No bullets? no nothing.
My test (minus the very very last list, I added that later), Firefox only because all three readers work in Firefox:
JAWS10:
Reads the first ol (with default numbers, no CSS changes) as normal: List of 3 items, 1, foo, 2, bar, 3, baz.
Reads the next two lists (one with list-style: none set on the ol, the other with it set on the li’s) as List of 3 items, foo, bar, baz.
Reads the next list as lower-alpha: List of 3 items, a, foo, b, bar, c baz.
Reads the last list as upper-roman: List of 3 items, ee, foo, two, bar, three, baz (this is a fix that I know isn’t in older copies of JAWS, because I remember back when it would say ee, eeee, ee ee ee, ai vee, vee…) I’m assuming the list your coordinator tested had roman numbering. This is a popular problem and I don’t think I’d go too far out of my way to fix the first item when almost everyone says it the same way anyway. The rest of the numbers later on make it clearer what that is.
NVDA (not sure which version but not the latest, because I still have the bug where a sub-list incorrectly lists number of items by one):
Reads the first lists like JAWS.
Reads last list like JAWS (actually now I forget if it said ee, or ai. But it read out the wrong name, then corrected itself with more numbers).
Orca (no virtual buffer on this one, and not latest Orca):
Reads most of the lists like JAWS.
Reads the last list as “ee, foo, roman two, bar, roman three, baz”.
Your solution: you may have to either use real images with alt text, or use background images and do as you are: spans offscreen listing the numbers
IF
the numbers really matter (you would think the numbers or order matters, otherwise you would not be using an ol).
“Item” is redundant. All you need:
<li><span>1 <span> Blah blah blah…</li>
Don’t overcomplicate it. You don’t need any extra words or anything.
Most readers and esp older readers did not read out CSS content, otherwise I would have suggested using CSS content to create real numbers. This is slowly changing. Numbers created with CSS can be styled in all sorts of ways, and I see more and more fancy designer pages doing this… like the list after “How does CSSoff work?” on this page using counter-reset(). Orca btw ignores those.
On the page you link, first list is numberless and the second one I hear “bullet” in JAWS and nothing in Orca. I assume JAWS knows there’s list-style on the list, but not the default, so says “bullet”. I like background images for those anyway: better control over styling cross-browser. List-style-image: url() was always a fail for me, mostly due to the vertical-alignment in some browser or other.
It seems the link you gave is not the link the coordinator got.
Orca does my hidden-span list the same as the first, default list.