Go to overview: WAI-ARIA techniques with code examples

Using aria-label to provide an invisible label to a simple close-button (X) of a pop-up div

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)

Last update: 15 February 2013

This example shows how aria-label may be used on a simple close-button used in pop-up divs. It also utilises the focus management scripts from Making an accessible dialog box by Nicholas C. Zakas.

Example

Display a div box

This is a div box with a 'close' button.

Results

aria-label to provide an invisible label to a close button (x)

The sequence runs from focusing the trigger link to refocusing the same link after closing the div box. Tabbing action (and left-right swiping action) is indicated by ||, enter (and double-tap) is indicated by [ENTER].

Win 7, IE 9, JAWS 14 supported

JAWS speaks content of div box (focus is moved to it by a script) followed by aria-label: "close button" "Display a div box - link [ENTER] Enter - This is a div box with a close button || close - button [ENTER] Enter - Display a div box - link"
Win 7, FF 18, JAWS 14 supported

JAWS speaks content of div box (focus is moved to it with script) followed by aria-label: "close button" "Display a div box - link [ENTER] - Enter - This is a div box with a close button || close - button [ENTER] Enter - Display a div box - visited link".

Seems a bit buggy though - sometimes after displaying div JAWS keeps announcing Display a div box - visited link".
Win 7, IE9, NVDA 2012.2.1 supported - buggy?

NVDA content of div box (focus is moved to it with script) followed by aria-label: "Display a div box - link [ENTER] This is a div box with a close button - close || close - button [ENTER] Enter - Display a div box - link". At times, this does not happen though - sometimes NVDA just speaks "Display a div box - link" even though the focus is in div box. Funny also that it repeats close: "This is a div box with a close button - close".

(If anyone can explain this behaviour or point out why the example may be at fault, I'll update the result.)
Win 7, FF 13, NVDA 2012.2.1 not-supported

NVDA does not speak aria-label: "Display a div box - link [ENTER] This is a div box with a close button - X || X button [ENTER] Enter - Display a div box - visited link"
Win XP, IE 8, SaToGo not supported

System Access SaToGo ignores aria-label: "Display a div box - link [ENTER] This is a div box with a close button || button X [ENTER] Display a div box - link"
Mac OS 10.6.8, VoiceOver Supported

In contrast to VoiceOver on iOS, VoiceOver on OS X supports aria-label: Reads "Display a div box - link [ENTER] [VO + right arrow] This is a div box with a close button || close - button [ENTER] Enter - visited link - Display a div box"
iOS 6.1, VoiceOver (iPad mini) not supported

aria-label not supported: "Capital X - Taste" (Taste = button). The script-based focus handling is broken in Safari with VoiceOver - after opening the div box, focus is set back to the first focusable element on the page. The same thing happens when the close-button is activated.
Android 4.2, Talkback (Nexus 7) not supported

aria-label not supported: "link - display a div box [ENTER] This is a div box with a quote close quote button || button X [ENTER] aria-label: 2. Example close button - visited link - Display a div box. Note that script-based focus handling works much better than with iOS and VoiceOver - it's just odd that the page title is announced after the div box is closed, before the triggering link is spoken.