See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
Client-side scripting.
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 1.4.4. See Understanding SC 1.4.4 for details.
Note: This technique must be combined with other techniques to meet SC 1.4.8. See Understanding SC 1.4.8 for details.
The objective of this technique is to calculate the size and position of elements in a way that will scale appropriately as the text size is scaled.
There are four properties in JavaScript that help determine the size and position of elements:
offsetHeight (the height of the element in pixels)
offsetWidth (the width of the element in pixels)
offsetLeft (the distance of the element from the left of its parent (offsetParent) in pixels)
offsetTop (the distance of the element from the top of its parent (offsetParent) in pixels)
Calculating the height and width using offsetHeight and offsetWidth is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The calculatePosition function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters; objElement (the name of the element in question), and the offset property (offsetLeft or offsetTop):
The Javascript function:
Example Code:
function calculatePosition(objElement, strOffset)
{
var iOffset = 0;
if (objElement.offsetParent)
{
do
{
iOffset += objElement[strOffset];
objElement = objElement.offsetParent;
} while (objElement);
}
return iOffset;
}
The following example illustrates using the function above by aligning an object beneath a reference object, the same distance from the left:
Example Code:
// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');
objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px';
Resources are for information purposes only, no endorsement implied.
Open a page that is designed to adjust container sizes as text size changes.
Increase the text size up to 200% using the browser's text size adjustment (not the zoom feature).
Examine the text to ensure the text container size is adjusted to accommodate the size of the text.
Ensure that no text is "clipped" or has disappeared as a result of the increase in text size.
Checks #3 and #4 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.