WCAG 1.2.1: All audio content has a text alternative that serves the
equivalent purpose
Audio with no text alternative like transcript
Video with no text alternative like captions
Audio with incorrect transcript
Transcript: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda in autem amet fugit, modi quod
reiciendis itaque excepturi similique facere quaerat nesciunt alias, accusantium ratione quisquam fugiat
necessitatibus delectus architecto!
Audio with correct transcript but the text is unreadable
Transcript: The five boxing wizard jump quickly.
Video with incorrect captions
Video with bad captions
WCAG 1.2.2: Captions are provided for all prerecorded audio content in synchronized media, except when the media
is a media alternative for text and is clearly labeled as such.
WCAG 1.2.3: An alternative for time-based media or audio description of the prerecorded video content is provided
for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
WCAG 1.2.5: Audio description is provided for all prerecorded video content in synchronized media.
Video without audio description
Video with captions but no audio description
WCAG 1.3.1: Information, structure, and relationships conveyed through presentation can be programmatically
determined or are available in text.
Missing legend
Visual Indicators and Contextual Cues (Partially Violated)
This text indicates an error
This text indicates success
This is a dialog message without a proper title label association.
Header 1
Header 2
Data 1
Data 2
This is a paragraph inside a
element.
Term
Definition
Header 1
Cell 1
Teddy bear collectors:
Last Name
First Name
City
Phoenix
Imari
Henry
Zeki
Rome
Min
Apirka
Kelly
Brynn
Fruits List
Apple
Banana
Cherry
Tab 1
Tab 1Tab 2
Apple
Banana
Cherry
Benefits of Healthy Eating
Introduction
Healthy eating has many benefits...
Main Benefits
1. Improved energy levels...
2. Better mental health...
Step 2: Heat the oven.
Step 1: Gather ingredients.
WCAG 1.3.2: When the sequence in which content is presented affects its meaning, a correct reading sequence can be
programmatically determined.
Improper use of aria-flowto to change reading sequence
Step 1: Gather ingredients.
Step 2: Mix ingredients.
Step 3: Preheat the oven.
Incorrect order in multicolumn layouts (CSS Grid or Flexbox)
Step 2: Heat the oven.
Step 1: Gather ingredients.
Hidden content that becomes visible out of order
Step 2: Heat the oven.
Step 1: Gather ingredients.
Misaligned content with aria-labelledby and aria-describedby
Step 2: Heat the oven.
Step 1: Gather ingredients.
Lists with misleading role attributes
Step 1: Gather ingredients.
Step 2: Heat the oven.
WCAG 1.3.3: Instructions provided for understanding and operating content do not rely solely on sensory
characteristics of components such as shape, color, size, visual location, orientation, or sound.
Orientation, shape and color-based Instructions
Click the tilted round green button below to submit.
Color-based Instructions (Relying on Color)
Click the red button to cancel and the blue button to proceed.
Shape and Size-based Instructions
Click the large square button to proceed and the smaller round button to cancel.
Location-based Instructions
Select the checkbox on the right to agree to the terms and conditions.
Sound-based Instructions
Click the button when you hear the sound.
Orientation-based Instructions
Swipe left to delete and swipe right to save the item.
Swipe me
Sensory Characteristics with No Clear Labeling
Click the star-shaped icon to add to favorites.
★
WCAG 1.3.4: Content does not restrict its view and operation to a single display orientation, such as portrait or
landscape, unless a specific display orientation is essential.
Landscape only div
Landscape Mode Dectected
Landscape only form
Landscape only video
Landscape Only audio
Data Visualization (Landscape Mode Only)
Portrait Mode Not Supported for the above content
Below is portrait only content
Portrait Only Div
Portrait Mode Detected
Portrait Only Form
Portrait only video
Portrait Only audio
Data Visualization (Portrait Mode Only)
Data visualization is best viewed in portrait orientation.
WCAG 1.3.5: The purpose of each input field collecting information about the user can be programmatically
determined.
WCAG 1.4.1: Color is not used as the only visual means of conveying information, indicating an action, prompting a
response, or distinguishing a visual element.
WCAG 1.4.12: In content implemented using markup languages that support the following text style properties, no
loss
of content or functionality occurs by setting all of the following and by changing no other style property
Font Size Too Small
This is an example of a paragraph with a font size that is too small to meet accessibility standards.
Exaggerated Text Spacing and Small Font Size
This paragraph has exaggerated text spacing and small font size. Adjusting these properties has resulted in
text becoming unreadable and causing content to overflow or be cut off.
Exaggerated Text Spacing with !important
This paragraph has exaggerated text spacing and small font size. Adjusting these properties has resulted in text
becoming unreadable and causing content to overflow or be cut off.
Too Small Font Size
This text is so small that it is nearly impossible to read.
Very Tight Line Height
The line height is too tight, causing text to overlap and become unreadable.
Excessive Letter Spacing
Excessive letter spacing makes this text difficult to read.
Very Large Word Spacing
The word spacing is too large, which disrupts the flow of reading.
Overflow Due to Small Font Size
This text is too small and does not fit within the container, causing overflow.
Inaccessible Placeholder Text
Color Contrast Issues
This text has low contrast due to the light color on a white background.
Nested Elements with Poor Styles
This nested paragraph has a small font size and tight line height.
WCAG 1.4.2: If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is
available
to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall
system volume level.
Autoplaying audio without controls
This audio plays automatically without any controls to pause, stop, or adjust the volume independently from the
system volume.
Autoplaying video without control
This video starts playing with audio automatically, but there are no controls to pause, stop, or adjust volume
specifically for this video.
Embedded Audio in an Iframe Without Controls
This iframe contains an audio player that automatically starts playing audio but has no visible controls.
WCAG 1.4.3: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
This text has low contrast over the gradient background.
WCAG 1.4.4: Except for captions and images of text, text can be resized without assistive technology up to 200
percent without loss of content or functionality.
This text area does not resize properly and may lead to loss of content or
functionality when the text size is increased beyond 200%.
This text will be cut off when resized because the width is fixed and does not accommodate larger text sizes.
This text has a line height of 1, which can cause overlapping and readability issues when resized.
This text is set to a fixed font size of 10px and does not resize properly, leading to accessibility issues.
Short text here.
This is a long text that will not wrap properly due to fixed width and white-space: nowrap; style.
This container has a fixed height, which will lead to overflow issues when text size is increased.
This container has a minimum width set, making it hard to view all content when resizing the text.
WCAG 1.4.5: If the technologies being used can achieve the visual presentation, text is used to convey information
rather than images of text
Image with text.
Video with text.
WCAG 1.4.13: Where receiving and then removing pointer hover or keyboard focus triggers additional content to
become
visible and then hidden.
This is a tooltip that disappears when you move the pointer away.
Another tooltip that also disappears immediately when you move the pointer away.
WCAG 2.1.1: All functionality of the content is operable through a keyboard interface without requiring specific
timings for individual keystrokes, except where the underlying function requires input that depends on the path of
the user’s movement and not just the endpoints.
WCAG 2.1.2: If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can
be
moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or
tab keys or other standard exit methods, the user is advised of the method for moving focus away.
Modal Dialog
This is a modal dialog. Try to navigate using the keyboard.
This content is outside the modal. You should be able to focus on this with the keyboard after closing the modal.
WCAG 2.1.4: If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case
letters), punctuation, number, or symbol characters, then at least one of the following is true: Turn off, Remap,
Active only on focus
Press the "S" key anywhere on the page to trigger an action.
WCAG 2.2.1: Timing Adjustable for each time limit that is set by the content
Complete the task before the time limit expires. There is no option to adjust or extend the time limit.
Time remaining: 30 seconds
WCAG 2.2.2: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than
five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause,
stop,
or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.
This page includes auto-updating content without options to pause, stop, or hide it.
Scrolling Text Using marquee
Blinking Text Using blink
Auto-updating Div
Auto-updating information:
Updating every second...
CSS Animation for Scrolling Text
scrolling text CSS
Blinking Text Using CSS Animation
This text is blinking using CSS!
WCAG 2.3.1: Web pages do not contain anything that flashes more than three times in any one second period, or the
flash is below the general flash and red flash thresholds.
Div
Video
GIF
WCAG 2.4.1: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Website Header
Main Content
This is the main content of the page. Users have to navigate through the repeated header and footer blocks to
get
here, as there is no mechanism to bypass these sections.
WCAG 2.4.2: Web pages have titles that describe topic or purpose
This page has no title
WCAG 2.4.3: Focusable components receive focus in an order that preserves meaning and operability
WCAG 2.4.4: The purpose of each link can be determined from the link text alone or from the link text together
with
its programmatically determined link context
WCAG 2.4.5: More than one way is available to locate a Web page within a set of Web pages except where the Web
Page
is the result of, or a step in, a process.
WCAG 2.5.1: All functionality that uses multipoint or path-based gestures for operation can be operated with a
single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.
Drag two fingers to move me
WCAG 2.5.2: For functionality that can be operated using a single pointer, at least one of the following is true:
No
Down-Event, Up Reversal, Abort or Undo.
Click to trigger function
Clicking on the box will execute a function immediately on the down-event, without a
mechanism to cancel or undo:
WCAG 2.5.3: For user interface components with labels that include text or images of text, the name contains the
text that is presented visually.
The aria-label attribute is set to "Name" while the visual label is "Enter
your name:".
WCAG 2.5.4: Functionality that can be operated by device motion or user motion can also be operated by user
interface components and responding to the motion can be disabled to prevent accidental actuation.
Tilt device to trigger action
This example uses device motion to trigger an alert.
WCAG 3.1.1: The default human language of each Web page can be programmatically determined.
This page does not define the language of the page. i.e. <html lang="en">
WCAG 3.1.2: The human language of each passage or phrase in the content can be programmatically determined
except
for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of
the vernacular of the immediately surrounding text.
This is a paragraph with an invalid language code.
This section is in English. Esta sección está en español. This section mixes languages without using the lang
attribute, leading to confusion.
Proper names like Marie Curie and technical terms like Wasserstoff are included without
any language indication.
Common terms such as OK are used but without any language specification, making it unclear which language context
they belong to.
WCAG 3.2.1: When any user interface component receives focus, it does not initiate a change of context.
Focusing on the input field automatically navigates to another page.
WCAG 3.2.2: Changing the setting of any user interface component does not automatically cause a change of
context
unless the user has been advised of the behavior before using the component.
Selecting an option automatically reloads the page without warning the user:
WCAG 3.2.3: Navigational mechanisms that are repeated on multiple Web pages occur in the same relative order
each
time.
WCAG 3.3.1: If an input error is automatically detected, the item that is in error is identified and the error
is
described to the user in text.
This form does not provide any error message when the user enters an invalid email address.
WCAG 3.3.2: Labels or instructions are provided when content requires user input.
This form does not provide a label for the input field.
WCAG 3.3.3: If an input error is automatically detected and suggestions for correction are known, then the
suggestions are provided to the user.
This form does not provide any suggestions when an invalid password is entered, leaving the user unsure of how to
correct the mistake.
WCAG 3.3.4: For Web pages that cause legal commitments or financial transactions for the user to occur, that
modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one
of
the following is true: Reversible, Checked, Confirmed
WCAG 4.1.1: In content implemented using markup languages, elements have complete start and end tags, elements
are
nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique,
except where the specifications allow these features.
Incorrect heading structure
Item 1
This paragraph is incorrectly nested inside a list item.
Item 2
First div with duplicate ID
Second div with duplicate ID
WCAG 4.1.2: For all user interface components (including but not limited to: form elements, links and
components
generated by scripts), the name and role can be programmatically determined; states, properties, and values that
can be set by the user can be programmatically set; and notification of changes to these items is available to
user agents, including assistive technologies.
WCAG 4.1.3: In content implemented using markup languages, status messages can be programmatically determined
through role or properties such that they can be presented to the user by assistive technologies without
receiving
focus.
Home
Click Me!
