Name, Role, Value
WCAG 4.1.2

If it quacks like a duck, and it walks like a duck, program it using the <button> element. If a user navigates to an element and the screen reader conveys "link", what would the user expect to happen?. If the user navigates to an element and the screen reader conveys "button", what would the user expect to happen?

In the form example below.

• "First name:" = Name
• "Edit" = Role
• Value = Blank
• "Chocolate" = Name
• "Radio Button" = Role
• "Not Checked/Checked" = Value

How To Assess

• Screen Reader
• Firebug
• FireEyes

Examples of Code that Violates and Fails

<a id="buttonZoomOut" class="zoooomOut" tabindex="0" href="#" aria-disabled="false" aria-hidden="false"><span class="icon333"></span><span class="label333">Zoom Out</span></a>

Zoom Out

Examples of Code that Satisfies WCAG (WCAG Techniques)

<button class="zoooomOut" type="button"><span class="label333">Zoom Out</span></button>

Home