Boxes mark elements that failed a check. Hover or focus an element
in the lists below to highlight it here.
Accessibility — 4 failing checks
1Finding 1:
`[aria-hidden="true"]` elements contain focusable descendents
Focusable descendents within an `[aria-hidden="true"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn how `aria-hidden` affects focusable elements.
Fix all of the following:
Focusable content should be disabled or be removed from the DOM
2Finding 2:
Links do not have a discernible name
Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
3Finding 3:
Heading elements are not in a sequentially-descending order
Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn more about heading order.
Measured in a simulated mobile environment. These are
readings, not checks — treat them as context for the performance
score rather than defects to close.
2.4 sFirst Contentful Paint
7.9 sLargest Contentful Paint
140 msTotal Blocking Time
0.086Cumulative Layout Shift
4.2 sSpeed Index
Performance — 11 opportunities
Forced reflow
A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about forced reflows and possible mitigations.
Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process to not transpile Baseline features, unless you know you must support older browsers. Learn why most sites can deploy ES6+ code without transpiling
Avoid chaining critical requests by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.
Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS.
Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.
Fix any of the following:
Element has insufficient color contrast of 4.28 (foreground color: #9b9b9b, background color: #373737, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
Fix any of the following:
Element has insufficient color contrast of 1.67 (foreground color: #ffffff, background color: #8bd4de, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
2Finding 2:
`[aria-hidden="true"]` elements contain focusable descendents
Focusable descendents within an `[aria-hidden="true"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn how `aria-hidden` affects focusable elements.
Fix all of the following:
Focusable content should be disabled or be removed from the DOM
3Finding 3:
Links do not have a discernible name
Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
4Finding 4:
Heading elements are not in a sequentially-descending order
Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn more about heading order.
Measured in a simulated desktop environment. These are
readings, not checks — treat them as context for the performance
score rather than defects to close.
0.6 sFirst Contentful Paint
1.2 sLargest Contentful Paint
60 msTotal Blocking Time
0.075Cumulative Layout Shift
0.6 sSpeed Index
Performance — 9 opportunities
Image elements do not have explicit `width` and `height`
Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn how to set image dimensions
Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process to not transpile Baseline features, unless you know you must support older browsers. Learn why most sites can deploy ES6+ code without transpiling
Avoid chaining critical requests by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.
Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS.
Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.
