", "boundingRect": { "top": 200, "bottom": 272, "left": 15, "right": 345, "width": 330, "height": 72 } } } ] } }, "layout-shift-elements": { "id": "layout-shift-elements", "title": "Avoid large layout shifts", "description": "These DOM elements contribute most to the CLS of the page.", "score": null, "scoreDisplayMode": "notApplicable", "details": { "type": "table", "headings": [], "items": [] } }, "long-tasks": { "id": "long-tasks", "title": "Avoid long main-thread tasks", "description": "Lists the longest tasks on the main thread, useful for identifying worst contributors to input delay. [Learn more](https://web.dev/long-tasks-devtools/)", "score": null, "scoreDisplayMode": "notApplicable", "details": { "type": "table", "headings": [], "items": [] } }, "non-composited-animations": { "id": "non-composited-animations", "title": "Avoid non-composited animations", "description": "Animations which are not composited can be janky and increase CLS. [Learn more](https://web.dev/non-composited-animations)", "score": null, "scoreDisplayMode": "notApplicable", "details": { "type": "table", "headings": [], "items": [] } }, "large-javascript-libraries": { "id": "large-javascript-libraries", "title": "Avoids large JavaScript libraries with smaller alternatives", "description": "Large JavaScript libraries can lead to poor performance. Prefer smaller, functionally equivalent libraries to reduce your bundle size. [Learn more](https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size#optimize_dependencies).", "score": 1, "scoreDisplayMode": "binary", "displayValue": "0 large libraries found", "details": { "type": "table", "headings": [], "items": [], "summary": {} } }, "accesskeys": { "id": "accesskeys", "title": "`[accesskey]` values are unique", "description": "Access keys let users quickly focus a part of the page. For proper navigation, each access key must be unique. [Learn more](https://web.dev/accesskeys/).", "score": null, "scoreDisplayMode": "notApplicable" }, "aria-allowed-attr": { "id": "aria-allowed-attr", "title": "`[aria-*]` attributes match their roles", "description": "Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. [Learn more](https://web.dev/aria-allowed-attr/).", "score": null, "scoreDisplayMode": "notApplicable" }, "aria-hidden-body": { "id": "aria-hidden-body", "title": "`[aria-hidden=\"true\"]` is not present on the document `
`", "description": "Assistive technologies, like screen readers, work inconsistently when `aria-hidden=\"true\"` is set on the document ``. [Learn more](https://web.dev/aria-hidden-body/).", "score": 1, "scoreDisplayMode": "binary", "details": { "type": "table", "headings": [], "items": [] } }, "aria-hidden-focus": { "id": "aria-hidden-focus", "title": "`[aria-hidden=\"true\"]` elements do not contain focusable descendents", "description": "Focusable descendents within an `[aria-hidden=\"true\"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers. [Learn more](https://web.dev/aria-hidden-focus/).", "score": 1, "scoreDisplayMode": "binary", "details": { "type": "table", "headings": [], "items": [] } }, "aria-input-field-name": { "id": "aria-input-field-name", "title": "ARIA input fields have accessible names", "description": "When an input field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://web.dev/aria-input-field-name/).", "score": null, "scoreDisplayMode": "notApplicable" }, "aria-required-attr": { "id": "aria-required-attr", "title": "`[role]`s have all required `[aria-*]` attributes", "description": "Some ARIA roles have required attributes that describe the state of the element to screen readers. [Learn more](https://web.dev/aria-required-attr/).", "score": null, "scoreDisplayMode": "notApplicable" }, "aria-required-children": { "id": "aria-required-children", "title": "Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children.", "description": "Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. [Learn more](https://web.dev/aria-required-children/).", "score": null, "scoreDisplayMode": "notApplicable" }, "aria-required-parent": { "id": "aria-required-parent", "title": "`[role]`s are contained by their required parent element", "description": "Some ARIA child roles must be contained by specific parent roles to properly perform their intended accessibility functions. [Learn more](https://web.dev/aria-required-parent/).", "score": null, "scoreDisplayMode": "notApplicable" }, "aria-roles": { "id": "aria-roles", "title": "`[role]` values are valid", "description": "ARIA roles must have valid values in order to perform their intended accessibility functions. [Learn more](https://web.dev/aria-roles/).", "score": null, "scoreDisplayMode": "notApplicable" }, "aria-toggle-field-name": { "id": "aria-toggle-field-name", "title": "ARIA toggle fields have accessible names", "description": "When a toggle field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://web.dev/aria-toggle-field-name/).", "score": null, "scoreDisplayMode": "notApplicable" }, "aria-valid-attr-value": { "id": "aria-valid-attr-value", "title": "`[aria-*]` attributes have valid values", "description": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values. [Learn more](https://web.dev/aria-valid-attr-value/).", "score": null, "scoreDisplayMode": "notApplicable" }, "aria-valid-attr": { "id": "aria-valid-attr", "title": "`[aria-*]` attributes are valid and not misspelled", "description": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid names. [Learn more](https://web.dev/aria-valid-attr/).", "score": null, "scoreDisplayMode": "notApplicable" }, "button-name": { "id": "button-name", "title": "Buttons have an accessible name", "description": "When a button doesn't have an accessible name, screen readers announce it as \"button\", making it unusable for users who rely on screen readers. [Learn more](https://web.dev/button-name/).", "score": null, "scoreDisplayMode": "notApplicable" }, "bypass": { "id": "bypass", "title": "The page contains a heading, skip link, or landmark region", "description": "Adding ways to bypass repetitive content lets keyboard users navigate the page more efficiently. [Learn more](https://web.dev/bypass/).", "score": 1, "scoreDisplayMode": "binary", "details": { "type": "table", "headings": [], "items": [] } }, "color-contrast": { "id": "color-contrast", "title": "Background and foreground colors do not have a sufficient contrast ratio.", "description": "Low-contrast text is difficult or impossible for many users to read. [Learn more](https://web.dev/color-contrast/).", "score": 0, "scoreDisplayMode": "binary", "details": { "type": "table", "headings": [ { "key": "node", "itemType": "node", "text": "Failing Elements" } ], "items": [ { "node": { "type": "node", "selector": "#status-field", "path": "1,HTML,1,BODY,3,DIV,0,DIV,1,DIV,0,DL,1,DD,0,STRONG", "snippet": "\n RESOLVED\n \n FIXED\n \n ", "boundingRect": { "top": 441, "bottom": 463, "left": 15, "right": 146, "width": 131, "height": 22 }, "explanation": "Fix any of the following:\n Element has insufficient color contrast of 3.13 (foreground color: #28a745, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1", "nodeLabel": "RESOLVED FIXED" } }, { "node": { "type": "node", "selector": "strong:nth-child(2)", "path": "1,HTML,1,BODY,3,DIV,1,DIV,0,DIV,57,DIV,0,H4,1,STRONG", "snippet": "\n \n REPORTED\n \n ", "boundingRect": { "top": 28944, "bottom": 28966, "left": 105, "right": 192, "width": 87, "height": 22 }, "explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.97 (foreground color: #28a745, background color: #f8f9fa, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1", "nodeLabel": "REPORTED " } }, { "node": { "type": "node", "selector": "strong:nth-child(4)", "path": "1,HTML,1,BODY,3,DIV,1,DIV,0,DIV,57,DIV,0,H4,3,STRONG", "snippet": "\n \n FIXED\n \n ", "boundingRect": { "top": 28944, "bottom": 28966, "left": 211, "right": 256, "width": 46, "height": 22 }, "explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.97 (foreground color: #28a745, background color: #f8f9fa, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1", "nodeLabel": "FIXED" } } ], "debugData": { "type": "debugdata", "impact": "serious", "tags": [ "cat.color", "wcag2aa", "wcag143" ] } } }, "definition-list": { "id": "definition-list", "title": "`