Accessibility

Accessibility Coding Techniques

The following coding techniques are used in the ICS UI markup:

  • Alt tags on images (blind)
  • Labels on forms (blind)
  • Proper HTML and code order for screen reader comprehension (blind)
  • Important images (or a text alternative) appear inline so they show up in high contrast mode (poor vision)
  • Use of relative font sizing so users can adjust font sizes (poor vision)
  • Use of more than just color to indicate differences (color-blind)
  • Elements are keyboard accessible (mobility issues)
  • Special styling using the "lotusImagesOff" class to support High Contrast
  • ARIA attributes are added to the markup to help assistive technologies

This code includes the following ARIA enablement:

ARIA Roles

  • alert (for warning and error messages)
  • banner (for the top global navigation)
  • button (for links that perform actions)
  • dialog (for dialogs)
  • grid / row / columnheader / rowheader / gridcell (for mega menus)
  • group (for expandable sections that are marked up as part of an aria tree)
  • list / listitem (for tag lists in our meta data, for filters)
  • listbox (for the custom search scope control)
  • main (for the main content area, which is the middle column)
  • menu / menuitem (for the popup menu)
  • navigation (for the application links in the global navigation, tabs in the title bar, the menu, breadcrumbs, and paging controls)
  • note (for tips boxes)
  • presentation (for all tables except grids and vertical tables)
  • radiogroup (for a group of form radio buttons)
  • search (for any search controls (global and in-page))
  • status (for confirmation and information messages)
  • tablist / tab / tabpanel (for the content tabs)
  • toolbar (for the display controls, the menu, the show options in the paging bar, the sort controls, the group of action buttons and the tabs in the title bar.
  • tree / treeitem (for the tree component and menus that have expandable/collapsable sections)
  • Also used in our UI's, but not shown:
    • article (for comments, when you aren't using the HTML5 article tag)
    • contentinfo (for footers, when you aren't using the HTML5 footer tag)
    • region / complementary (for sections, depending on their content)

ARIA Properties/States

  • aria-describedby (used on an element to indicate another element that further describes it, like popup help or meta information)
  • aria-disabled (used on disabled buttons)
  • aria-expanded / aria-controls (used on the aria button that expands or collapses an area of the UI
  • aria-haspopup / aria-owns (attached to an element that pops up more information - e.g: "more actions" buttons and links)
  • aria-hidden (used on elements hidden to the user until they do something). If the element is set to display:none, you don't need this.
  • aria-label (used in many components to supply more information to the blind user)
  • aria-labelledby (used in place of aria-label when another element serves as a label for the element)
  • aria-live ( used on forms to indicate they are a live region - parts of them update to show errors during submission validation)
  • aria-pressed (used with aria buttons to indicate whether or not they are pressed)
  • aria-required (used on required form fields)
  • aria-selected (used to indicate that a tree item is selected)

ARIA Design Patterns

The WAI-ARIA 1.0 Authoring Practices Guide contains design patterns that match many of the components found in this documentation. Applicable design patterns are listed within components, but here is an overview to ARIA design patterns for your reference.

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";
}

lotusAltText Technique

The following is an example of using lotusAltText to provide alternate text:

<span class="lotusBtnImg lotusAdd" title="Add">
  <input type="image" alt="Add" src="../../css/images/blank.gif" />
  <a href="javascript:;" class="lotusAltText">+</a>
</span>

Elements with class lotusAltText are set to display:none. When lotusImagesOff is on the body tag, they are set to display:inline.

If you hide the image via CSS when images are turned off, you can use the alt text attribute to provide alternate text to the blind user, as shown in the above example.

If you don't hide the image, you can't use the alt text attribute or it will show up along with the lotusAltText when images are turned off in the browser. In this case, set alt="" and use the aria-label attribute to provide the alternate text to the blind user, as shown here:

<button class="lotusBtn" aria-haspopup="true" aria-owns="menuIdGoesHere">
  More Actions 
  <img class="lotusArrow lotusDropDownSprite" src="blank.gif" alt="" aria-label="Show menu" />
  <span class="lotusAltText">▼</span>
</button>

If your alternate text needs to change based upon state, for example, if you are expanding a "twisty" and changing from a right pointing triangle to a downward pointing triangle, in addition to changing the CSS classes necessary to change the image, you must also change the innerHTML of the lotusAltText span to the appropriate character.