aria-posinset (property)

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See related aria-setsize.

<h2 id="label_fruit"> Available Fruit </h2>  
<ul role="listbox" aria-labelledby="label_fruit">    
	<li role="option" aria-setsize="4" aria-posinset="1"> apples </li>    
	<li role="option" aria-setsize="4" aria-posinset="2"> bananas </li>    
	<li role="option" aria-setsize="4" aria-posinset="3"> cantaloupes </li>    
	<li role="option" aria-setsize="4" aria-posinset="4"> dates </li>  
</ul>

aria-setsize (property)

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See related aria-posinset.

<h2 id="label_fruit"> Available Fruit </h2>  
<ul role="listbox" aria-labelledby="label_fruit">    
	<li role="option" aria-setsize="4" aria-posinset="1"> apples </li>    
	<li role="option" aria-setsize="4" aria-posinset="2"> bananas </li>    
	<li role="option" aria-setsize="4" aria-posinset="3"> cantaloupes </li>    
	<li role="option" aria-setsize="4" aria-posinset="4"> dates </li>  
</ul>

Toolbar Example

<div role="toolbar" tabindex="0" id="customToolbar">
	<img src="img/btn1.gif" tabindex="0" role="button" id="b1" alt="Home">
	<img src="img/btn2.gif" tabindex="-1" role="button" id="b2" alt="Refresh">
	<img src="img/btn3.gif" tabindex="-1" role="button" id="b3" alt="Help">
</div>  

aria-activedescendant

Identifies the currently active descendant of a composite widget. Used to deal with multiple focusable children, ie. in a tree menu

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" alt="cut" role="button" id="button1">
<img src="buttoncopy.png" alt="copy" role="button" id="button2">
<img src="buttonpaste.png" alt="paste" role="button" id="button3">
</div> 

'slider' role and attributes

<div 
	role="slider"
        aria-valuenow="1"
        aria-valuemin="1"
        aria-valuemax="7"
        aria-valuetext="Sunday">
</div>

'directory' role to mark up table of contents

<div role="directory">     
	<ul>       
		<li>Global Warming Causes
			<ul>
				<li>CO2 Buildup</li>
				<li>Auto emissions<li>
				<li>Factory emissions</li>
				<li>Destruction of rainforests</li>
			</ul>
		</li>
		<li>Tailoring CO2 buildup
			<ul>
				<li>Elimination of the incandescent light bulb</li>
				<li>Hydrogen fuel cells</li>
				<li>Solar energy</li>
				<li>Wind power</li>
			</ul>
		</li>
	</ul>
</div>

aria-describedby property

A new feature of WAI-ARIA is the ability to associate descriptive text with a section, drawing, form element, picture, and so on using the aria-describedby property. This is unlike longdesc which typically required the author to create a separate file to describe a picture when it was preferred to have the descriptive text in prose as well so that it was readily available to all users. Yet, like longdesc descriptive text is treated separately from the short name you would typically provide using the title or alt attributes in HTML.

<img src="foo" alt="abbreviated name" aria-describedby="prose1">
<div id="prose1">This prose in this div describes in detail the image foo.</div>

aria-label

<button aria-label="Close">X</button>

Using tooltip as description

<div class="text">
	<label for="first">First Name:</label>
	<input 
		type="text" 
		id="first" 
		name="first" 
		onfocus="tooltipShow(tooltip1)" 
		onblur="tooltipHide(tooltip1)" 
		onmouseover="tooltipShow(tooltip1)"
		onmouseout="tooltipHide(tooltip1)"
		aria-describedby="tp1"
	/>

	<div id="tp1" class="tooltip" role="tooltip">Your first name is optional</div>
</div>   

radiogroup

<div id="radio_label">My radio label</div>
	<ul role="radiogroup" aria-labelledby="radio_label">
	<li role="radio">Item #1</li>
	<li role="radio">Item #2</li>
	<li role="radio">Item #3</li>
</ul>

Note: This is the type of feature one may want to seriously consider just sticking with the native functionality.

menubar

In order for menus, menubars, and menuitems to indicate that it opens a menu, set its aria-haspopup property to "true." The type of menu being launched (submenu, context help, etc.) is not explicitly indicated with WAI-ARIA but is based on the operational characteristics (keyboard and mouse commands).

Combo boxes, or drop down lists, work differently. Controls with the role combobox must contain a list of items that can be opened, usually as a drop-down. Because this is intrinsic to the functioanlity of a combo box, it does not need to be explicitly indicated with aria-haspopup.

The following html fragment shows the use of aria-haspopup with a menubar, its menus, and submenus. All of the menuitems associated with the menubar have aria-haspopup set to 'true'. Also, the "Zoom" menuitem of the "View" menu has an aria-haspopup property as it leads to a submenu.

<div role="menubar">    
	<!--
		File menu: File menuitem has an aria-haspopup attribute set to 'true'.
		That popup div follows immediately below.
	-->
	<div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
		<div role="menu" aria-labelledby="fileMenu">
		<div role="menuitem">Open</div>
		<div role="menuitem">Save</div>
		<div role="menuitem">Save as ...</div>
	</div>
	
	<!--
		View menu:
	-->
	<div role="menuitem" aria-haspopup="true" id="viewMenu">View</div>
		<div role="menu" aria-labelledby="viewMenu">
		<div role="menuitem">Normal</div>
		<div role="menuitem">Outline</div>
	
		<!--
			The View's Zoom menuitem has aria-haspopup='true' as it leads to a submenu. 
		-->
		<div role="menuitem" aria-haspopup="true" id="zoomSubMenu">Zoom</div>
			<div role="menu" aria-labelledby="zoomSubMenu">
			<div role="menuitem">50%</div>
			<div role="menuitem">75%</div>
			<div role="menuitem">100%</div>
			<div role="menuitem">150%</div>
			<div role="menuitem">200%</div>
		</div>
	</div>
</div>

'combobox' role

<input type="text" aria-label="Tag" role="combobox" aria-expanded="true"
aria-autocomplete="list" aria-owns="owned_listbox" aria-activedescendant="selected_option"
>
<ul role="listbox" id="owned_listbox">
<li role="option">Zebra</li>
<li role="option" id="selected_option">Zoom</li>
</ul>

'math' role

<div role="math" aria-label="6 divided by 4 equals 1.5">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<mn>6</mn>
<mn>4</mn>
</mfrac>
<mo>=</mo>
<mn>1.5</mn>
</math>
</div>

Pseudo-list with 'list' and 'list-item' roles

<div role="list">
	<div role="listitem">dog</div>
	<div role="listitem">cat</div>
	<div role="listitem">sparrow</div>
	<div role="listitem">wolf!</div>
</div>

Note: This is the type of feature one may want to seriously consider just sticking with the native functionality.

'link' role

<div tabindex="0" role="link" onClick="window.location='http://www.google.com'">This is an ARIA link</div>

Note: This is the type of feature one may want to seriously consider just sticking with the native functionality.