Augmenting Button Text with ARIA

Various examples of using ARIA to augment the text of a button. The example below includes a set of invites to connect to colleagues. Since the Accept and Reject buttons are repeated for each invitation it is desirable to add the colleague name associated with each button for the benefit of users who can't visually comprehend the scope of the buttons. Different ARIA methods are used and documented in each of the examples below. Table of results of testing screen readers with ARIA supported browsers.

Colleagues for Jane Doe

5 New Invitations

picture of Amy Jones

Amy Jones

You have 4 colleagues in common

I'd like to add you to my colleagues list.

Uses offscreen span and aria-labelledby to label the button.

.offscreen {
	position: absolute;
	margin-top: -9999px; 
}

<button onclick="showMessage('accept', 'invite_1');" aria-labelledby="invite_1_accept">
<span class="offscreen" id="invite_1_accept">accept invitation from Amy Jones</span>
<span>Accept</span>
</button>

picture of Bill Green

Bill Green

You have 1 colleagues in common

I'd like to add you to my colleagues list.

Uses offscreen span with additional text as part of button text node.

.offscreen {
	position: absolute;
	margin-top: -9999px; 
}

<button onclick="alert(getMessage('accept','invite_2'));" >
Accept<span class="offscreen"> invitation from Bill Green</span></button>

picture of Chris Catz

Chris Catz

You have 2 colleagues in common

I'd like to add you to my colleagues list.

Uses aria-describedby to point to node with name.

<h4 id="invite_3" style="font-weight:bold">Chris Catz</h4>
....
<button onclick="showMessage('accept', 'invite_3');" aria-describedby="invite_3">Accept</button>

picture of Ima Clone

Ima Clone

You have 0 colleagues in common

I'd like to add you to my colleagues list.

Uses aria-label which is not currently supported but coming in Firefox 3.6

<button onclick="showMessage('accept', 'invite_5');" aria-label="accept invitation from Ima Clone">
Accept </button>

picture of Mel O'Drama

Mel O'Drama

You have 1 colleagues in common

I'd like to add you to my colleagues list.

Add additional information in title attribute. Spoken by JAWS 10 after changing button label settings.

<button onclick="showMessage('accept', 'invite_4');" title="accept invitation from Mel O'Drama" >Accept</button>

Posted on April 9, 2009 by Becky Gibson