WCAG_3_1_1_LANG
WCAG A
Error
N/A
The html element must have a lang attribute.
<html>
<head>
<title></title>
</head>
<body>
<h1 id="main-content">Welcome to a broken page</h1>
<!-- Missing alt attribute -->
<img src="logo.png">
<!-- Empty link -->
<a href="https://google.com"></a>
<!-- Empty button -->
<button type="submit"></button>
<!-- Positive tabindex -->
<a href="/keyboard" tabindex="5">Keyboard test</a>
<!-- Duplicate ID -->
<div id="main-content">This is a duplicate main-content ID div!</div>
<!-- Low Contrast -->
<p style="color: #888888; background-color: #999999;">This text has extremely low contrast ratio!</p>
<!-- Invalid ARIA role and missing controls target -->
<div role="cool-widget" aria-controls="non-existent-popup">WAI-ARIA elements</div>
<!-- Missing Iframe Title -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>
<!-- New WCAG Rule Violations for testing -->
<!-- LinkTextGeneric: Generic text without context -->
<a href="/read-more">Click here</a>
<a href="/devam-oku">devamını oku</a>
<!-- PlaceholderAsLabel: Input relying only on placeholder -->
<input type="text" placeholder="Search website...">
<!-- ImageAltRedundant: Redundant words in alt text -->
<img src="logo2.png" alt="logo of our company">
<img src="profile.jpg" alt="profile photo of john doe">
<!-- AriaHiddenFocusable: Focusable element hidden with aria-hidden="true" -->
<div aria-hidden="true">
<button type="button">Hidden click</button>
</div>
<a href="#" aria-hidden="true">Hidden link</a>
<p>This page has multiple accessibility issues.</p>
</body>
</html>Add lang="en" (or your language) to the html tag.
WCAG_1_1_1_ALT
WCAG A
Error
N/A
Images must have an alt attribute.
<img src="logo.png">Add an alt attribute. Use alt="" for decorative images.
WCAG_2_4_4_LINK_TEXT
WCAG A
Error
N/A
Links must have discernible text.
<a href="https://google.com"></a>Add text content or an aria-label to the link.
WCAG_4_1_2_BUTTON
WCAG A
Error
N/A
Buttons must have discernible text.
<button type="submit"></button>Add text or an aria-label to the button.
WCAG_1_3_1_LABEL
WCAG A
Error
N/A
Form inputs must have an associated label.
<input type="text" placeholder="Search website...">Add a <label for="..."> or an aria-label attribute.
WCAG_2_4_3_TABINDEX
WCAG A
Warning
N/A
Avoid positive tabindex values (tabindex="5") to preserve the natural tab order.
<a href="/keyboard" tabindex="5">Keyboard test</a>Remove the positive tabindex or change it to "0" or "-1".
WCAG_1_4_3_CONTRAST
WCAG AA
Warning
N/A
Insufficient contrast ratio of 1.24:1. Minimum required is 4.5:1.
<p style="color: #888888; background-color: #999999;">This text has extremely low contrast ratio!</p>Adjust colors to increase contrast. For example, text: #888888, background: #999999.
DuplicateId
WCAG A
Error
N/A
Duplicate ID "main-content" found. Element ID attribute must be unique across the document.
<h1 id="main-content">Welcome to a broken page</h1>
DuplicateId
WCAG A
Error
N/A
Duplicate ID "main-content" found. Element ID attribute must be unique across the document.
<div id="main-content">This is a duplicate main-content ID div!</div>
AriaRole
WCAG A
Error
N/A
Invalid ARIA role "cool-widget" declared on element. Must use standard WAI-ARIA roles.
<div role="cool-widget" aria-controls="non-existent-popup">WAI-ARIA elements</div>
AriaRole
WCAG A
Error
N/A
Attribute aria-controls="non-existent-popup" targets an element that does not exist in the document.
<div role="cool-widget" aria-controls="non-existent-popup">WAI-ARIA elements</div>
WCAG_4_1_2_IFRAME_TITLE
WCAG A
Error
N/A
Iframe element is missing a descriptive title attribute.
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>Add a descriptive title attribute, e.g., title="Embedded Map" or title="Video Player".
WCAG_2_4_4_LINK_GENERIC
WCAG A
Warning
N/A
Links must have descriptive text. Generic text like "click here" or "read more" is not accessible.
<a href="/read-more">Click here</a>Change the link text to describe its target, or add an aria-label attribute to provide context.
WCAG_2_4_4_LINK_GENERIC
WCAG A
Warning
N/A
Links must have descriptive text. Generic text like "click here" or "read more" is not accessible.
<a href="/devam-oku">devamını oku</a>Change the link text to describe its target, or add an aria-label attribute to provide context.
WCAG_3_3_2_PLACEHOLDER_LABEL
WCAG A
Warning
N/A
Inputs should not use placeholder text as their only label.
<input type="text" placeholder="Search website...">Add a <label for="..."> or an aria-label attribute. Placeholder text is not a reliable label replacement.
WCAG_1_1_1_ALT_REDUNDANT
WCAG A
Warning
N/A
Image alt text should not contain redundant words like "image" or "photo".
<img src="logo2.png" alt="logo of our company">Remove redundant phrases like "logo of" from the alt text. Screen readers already announce elements as images.
WCAG_1_1_1_ALT_REDUNDANT
WCAG A
Warning
N/A
Image alt text should not contain redundant words like "image" or "photo".
<img src="profile.jpg" alt="profile photo of john doe">Remove redundant phrases like "photo of" from the alt text. Screen readers already announce elements as images.
WCAG_4_1_2_ARIA_HIDDEN_FOCUS
WCAG A
Error
N/A
Focusable elements must not be hidden with aria-hidden="true".
<div aria-hidden="true">
<button type="button">Hidden click</button>
</div>Remove aria-hidden="true" from the container or make its focusable elements non-focusable (e.g. by setting tabindex="-1" or disabled).
WCAG_4_1_2_ARIA_HIDDEN_FOCUS
WCAG A
Error
N/A
Focusable elements must not be hidden with aria-hidden="true".
<a href="#" aria-hidden="true">Hidden link</a>Remove aria-hidden="true" from the container or make its focusable elements non-focusable (e.g. by setting tabindex="-1" or disabled).
WCAG_2_4_2_PAGE_TITLE
WCAG A
Error
N/A
Web pages must have a non-empty title element in the head.
<head>
<title></title>
</head>Provide descriptive text inside the <title> element.