Accessibility
Accessibility Coding Techniques
The following coding techniques are used in the Lotus User Interface 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)
- ARIA attributes are added to the markup to help assistive technologies
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"; }