Guides, References &amp; Deep-Dives

Accesskey Values Are Unique

Ensure no two elements share the same accesskey value.

All Headings Have Content

Ensure heading elements are not empty.

Allow Users to Paste into Input Fields

Do not block paste on input fields — it harms usability, accessibility, and security.

ARIA Attributes Are Valid and Not Misspelled

Ensure all aria-* attributes are valid and correctly spelled.

ARIA Attributes Have Valid Values

Ensure every ARIA attribute has a valid value for its type.

ARIA Attributes Match Element Roles

Ensure ARIA attributes are conditionally valid for the element's role.

ARIA Attributes Match Their Roles

Ensure every ARIA attribute is allowed on the element's role.

ARIA IDs Are Unique

Ensure IDs used in ARIA attributes are unique in the document.

ARIA Input Fields Have Accessible Names

Ensure every ARIA input field has a discernible accessible name.

ARIA Meter Elements Have Accessible Names

Ensure elements with role=meter have accessible names.

ARIA Progressbar Elements Have Accessible Names

Ensure elements with role=progressbar have accessible names.

ARIA Role Values Are Valid

Ensure all role attribute values are valid WAI-ARIA roles.

ARIA Roles Are in Required Parent Elements

Ensure elements with ARIA roles are nested inside required parent roles.

ARIA Roles Have Required Children

Ensure elements with ARIA roles contain the required child elements.

ARIA Roles Used on Compatible Elements

Ensure ARIA roles are only applied to elements that support them.

ARIA Toggle Fields Have Accessible Names

Ensure ARIA toggle fields like checkboxes and switches have accessible names.

ARIA Tooltip Elements Have Accessible Names

Ensure elements with role=tooltip have accessible names.

ARIA Treeitem Elements Have Accessible Names

Ensure elements with role=treeitem have accessible names.

aria-hidden Is Not on the Body

Ensure aria-hidden is not present on the document body.

Avoid Deprecated APIs

Stop using deprecated web platform APIs before browsers remove them.

Avoid Enormous Network Payloads

Keep total page weight low to ensure fast load times on all connection speeds.

Avoid Large Layout Shifts

Prevent unexpected content movement to improve visual stability and Cumulative Layout Shift (CLS).

Avoid Long Main-Thread Tasks

Break up tasks longer than 50 ms so the browser can respond to user input without delay.

Avoid Multiple Page Redirects

Eliminate unnecessary redirects to reduce time to first byte and speed up page load.

Avoid Non-Composited Animations

Use compositor-friendly CSS properties for animations to prevent jank and keep frame rates smooth.

Avoid Requesting Geolocation on Page Load

Do not request geolocation permission automatically — wait until the user takes a relevant action.

Avoid Requesting Notification Permission on Page Load

Do not prompt users for notification permission until they express interest in receiving updates.

Back/Forward Cache Restoration

Ensure your pages are eligible for the browser's back/forward cache to enable instant navigation.

Background and Foreground Colors Have Sufficient Contrast

Ensure text has enough contrast against its background to be readable.

Buttons Have an Accessible Name

Ensure every button element has a discernible accessible name.

Command Elements Have Accessible Names

Ensure elements with ARIA command roles have accessible names.

Cumulative Layout Shift (CLS)

What CLS measures, how Lighthouse scores it, and how to improve it.

Custom Controls Have ARIA Roles

Ensure custom interactive controls have appropriate ARIA roles.

Custom Controls Have Associated Labels

Ensure custom interactive controls have accessible labels.

Definition Items Are Wrapped in dl Elements

Ensure dt and dd elements are contained within a dl.

Definition Lists Are Properly Structured

Ensure dl elements contain only dt, dd, div, template, or script groups.

Detected JavaScript Libraries

See which JavaScript libraries and frameworks are running on your page.

Dialog Elements Have Accessible Names

Ensure elements with role=dialog or role=alertdialog have accessible names.

Display Images with Correct Aspect Ratio

Ensure rendered images match their natural aspect ratio to prevent visual distortion.

Document Has a Main Landmark

Ensure the page contains exactly one main landmark region.

Document Has a Meta Description

Add a concise meta description to improve how your page appears in search results.

Document Has a Title Element

Ensure the HTML document has a non-empty title element.

Document Has a Valid hreflang

Use correct hreflang annotations to serve the right language version to users in different regions.

Document Has a Valid rel=canonical

Set a canonical URL to prevent duplicate content issues and consolidate ranking signals.

Document Request Latency

Checks how long the server takes to respond with the main HTML document and flags slow responses.

Duplicated JavaScript

Detects JavaScript modules that are included more than once in your bundles, wasting bytes and parse time.

Elements Use Only Permitted ARIA Attributes

Ensure elements don't use ARIA attributes that are prohibited for their role.

Ensure CSP Is Effective Against XSS Attacks

Deploy a Content Security Policy that blocks inline scripts and untrusted sources to prevent XSS.

Ensure Proper Origin Isolation with COOP

Set the Cross-Origin-Opener-Policy header to isolate your browsing context from cross-origin windows.

First Contentful Paint (FCP)

What FCP measures, how Lighthouse scores it, and how to improve it.

Focus Is Directed to New Content

Ensure focus moves to new content when it appears on the page.

Font Display

Checks whether custom fonts use font-display to avoid invisible text during loading.

Forced Reflow

Detects JavaScript that forces the browser to recalculate layout synchronously, causing jank and long tasks.

Form Elements Have Associated Labels

Ensure every form element has an associated label.

Frames Have a Title

Ensure iframe and frame elements have a descriptive title attribute.

Headings Appear in Sequential Order

Ensure heading levels do not skip (e.g., h1 to h3).

Hidden Elements Don't Contain Focusable Content

Ensure aria-hidden elements don't contain focusable interactive content.

HTML Element Has a lang Attribute

Ensure the html element has a lang attribute.

HTML lang and xml:lang Match

Ensure lang and xml:lang attributes on the html element have the same value.

HTML lang Attribute Is Valid

Ensure the html lang attribute uses a valid BCP 47 language tag.

HTML5 Landmark Elements Improve Navigation

Use landmark elements to define page regions for assistive technology.

Identical Links Have the Same Purpose

Ensure links with the same text all point to the same destination.

Image Elements Have Alt Attributes

Ensure every image element has an alt attribute.

Image Elements Need Explicit Width and Height

Set width and height attributes on images to prevent layout shifts when images load.

Image Inputs Have Alt Text

Ensure input elements with type=image have alt attributes.

Images Don't Have Redundant Alt Text

Ensure image alt text doesn't duplicate surrounding text content.

Improve Image Delivery

Flags images that use outdated formats, are not properly sized, or lack compression.

INP Breakdown

Breaks down the phases of Interaction to Next Paint to show where interaction delays originate.

Input Buttons Have Discernible Text

Ensure input elements with type=button, submit, or reset have accessible names.

Interaction to Next Paint (INP)

What INP measures, how Lighthouse scores it, and how to improve it.

Interactive Controls Are Keyboard Focusable

Ensure all interactive controls can receive keyboard focus.

Interactive Elements Indicate Purpose and State

Ensure interactive elements visually communicate their function and current state.

JavaScript Execution Time

Reduce the time the browser spends parsing, compiling, and executing JavaScript to improve responsiveness.

lang Attributes Have Valid Values

Ensure all elements with a lang attribute use valid BCP 47 tags.

Largest Contentful Paint (LCP)

What LCP measures, how Lighthouse scores it, and how to improve it.

Layout Shift Culprits

Identifies the DOM elements responsible for unexpected layout shifts during page load.

LCP Breakdown

Decomposes Largest Contentful Paint into sub-parts to pinpoint the slowest phase of your LCP element's load.

LCP Request Discovery

Checks whether the browser can discover the LCP resource early enough to start downloading it without delay.

Legacy JavaScript

Flags JavaScript bundles that ship polyfills and transpiled syntax unnecessary for modern browsers.

Links Are Distinguishable Without Color

Ensure links within text blocks are identifiable by more than color alone.

Links Have a Discernible Name

Ensure every anchor element has a discernible accessible name.

Links Have Descriptive Text

Use meaningful anchor text so users and search engines understand where each link leads.

List Items Are in Proper Parent Elements

Ensure li elements are contained within ul, ol, or menu.

Lists Contain Only Proper Elements

Ensure ul and ol elements only contain li, script, or template children.

Max Potential First Input Delay (Max Potential FID)

What Max Potential FID measures, how Lighthouse scores it, and how to improve it.

Minify CSS

Remove unnecessary characters from CSS files to reduce network payload and speed up page load.

Minify JavaScript

Remove unnecessary characters from JavaScript files to reduce transfer size and improve load performance.

Minimize Main-Thread Work

Reduce the total amount of work the browser's main thread performs during page load to improve responsiveness.

Mitigate Clickjacking with XFO or CSP

Prevent your page from being embedded in malicious iframes by setting X-Frame-Options or CSP frame-ancestors.

Mitigate DOM-Based XSS with Trusted Types

Enforce Trusted Types to prevent DOM-based cross-site scripting attacks.

Modern HTTP

Checks whether your server uses HTTP/2 or HTTP/3 to deliver resources efficiently.

Network Dependency Tree

Visualizes the critical request chain to identify resources that block page rendering.

No Browser Errors in the Console

Ensure your page loads without logging errors to the browser console.

No Deprecated ARIA Roles

Ensure elements don't use ARIA roles that have been deprecated.

No Element Has tabindex Greater Than Zero

Ensure no element uses a positive tabindex value.

No Form Fields Have Multiple Labels

Ensure form fields are not associated with more than one label element.

No Meta Refresh Redirect

Ensure the page does not use a timed meta refresh redirect.

Object Elements Have Alternate Text

Ensure object elements have text alternatives for accessibility.

Offscreen Content Is Hidden from Assistive Technology

Ensure content moved offscreen is invisible to screen readers.

Optimize DOM Size

Flags pages with an excessively large DOM tree that slows rendering, layout calculations, and memory usage.

Optimize Viewport for Mobile

Checks whether your page has a properly configured viewport meta tag for mobile devices.

Page Has a Logical Tab Order

Ensure the tab order follows the visual layout of the page.

Page Has a Skip Link or Landmark

Ensure users can bypass repeated navigation blocks.

Page Has Successful HTTP Status Code

Verify your page returns a 2xx HTTP status code so search engines can index it.

Page Has the HTML Doctype

Include a DOCTYPE declaration to prevent the browser from falling into quirks mode.

Page Has Valid Source Maps

Verify that all JavaScript source maps are valid and correctly linked.

Page Isn't Blocked from Indexing

Ensure search engines can crawl and index your page by removing blocking directives.

Properly Defines Charset

Declare a character encoding early in your HTML to ensure text renders correctly.

Redirects HTTP Traffic to HTTPS

Automatically redirect all HTTP requests to HTTPS to ensure encrypted connections.

Reduce Server Response Time (TTFB)

Minimize Time to First Byte so the browser can start rendering the page sooner.

Reduce Unused CSS

Remove CSS rules that are never applied to reduce render-blocking payload and speed up first paint.

Reduce Unused JavaScript

Remove JavaScript that is downloaded but never executed to cut load time and reduce main-thread work.

Render Blocking Requests

Identifies CSS and JavaScript resources that block the browser from rendering the page.

robots.txt Is Valid

Ensure your robots.txt file is correctly formatted so search engines can parse your crawl directives.

role=text Elements Don't Have Focusable Children

Ensure elements with role=text contain no focusable descendants.

Roles Have All Required ARIA Attributes

Ensure elements with ARIA roles include all required attributes for that role.

Select Elements Have Associated Labels

Ensure every select element has an associated accessible label.

Serve Images with Appropriate Resolution

Deliver images sized for the user's viewport to avoid wasting bandwidth on oversized files.

Skip Links Are Focusable

Ensure skip navigation links are focusable and become visible on focus.

Speed Index (SI)

What SI measures, how Lighthouse scores it, and how to improve it.

Structured Data Is Valid

Add valid structured data to help search engines understand your content and enable rich results.

Table Cells Have Headers

Ensure every non-empty table data cell has an associated header.

Table Cells Reference Headers in Same Table

Ensure td headers attributes point to th elements in the same table.

Table Headers Have Data Cells

Ensure every th element in a table has associated data cells.

Tables Have Unique Summary and Caption

Ensure tables do not have identical summary and caption attributes.

Tables Use Caption Instead of Colspan Cells

Ensure tables use the caption element rather than cells spanning all columns as a title.

Third-Party Impact

Measures the performance cost of third-party scripts loaded on your page.

Time to Interactive (TTI)

What TTI measures, how Lighthouse scores it, and how to improve it.

Total Blocking Time (TBT)

What TBT measures, how Lighthouse scores it, and how to improve it.

Touch Targets Have Sufficient Size

Ensure interactive elements are large enough to tap accurately.

Use a Strong HSTS Policy

Enable HTTP Strict Transport Security to force browsers to always connect over HTTPS.

Use Efficient Cache Lifetimes

Checks whether your static assets use long cache lifetimes so repeat visitors load pages faster.

User Focus Is Not Trapped in a Region

Ensure keyboard users can always move focus away from any element.

User Timing Marks and Measures

Use the User Timing API to instrument custom performance milestones and measure what matters to your app.

Uses HTTPS

Serve your site over HTTPS to protect user data and meet modern browser requirements.

Videos Have Captions

Ensure video elements include a track element with captions.

Viewport Does Not Disable Zoom

Ensure the viewport meta tag allows users to zoom in.

Visible Labels Match Accessible Names

Ensure an element's visible text is included in its accessible name.

Visual Order Follows DOM Order

Ensure the visual presentation order matches the DOM source order.