«
»

ARIA Button

Jun 28th, 2011 at 2:05 pm

ARIA's role="button" allows the developer a lot of options when it comes to creating an accessible button. When applied properly, the ARIA role="button" can turn any element into a button, including, p, div, span, img, and others.

Buttons support the optional attribute aria-pressed. Buttons with a non-empty aria-pressed attribute are toggle buttons. When aria-pressed is true the button is in a "pressed" state, when aria-pressed is false it is not pressed.

The JAWS screen reader will announce it as a button and announce the state as either Pressed or Not Pressed based on the value of aria-pressed.

The keyboard handler is added for the keyboard only user. At this time, with the JAWS screen reader running, you can use either the mouse click or the enter key. Without JAWS running, both FireFox4 or IE9 will action the button with the mouse but not with the Enter key.

Notice the CSS [aria-pressed="true"] { font-weight: bold; } will style the text bold when the aria-pressed="true" condition is met.

Example 1:

This may not look like a button, but it acts like one.

Code


<style>
    [aria-pressed="true"] { font-weight: bold; }
</style>

<script>
  function ARIA_Button_Key(event) {
    if(event.keyCode == 13){
      ARIA_Button()
    }
  }
  function ARIA_Button() {
    var getvalue=document.getElementById("ARIA_button").getAttribute("aria-pressed");
    if (getvalue=="false")
    {
      document.getElementById("ARIA_button").setAttribute("aria-pressed", "true");
      document.getElementById('button_alert').innerHTML = "aria-pressed has been set to true.";
    } else {
      document.getElementById("ARIA_button").setAttribute("aria-pressed", "false");
      document.getElementById('button_alert').innerHTML = "aria-pressed has been set to false.";
    }
  }
</script>

<p
    id="ARIA_button" 
    role="button" 
    aria-pressed="false" 
    tabindex="0" 
    onClick="ARIA_Button();" onkeyup="ARIA_Button_Key(event);"
>
This may not look like a button, but it acts like one.
</p>
<p id="button_alert" role="alert"></p>

Works With

role="button"
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

  • WCAG 2.0 SC 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)
  • WCAG 2.0 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

In Accessibility, ARIA, Best Practices. You can leave a response, or trackback from your site.

Leave a Reply

You must be logged in to post a comment.