0

In my form I have a submit button that is an image (button+text). It has an empty value="" so it doesn't intrude on the button image.

How can I make this button understandable to the user who requires accessibility?

<input type="submit" name="submit" id="submit" value="" class="button" style="background: url(img/enter-now-button.png) no-repeat;" />

Would a (hidden) label be appropriate?

<label class="hideForm" for="submit">Submit Form:</label> 
<input type="submit" name="submit" id="submit" value="" class="button" style="background: url(img/enter-now-button.png) no-repeat;" />
unor
  • 92,415
  • 26
  • 211
  • 360
jimlongo
  • 365
  • 2
  • 5
  • 21

4 Answers4

3

Providing the button’s content with CSS is a bad idea. CSS is for presentation, not content.

Instead you could use

unor
  • 92,415
  • 26
  • 211
  • 360
1

My understanding of the WCAG is that it targets everyone, not only blind people.

Replacing text with an image and give an alternative in text, as defined in adviced techniques of WCAG (http://www.w3.org/TR/WCAG20-TECHS/H36.html) is a good thing which will be sufficient for a lot of accessibility experts.

Answers given by previous authors should then satisfy most of them.

But it won't be sufficient as long as the image itself does not convey enough information to understand the goal of an action without having to use a screen-reader or a mouse.

Think about a paraplegic person who has to navigate through a website using real-time eye tracking, for instance.

So my advice will be : use one of the techniques exposed previously (button, input[type=image]) if the image convey enough information to know which action it will do. In other cases, use also a visible caption (not hidden nor out of screen) to describe the action ("click on the cross to delete an element").

Adam
  • 17,838
  • 32
  • 54
0

Use

    input type="image" alt="description of image" src="pathtoimage.ext"

this should act the same as the submit button and doesn't require shenanigans

Otherwise put a title attribute that describes the image

unobf
  • 7,158
  • 1
  • 23
  • 36
0

I agree with @unor, but I would recommend using css for styling the button instead of using a img tag inside the button.

Tommy
  • 11
  • 1