Main content area.
Missing Alt Text
These images lacks an alt attribute.
Probably the most inaccessible site in the world. Sorry.
So bad it breaks axe-core. Inaccessible is unproudly made by Amin Amini. Please direct your disgust to [email protected].
These images lacks an alt attribute.
Example of text with insufficient contrast:
A button without a visible focus indicator:
This area simulates a keyboard trap. (Note: This is a simplified example.)
Try tabbing out of this container; focus will remain trapped inside.
A form input without an associated label:
Content using generic <div> elements instead of semantic elements:
<section> or <nav> element.Important information is conveyed solely by color:
Red indicates an error.
A modal dialog without proper ARIA roles or keyboard management:
This modal is not accessible.
A video element without captions:
A table without proper headers:
| Data 1 | Data 2 |
| Data 3 | Data 4 |
A navigation menu with ambiguous labeling:
A dropdown menu that may not be keyboard accessible:
A page lacking semantic landmarks like <main> or <nav>:
A button where the focus outline is removed:
Example of ARIA attributes used incorrectly:
This text is small and may not scale well.
Note: The lang attribute is missing from the <html> element (check the source code for this issue).
An audio element without an accompanying transcript:
No transcript provided for the audio.
This example lacks a “Skip to content” link, making it harder for keyboard users to bypass repetitive navigation:
Buttons represented by icons without text or accessible labels:
A CAPTCHA image without accessible alternatives:
No alternative text or audio CAPTCHA is provided.
A form that provides vague error messages without guidance:
Content that updates dynamically without ARIA live region announcements:
This text will change soon.
This example simulates a focus order that jumps unpredictably, confusing keyboard users.
A video that auto-plays without pause or stop controls:
This carousel example lacks proper keyboard navigation and ARIA roles:
Carousel Item 1
Carousel Item 2
Carousel Item 3
Custom interactive elements without proper ARIA roles or keyboard support:
Buttons or links that are too small to tap easily on a touch device:
A complex widget without the necessary ARIA roles for assistive technologies:
Content that breaks or becomes unreadable when the page is zoomed in:
An embedded PDF without proper accessibility features:
An embedded map that lacks keyboard accessibility and ARIA labels:
Lists that are not marked up with proper list elements, causing confusion for assistive technologies:
• Item 1
• Item 2
• Item 3
These list items <li> do not have a parent such as <ul>
An audio player with custom controls that are not accessible:
Audio controls not provided.
Icons used in interactive elements without alternative text:
A table that does not adapt well to different screen sizes:
| Header 1 | Header 2 |
|---|---|
| Data A1 | Data A2 |
| Data B1 | Data B2 |
A form that allows errors without preventive measures:
Videos without audio descriptions for users with visual impairments:
Embedded social media content that lacks accessible labels and keyboard support:
Animated GIFs that continuously play without the option to pause:
Icons that change dynamically without accessible labels or ARIA updates:
A tooltip that appears on hover but is not accessible via keyboard or screen readers:
Hover meA calendar control that is not fully accessible via keyboard or screen readers:
Calendar widget placeholder.
Example of heading levels skipping, which can confuse assistive technologies:
Complex form inputs without proper grouping using fieldset and legend:
A form where errors are not clearly associated with their inputs:
A progress bar that does not announce its status to assistive technologies:
Continuous animation without a pause or stop option:
Information available only on hover, making it inaccessible for keyboard users:
A slider without proper ARIA attributes or keyboard support:
A table lacking a summary or caption for context:
| Data 1 | Data 2 |
| Data 3 | Data 4 |
A file input without accessible labeling or instructions:
A custom date picker that is not fully keyboard accessible:
Content that is revealed only on hover or focus without proper accessibility support:
Hover or focus to reveal more...
Notifications that appear briefly without ARIA live region announcements:
A theme switcher with icons only, lacking accessible labels:
A demo area where touch gestures are not properly recognized:
A form that provides error messages without clear instructions for recovery:
An overlay or popup that cannot be dismissed using keyboard controls:
Overlay content.
A search input without proper labeling or accessible autocomplete features:
An accordion that does not indicate its expanded or collapsed state properly:
A button with insufficient contrast when focused:
An autocomplete field that does not provide accessible suggestions or instructions:
Links that lack a clear focus style make keyboard navigation difficult:
Focusable Link (no focus style)Form fields that rely solely on placeholders without clear labels or guidance:
A modal dialog with a close button that lacks an accessible label:
Modal Content
Dynamic updates that are not announced to assistive technologies due to missing live region attributes:
No live updates available.
A "Skip to content" link that is hidden off-screen or not functioning properly:
Skip to contentMain content area.
Elements with duplicate IDs can confuse assistive technologies:
Navigation menus with too many nested levels, making them hard to follow:
Icon fonts used without text alternatives or proper aria-hidden attributes:
Custom video controls that lack accessible labeling:
Custom video controls not properly labeled.
Text that does not resize or reflow properly on different devices:
Buttons with ambiguous text that fails to indicate their function:
A chart or graph without accessible descriptions or alternative text:
A page with no <title> tag specified. (Check the HTML source.)
Print styles that do not ensure content remains legible when printed:
This is content that may not print well.
Critical actions performed without proper confirmation or error prevention:
A language toggle that does not provide accessible labels or instructions:
A custom rich text editor lacking proper keyboard support and ARIA labels:
Incorrect assignment of landmark roles that may confuse assistive technologies:
This should be a header.
Complex infographics that lack accessible descriptions or alternative text:
Form fields and buttons with low contrast, making them hard to read:
This demo simulates a drag-and-drop area that lacks keyboard support and accessible instructions.
Example of a touch interface that does not properly handle swipe gestures for navigation.
An embedded map with controls that are not keyboard accessible:
An audio element that starts playing automatically without providing user control to pause or stop.
A custom checkbox implemented without proper ARIA roles or keyboard support:
Custom radio buttons lacking accessible labels and proper ARIA attributes:
Option 1A breadcrumb trail that is not properly marked up or accessible:
A tabbed interface lacking proper keyboard navigation and ARIA roles:
An off-canvas menu that is hidden and not easily navigable via keyboard.
Dynamic content updates that are not announced to assistive technologies:
Original content.
A page that refreshes its content automatically without giving the user control:
Content will refresh every 5 seconds.
Initial content
An embedded PDF viewer without accessible controls:
Links that rely solely on color—without underlines—to indicate their presence:
Link without underlineA mobile navigation menu that is not fully keyboard or screen reader accessible:
A slideshow that transitions automatically without an option to pause or stop:
Content that does not scale properly on high resolution displays:
The print stylesheet does not ensure legibility or proper formatting for printed output:
Check print preview for issues.
Navigation that becomes unusable or confusing at certain viewport sizes:
Interactive elements with ARIA states that are not dynamically updated to reflect changes:
An interactive chart without an alternative data table or accessible description:
This example demonstrates misuse of the tabindex attribute by manually setting it in a non-sequential manner, which disrupts the natural focus order for keyboard users.
Notice how the focus order does not follow the document order (Field 1, then Field 2, then Button) because of the manual tabindex values. This can confuse keyboard users.
This example demonstrates an aria-alert that automatically plays a message upon page load without user control. Automatically announced alerts can be distracting or confusing for screen reader users if not triggered by a user action.
Warning: This alert is automatically announced on page load.
Ideally, alerts should be triggered in response to user interactions and managed so that the user can control or postpone the announcement.
This should not be announced as a link because parent has role set to text.
This element is positioned off‑screen but still present in the DOM. It uses a background color of #eee and text color of #ccc, which creates poor contrast. While users won't see it during normal interaction, tools like axe‑core or Lighthouse will flag it as a critical contrast issue.