WCAG 1.1.1: All non-text content that is presented to the user has a text
alternative that serves the equivalent purpose
Image with alternative text
SVG with alternative text
Video with alternative text
Progress Bar with alternative text
50%
Object with alternative text
Audio with alternative text and transcript
Audio Transcript
The five boxing wizards jump quickly
Icon with alternative text
★
Canvas with alternative text
Button with img and aria-label as alternative text
Sales chart with alternative text
Image Transcript
This sales chart shows quarterly earnings over the last year with sales beign the highest on September
Infographic with text version explaining details
Image Transcript
AI INFOGRAPHICS
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
Sample Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.
Sample Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.
Sample Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.
Sample Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.
Sample Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.
Image Map with alternative text
Animated GIF with alternative text
Form input with a label
Clickable div with background image and alternative text
WCAG 1.2.1: All audio content has a text alternative that serves the
equivalent purpose
Audio
Video
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.
WCAG 1.3.1: Information, structure, and relationships conveyed through presentation can be programmatically
determined or are available in text.
Benefits of Healthy Eating
Introduction
Healthy eating has many benefits...
Main Benefits
Improved energy levels...
Better mental health...
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.
Important: The form field with a red border is required.
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.
This audio plays automatically without any controls to pause, stop, or adjust the volume independently from the
system volume.
WCAG 1.4.10: Content can be presented without loss of information or functionality, and without requiring scrolling
in two dimensions
This content area is now responsive and fits within the viewport size, eliminating the need for scrolling in
two dimensions.
WCAG 1.4.11: The visual presentation of the following must have a contrast ratio of at least 3:1 against adjacent
color(s)
Some text here
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
This paragraph has improved text spacing and font size. It is now readable and does not cut off content,
complying with WCAG 1.4.12.
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 remains visible on hover or focus.
Another accessible tooltip that stays on hover or focus.
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.4.7: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is
visible.
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 not needed, as the input field is already correctly associated with the
visible label.
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 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.
