Alt text and form buttons set as images
There is something I always used to forget, and I didn’t realise this until a website I developed in the past was the recipient of a very comprehensive, postmortem accessibility review.
I am quite pleased to say the majority of the results were decent. The pedantic standardista in me had in fact hacked up the correct semantic code and anticipated most potential problems that might be encountered when users browse my website using alternate methods.
One thing that completely slipped passed me while coding this website though, was using alt attributes when coding form buttons set as images.
What do I mean?
- Search form with images turned on
A sighted user will be able to see clearly where the submit button is and how to complete the search functionality displayed above on this website.
- Search form with images turned off
-
A user with images disabled would not know where the submit button was to complete the search functionality above.
This example above is using Internet Explorer 6. Firefox will show the button in a usable format, but the point here is to make this button work for everyone.
How to solve this?
Simple, using the alt attribute when coding your input type=”image” elements in your forms.
<input type="image" src="⁄images⁄go.gif" value="go" alt="Submit" ⁄>
Another method is to use the button element, this way you would probably automatically use the alt attribute as you would be inserting a plain image element within the button element.
<button type="submit"><img src="⁄images⁄go.gif" alt="Submit" /></button>
Why am I bringing up something so obvious?
Or is it? I have probably audited almost twenty websites since then, combing markup for web standards compliance and accessibility or SEO hiccups… and one thing that consistently gets overlooked is this exact problem.
I am not talking about CSS newbies here either. Most of the websites are high quality, but it just seems this little issue keeps slipping through the cracks. Once you notice it once though, you won’t do it again.
Comments
- Cameron Adams says: November 5, 2007 @ 2:15 pm
Hmmmm … I’d have thought that it was a logical connection given that you’re basically inserting an image, but looks like not.
- Jermayn Parker says: November 6, 2007 @ 3:41 pm
I am sure I have done that before and probably will continue to do so.
Guess it just goes to show that we really need to follow up our code. I know so many times that after you’ve coded it, very rarely do I actually spend a good amount of time going back over it and looking for these little mistakes.
- Richard Morton says: November 7, 2007 @ 12:51 am
I would also point out that in the example shown, with images turned off the black text against the dark blue background becomes unreadable for many people. I find it quite hard myself and my vision although not perfect is quite reasonable.
- Tim De Rop says: November 7, 2007 @ 12:53 am
This article is a good reminder to stay alert and pay attention to these “small” things.
- Ahmad says: November 7, 2007 @ 3:59 am
Well, Its a “small” but “Important” thing. Another point is , Its only one option in the form. So it can be nothing but a submit button! lol
- Standardzilla says: November 7, 2007 @ 9:04 am
@Richard, very true. I was going to raise the issue initially but thought I would just concentrate on the alt attribute. But I was confident someone would raise the issue :-)
- Lisa says: November 7, 2007 @ 12:41 pm
Oh this is the project Roger and I worked on, isn’t it?
As you say, it’s a fairly common mistake, especially with the ‘input’ element.
- Standardzilla says: November 7, 2007 @ 1:07 pm
@Lisa - sure is! The live code still doesn’t reflect those changes though unfortunately.
- Dan says: November 9, 2007 @ 4:46 pm
@Richard, what I sometimes do is set up basic text styles for images, in case the user has disabled them to save bandwidth. For example, for some content in image format I might use: p img { color #fff; } (assuming a dark background color). The novelty of FIR has worn off for me, so IMO this is a good way to keep image heavy layouts accessible to the lowest common denominator.
- Image Alt Tags says: November 10, 2007 @ 6:10 am
[...] Alt text and form buttons set as images - “…using the alt attribute when coding your input type=â€?imageâ€? elements in your forms….” [...]
- Annemarie says: January 18, 2008 @ 12:14 pm
[...]with images turned off the black text against the dark blue background becomes unreadable for many people[...]@Richard Morton: what you describe is part of my research about usability of websites. I would like develop guidelines for parents (=in dutch language gastouder gezin) and their (handicapped) children. When I finish my research, I will let you now where you can find the results.
