skip to content W3C SVG

Buttons

Introduction

In some cases, developers build custom versions of native HTML controls because they cannot achieve the exact look and feel or behavior they desire with a native control. Wherever possible, it is strongly recommended that native HTML controls be used over custom controls, as their accessibility support is much more robust.

WCAG criteria

Scope of the issue

In the case of C3, the buttons throughout the application are only styled to look like buttons. The C3 markup for a submit button is as follows:

<input type="image" name="btnSubmit" tabindex="12" src="/button_submit.gif" border="0">

There are a few accessibility issues with this:

  1. It only has a visual “submit” label. Non-sighted users will not know the purpose of this button.
  2. It is identified in the code as an image, not a button.
  3. It has a positive tab index. (See Inconsistency for more info on this.)
  4. In some cases, it may not be usable with a keyboard because:
    1. it is not focusable
    2. it does not respond to the expected keys for activating a button

Fixing the issue

It is recommended that the image type buttons be replaced with the native HTML <button> element, like so:

<button type="submit">Submit</button>