Visual Example

Acceptance Criteria

Use native and semantic HTML markup in connection with form related buttons.

As a screen reader and keyboard only user I should:

  • be provided with a button label

  • be able to navigate to the button by using the “TAB” key on the keyboard

  • be able to activate the form related button by either pressing the “ENTER” key or “Spacebar” on the keyboard

As a screen reader user I should:

  • be able to explicitly associate the button with the form control or group of form controls

When the button has keyboard focus: 

  •  the screen reader should announce the button label.

Screen readers announce the nested text for <button> elements, and the value attribute for input buttons.

Markup and Code

<input type="submit" name="submit" value="Submit"> <button>Add Hours</button> <button>Next</button>

View HTML markup on github