ARIA Button Examples

Title Pane Example

Here's a title pane with an arrow button to hide and show the contents. Activating the button will toggle the display of the content pane. When the button is activated, focus remains on the arrow button. Press the down arrow to set focus from the arrow button to the open content pane. The contents pane is put into the tab order when the pane is made visible so pressing tab from the down arrow button will focus the contents pane when it is visible.. The button action is described via the title attribute which is updated depending upon the visibility of the content. The title for the button appends "Hide" or "Show" to the tile of pane.

Currently the contents pane is given a role of region and has a labelledby property which points to the title. The region role is not yet supported by screen readers.

Sample Title Pane

Some sample content. Every soul has a body, every body has an ending, every ending has a beginning, every beginning has a soul. And thus the world goes round. And now for something less profound. A minute in time is 60 seconds. Once upon a time there was a very uncreative web developer who needed to create some sample text. She considered using lorem ipsum text but that can be very confusing to some readers so she just typed what ever came into her head. Pity the poor folks who have to read it!

Simple Image Button

Image button example which just displays a JavaScript alert.