0

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

mosquito87
  • 4,270
  • 11
  • 46
  • 77

2 Answers2

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)
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • Worth mentioning, the `title` attribute doesn't get read by some screen readers unless the user tabs to the element (JAWS for example). If it's important information that needs to be conveyed, it's best to not use `title` as the sole method of presenting it. – J. Afarian Apr 17 '18 at 22:09
0

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
Adam
  • 17,838
  • 32
  • 54