CODEWITHSUNDEEP
htmlaccessibilitysubmit-buttonwcag
jimlongo
jimlongo

Reputation: 385

WCAG submit button as image

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;" />

Upvotes: 0

Views: 488

Answers (4)

Adam
Adam

Reputation: 18807

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").

Upvotes: 1

Tommy
Tommy

Reputation: 11

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

Upvotes: 0

unobf
unobf

Reputation: 7244

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

Upvotes: 0

unor
unor

Reputation: 96597

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

Instead you could use

Upvotes: 3

Related Questions