Quiz 1.1.1: ALT text for custom list markers
Tom is an accomplished web designer, but a relative newcomer to using Cascading Style Sheets. He doesn’t yet own any good CSS books and hasn’t learned too many CSS properties yet. Just recently, Tom started putting things in list structures rather than raw lines separated by break tags. Great progress, Tom! Yesterday, he discovered the list-style-type: none attribute and uses it so he can substitute his own graphical list markers. However, he hasn’t yet learned about CSS background images, so still codes the markers in the HTML.
Our question is about how to provide the right level of accessibility for those images.
Q. What is the best ALT text to use for these list item images?
- A
alt="" - B
alt="*" - C
alt="bullet" - D It doesn’t matter. (explain why not)
Q. Extra credit - What screen reader (type and version) do you use, and how does it pronounce each of the choices? Try this test case.
March 27th, 2005 at 6:49 pm
The test case referenced above has all three cases marked correctly, alt=”". It doesn’t make a very good test! if anyone hears them differently it will be a big surprise.
I say correctly.The correct answer is A, alt=”". These lists are marked up properly as lists so the fact that you have list elements will be known to screen readers; there is no reason to clutter the listening with either alt=”*” or alt=”Bullet”.
March 28th, 2005 at 2:18 am
Thanks for pointing out a last minute copy-n-paste error in the test case! (embarrassing!) Fixed now.
March 28th, 2005 at 4:21 am
Alternative A would be my choice as well. No need to make screen reader users listen to “Bullet. Graphic. Bullet.” instead of just “Bullet” before each list item.
March 28th, 2005 at 4:53 am
As suggested in the main article, ideally, the list marker image should be applied with CSS. If it is included in the markup, then option A would be best as the list marker image is purely decorative.
The Royal National Institute of the Blind (RNIB) once advocated using alt text of asterisk “*” because early speech and braille devices were unable to detect null values. This no longer an issue, and the RNIB now advocate using empty quotes for purely decorative images.
As Jim and Roger mention, assistive devices would announce that an item is in a list, so alternative text of “bullet” would be redundant.
March 28th, 2005 at 6:46 am
(A)
March 28th, 2005 at 1:06 pm
Nothing new to add, I would say A as well, for the same reasons as Jim. Its marked up as an unordered list, so no need for any description here. I also agree with Gez, the images should be in the CSS, keeping the markup free from unnecessary image tags
March 28th, 2005 at 1:09 pm
Anyone going for extra credit? … the screen reader test?
March 28th, 2005 at 1:16 pm
My answer is A, for this reason:
My screen reader is Opera 8, beta 3, and it reads the examples in the extra credit test this way:
A: (pause) Larry (pause) Curly (pause) Moe
B: Asterisk Larry Asterisk Curly Asterisk Moe
C: Bullet Larry Bullet Curly Bullet Moe
March 28th, 2005 at 1:20 pm
And, oh, Opera actually reads the list items in the correct order. My bad.
March 28th, 2005 at 2:02 pm
So, how is Opera a screen reader? Is there an extension that causes it to speak? Or, is this like the Firefox extension which simply produces another screen of text?
March 28th, 2005 at 2:17 pm
Opera 8 has voice support that generates voice output, and accepts voice commands: http://www.opera.com/support/tutorials/voice/ It also supports some CSS3 speech properties.
It’s in Beta at the moment, but looks promising.
March 28th, 2005 at 2:19 pm
Sorry Bob, I meant to send this URL with the previous post as it provides more information about it: http://csant.info/vox/
March 28th, 2005 at 6:43 pm
I agree with Jon Hicks,
But if there is no way around it I would use ALT like it is meant to be use
alt=”dark green square image with leter a in light green” title=”Bullet Image”
and change the letter to b, c, d if the data is static.
thus screen readers reading color type and shape
Thats the way I would do it.
March 28th, 2005 at 8:07 pm
russ, i sincerely hope you were joking…ALT was not meant to be used like that. at a stretch, that level of visual detail should be described in a LONGDESC, but i doubt that anybody needs to know the colour and shape (unless those two factors carry meaning, which of course should not happen in the first place…you shouldn’t rely on colour alone, of course, and if there are such levels of additional meaning, it sounds more like tabular data than a list).
oh, and yes…for what it’s worth, i vote for A as well.
March 28th, 2005 at 10:55 pm
what do alt tags do?
* provide further detail for an image or the destination of a hyperlinked image.
* enable and enhance access for people with various disabilities.
* provide much-needed information for people who surf the Web with graphics turned off, and people who surf the Web with text-only browsers.
* assist in navigation when a graphics-intensive site is being viewed over a slow connection, enabling site visitors to make navigation choices before graphics are fully rendered.
I agree 100% and Say Follow John Hicks.
I for one would never use and img tag in an li it would always be in the css.
But if it had to be used I would make it as descriptive as possiable, but thats just me.
March 29th, 2005 at 2:05 am
Back in the day, I would have marked up the item as alt=”*”, but as folks are saying here assistive technology is more HTML aware than it used to be, and hence would indicate that the text is a new list item.
March 29th, 2005 at 3:28 am
Just to add that B is the least correct answer because in the screen reader test it is the most likely to give inconsistant output. I dislike verbose screenreader output so in mine (JFW 6) I have punctuation set to non for Browser based content, thus I get the same result for A & B. Not terribly relevant here where list is marked up correctly but certainly B isn’t an acceptible solution as an alternative to list mark up.
March 29th, 2005 at 3:47 am
russ, sorry but i beg to differ. ALT should convey the meaning/purpose of the image, and not be a description of every visual nuance of the image. is the fact that a bullet is round, blue, with a number over it really relevant to *anybody*? i can’t believe nobody else has picked up on this…
you say that, rightly, you’d opt for a CSS only solution. but then, if all the information on shape/colour/etc was so important to you that you deemed it necessary to include it in the image’s ALT, what are you going to do with a pure CSS solution?
March 29th, 2005 at 4:37 am
Just out of interest, when did the RNIB change their stance on alt=”*”? I was doing some accessibility tweaking on a site that had been passed by them fairly recently and I spent ages replacing alt=”*” with alt=”"…
Oh, and to answer the question, it’s gotta be A. Having to sit through “list item bullet larry” or “list item star larry” would bore me incredibly quickly. I’d probably argue for A for the majority of the photos of people smiling inanely that crop up on corporate sites as well. Do they really add to the meaning of the content? As a sighted user I know I could happily live without them…
March 29th, 2005 at 4:53 am
mike, i seem to recall that the reason for the alt=”*” was that some older screenreaders would not honour the alt=”" and instead revert to reading out the image’s filename.
March 29th, 2005 at 5:07 am
I say A. When an image provides no relevant content, and a list item marker is not relevant content, then the alt=”" option is best.
March 29th, 2005 at 7:31 am
A for me too.
And I’m aggreeing with Redux’s comments as he seems to alone in making a valid point :-)
alt= alternative not description (hence ‘bullet’, ‘*’ and ‘green square…’ are all wrong)
March 29th, 2005 at 10:08 am
Redux,
It’s important if you convey it in an img tag because people with images turned off will see it (the alt description), and the blind can hear what it is in a screen reader.
If it’s used in css then there is no need to use a descriptive alt tag because it will not be visible to the screen reader.
Look over at http://www.meyerweb.com/ look at the three book pictures, read the alt tags they’re probably wrong too huh?
if the bullet displays a visual appeal in any way I will alt tag it descriptively.
We can belabor this issue all day, this is the way I do it, and you do it different.
March 29th, 2005 at 10:41 am
Um.
Why is the designer not using list-style-image?
http://www.w3.org/TR/REC-CSS2/generate.html#propdef-list-style-image
March 29th, 2005 at 10:53 am
d) because there’s no excuse for the designer working on today’s web NOT to learn CSS and use it. There is no compelling reason for decorative imagery to exist outside the presentation layer when it doesn’t have to.
But in lieu of that, a) would be the best answer.
March 29th, 2005 at 11:15 am
Joe,
Um. Our fictional designer, Tom, is just learning CSS. He doesn’t own any CSS books because he lives in a 3rd world country where the mail is regularly vandalized, and any heavy rectangular object is rarely delivered to the intended address. Tom also makes a practice of not learning anything until he needs to know it, and then asks in various mailing lists. Tom will very likely learn about list-style-image in time for the next quiz question. :)
March 29th, 2005 at 11:50 am
Actually, the alt tags at:
http://www.meyerweb.com
are excellent:
I think you were referring to the title tag.
alt tags should contain relevant information about an image that can otherwise only be obtained visually. It shouldn’t just describe the image.
March 29th, 2005 at 11:51 am
For the record, the alt tag of the first book cover is:
“A modification of Jeffrey Veen’s ‘The Art & Science of Web Design’ that uses Dunstan Orchard’s face instead of Jeffrey’s.”
March 29th, 2005 at 1:16 pm
One wonders if Russ and Michael are seeing two different things at Eric’s site. BTW, let’s capture the permalink for that page before it changes. Eric uses both ALT attributes and TITLE attributes for each image. The TITLE attribute appears in Gecko browsers as a tool tip, and is only a couple of words. The ALT attribute is what most screen readers pronounce, and is what Eric has wisely coded as a much longer description.
March 29th, 2005 at 1:39 pm
I say ‘A’. The list is already marked up as such and so will be identified by the screen reader. The images are there for decoration only and convey no meaning.
To those who say we should use alt=’*’ because alt=” is not recognised by older readers, I say fix the readers. It’s the screen readers which have the accessibilty problem not the site.
March 29th, 2005 at 3:56 pm
Bob,
Im seeing it corectly.
Thus my answer to the question, without css available, i would use.
alt=”dark green square image with leter a in light green” title=”Bullet Image”
alt=”dark green square image with leter b in light green” title=”Bullet Image”
alt=”dark green square image with leter c in light green” title=”Bullet Image”
But that is just me.
March 29th, 2005 at 5:19 pm
“Look over at http://www.meyerweb.com/ look at the three book pictures, read the alt tags they’re probably wrong too huh?”
of course not.
first of all, they’re not bullet images which are redundant, as the markup itself already defines the fact that we’re in the presence of a list.
but to extrapolate what you suggest with the visual description of the bullets, the equivalent treatment of the ALTs on those three covers would be along the lines of “yellow background, half of dunstan’s face showing on the left-hand side as a black and white overlay, typography on the right etc”. again, if that’s the level of information you need to convey, it’s surely a case for LONGDESC, and not ALT.
but yes, let’s leave it at that…
March 29th, 2005 at 5:25 pm
oh, back on topic with the bullets, it’s quite telling to see that even in the HTML4 spec you can find this little snippet, under “13.8 How to specify alternate text”:
“Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt=”red ball” would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (”"). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.”
http://www.w3.org/TR/html4/struct/objects.html#adef-alt
when your list is already marked up as a list, then the bullet as IMG element is pure decoration, so this piece of advice applies, imho.
March 29th, 2005 at 5:36 pm
and lastly (ok, promise this is the last in this quickfire comment round):
although outdated, the second (deprecated) example in WCAG1.0 is interesting
http://www.w3.org/TR/WCAG10-HTML-TECHS/#list-images
and, unless you strongly argue the case that the visual style of your bullet images conveys an essential sensory experience (to which i’d normally counterpoint that the rest of the page, including the text/content itself, should also convey this anyway, e.g. “tone” and style of the prose) , this snippet from the WCAG2.0 draft is spot on:
“If the non-text content does not provide functionality or convey information, then mark the non-text content so that it may be ignored. Ask, “Will it be distracting? Is the non-text content necessary to understand the rest of the content? Is there another way to create the effect?”"
http://www.w3.org/TR/2004/WD-WCAG20-GENERAL-20041119/text-equiv-ignored.html
March 29th, 2005 at 7:36 pm
It does convey information, it displays and a, b, c, d if it was just a redball them I see the point. I would do the same for numbers, or if the image was repetitive just a green square or red ball i would use “A”, but these are green boxes with a,b,c,d right? a list displaying “a” as the most important information right?
March 29th, 2005 at 11:09 pm
Russ,
Try the test case. Bob’s not asking how to markup the question.
March 29th, 2005 at 11:16 pm
ah ok it’s clearly A then :)
March 30th, 2005 at 1:16 am
Nice site! Can I ask a favour of everyone? When posting something like “the RNIB used to advocate alt=”*” because old screenreaders would read out the file name”, could people be as specific as possible about *which* old screenreaders (JAWS? version?).
The reason is, I’ve always been told that “some screenreaders can’t cope with JavaScript/ pop-up windows” etc - but have tried in vain to get specifics - which screenreaders, which versions can’t cope?
It’s important, as I can’t just design for the latest and greatest versions of $1000 software.
Oh - and the answer’s “A”.
March 30th, 2005 at 2:19 am
Since we’re asking, can everyone please stop refering to alt as a tag?
altis an attribute.March 30th, 2005 at 11:57 am
NOTE: The line in your site
“Our question is about how to provide the right level of accessibility for those images.”
reads as
“Our question is about how to provide the wrong level of accessibility for those images.”
ps
Using Macintosh OS X v10.3.8 speech module with Safari browser.
March 30th, 2005 at 12:52 pm
John Beaudette, did you try listening to the test case? What does it sound like?
March 31st, 2005 at 9:01 am
Where I work, the accessibility policy suggests alt=” ” instead of alt=”". Is this less desirable?
March 31st, 2005 at 10:21 am
As far as I’m aware, assistive technology treats empty alt text and space(s) equivalently. Internet Explorer incorrectly displays the alt text in a tooltip when the mouse if hovered over the image. If the alt text is empty, IE doesn’t display a tooltip. If the alt text contains a space, IE displays an empty tooltip.
The following resources are useful for understanding the alt attribute:
* http://www.joeclark.org/book/sashay/serialization/Chapter06.html
* http://www.rnib.org.uk/xpedio/groups/public/documents/PublicWebsite/public_alttext.hcsp
March 31st, 2005 at 12:43 pm
Here is what JAWS 6.0 speaks for the lists on the test page:
empty alt: “List with three items Curley Larry Moe list end”
asterisk: “List with three items graphic star Curley graphic star Larry graphic star Moe list end”
bullet: “List with three items graphic bullet Curley graphic blulley Larry graphic bullet Moe list end”
But of course this can be changed slightly depending upon how the JAWS settings are configured.
April 2nd, 2005 at 1:52 pm
For those who might not have listened to a screen reader, here are audio recordings of how two screen readers pronounce our test case. These were made with “out of the box” default settings for each tool. I used the reading mode that simply pronounced the site as an unbroken stream. Both use IE 6 as the browser on a Windows XP Pro system.
Spoken by Jaws 5.0 (384k mp3)
Spoken by IBM Home Page Reader 3.04 (296k mp3)
April 7th, 2005 at 10:11 am
Hi,
Just stumbled across this blog and was most interested in the discussion. I would certainly code the the ALT attribute for a bullet as alt=”" (answer A) but the RNIB link posted by Gez has the following to say about ALT text for a bullet:
The following are all valid “alt” descriptions for bullets:
alt=”Option 1”
alt=”-“
alt=”Item“
Clearly the RNIB don’t have too much of an issue with ALT text for a bullet, provided it is relevant.
June 9th, 2005 at 1:51 pm
One thing you might think about with this example. I was verifying an education site that coded all the exam questions as above. The “a, b, c and d” images in this case were important because you had to select the response and check against the correct answer. Since they were coded as alt=”", a student completing the test had to do some extra work to keep track of the order so they selected the correct answer.
June 12th, 2005 at 6:20 am
Shanon,
If you are refering to how my quiz questions are marked up, please look at the code. What appear to be images for A, B, C, D are simple CSS styles for actual text included in the list items. No images; no ALT text.