As of the latest Axe Core (v4.11.0), combining aria-errormessage and aria-describedby when using multiple IDREFs fails:
<fieldset>
<legend>Phone Number</legend>
<div>
<input
type="text"
name="area-code"
placeholder="123"
aria-label="area code" />
</div>
<div>
<input
type="text"
name="telephone"
placeholder="456-7890"
aria-invalid="true"
aria-label="telephone"
aria-describedby="invalid-phonenumber invalid-phonenumber-field"
aria-errormessage="invalid-phonenumber invalid-phonenumber-field" />
<div id="invalid-phonenumber">
<span>Invalid phone number.</span>
</div>
</div>
<div id="invalid-phonenumber-field">
<span>The field is invalid.</span>
</div>
</fieldset>Reporting this result:
{
"id": "aria-valid-attr-value",
"impact": "critical",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2",
"RGAAv4",
"RGAA-7.1.1"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-errormessage",
"data": [
"invalid-phonenumber",
"invalid-phonenumber-field"
],
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage values `invalid-phonenumber, invalid-phonenumber-field` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)"
}
],
"none": [],
"impact": "critical",
"html": "<input type=\"text\" name=\"telephone\" placeholder=\"456-7890\" aria-invalid=\"true\" aria-label=\"telephone\" aria-describedby=\"invalid-phonenumber invalid-phonenumber-field\" aria-errormessage=\"invalid-phonenumber invalid-phonenumber-field\">",
"target": [
"div > input[placeholder=\"456-7890\"][aria-label=\"telephone\"][name=\"telephone\"]"
],
"failureSummary": "Fix all of the following:\naria-errormessage values `invalid-phonenumber, invalid-phonenumber-field` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)"
}
]
}Changing from a token list to a single IDREF will pass, regardless of which IDREF is chosen.
I believe the issue is from this line, which checks to see if an array of IDREFs has any entry containing the full space-separated attribute.
tokenList(virtualNode.attr('aria-describedby')).indexOf(attr) > -1Either Axe should not convert the aria-describedby value to a token list so it checks one concatenated attribute value against another, or it should check to see if every tokenList(attr) value exists in the tokenList(virtualNode.attr('aria-describedby')) array.
As of the latest Axe Core (v4.11.0), combining
aria-errormessageandaria-describedbywhen using multiple IDREFs fails:Reporting this result:
{ "id": "aria-valid-attr-value", "impact": "critical", "tags": [ "cat.aria", "wcag2a", "wcag412", "EN-301-549", "EN-9.4.1.2", "RGAAv4", "RGAA-7.1.1" ], "description": "Ensure all ARIA attributes have valid values", "help": "ARIA attributes must conform to valid values", "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=axeAPI", "nodes": [ { "any": [], "all": [ { "id": "aria-errormessage", "data": [ "invalid-phonenumber", "invalid-phonenumber-field" ], "relatedNodes": [], "impact": "critical", "message": "aria-errormessage values `invalid-phonenumber, invalid-phonenumber-field` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)" } ], "none": [], "impact": "critical", "html": "<input type=\"text\" name=\"telephone\" placeholder=\"456-7890\" aria-invalid=\"true\" aria-label=\"telephone\" aria-describedby=\"invalid-phonenumber invalid-phonenumber-field\" aria-errormessage=\"invalid-phonenumber invalid-phonenumber-field\">", "target": [ "div > input[placeholder=\"456-7890\"][aria-label=\"telephone\"][name=\"telephone\"]" ], "failureSummary": "Fix all of the following:\naria-errormessage values `invalid-phonenumber, invalid-phonenumber-field` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)" } ] }Changing from a token list to a single IDREF will pass, regardless of which IDREF is chosen.
I believe the issue is from this line, which checks to see if an array of IDREFs has any entry containing the full space-separated attribute.
Either Axe should not convert the
aria-describedbyvalue to a token list so it checks one concatenated attribute value against another, or it should check to see if everytokenList(attr)value exists in thetokenList(virtualNode.attr('aria-describedby'))array.