Dialog example

Structure

<div>
    <label for="keyword">Keywords</label>
    <input type="text" name="keyword" id="keyword">
    <input type="image" src="help.png" id="helpbtn" alt="Search keyword instructions">
</div>

<div role="dialog" aria-labelledby="dlgtitle" aria-expanded="false" tabindex="-1" id="helpdlg" style="display: none">
    <div role="presentation">
        <input type="image" src="close.gif" id="closebtn" alt="Close">
        <h2 id="dlgtitle">How does keyword search work?</h2>
        <p>
          Enter a list of words, and we'll search for them in the job title, or you can 
          choose to search for them also within the job description.
        </p>
        <h3>Tips</h3>
        <ul>
            <li>Use specific words that would appear only in the jobs you're interested in.</li>
            …
        </ul>
        <h3>Wildcards</h3>
        <p>Wildcards are characters that can replace letters to expand a search</p>
        <ul>
            …
            <li>Use tilde (~) to find similar spellings. Ex: roam~ finds roam, roams, room, road, roads, etc.</li>
        </ul>
        <input type="button" value="OK" id="okbtn">
    </div>
</div>

Notes

Back to WAI-ARIA examples.