<div id="banner" role="banner"><h1>banner</h1></div>
<div id="navigation" role="navigation"><h2>navigation</h2></div>
<div id="main" role="main"><h2>main</h2>
<div role="application" id="application"><h3>application</h3></div>
</div>
<div id="complementary" role="complementary"> <h2>complementary</h2>
<div role="form" id="form"> <h3>form</h3>
<div id="search" role="search"><h4>search</h4></div>
</div></div>
<div id="contentinfo" role="contentinfo"><h3>contentinfo</h3></div>
Put this on HTML element that you want announced. Remember that telephone example.
<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" aria-label="Area Code"
type="text" size="3" value="" >
<input id="exchange" name="exchange" aria-label="First three digits of phone number"
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" aria-label="Last four digits of phone number"
type="text" size="4" value="" >
</fieldset>
<p><img src="flowchart.gif" alt="A flowchart of a process for dealing with a non-functioning lamp." aria-describedby="d1"></p>
<p id="d1">If the lamp doesn't work; check if it's plugged in. If not, plug it in. If it's plugged in and still doesn't work; check if the bulb is burned out. If it is, replace the bulb. If it still does not work; buy a new lamp.</p>
<div role="applicaton" aria-labelledby="calendar" aria-describedby="info"> <h1 id="calendar">Calendar<h1> <p id="info">This calendar shows the game schedule for the Boston Red Sox. </p> <div role="grid"> .... </div>
<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>