Accessible Popup Help Using Dojo and ARIA

This example shows Popup or Bubble help that has been implemented using a Dojo dijit.TooltipDialog. A Tooltip dialog is invoked via dijit.form.DropDownButton. In this case the DropDownButton has been restyled to look like a link, although the screen reader will announce it as a menu button. Activate the More Info? element below to see the Popup Help functionality.

More Info?

[close]

Important! This is a Dojo dijit.TooltipDialog with just text that is being used to to implement a bubble-style help popup. It will stay open until the user explicitly closes it via pressing escape, clicking [close] or by clicking somewhere else on the page. The role of the dialog has been set to alertdialog so the screen reader will speak the contents when it is opened in Firefox and JAWS 10. In IE 8 the focused element, "Close" is spoken and the user can navigate to have the text spoken with app mode on.

	<style type="text/css">
		@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/resources/dojo.css";
		@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/soria/soria.css"
	</style>
	<SCRIPT TYPE="text/javascript" SRC="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
		djConfig="parseOnLoad: true, isDebug: false"></SCRIPT>
	<script type="text/javascript">
		dojo.require("dijit.TooltipDialog");
		dojo.require("dijit.form.Button");
		dojo.require("dijit.form.DropDownButton");
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them	
	</script>

Here is the code to create the TooltipDialog. I added an explicit close button, although by default the dialog will close if the user presses escape or clicks outside of it.

<div dojoType="dijit.form.DropDownButton" class="tooltipLink" >
	<span>More Info?</span>
	<div dojoType="dijit.TooltipDialog" id="tooltipHelpDlg" title="More Info Popup Help" style="width:350px" >
		<div class="buttonLink" style="float:right;font-size:x-small" title="close" tabindex="0" 
		dojoType="dijit.form.Button">[close]
			<script type="dojo/method" event="onClick">
					dijit.byId('tooltipHelpDlg').onCancel();
			</script>
		</div>
		<div style="margin-top:1em" id="helpText" >
			dialog contents  		 		
		</div>	
	</div>
</div>

<style type="text/css">
	.soria .tooltipLink .dijitButtonNode,
	.soria .tooltipLink .dijitButtonNode .dijitDropDownButtonHover,
	.soria .buttonLink .dijitButtonNode,
	.soria .buttonLink .dijitButtonHover .dijitButtonNode {
		background: none !important;
		border:none;
	}
	.soria .tooltipLink .dijitArrowButtonInner {
		display:none;
	}
	.soria .tooltipLink button,
	.soria .tooltipLink button .dijitButtonText,
	.soria .buttonLink button .dijitButtonText {
		text-decoration:underline !important;
		color:blue;
		display:inline;
	}
</style>

Normally, a dijit.TooltipDialog is given the ARIA role of dialog. I added a dojo.addOnLoad handler to connect to the dialog onShow event and changed the role to alertdialog so the screen reader would automatically speak the contents of the dialog when it is displayed.

<script type="text/javascript">
dojo.addOnLoad(function() {
	var dialog = dijit.byId("tooltipHelpDlg");
	dojo.connect(dialog, "onShow", function(){
		dojo.attr(dijit.byId("tooltipHelpDlg").domNode,"role", "alertdialog");
		});
	});
</script>

Accessible Popup Help with Dojo and ARIA