[ { "label": "ARIA", "rules": { "aria-allowed-attr": { "id": "aria-allowed-attr", "impact": null, "tags": [ "cat.aria", "wcag2a", "wcag412" ], "description": "Ensures ARIA attributes are allowed for an element's role", "help": "Elements must only use allowed ARIA attributes", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/aria-allowed-attr?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "aria-allowed-attr", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA attributes are used correctly for the defined role" } ], "all": [], "none": [ { "id": "aria-unsupported-attr", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA attribute is supported" } ], "impact": null, "html": "", "target": [ "#card-1-drawer-api > .hs.ht.hu > .hv.hw[aria-label=\"caret-right\"]" ] }, { "any": [ { "id": "aria-allowed-attr", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA attributes are used correctly for the defined role" } ], "all": [], "none": [ { "id": "aria-unsupported-attr", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA attribute is supported" } ], "impact": null, "html": "", "target": [ "#card-1-drawer-help > .hs.ht.hu > .hv.hw[aria-label=\"caret-right\"]" ] } ], "pass": true, "cat": "cat.aria" }, "aria-allowed-role": { "id": "aria-allowed-role", "impact": null, "tags": [ "cat.aria", "best-practice" ], "description": "Ensures role attribute has an appropriate value for the element", "help": "ARIA role must be appropriate for the element", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/aria-allowed-role?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "aria-allowed-role", "data": null, "relatedNodes": [], "impact": "minor", "message": "ARIA role is allowed for given element" } ], "all": [], "none": [], "impact": null, "html": "
", "target": [ ".hk" ] }, { "any": [ { "id": "aria-allowed-role", "data": null, "relatedNodes": [], "impact": "minor", "message": "ARIA role is allowed for given element" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-api" ] }, { "any": [ { "id": "aria-allowed-role", "data": null, "relatedNodes": [], "impact": "minor", "message": "ARIA role is allowed for given element" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-help" ] } ], "pass": true, "cat": "cat.aria" }, "aria-required-attr": { "id": "aria-required-attr", "impact": null, "tags": [ "cat.aria", "wcag2a", "wcag412" ], "description": "Ensures elements with ARIA roles have all required ARIA attributes", "help": "Required ARIA attributes must be provided", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/aria-required-attr?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "aria-required-attr", "data": null, "relatedNodes": [], "impact": "critical", "message": "All required ARIA attributes are present" } ], "all": [], "none": [], "impact": null, "html": "
", "target": [ ".hk" ] }, { "any": [ { "id": "aria-required-attr", "data": null, "relatedNodes": [], "impact": "critical", "message": "All required ARIA attributes are present" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-api" ] }, { "any": [ { "id": "aria-required-attr", "data": null, "relatedNodes": [], "impact": "critical", "message": "All required ARIA attributes are present" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-help" ] } ], "pass": true, "cat": "cat.aria" }, "aria-required-children": { "id": "aria-required-children", "impact": null, "tags": [ "cat.aria", "wcag2a", "wcag131" ], "description": "Ensures elements with an ARIA role that require child roles contain them", "help": "Certain ARIA roles must contain particular children", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/aria-required-children?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "aria-required-children", "data": null, "relatedNodes": [], "impact": "critical", "message": "Required ARIA children are present" } ], "all": [], "none": [], "impact": null, "html": "
", "target": [ ".hk" ] }, { "any": [ { "id": "aria-required-children", "data": null, "relatedNodes": [], "impact": "critical", "message": "Required ARIA children are present" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-api" ] }, { "any": [ { "id": "aria-required-children", "data": null, "relatedNodes": [], "impact": "critical", "message": "Required ARIA children are present" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-help" ] } ], "pass": true, "cat": "cat.aria" }, "aria-required-parent": { "id": "aria-required-parent", "impact": null, "tags": [ "cat.aria", "wcag2a", "wcag131" ], "description": "Ensures elements with an ARIA role that require parent roles are contained by them", "help": "Certain ARIA roles must be contained by particular parents", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/aria-required-parent?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "aria-required-parent", "data": null, "relatedNodes": [], "impact": "critical", "message": "Required ARIA parent role present" } ], "all": [], "none": [], "impact": null, "html": "
", "target": [ ".hk" ] }, { "any": [ { "id": "aria-required-parent", "data": null, "relatedNodes": [], "impact": "critical", "message": "Required ARIA parent role present" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-api" ] }, { "any": [ { "id": "aria-required-parent", "data": null, "relatedNodes": [], "impact": "critical", "message": "Required ARIA parent role present" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-help" ] } ], "pass": true, "cat": "cat.aria" }, "aria-roles": { "id": "aria-roles", "impact": null, "tags": [ "cat.aria", "wcag2a", "wcag412" ], "description": "Ensures all elements with a role attribute use a valid value", "help": "ARIA roles used must conform to valid values", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/aria-roles?application=axe-puppeteer", "nodes": [ { "any": [], "all": [], "none": [ { "id": "invalidrole", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA role is valid" }, { "id": "abstractrole", "data": null, "relatedNodes": [], "impact": "serious", "message": "Abstract roles are not used" }, { "id": "unsupportedrole", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA role is supported" } ], "impact": null, "html": "
", "target": [ ".hk" ] }, { "any": [], "all": [], "none": [ { "id": "invalidrole", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA role is valid" }, { "id": "abstractrole", "data": null, "relatedNodes": [], "impact": "serious", "message": "Abstract roles are not used" }, { "id": "unsupportedrole", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA role is supported" } ], "impact": null, "html": "", "target": [ "#card-1-drawer-api" ] }, { "any": [], "all": [], "none": [ { "id": "invalidrole", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA role is valid" }, { "id": "abstractrole", "data": null, "relatedNodes": [], "impact": "serious", "message": "Abstract roles are not used" }, { "id": "unsupportedrole", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA role is supported" } ], "impact": null, "html": "", "target": [ "#card-1-drawer-help" ] } ], "pass": true, "cat": "cat.aria" }, "aria-valid-attr-value": { "id": "aria-valid-attr-value", "impact": null, "tags": [ "cat.aria", "wcag2a", "wcag412" ], "description": "Ensures all ARIA attributes have valid values", "help": "ARIA attributes must conform to valid values", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/aria-valid-attr-value?application=axe-puppeteer", "nodes": [ { "any": [], "all": [ { "id": "aria-valid-attr-value", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA attribute values are valid" }, { "id": "aria-errormessage", "data": null, "relatedNodes": [], "impact": "critical", "message": "Uses a supported aria-errormessage technique" } ], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-api > .hs.ht.hu > .hv.hw[aria-label=\"caret-right\"]" ] }, { "any": [], "all": [ { "id": "aria-valid-attr-value", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA attribute values are valid" }, { "id": "aria-errormessage", "data": null, "relatedNodes": [], "impact": "critical", "message": "Uses a supported aria-errormessage technique" } ], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-help > .hs.ht.hu > .hv.hw[aria-label=\"caret-right\"]" ] } ], "pass": true, "cat": "cat.aria" }, "aria-valid-attr": { "id": "aria-valid-attr", "impact": null, "tags": [ "cat.aria", "wcag2a", "wcag412" ], "description": "Ensures attributes that begin with aria- are valid ARIA attributes", "help": "ARIA attributes must conform to valid names", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/aria-valid-attr?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "aria-valid-attr", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA attribute name are valid" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-api > .hs.ht.hu > .hv.hw[aria-label=\"caret-right\"]" ] }, { "any": [ { "id": "aria-valid-attr", "data": null, "relatedNodes": [], "impact": "critical", "message": "ARIA attribute name are valid" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-help > .hs.ht.hu > .hv.hw[aria-label=\"caret-right\"]" ] } ], "pass": true, "cat": "cat.aria" } } }, { "label": "Color", "rules": { "color-contrast": { "id": "color-contrast", "impact": null, "tags": [ "cat.color", "wcag2aa", "wcag143" ], "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds", "help": "Elements must have sufficient color contrast", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "color-contrast", "data": { "fgColor": "#000000", "bgColor": "#ffffff", "contrastRatio": 21, "fontSize": "14.0pt", "fontWeight": "bold", "expectedContrastRatio": "3:1" }, "relatedNodes": [], "impact": "serious", "message": "Element has sufficient color contrast of 21" } ], "all": [], "none": [], "impact": null, "html": "

Card Title

", "target": [ ".fh > .fj" ] }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#000000", "bgColor": "#ffffff", "contrastRatio": 21, "fontSize": "12.0pt", "fontWeight": "normal", "expectedContrastRatio": "4.5:1" }, "relatedNodes": [], "impact": "serious", "message": "Element has sufficient color contrast of 21" } ], "all": [], "none": [], "impact": null, "html": "

A card presents a feature to the user. It is comprised of a title, a description of the feature, action buttons and a link drawer which exposes help or API documentation. Cards can also include toggles and buttons that launch modals.

", "target": [ "p" ] }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#72777b", "bgColor": "#ffffff", "contrastRatio": 4.52, "fontSize": "9.0pt", "fontWeight": "normal", "expectedContrastRatio": "4.5:1" }, "relatedNodes": [], "impact": "serious", "message": "Element has sufficient color contrast of 4.52" } ], "all": [], "none": [], "impact": null, "html": "
Last changed 17 days ago
", "target": [ ".db.cq.dj" ] }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#ffffff", "bgColor": "#2c7cb0", "contrastRatio": 4.54, "fontSize": "10.5pt", "fontWeight": "normal", "expectedContrastRatio": "4.5:1" }, "relatedNodes": [], "impact": "serious", "message": "Element has sufficient color contrast of 4.54" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ ".jf" ] }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#2c7cb0", "bgColor": "#ffffff", "contrastRatio": 4.54, "fontSize": "12.0pt", "fontWeight": "normal", "expectedContrastRatio": "4.5:1" }, "relatedNodes": [], "impact": "serious", "message": "Element has sufficient color contrast of 4.54" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-api" ] }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#2c7cb0", "bgColor": "#ffffff", "contrastRatio": 4.54, "fontSize": "12.0pt", "fontWeight": "normal", "expectedContrastRatio": "4.5:1" }, "relatedNodes": [], "impact": "serious", "message": "Element has sufficient color contrast of 4.54" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-help" ] } ], "pass": true, "cat": "cat.color" } } }, { "label": "Name, Role, Value", "rules": { "button-name": { "id": "button-name", "impact": null, "tags": [ "cat.name-role-value", "wcag2a", "wcag412", "section508", "section508.22.a" ], "description": "Ensures buttons have discernible text", "help": "Buttons must have discernible text", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/button-name?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "button-has-visible-text", "data": "Action", "relatedNodes": [], "impact": "critical", "message": "Element has inner text that is visible to screen readers" } ], "all": [], "none": [ { "id": "focusable-no-name", "data": null, "relatedNodes": [], "impact": "serious", "message": "Element is not in tab order or has accessible text" } ], "impact": null, "html": "", "target": [ ".jf" ] } ], "pass": true, "cat": "cat.name-role-value" }, "empty-heading": { "id": "empty-heading", "impact": null, "tags": [ "cat.name-role-value", "best-practice" ], "description": "Ensures headings have discernible text", "help": "Headings must not be empty", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/empty-heading?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "has-visible-text", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element has text that is visible to screen readers" } ], "all": [], "none": [], "impact": null, "html": "

Card Title

", "target": [ ".fh > .fj" ] } ], "pass": true, "cat": "cat.name-role-value" }, "link-name": { "id": "link-name", "impact": null, "tags": [ "cat.name-role-value", "wcag2a", "wcag412", "wcag244", "section508", "section508.22.a" ], "description": "Ensures links have discernible text", "help": "Links must have discernible text", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/link-name?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "has-visible-text", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element has text that is visible to screen readers" } ], "all": [], "none": [ { "id": "focusable-no-name", "data": null, "relatedNodes": [], "impact": "serious", "message": "Element is not in tab order or has accessible text" } ], "impact": null, "html": "", "target": [ "#card-1-drawer-api" ] }, { "any": [ { "id": "has-visible-text", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element has text that is visible to screen readers" } ], "all": [], "none": [ { "id": "focusable-no-name", "data": null, "relatedNodes": [], "impact": "serious", "message": "Element is not in tab order or has accessible text" } ], "impact": null, "html": "", "target": [ "#card-1-drawer-help" ] } ], "pass": true, "cat": "cat.name-role-value" } } }, { "label": "Parsing", "rules": { "duplicate-id-active": { "id": "duplicate-id-active", "impact": null, "tags": [ "cat.parsing", "wcag2a", "wcag411" ], "description": "Ensures every id attribute value of active elements is unique", "help": "IDs of active elements must be unique", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/duplicate-id-active?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "duplicate-id-active", "data": "card-1-drawer-api", "relatedNodes": [], "impact": "serious", "message": "Document has no active elements that share the same id attribute" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-api" ] }, { "any": [ { "id": "duplicate-id-active", "data": "card-1-drawer-help", "relatedNodes": [], "impact": "serious", "message": "Document has no active elements that share the same id attribute" } ], "all": [], "none": [], "impact": null, "html": "", "target": [ "#card-1-drawer-help" ] } ], "pass": true, "cat": "cat.parsing" } } }, { "label": "Semantics", "rules": { "heading-order": { "id": "heading-order", "impact": null, "tags": [ "cat.semantics", "best-practice" ], "description": "Ensures the order of headings is semantically correct", "help": "Heading levels should only increase by one", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/heading-order?application=axe-puppeteer", "nodes": [ { "any": [ { "id": "heading-order", "data": 3, "relatedNodes": [], "impact": "moderate", "message": "Heading order valid" } ], "all": [], "none": [], "impact": null, "html": "

Card Title

", "target": [ ".fh > .fj" ] } ], "pass": true, "cat": "cat.semantics" } } }, { "label": "Text Alternatives", "rules": { "image-redundant-alt": { "id": "image-redundant-alt", "impact": null, "tags": [ "cat.text-alternatives", "best-practice" ], "description": "Ensure button and link text is not repeated as image alternative", "help": "Text of buttons and links should not be repeated in the image alternative", "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/image-redundant-alt?application=axe-puppeteer", "nodes": [ { "any": [], "all": [], "none": [ { "id": "duplicate-img-label", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element does not duplicate existing text in alt text" } ], "impact": null, "html": "

A card presents a feature to the user. It is comprised of a title, a description of the feature, action buttons and a link drawer which exposes help or API documentation. Cards can also include toggles and buttons that launch modals.

", "target": [ "p" ] }, { "any": [], "all": [], "none": [ { "id": "duplicate-img-label", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element does not duplicate existing text in alt text" } ], "impact": null, "html": "", "target": [ ".jf" ] }, { "any": [], "all": [], "none": [ { "id": "duplicate-img-label", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element does not duplicate existing text in alt text" } ], "impact": null, "html": "", "target": [ "#card-1-drawer-api" ] }, { "any": [], "all": [], "none": [ { "id": "duplicate-img-label", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element does not duplicate existing text in alt text" } ], "impact": null, "html": "", "target": [ "#card-1-drawer-help" ] } ], "pass": true, "cat": "cat.text-alternatives" } } } ]