Skip to main content link. Accesskey S

Accessibility

Accessibility Coding Techniques

The following coding techniques are used in the Lotus User Interface markup:

This code includes the following ARIA enablement:

ARIA Roles

  • alert (for warning and error messages)
  • banner (for the top global navigation)
  • button (for link buttons)
  • listbox (for the custom search scope control)
  • main (for the main content area, which is everything below the titlebar)
  • menu (for the green menu in the left column and the popup menus)
  • menuitem (for items in the menus)
  • navigation (for the application links in the global navigation, the tabs in the titlebar, breadcrumbs, paging controls)
  • note (for tips boxes)
  • presentation (for layout tables)
  • radiogroup (for a group of form radio buttons)
  • search
  • separator (for separator "bars" between list items)
  • status (for confirmation and information messages)
  • tablist (for the content tabs)
  • tab (for each individual content tab)
  • tree (for the tree component)
  • treeitem (for each item in the tree component)

ARIA Properties/States

  • aria-disabled (used on disabled buttons)
  • aria-expanded (used in the tree component, on expandable vcard sections, in the find control)
  • aria-haspopup (attached to an element that pops up more information. Examples: "more" buttons, active dividers on breadcrumbs, help icons, custom search scope control, more sorts control, action menu icon on sections/widgets, more actions links, person hover link)
  • aria-hidden (used on elements hidden to the user until they do something)
  • aria-label (used for alt text where alt="")
  • aria-labelledby (used in conjunction with radio button groups)
  • aria-owns (used along with the aria-haspopup/aria-expanded attributes to assign the id of the element that is shown)
  • aria-required (used on required form fields)
  • aria-live on forms to indicate they are a live region (parts of them update to show errors during submission validation)

Also, you can write CSS declarations using the "lotusImagesOff" class written to the body tag using high contrast detection code.

High Contrast Mode/Images Off

High Constrast and "images turned off" modes are now coded the same way Dojo does it. If High Contrast is detected or if images are turned off in the browser, a new class is added to the <body> tag to enable hidden markup. There are two ways to detect High Contrast. If you are using Dojo, you don't have to maintain your own code. You can add an onload handler to check if the "dijit_a11y" class has been added to the <body> tag. Be sure your onload handler is run after Dojo adds the class. Here's one way you could write that code:

dojo.addOnLoad(function() {
        var bodyElem = document.getElementsByTagName("body")[0];
        if (dojo.hasClass(bodyElem, "dijit_a11y")) {            
            dojo.addClass(bodyElem, "lotusImagesOff");
        }
 });

Dojo alt text and lotusAltText (which shows up when lotusImagesOff is set) can be safely used in the same page.

If you are not using Dojo, you need to duplicate the onload handler contained in wai.js in Dojo. Here is what is used in the developer documentation:


// NOTE: THIS CODE HAS DEPENDENCIES ON DEVELOPER DOCUMENTATION CLASSES AND REQUIRES
// CLEANUP TO BE MORE GENERIC.  IT IS NOT MEANT TO BE PRODUCTION-QUALITY CODE.
// TODO: Compare this code to the latest Dojo code and consider deleting the test DOM node at the end of the function.

// javascript to check for high contrast/images off mode

//create test case element
var imagesPath = devdoc.imagesPath;
var vTestHC = document.createElement("div");
vTestHC.id = "testHC";
vTestHC.style.cssText = 'border: 1px solid;'
		+ 'border-color:red green;'
		+ 'position: absolute;'
		+ 'height: 5px;'
		+ 'top: -999px;'
		+ 'background-image: url("' + imagesPath + '/blank.gif");';
document.body.appendChild(vTestHC);

//do the tests
var vTestHC = document.getElementById("testHC");
var vStyle = null;
try{
	vStyle = document.defaultView.getComputedStyle(vTestHC, "");
}catch(e){
	vStyle = vTestHC.currentStyle;
}
var vTestImg = vStyle.backgroundImage;
if ((vStyle.borderTopColor==vStyle.borderRightColor) || (vTestImg != null && (vTestImg == "none" || vTestImg == "url(invalid-url:)" ))){
	document.getElementsByTagName("body")[0].className+=" lotusImagesOff";
}

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.