",
"nodeLabel": "example.js\nexample.php\nconst sha256 = require( 'js-sha256' );\n\nfunction getGrav…",
"explanation": "Fix all of the following:\n Focusable content should have tabindex=\"-1\" or be removed from the DOM"
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"type": "node",
"lhId": "1-1-PRE",
"path": "1,HTML,1,BODY,8,SECTION,0,DIV,0,DIV,1,DIV,1,DIV,3,DIV,0,DIV,1,PRE",
"selector": "div.g-editor > div.g-editor-content > div.g-editor-content__tab > pre.g-editor-content__tab__code",
"boundingRect": {
"top": 4999,
"bottom": 5265,
"left": 20,
"right": 446,
"width": 426,
"height": 266
},
"snippet": "
",
"nodeLabel": "const sha256 = require( 'js-sha256' );\n\nfunction getGravatarURL( email ) {\n //…"
}
},
{
"relatedNode": {
"type": "node",
"lhId": "1-2-PRE",
"path": "1,HTML,1,BODY,8,SECTION,0,DIV,0,DIV,1,DIV,1,DIV,3,DIV,1,DIV,1,PRE",
"selector": "div.g-editor > div.g-editor-content > div.g-editor-content__tab > pre.g-editor-content__tab__code",
"boundingRect": {
"top": 4999,
"bottom": 5227,
"left": 20,
"right": 396,
"width": 376,
"height": 228
},
"snippet": "",
"nodeLabel": "function get_gravatar_url( $email ) {\n // Trim leading and trailing whitespace…"
}
}
]
}
}
],
"debugData": {
"type": "debugdata",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"RGAAv4",
"RGAA-10.8.1"
]
}
}
},
"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 about input field labels](https://dequeuniversity.com/rules/axe/4.11/aria-input-field-name).",
"score": null,
"scoreDisplayMode": "notApplicable"
},
"aria-meter-name": {
"id": "aria-meter-name",
"title": "ARIA `meter` elements have accessible names",
"description": "When a meter element 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 how to name `meter` elements](https://dequeuniversity.com/rules/axe/4.11/aria-meter-name).",
"score": null,
"scoreDisplayMode": "notApplicable"
},
"aria-progressbar-name": {
"id": "aria-progressbar-name",
"title": "ARIA `progressbar` elements have accessible names",
"description": "When a `progressbar` element 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 how to label `progressbar` elements](https://dequeuniversity.com/rules/axe/4.11/aria-progressbar-name).",
"score": null,
"scoreDisplayMode": "notApplicable"
},
"aria-prohibited-attr": {
"id": "aria-prohibited-attr",
"title": "Elements use only permitted ARIA attributes",
"description": "Using ARIA attributes in roles where they are prohibited can mean that important information is not communicated to users of assistive technologies. [Learn more about prohibited ARIA roles](https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr).",
"score": 1,
"scoreDisplayMode": "binary",
"details": {
"type": "table",
"headings": [
{
"key": "node",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
},
"label": "Failing Elements"
}
],
"items": []
}
},
"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 about roles and required attributes](https://dequeuniversity.com/rules/axe/4.11/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 about roles and required children elements](https://dequeuniversity.com/rules/axe/4.11/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 about ARIA roles and required parent element](https://dequeuniversity.com/rules/axe/4.11/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 about valid ARIA roles](https://dequeuniversity.com/rules/axe/4.11/aria-roles).",
"score": null,
"scoreDisplayMode": "notApplicable"
},
"aria-text": {
"id": "aria-text",
"title": "Elements with the `role=text` attribute do not have focusable descendents.",
"description": "Adding `role=text` around a text node split by markup enables VoiceOver to treat it as one phrase, but the element's focusable descendents will not be announced. [Learn more about the `role=text` attribute](https://dequeuniversity.com/rules/axe/4.11/aria-text).",
"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 about toggle fields](https://dequeuniversity.com/rules/axe/4.11/aria-toggle-field-name).",
"score": null,
"scoreDisplayMode": "notApplicable"
},
"aria-tooltip-name": {
"id": "aria-tooltip-name",
"title": "ARIA `tooltip` elements have accessible names",
"description": "When a tooltip element 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 how to name `tooltip` elements](https://dequeuniversity.com/rules/axe/4.11/aria-tooltip-name).",
"score": null,
"scoreDisplayMode": "notApplicable"
},
"aria-treeitem-name": {
"id": "aria-treeitem-name",
"title": "ARIA `treeitem` elements have accessible names",
"description": "When a `treeitem` element 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 about labeling `treeitem` elements](https://dequeuniversity.com/rules/axe/4.11/aria-treeitem-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 about valid values for ARIA attributes](https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value).",
"score": 1,
"scoreDisplayMode": "binary",
"details": {
"type": "table",
"headings": [
{
"key": "node",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
},
"label": "Failing Elements"
}
],
"items": []
}
},
"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 about valid ARIA attributes](https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr).",
"score": 1,
"scoreDisplayMode": "binary",
"details": {
"type": "table",
"headings": [
{
"key": "node",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
},
"label": "Failing Elements"
}
],
"items": []
}
},
"button-name": {
"id": "button-name",
"title": "Buttons do not 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 how to make buttons more accessible](https://dequeuniversity.com/rules/axe/4.11/button-name).",
"score": 0,
"scoreDisplayMode": "binary",
"details": {
"type": "table",
"headings": [
{
"key": "node",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
},
"label": "Failing Elements"
}
],
"items": [
{
"node": {
"type": "node",
"lhId": "1-3-BUTTON",
"path": "1,HTML,1,BODY,0,DIV,0,NAV,2,DIV,1,BUTTON",
"selector": "div#unified-header > nav.site-nav > div.g-header-menu > button.g-header-menu__trigger",
"boundingRect": {
"top": 12,
"bottom": 52,
"left": 339,
"right": 379,
"width": 40,
"height": 40
},
"snippet": "![\"Tina](\"/images/homepage/card-tina.png\")
",
"nodeLabel": "Tina Wells"
},
"subItems": {
"type": "subitems",
"items": [
{
"failureReason": "Unsupported CSS Property: z-index",
"animation": "z-index"
}
]
}
},
{
"node": {
"type": "node",
"lhId": "page-6-IMG",
"path": "1,HTML,1,BODY,2,SECTION,0,DIV,0,DIV,1,DIV,0,IMG",
"selector": "div.g-wrapper > div.g-columns > div.g-hero-cards > img.g-hero-cards__card",
"boundingRect": {
"top": 0,
"bottom": 0,
"left": 0,
"right": 0,
"width": 0,
"height": 0
},
"snippet": "![\"Joe](\"/images/homepage/card-joe.png\")
",
"nodeLabel": "Joe Casabona"
},
"subItems": {
"type": "subitems",
"items": [
{
"failureReason": "Unsupported CSS Property: z-index",
"animation": "z-index"
}
]
}
},
{
"node": {
"type": "node",
"lhId": "page-5-IMG",
"path": "1,HTML,1,BODY,2,SECTION,0,DIV,0,DIV,1,DIV,1,IMG",
"selector": "div.g-wrapper > div.g-columns > div.g-hero-cards > img.g-hero-cards__card",
"boundingRect": {
"top": 577,
"bottom": 964,
"left": 69,
"right": 342,
"width": 273,
"height": 387
},
"snippet": "![\"Sofia](\"/images/homepage/card-sofia.png\")
",
"nodeLabel": "Sofia Marinos"
},
"subItems": {
"type": "subitems",
"items": [
{
"failureReason": "Unsupported CSS Property: z-index",
"animation": "z-index"
}
]
}
}
]
},
"guidanceLevel": 2
},
"unsized-images": {
"id": "unsized-images",
"title": "Image elements do not have explicit `width` and `height`",
"description": "Set an explicit width and height on image elements to reduce layout shifts and improve CLS. [Learn how to set image dimensions](https://web.dev/articles/optimize-cls#images_without_dimensions)",
"score": 0.5,
"scoreDisplayMode": "metricSavings",
"metricSavings": {
"CLS": 0
},
"details": {
"type": "table",
"headings": [
{
"key": "node",
"valueType": "node",
"label": ""
},
{
"key": "url",
"valueType": "url",
"label": "URL"
}
],
"items": [
{
"url": "https://gravatar.com/images/homepage/profile-tina-small.png",
"node": {
"type": "node",
"lhId": "1-63-IMG",
"path": "1,HTML,1,BODY,5,SECTION,2,DIV,0,DIV,1,DIV,1,IMG",
"selector": "div.g-wrapper > div.g-columns > div > img.profile-card--small",
"boundingRect": {
"top": 2314,
"bottom": 3007,
"left": 20,
"right": 392,
"width": 372,
"height": 693
},
"snippet": "![\"Tina](\"/images/homepage/profile-tina-small.png\")
",
"nodeLabel": "Tina Wells profile"
}
},
{
"url": "https://gravatar.com/images/homepage/card-placeholder.png",
"node": {
"type": "node",
"lhId": "1-59-IMG",
"path": "1,HTML,1,BODY,2,SECTION,0,DIV,0,DIV,1,DIV,5,IMG",
"selector": "div.g-wrapper > div.g-columns > div.g-hero-cards > img.g-hero-cards__card-placeholder",
"boundingRect": {
"top": 512,
"bottom": 1029,
"left": 24,
"right": 388,
"width": 364,
"height": 517
},
"snippet": "![\"\"](\"/images/homepage/card-placeholder.png\")
",
"nodeLabel": "div.g-wrapper > div.g-columns > div.g-hero-cards > img.g-hero-cards__card-placeholder"
}
},
{
"url": "https://gravatar.com/icons/privacy-options.svg",
"node": {
"type": "node",
"lhId": "1-72-IMG",
"path": "1,HTML,1,BODY,12,FOOTER,0,DIV,0,DIV,1,DIV,3,DIV,1,UL,5,LI,0,A,1,IMG",
"selector": "ul > li#ccpa-donotsell > a > img",
"boundingRect": {
"top": 7292,
"bottom": 7307,
"left": 175,
"right": 208,
"width": 32,
"height": 15
},
"snippet": "![\"Privacy](\"/icons/privacy-options.svg\"){kind=icon}
",
"nodeLabel": "Privacy options icon"
}
},
{
"url": "",
"node": {
"type": "node",
"lhId": "1-64-IMG",
"path": "1,HTML,1,BODY,10,SECTION,0,DIV,0,DIV,1,DIV,0,IMG",
"selector": "div.g-wrapper > div.g-columns > div.g-avatar-wall > img",
"boundingRect": {
"top": 6225,
"bottom": 6225,
"left": 20,
"right": 124,
"width": 104,
"height": 0
},
"snippet": "