Skip to content
https://w3schools.com

Accessibility

· 13 checks — Landmarks, headings, alt text, forms, and link quality rolled into one auditable list.
SCORE
54
GRADE
F
FIX
6
REVIEW
3
PASS
4
INFO
0
Checks
13
4 PASS 3 REVIEW 6 FIX
D
Landmark Structure
Action
7 landmarks
FIX
7 landmarks
Critical::
No <main> landmark found
Screen reader users cannot quickly navigate to the primary content. Wrap your main content in <main>.
Info::
7 <nav> landmark(s) found
Warning::
2 of 7 <nav> elements are unlabeled
Multiple navigations need aria-label to distinguish them for screen readers.
Info::
No banner (header) landmark
Info::
No contentinfo (footer) landmark
Warning::
Skip navigation link is missing (WCAG 2.4.1)
Add a skip link as the first focusable element so keyboard users can bypass repeated navigation.
Page Structure — as a screen reader sees it
BANNER (missing!) NAV MAIN (missing!) CONTENTINFO (missing!)

Screen reader users cannot quickly navigate to the primary content. Wrap your main content in <main>.

Why this matters

Without a <main> landmark, screen-reader users can't skip past the navigation to the page content — every page starts with re-reading the menu.

Learn more ▾

The <main> element marks the page's primary content area. Assistive tech offers a 'jump to main' shortcut — but only if <main> exists. Without it, every page navigation forces re-reading the header. Wrap your primary content in a single <main>.

Source: WAI-ARIA / WCAG 2.4.1

Multiple navigations need aria-label to distinguish them for screen readers.

Why this matters

Some <nav> elements lack aria-label — screen-reader users hear 'navigation' multiple times with no way to distinguish them.

Learn more ▾

When a page has multiple <nav> regions (primary, footer, breadcrumb), each needs aria-label or aria-labelledby. AT users navigate by landmark; identical 'navigation' announcements force them to enter each one to discover purpose.

Source: WAI-ARIA Authoring Practices

Add a skip link as the first focusable element so keyboard users can bypass repeated navigation.

Why this matters

Without a skip-nav link, keyboard users tab through every nav item before reaching content — every page, every visit.

Learn more ▾

WCAG 2.4.1 (Bypass Blocks) requires a mechanism to skip past repeated content. The standard implementation is a 'Skip to main content' link that's the first focusable element, visually hidden until focused. Three lines of HTML + four of CSS.

Source: WCAG 2.1 SC 2.4.1

F
Heading Hierarchy
Action
159 headings, 24 skip(s)
FIX
159 headings, 24 skip(s)
Warning::
Multiple H1 headings (14 found)
A page should have only one H1. Multiple H1s dilute the document outline.
Warning::
Heading level skipped: H2 → H4 (missing H3)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H3 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H3 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H3 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H3 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H3 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H3 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H2 → H5 (missing H3)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H2 → H5 (missing H3)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H2 → H5 (missing H3)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H2 → H5 (missing H3)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H2 → H5 (missing H3)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H2 → H5 (missing H3)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H4 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H4 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H3 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H3 → H5 (missing H4)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H3 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H4 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H2 → H4 (missing H3)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H1 → H4 (missing H2)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H2 → H4 (missing H3)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H4 → H6 (missing H5)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Warning::
Heading level skipped: H2 → H5 (missing H3)
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
  • H2 Tutorials
  • H3 HTML and CSS
  • H3 Data Analytics
  • H3 Web Building
  • H3 JavaScript
  • H3 Web Building
  • H3 Backend
  • H3 Data Analytics
  • H3 Web Building
  • H2 References
  • H3 HTML and CSS
  • H3 JavaScript
  • H3 Backend
  • H2 Exercises
  • H3 HTML and CSS
  • H3 Data Analytics
  • H3 JavaScript
  • H3 Backend
  • H3 Data Analytics
  • H2 Certificates
  • H3 HTML and CSS
  • H3 Data Analytics
  • H3 Programs
  • H3 JavaScript
  • H3 Programs
  • H3 Programs
  • H3 Backend
  • H3 Data Analytics
  • H2 All Our Services
  • H4 Free Tutorials skipped
  • H4 References
  • H4 Create a Website
  • H4 Exercises
  • H4 Quizzes
  • H4 Code Challenges
  • H4 Get Certified
  • H4 Log in / Sign Up
  • H4 League
  • H4 Upgrade
  • H4 Where To Start
  • H4 Code Editor (Try it)
  • H4 Bootcamps
  • H4 Templates
  • H4 Web Hosting
  • H4 Create a Server
  • H4 How To's
  • H4 CSS Framework
  • H4 Videos
  • H4 Browser Statistics
  • H4 Typing Speed
  • H4 Color Picker
  • H4 Newsletter
  • H4 Emojis Reference
  • H4 Code Game
  • H4 UTF-8 Reference
  • H4 Community
  • H4 Teachers
  • H4 For Businesses
  • H4 Contact Us
  • H4 Web Developer Tools
  • H1 Learn to Code
  • H3 With the world's largest web developer site. skipped
  • H4 Not Sure Where To Begin?
  • H1 HTML duplicate H1
  • H3 HTML Example: skipped
  • H1 CSS duplicate H1
  • H3 CSS Example: skipped
  • H1 JavaScript duplicate H1
  • H3 JavaScript Example: skipped
  • H1 Python duplicate H1
  • H3 Python Example: skipped
  • H1 SQL duplicate H1
  • H3 SQL Example: skipped
  • H2 PHP
  • H5 A web server programming language skipped
  • H2 jQuery
  • H5 A JS library for developing web pages skipped
  • H2 Java
  • H5 A programming language skipped
  • H2 C++
  • H5 A programming language skipped
  • H2 W3.CSS
  • H5 A CSS framework for faster and better responsive web pages skipped
  • H2 Bootstrap
  • H5 A CSS framework for designing better web pages skipped
  • H2 C
  • H2 C#
  • H2 R
  • H2 Kotlin
  • H2 Node.js
  • H2 React
  • H2 JSON
  • H2 Vue
  • H2 MySQL
  • H2 XML
  • H2 Sass
  • H2 Icons
  • H2 RWD
  • H2 Graphics
  • H2 SVG
  • H2 Canvas
  • H2 Raspberry Pi
  • H2 Cyber Security
  • H2 Colors
  • H2 Git
  • H2 Matplotlib
  • H2 NumPy
  • H2 Pandas
  • H2 SciPy
  • H2 ASP
  • H2 AngularJS
  • H2 AppML
  • H2 Go
  • H2 TypeScript
  • H2 Django
  • H2 MongoDB
  • H2 Statistics
  • H2 Data Science
  • H2 PostgreSQL
  • H2 HowTo
  • H2 Rust
  • H2 Spaces
  • H2 Typing Speed
  • H2 Excel
  • H2 DSA - Data Structures and Algorithms
  • H2 Machine Learning
  • H2 Artificial Intelligence
  • H2 Introduction to Programming
  • H2 Bash
  • H2 Swift
  • H2 Angular
  • H1 Log in / Sign Up duplicate H1
  • H4 Create an account to track your progress, get your own website,and get access to more features and learning materials: skipped
  • H1 Code Editor duplicate H1
  • H4 With our online code editor, you can edit code and view the result in your browser skipped
  • H1 W3Schools Spaces duplicate H1
  • H3 If you want to create your own website, check out W3Schools Spaces. skipped
  • H5 No installation required - just open your browser and start coding: skipped
  • H1 Become a Plus User duplicate H1
  • H3 And unlock powerful features: skipped
  • H1 For Teachers duplicate H1
  • H1 Color Picker duplicate H1
  • H4 W3Schools' famous color picker: skipped
  • H1 Code Game duplicate H1
  • H2 Help the Lynx collect pine cones!
  • H2 Exercises and Quizzes
  • H4 Test your skills! skipped
  • H1 Web Templates duplicate H1
  • H4 Browse our selection of free responsive HTML Templates skipped
  • H2 Kickstart your career
  • H2 How To Section
  • H4 Code snippets for HTML, CSS and JavaScript skipped
  • H6 For example, how to create a slideshow: skipped
  • H2 Contact Sales
  • H2 Report Error
  • H5 Top Tutorials skipped
  • H5 Top References
  • H5 Top Examples
  • H5 Get Certified

A page should have only one H1. Multiple H1s dilute the document outline.

Why this matters

Multiple H1s blur the page's primary topic — screen-reader users and Google both prefer one H1.

Learn more ▾

HTML5's outline algorithm technically allows multiple H1s within sectioning content, but no browser implements it. In practice: one H1 per page. Use H2-H6 for subsections.

Source: WCAG 2.4.6 / Google Search Central

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.

Why this matters

Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.

Learn more ▾

Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.

Source: WCAG 2.1 SC 1.3.1 / W3C WAI

D
Dark Mode Support
Action
Theme color only
FIX
Theme color only
Info::
Theme-color present but no dark variant
A theme-color is set but no dark-specific variant was found. The browser toolbar may not adapt for dark mode users.
Got: #ffffff
Info::
No dark mode signals detected
Consider adding CSS with @media (prefers-color-scheme: dark) and <meta name='color-scheme' content='light dark'>.
Info::
Detection limited to meta tags and inline styles
External CSS files may contain prefers-color-scheme rules not visible to this scan.
Dark ModePartial Dark Mode
color-scheme meta Not set ✗Dark theme-color Not set ✗CSS indicators Not detected ✗

Detection limited to meta tags and inline styles.

D
Print Stylesheet
Action
No print styles
FIX
No print styles
Info::
No print-specific styles detected
When users print this page, they get the screen layout including navigation and non-essential elements. Add @media print rules to hide navigation and optimize layout for paper.
Print Stylesheet No Print Styles
Print stylesheet Not found ✗Inline @media print Not detected ✗
F
Navigation UX
Action
No navigation patterns
FIX
No navigation patterns
Info::
7 navigation landmark(s) detected
Info::
No breadcrumbs, search, or skip link detected
These navigation aids help users orient themselves and find content efficiently, especially on large sites.
Breadcrumbs
Search
Skip Link
Labeled Navigation 7 <nav> element(s)
Back to Top
Hamburger Menu
Sticky Navigation Cannot reliably detect (CSS-based)
1 of 6 testable patterns navigation patterns detected. Limited navigation support. Consider adding breadcrumbs, search, and skip link.
C
404 Error Page
Action
HTTP 404, custom page
REVIEW
HTTP 404, custom page
Info::
Correct 404 status code returned
Got: HTTP 404
Info::
Custom styled 404 page
404 Page Quality ✓ Custom 404 Page
Status Code HTTP 404 ✓Page Title 404 - Page not found | W3Schools.com ✓Custom Styling ✓Navigation ✗Homepage Link ✗Search Form ✗
B
Favicon & Branding
7 icon(s) detected
REVIEW
7 icon(s) detected
Info::
favicon.ico present at site root
Info::
HTML icon links detected
Info::
Apple touch icon present
Info::
Multiple icon sizes detected
✓ favicon.ico Present
✓ PNG Icons Present
✓ Apple Touch Present
✗ SVG Favicon Missing
✓ Manifest Icons Present
✓ Multiple Sizes Present
B
Web Manifest
Valid manifest
REVIEW
Valid manifest
Info::
Name present: W3Schools
Info::
192x192 icon present
Info::
512x512 icon present
Info::
Display mode: standalone
PWA Install Criteria Not Installable
Name W3Schools ✓192×192 icon ✓512×512 icon ✓Start URL ✗Display Mode standalone ✓
Name W3Schools Display Mode standalone Theme Color #ffffff Background Color #ffffff Icons 2 icon(s)
A+
Alt Text Quality
All 21 images OK
PASS
All 21 images OK
Info::
21 image(s) with good alt text
21 images 21 good alt text
All images have appropriate alt text.
A+
Form Accessibility
All 11 controls labeled
PASS
All 11 controls labeled
Info::
11 control(s) properly labeled
11 controls
11 labeled
0 placeholder only
0 unlabeled
ControlTypeLabelMethod
#tnb-google-search-inputtextSearch fieldaria-label
#darkToggle_on_smallcheckboxnone
#filter-tutorials-inputtextTutorials filter inputaria-label
#filter-references-inputtextReferences filter inputaria-label
#filter-exercises-inputtextExercises filter bararia-label
#filter-certified-inputtextCertificate filter bararia-label
#darkTogglecheckboxDark modenone
#filter-services-inputtextServices filter bararia-label
#search2textSearch our tutorialsaria-label
inputtextw3schools.com/tryitaria-label
inputtextSelect templatearia-label
A+
Color Contrast (Screenshot)
20 text elements analyzed, 0 fail WCAG AA
PASS

Analyzes text contrast against the actual rendered page, including background images, gradients, and overlays that CSS-based tools cannot detect.

20 pass
Show all checked elements (20)
ElementRatioRequiredFGBGResult
h1 Learn to Code4.51:13.0:1
#000000
#6C7770
Pass
h1 HTML4.51:13.0:1
#000000
#6C7770
Pass
h1 CSS4.51:13.0:1
#000000
#6C7770
Pass
h1 JavaScript4.51:13.0:1
#000000
#6C7770
Pass
h1 Python4.51:13.0:1
#000000
#6C7770
Pass
h1 SQL4.51:13.0:1
#000000
#6C7770
Pass
h1 Log in4.51:13.0:1
#000000
#6C7770
Pass
h1 Code Editor4.51:13.0:1
#000000
#6C7770
Pass
h1 W3Schools Spaces4.51:13.0:1
#000000
#6C7770
Pass
h1 Become a Plus User4.51:13.0:1
#000000
#6C7770
Pass
h1 For Teachers4.51:13.0:1
#000000
#6C7770
Pass
h1 Color Picker4.51:13.0:1
#000000
#6C7770
Pass
h1 Code Game4.51:13.0:1
#000000
#6C7770
Pass
h1 Web Templates4.51:13.0:1
#000000
#6C7770
Pass
h2 PHP4.51:13.0:1
#000000
#6C7770
Pass
h2 jQuery4.51:13.0:1
#000000
#6C7770
Pass
h2 Java4.51:13.0:1
#000000
#6C7770
Pass
h2 C++4.51:13.0:1
#000000
#6C7770
Pass
h2 W3.CSS4.51:13.0:1
#000000
#6C7770
Pass
h2 Bootstrap4.51:13.0:1
#000000
#6C7770
Pass

Methodology: The top 20 text elements by font size were checked. Background color was sampled from the desktop screenshot using a 5-point pattern. WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text.

A
Lighthouse Accessibility Audits
Score 92/100 — 3 failing, 27 passed
PASS
92

Accessibility

These checks highlight opportunities to improve the accessibility of your web app. Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so manual testing is also encouraged.

Contrast

Low-contrast text is difficult or impossible for many users to read. Learn how to provide sufficient color contrast.

Why this matters

Performance issues directly impact user engagement and conversion rates.

Failing Elements
Sign In div#pagetop > div.tnb-right-section > div#tnb-login-btn > span.button-text
Learn HTML div.w3-row > div.w3-content > div.w3-col > a.w3-button
Learn CSS div.w3-row > div.w3-content > div.w3-col > a.w3-button
Learn JavaScript div.w3-row > div.w3-content > div.w3-col > a.w3-button
Learn Python div.w3-row > div.w3-content > div.w3-col > a.w3-button
Learn SQL div.w3-row > div.w3-content > div.w3-col > a.w3-button
Sign Up div.w3-row > div.w3-center > p > a#myLearningFromDefault
Try Frontend Editor (HTML/CSS/JS) div#main > div.ws-black > div.w3-content > a.ws-btn
Learn More div#main > div.w3-center > div > a.ws-btn
Learn More div.w3-row > div#main > div.pro-caption > a#proFromDefault
Learn More div.pro-caption > div.w3-content > div.w3-col > a.w3-button
Exercises div.w3-row-padding > div.w3-half > p > a.w3-button
Get started div#main > div#getdiploma > div > a.w3-btn

These are opportunities to improve the legibility of your content.

Navigation

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.

Why this matters

Performance issues directly impact user engagement and conversion rates.

Failing Elements
With the world's largest web developer site. div#main > div.ws-black > div.w3-content > h3.learntocodeh3
A web server programming language div.w3-col > div.w3-card-2 > div > h5.w3-text-dark-grey
A JS library for developing web pages div.w3-col > div.w3-card-2 > div > h5.w3-text-dark-grey
A programming language div.w3-col > div.w3-card-2 > div > h5.w3-text-dark-grey
A programming language div.w3-col > div.w3-card-2 > div > h5.w3-text-dark-grey
A CSS framework for faster and better responsive web pages div.w3-col > div.w3-card-2 > div > h5
A CSS framework for designing better web pages div.w3-col > div.w3-card-2 > div > h5.w3-text-dark-grey
Create an account to track your progress, get your own website,and get access t… div#main > div.w3-row > div.w3-center > h4
With our online code editor, you can edit code and view the result in your brow… div#main > div.ws-black > div.w3-content > h4.w3-center
If you want to create your own website, check out W3Schools Spaces. div#main > div.w3-center > div > h3
No installation required - just open your browser and start coding: div#main > div.w3-center > div > h5
And unlock powerful features: div.w3-row > div#main > div.pro-caption > h3
W3Schools' famous color picker: div#main > div.w3-center > div.w3-content > h4
Test your skills! div.w3-row > div#main > div.w3-center > h4
Browse our selection of free responsive HTML Templates div.w3-row > div#main > div.w3-center > h4
Code snippets for HTML, CSS and JavaScript div.w3-row > div#main > div#howto_padding > h4.xxw3-text-dark-grey
For example, how to create a slideshow: div.w3-row > div#main > div#howto_padding > h6

These are opportunities to improve keyboard navigation in your application.

Best practices

Touch targets with sufficient size and spacing help users who may have difficulty targeting small controls to activate the targets. Learn more about touch targets.

Why this matters

Performance issues directly impact user engagement and conversion rates.

Failing Elements
HTML Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
CSS Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
JavaScript Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
How To Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
SQL Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Python Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
W3.CSS Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Bootstrap Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
PHP Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Java Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
C++ Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
jQuery Tutorial div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
HTML Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
CSS Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
JavaScript Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
SQL Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Python Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
W3.CSS Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Bootstrap Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
PHP Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
HTML Colors div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Java Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
AngularJS Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
jQuery Reference div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
HTML Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
CSS Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
JavaScript Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
How To Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
SQL Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Python Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
W3.CSS Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Bootstrap Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
PHP Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Java Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
XML Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
jQuery Examples div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
HTML Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
CSS Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
JavaScript Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Front End Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
SQL Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Python Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
PHP Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
jQuery Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
Java Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
C++ Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
C# Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom
XML Certificate div#spacemyfooter > div > div.footerlinks_2 > a.ga-bottom

These items highlight common accessibility best practices.

○Interactive controls are keyboard focusable
○Interactive elements indicate their purpose and state
○The page has a logical tab order
○Visual order on the page follows DOM order
○User focus is not accidentally trapped in a region
○The user's focus is directed to new content added to the page
○HTML5 landmark elements are used to improve navigation
○Offscreen content is hidden from assistive technology
○Custom controls have associated labels
○Custom controls have ARIA roles
●`[aria-*]` attributes match their roles
●`[aria-hidden="true"]` is not present on the document `<body>`
●`[role]`s have all required `[aria-*]` attributes
●`[role]` values are valid
●`[aria-*]` attributes have valid values
●`[aria-*]` attributes are valid and not misspelled
●Buttons have an accessible name
●Image elements have `[alt]` attributes
●Form elements have associated labels
●`[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5.
●`button`, `link`, and `menuitem` elements have accessible names
●ARIA attributes are used as specified for the element's role
●`[aria-hidden="true"]` elements do not contain focusable descendents
●Elements use only permitted ARIA attributes
●Document has a `<title>` element
●`<frame>` or `<iframe>` elements have a title
●`<html>` element has a `[lang]` attribute
●`<html>` element has a valid value for its `[lang]` attribute
●Links are distinguishable without relying on color.
●Links have a discernible name
●Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`).
●List items (`<li>`) are contained within `<ul>`, `<ol>` or `<menu>` parent elements
●No element has a `[tabindex]` value greater than 0
●Document has a main landmark.
●Deprecated ARIA roles were not used
●Identical links have the same purpose.
●Elements with visible text labels have matching accessible names.
○`[accesskey]` values are unique
○Elements with `role="dialog"` or `role="alertdialog"` have accessible names.
○ARIA input fields have accessible names
○ARIA `meter` elements have accessible names
○ARIA `progressbar` elements have accessible names
○Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children.
○`[role]`s are contained by their required parent element
○Elements with the `role=text` attribute do not have focusable descendents.
○ARIA toggle fields have accessible names
○ARIA `tooltip` elements have accessible names
○ARIA `treeitem` elements have accessible names
○The page contains a heading, skip link, or landmark region
○`<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>`, `<template>` or `<div>` elements.
○Definition list items are wrapped in `<dl>` elements
○ARIA IDs are unique
○No form fields have multiple labels
○`<html>` element has an `[xml:lang]` attribute with the same base language as the `[lang]` attribute.
○Input buttons have discernible text.
○`<input type="image">` elements have `[alt]` text
○The document does not use `<meta http-equiv="refresh">`
○`<object>` elements have alternate text
○Select elements have associated label elements.
○Skip links are focusable.
○Cells in a `<table>` element that use the `[headers]` attribute refer to table cells within the same table.
○`<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe.
○`[lang]` attributes have a valid value
○`<video>` elements contain a `<track>` element with `[kind="captions"]`
○Tables have different content in the summary attribute and `<caption>`.
○All heading elements contain content.
○Uses ARIA roles only on compatible elements
○Image elements do not have `[alt]` attributes that are redundant text.
○Tables use `<caption>` instead of cells with the `[colspan]` attribute to indicate a caption.
○`<td>` elements in a large `<table>` have one or more table headers.
All checks on this page are automated. Results are estimates - run targeted manual reviews when the score affects a release decision.

Send Feedback