Accessibility: input with image - use value-, alt- or title-attribute?

Question

I have the following input on a site I'm currently reviewing:

<input type="submit" name="executeSearch" value="" alt="Execute search" title="Execute search" class="iconButton searchBtn">

Through the class attribut the input button is replaced by an search icon.

According to accessibility is this the right way? Or should the value attribute be used? The screenreader I tested this element with (NVDA) was able to read the text ("Execute search button").

Answer 1

An empty value and an icon added via CSS to convey the only important information is a failure according to WCAG 2.0: F3 - Failure (…) due to using CSS to include images that convey important information

Simplest solution: use an input[type="image"] , keep that alt="Execute search" ("Search" would be more concise IMHO), add an src="/path/to/img" of course and remove both title and value attributes. Image can be an SVG and can be encoded in base64 (ideal when it's light for performance reasons: that's 1 resource not to be downloaded).
That [type="image"] seems outdated because it was widely used circa IE6, way before RWD but it isn't ( proof of concept with an 8x16 viewBox and width*height SVG : it scales® )

Otherwise you can use a button element with type="submit" . This element can contain SVG, HTML images, text hidden to screen readers (better known as .visually-hidden , .sr-only or .element-invisible in Bootstrap, WordPress, Drupal, etc). That's what I use when a "submit" has both text and image or icon because no :pseudo with input and text-only through @value

Some notes on your current markup:

• @alt should only be used with input[type="image"]
• @value shouldn't be used with type image and otherwise should never be empty
• @title should only be there (on links and "buttons") if it adds something to the existing information (like Subscribe ⇒ Subscribe to the newsletter or Edit ⇒ Edit something in particular)

Answer 2

According to accessibility is this the right way? Or should the value attribute be used?

• An input[type='submit'] button does not accept an alt attribute
• Some screenreaders may use the title attribute, but it's still useful for non screenreader users
• Using the value attribute is the recommended approach for screenreader users