WCAG Rule 87: ARIA attributes can only be used with certain roles
Rule Mapping
- Status: Accepted
- Severity: Violation
- Priority: Priority 1
Details
- For each ARIA attribute, check for valid IDRefs.
- If there are too many IDRefs it is an error.
- All ARIA states and properties with bad values are returned.
Markup References
- ARIA 1.0: [aria-activedescendant]
- ARIA 1.0: [aria-autocomplete]
- ARIA 1.0: [aria-checked]
- ARIA 1.0: [aria-expanded]
- ARIA 1.0: [aria-level]
- ARIA 1.0: [aria-multiline]
- ARIA 1.0: [aria-multiselectable]
- ARIA 1.0: [aria-orientation]
- ARIA 1.0: [aria-posinset]
- ARIA 1.0: [aria-pressed]
- ARIA 1.0: [aria-readonly]
- ARIA 1.0: [aria-required]
- ARIA 1.0: [aria-selected]
- ARIA 1.0: [aria-setsize]
- ARIA 1.0: [aria-sort]
- ARIA 1.0: [aria-valuemax]
- ARIA 1.0: [aria-valuemin]
- ARIA 1.0: [aria-valuenow]
- ARIA 1.0: [aria-valuetext]
Validation Code
Dependencies
None
Context
.containsAriaAttrIDREF
Parameters
None
Code
function (ruleContext) {
var attrNameArr = new Array();
var role = ruleContext.getAttribute("role");
// - a role value of null indicates no role attribute is present in (FF,Opera, Safari, Chrome).
// - '' value indicates the role is set to an empty string for all browsers except
// IE which also returns '' if no role attribute is present
// neither of these values allow for unsupported state to be tested
// Make sure the role value is consistent with IE as you don't want to push a null on the stack
if (role==null)
role='';
for(var i=0; role == '' && i < ruleContext.attributes.length; i++ ) {
var attrName = ruleContext.attributes[i].name;
if (OpenAjax.a11y.util.isDefinedAriaAttribute(ruleContext, attrName) &&
OpenAjax.a11y.xbrowser.indexOf(OpenAjax.a11y.aria.globalProperties, attrName) == -1) {
attrNameArr.push(attrName);
}
}
var retMsg = new Array();
retMsg.push (attrNameArr.toString());
var passed = attrNameArr.length == 0;
return new ValidationResult(passed, [ruleContext], attrNameArr, '', retMsg);
}
>