WCAG Content

Filters

Number of criteria displayed with the current filters: 87/87

Teams

Difficulty

Level

List

1 - Perceivable
1. 1.1 - Text Alternatives
  Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  1. Create a text alternative for visual and auditory content
    Description
    All non-text-content must have a text alternative or an accessible name, except if they are purely decorative or redundant.
    Examples
    The cover image of an article has an alt attribute that describes the image
    An audio track of a song is labeled with the title and artist name
    An envelope icon next to a "Contact Us" title has an empty alt attribute
    An image used for decoration only has an empty alt attribute
    How to implement
    Always use an alt attribute on img elements
    Leave the alt attribute empty on decorative images
    Write a descriptive but concise alt attribute for images that convey information with the relevant context
    Use the aria-describedby attribute to provide a longer description of the element
    Resources
2. 1.2 - Time-based Media
  Provide alternatives for time-based media (audio and video).
  1. 1.2.1 - Audio-only and Video-only (Prerecorded)
    Design
    Content
    Normal
    A
    Provide an alternative when content is perceivable with only one sense, and if there is no text description of the content already available on the page
    Description
    Provide a text transcript for audio content, and a text or audio transcript for video-only content.
    Examples
    A podcast episode has a text transcript available on the page
    A video-only content has an audio description available on the page
    How to implement
    Provide a text transcript for audio content
    Provide a text or audio transcript for video-only content
    Make sure the transcript covers all the content of the audio or video
    Make sure the transcript is in the same language as the rest of the content
    Make sure the transcript is available on the same page as the media content
  2. 1.2.2 - Captions (Prerecorded)
    Content
    Normal
    A
    Provide synchronized text captions for audio content in videos, if there is no text description of the content already available on the page
    Description
    If the content of a video is not already available in text form, provide synchronized captions for the audio content.
    Examples
    A video has synchronized captions for the audio content
    A video does not have captions, but the audio content is already available in text form on the page
    How to implement
    If no text version is available on the page, provide synchronized captions for the audio content in videos
    Make sure the captions cover all the content of the audio track
    Make sure the captions are in the same language as the rest of the content
    Make sure the captions are synchronized with the audio track
  3. 1.2.3 - Audio Description or Media Alternative (Prerecorded)
    Design
    Content
    Normal
    A
    Provide a description of the visual content in videos, if there is no text description of the content already available on the page
    Description
    For a video content, provide an audio description or a transcript of the content.
    Examples
    A video has an audio description of the visual content
    A video does not have an audio description, but the visual content is already available in text form on the page
    How to implement
    If no text version is available on the page, provide an audio description of the visual content in videos
    Make sure the audio description covers all the content of the video
    Make sure the audio description is in the same language as the rest of the content
    Make sure the audio description is synchronized with the video
  4. 1.2.4 - Captions (Live)
    Content
    Code
    Hard
    AA
    Provide synchronized text captions for audio content in real-time videos
    Description
    Provide synchronized captions for the audio content in live videos.
    Examples
    A video has synchronized captions for the audio content
    How to implement
    Provide synchronized captions for the audio content in videos
    You can use artificial intelligence to generate the captions in real-time
    Make sure the captions cover all the content of the audio track
    Make sure the captions are in the same language as the rest of the content
    Make sure the captions are synchronized with the audio track
  5. 1.2.5 - Audio Description (Prerecorded)
    Content
    Hard
    AA
    Provide an audio description of the visual content in videos
    Description
    For a video content, provide an audio description of the content.
    Examples
    A video has an audio description of the visual content
    How to implement
    Provide an audio description of the visual content in videos
    Make sure the audio description covers all the content of the video
    Make sure the audio description is in the same language as the rest of the content
    Make sure the audio description is synchronized with the video
  6. 1.2.6 - Sign Language (Prerecorded)
    Content
    Hard
    AAA
    Provide synchronized sign language interpretation for audio content in existing videos
    Description
    Provide a synchronized sign language interpretation for the audio content in videos.
    Examples
    A video has a sign language interpretation of the audio content
    How to implement
    Provide a synchronized sign language interpretation for the audio content in videos
    Make sure the sign language interpretation covers all the content of the audio track
    Make sure the sign language interpretation is in the same language as the rest of the content
    Make sure the sign language interpretation is synchronized with the video
  7. 1.2.7 - Extended Audio Description (Prerecorded)
    Content
    Hard
    AAA
    Provide extended spoken descriptions of the visual content in videos
    Description
    When the video contains a lot of visual content, provide an extended audio description of the visual content in the video, with pauses in the video.
    Examples
    In a video of a class, the teacher draws a diagram on the board while speaking rapidly. The video should pause at the end of the sequence while the audio description plays until it reaches the end of the sequence description, and then the video resumes to the next sequence
    How to implement
    Provide an extended audio description of the visual content in videos
    Make sure the audio description covers all the content of the video
    Make sure the audio description is in the same language as the rest of the content
    Make sure the audio description is synchronized with the video (with pauses in the video)
  8. 1.2.8 - Media Alternative (Prerecorded)
    Design
    Content
    Hard
    AAA
    Provide a text equivalent for all content in videos
    Description
    An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.
    Examples
    A video has a text transcript available on the page
    The text transcript covers all the content of the video, including the audio and visual content
    How to implement
    Provide a text transcript for all prerecorded synchronized media
    Make sure the transcript covers all the content of the audio and visual tracks
    Make sure the transcript is in the same language as the rest of the content
    Make sure the transcript is available on the same page as the media content
  9. 1.2.9 - Audio-only (Live)
    Design
    Content
    Hard
    AAA
    Provide a text equivalent for live audio-only content
    Description
    An alternative for time-based media that presents equivalent information for live audio-only content is provided.
    Examples
    A live audio-only content has a text transcript available on the page
    The text transcript covers all the content of the audio track
    How to implement
    Provide a text transcript for all live audio-only content
    You can use artificial intelligence to generate the transcription in real-time
    Make sure the transcript covers all the content of the audio track
    Make sure the transcript is in the same language as the rest of the content
    Make sure the transcript is available on the same page as the media content
3. 1.3 - Adaptable
  Create content that can be presented in different ways (for example, simpler layout) without losing information or structure.
  1. 1.3.1 - Info and Relationships
    Design
    Content
    Code
    Easy
    A
    Use code to reinforce relationships and information conveyed through presentation
    Description
    Use semantic HTML to provide a consistent and logical structure to your content, so that assistive technologies can understand it.
    Examples
    Page has a h1 element as the main title, and h2 elements as section titles
    A recipe steps section uses ol and li elements to indicate the order of the steps
    How to implement
    Use semantic HTML elements to structure your content
    Use h1 to h6 elements in the right sequence
    Use ol and ul elements to indicate lists
    Use table elements for tabular data
    Use the appropriate regions for your content
    Do not use more than one h1 element per page
    Resources
  2. 1.3.2 - Meaningful Sequence
    Design
    Code
    Easy
    A
    Use code to preserve meaningful content order
    Description
    The DOM order of the content should match the visual order of the content.
    Examples
    A sidebar is presented on the reading-start side of the page, it appears first in the DOM
    A footer is presented at the bottom of the page, it appears last in the DOM
    The users uses the Tab key to navigate the page, and the focus order matches the visual order of the content
    How to implement
    Write the HTML in the same order as the visual content
    Be careful about reordering content in different breakpoints
  3. 1.3.3 - Sensory Characteristics
    Design
    Easy
    A
    Describe controls by name, not just by appearance or location
    Description
    Instructions should not rely on color, shape, size, visual location, orientation, or sound.
    Examples
    The user is asked to click on the "Submit" button, not on the "green button"
    The user is asked to check the checkbox next to the "I agree" label, not the checkbox on the right side of the page
    The user is alerted with a text message that the form was submitted, not only with a sound
    How to implement
    Use descriptive labels for controls and inputs
    Use descriptive text for instructions, not just sensory cues
    If you use sensory cues, provide an alternative that does not rely on them
  4. 1.3.4 - Orientation
    Design
    Code
    Easy
    AA
    Do not lock content to either portrait or landscape presentation
    Description
    Unless essential, the user can display the content in either portrait or landscape orientation.
    Examples
    A mobile application can be used in both portrait and landscape modes
    A web page can be viewed in both portrait and landscape modes without breaking the layout
    A piano app can only be used in landscape mode
    How to implement
    Do not lock the content to a specific orientation
    Use CSS media queries to adapt the layout to different orientations
    Resources
  5. 1.3.5 - Identify Input Purpose
    Design
    Code
    Easy
    AA
    Use code to indicate the purpose of common inputs, where technology allows
    Description
    Form fields collecting user information have appropriate attributes.
    Examples
    An email input field can automatically fill the user's email address
    A phone number input field displays a numeric keypad on mobile devices
    How to implement
    Use the autocomplete attribute to indicate the purpose of form fields
    Use the inputmode attribute to indicate the type of input expected
    Resources
  6. 1.3.6 - Identify Purpose
    Code
    Hard
    AAA
    Use code to indicate the meaning of all controls and other key information, where available
    Description
    Every component indicates its purpose to assistive technologies, such as screen readers.
    Examples
    A navbar uses the nav element
    A footer uses the footer element
    How to implement
    Use semantic HTML elements to structure your content
    Use the appropriate regions for your content
    Use appropriate ARIA roles to indicate the purpose of components
    Give your components accessible names and descriptions
    Resources
4. 1.4 - Distinguishable
  Make it easier for users to see and hear content by separating foreground from background (visual and audio).
  1. 1.4.1 - Use of Color
    Design
    Easy
    A
    Use information in addition to color, such as shape or text, to convey meaning
    Description
    Color is not the only way to distinguish an element of its state.
    Examples
    A link is underlined in addition to being blue
    An error message is displayed in red and has an icon next to it
    A line graph uses different shapes in addition to colors to distinguish the lines
    How to implement
    Use icons or shapes
    Use patterns or textures
    Use borders, background or underlines
    Resources
  2. 1.4.2 - Audio Control
    Design
    Code
    Easy
    A
    If you play audio content automatically, let people turn it down or off
    Description
    If your page auto-plays audio for more than 3 seconds, the user can lower the volume or stop it.
    Examples
    A song plays automatically when the page loads, but a stop button is clearly visible
    A ping sound plays when the user submits a contact form, but it only lasts for 0.5 seconds
    How to implement
    If possible, do not auto-playing audio content
    Otherwise, make it last for less than 3 seconds
    Otherwise, provide a way for the user to easily turn it off or down
  3. 1.4.3 - Contrast (Minimum)
    Design
    Easy
    AA
    Provide sufficient contrast between text and its background
    Description
    Text has a minimum contrast ratio of 4.5:1 against its background, except for the following:
    Large Text - Large text (24px, or 18.5px and bold) have a contrast ratio of at least 3:1
    Incidental Text - Decorative text and text in inactive elements has no contrast requirement
    Logotypes - Text that is part of a logo or brand name has no contrast requirement
    Examples
    A paragraph of text with a contrast ratio of 5:1 against its background
    A large page title with a contrast ratio of 3:1 against its background
    A disabled button with a contrast ratio of 1.5:1 against its background
    A logo with a contrast ratio of 1:1 against its background
    How to implement
    Make sure the small body text has a contrast ratio of at least 4.5:1
    Make sure the large texts have a contrast ratio of at least 3:1
    Resources
  4. 1.4.4 - Resize Text
    Design
    Code
    Easy
    AA
    Ensure text can be doubled in size
    Description
    The user can resize the text of the page up to 200 percent and be able to navigate it normally.
    Examples
    When resizing the text to 200%, the text remains readable without horizontal scrolling
    When resizing the text to 200%, the layout does not break and all content remains accessible
    How to implement
    Do not prevent text resizing
    Use relative units (like em or rem) for font sizes, margins, paddings...
    Use flexible layouts that can adapt to elements sizes
    Resources
  5. 1.4.5 - Images of Text
    Design
    Content
    Easy
    AA
    Use text instead of pictures of text
    Description
    Your content uses text instead of images of text, except for the following:
    Customizable - The image of text can be customized
    Essential - Using an image of text is essential
    Examples
    A logo with a text can not be avoided
    An image of a graphic with text can not be avoided
    How to implement
    Avoid using images of text
    If you must use them, provide an alt-text that reads the text in the image
  6. 1.4.6 - Contrast (Enhanced)
    Design
    Easy
    AAA
    Strongly contrast text against its background
    Description
    Text has a minimum contrast ratio of 7:1 against its background, except for the following:
    Large Text - Large text (24px, or 18.5px and bold) have a contrast ratio of at least 4.5:1
    Incidental Text - Decorative text and text in inactive elements has no contrast requirement
    Logotypes - Text that is part of a logo or brand name has no contrast requirement
    Examples
    A paragraph of text with a contrast ratio of 8:1 against its background
    A large page title with a contrast ratio of 4.5:1 against its background
    A disabled button with a contrast ratio of 2.5:1 against its background
    A logo with a contrast ratio of 1:1 against its background
    How to implement
    Make sure the small body text has a contrast ratio of at least 7:1
    Make sure the large texts have a contrast ratio of at least 4.5:1
    Resources
  7. 1.4.7 - Low or No Background Audio
    Content
    Normal
    AAA
    Avoid or lessen background sound, or let users turn it off
    Description
    For prerecorded audio content that mainly contains speech and is not music, at least one of the following is true:
    No Background - The audio does not contain background sounds
    Turn Off - The background sounds can be turned off
    20 dB - The background sounds are at least 20 decibels lower than the speech content
    Examples
    A podcast audio contains speech and no background sound
    A podcast audio contains speech and background music, but the user can turn off the music
    A podcast audio contains speech and background music, but the background music is low
    How to implement
    Make sure the background sound is low or does not exist
  8. 1.4.8 - Visual Presentation
    Design
    Code
    Hard
    AAA
    Meet text display requirements or allow users to adjust them
    Description
    On blocks of text in your content, the following is true:
    The user can change the text and background colors
    Width is no more than 80 characters (40 if CJK)
    Text is not justified
    Line-height is at least 1.5 in paragraphs, and 2.25 between paragraphs
    Text can be resized up to 200% without breaking the layout
    Examples
    The user can change the text color to black and the background color to white
    The user can resize the text to 200% without breaking the layout
    How to implement
    Allow the user to change the text and background colors
    Use relative units for font sizes, margins, paddings...
    Use flexible layouts that can adapt to elements sizes
    Do not justify text
    Use sufficient line-height and spacing between paragraphs
    Use a maximum width of 80 characters (40 if CJK)
  9. 1.4.9 - Images of Text (No Exception)
    Design
    Content
    Easy
    AAA
    Do not use pictures of text unless there is no other way to present information
    Description
    Your content uses text instead of images of text.
    Examples
    A text replacement is displayed instead of the logo
    How to implement
    Do not use images of text
  10. 1.4.10 - Reflow
    Design
    Code
    Easy
    AA
    Make lines of text reflow within the viewport
    Description
    The user can zoom in, and still navigate the page without needing to scroll horizontally:
    up to 100% in a window that is 320px wide
    up to 400% in a window that is 1280px wide
    Examples
    A form has two columns, but when zoomed in, it becomes a single column
    A text adapts to the viewport width when zoomed in
    How to implement
    Use relative units for font sizes, margins, paddings...
    Use flexible layouts that can adapt to elements sizes
    Do not assign elements a fixed width bigger than 320px
    Use CSS media queries to adapt the layout to different screens sizes
    Resources
  11. 1.4.11 - Non-text Contrast
    Design
    Easy
    AA
    Ensure meaningful visual cues achieve 3:1 against the background
    Description
    These elements have a contrast ratio of at least 3:1 against adjacent backgrounds:
    User Interface Components - Elements and their borders, backgrounds, focus indicators, except when disabled or if they're native elements
    Graphical Objects - Icons and graphs
    Resources
  12. 1.4.12 - Text Spacing
    Design
    Code
    Easy
    AA
    Ensure content adapts to user-defined text settings
    Description
    If the user increases the text spacing, the layout does not break, up to the following settings:
    Line height to 1.5 times the font size
    Spacing following paragraphs to 2 times the font size
    Letter spacing to 0.12 times the font size
    Word spacing to 0.16 times the font size
    Examples
    When resizing the line height to 1.3, the text remains readable without horizontal scrolling
    When resizing the letter spacing to 0.1, the layout does not break and all content remains accessible
    How to implement
    Do not prevent text spacing resizing
    Use relative units (like em or rem) for font sizes, margins, paddings...
    Use flexible layouts that can adapt to elements sizes
    Resources
  13. 1.4.13 - Content on Hover or Focus
    Design
    Code
    Normal
    AA
    If hover or focus causes content changes, ensure interaction is predictable
    Description
    If your page displays elements on hover or focus (like tooltips), the following are true:
    Dismissable - They can be dismissed easily
    Hoverable - They can be reached with the mouse
    Persistent - They do not disappear automatically
    Examples
    A tooltip appears when hovering a "Help" icon, and disappears when moving the mouse away
    The user can hover that tooltip without it disappearing
    A tooltip appears when focusing a "Help" icon, and disappears when pressing the Escape key
    The tooltip does not disappear automatically after a few seconds
    How to implement
    Make sure tooltips can be dismissed easily
    Do not make them disappear automatically
    Allow the user to hover the tooltip without it disappearing
2 - Operable
1. 2.1 - Keyboard Accessible
  Make all functionality available from a keyboard.
  1. 2.1.1 - Keyboard
    Code
    Hard
    A
    Ensure pointer actions have a keyboard equivalent
    Description
    The page can be operated with a keyboard alone, except freehand movements.
    Examples
    A custom select menu can be used with the keyboard
    A custom date picker can be used with the keyboard
    A painting application needs to be operated with a mouse, as the brushes require freehand movements
    How to implement
    Try to use native HTML elements, as they are already keyboard accessible
    For custom elements, research needs and implement full keyboard support
    Do not rely on mouse events only to trigger actions on custom elements
    Use the tabindex attribute to make elements focusable / hidden
    Hide elements that should not be focusable with aria-hidden
    Resources
  2. 2.1.2 - No Keyboard Trap
    Code
    Normal
    A
    Ensure users always know how to navigate away from components
    Description
    Make it easy for users to navigate away from an element with the keyboard.
    Examples
    A modal dialog can be closed with the Escape key
    A custom dropdown can be closed with the Escape key
    How to implement
    Make sure the user can use the keyboard to leave any component
  3. 2.1.3 - Keyboard (No Exception)
    Code
    Hard
    AAA
    Ensure all pointer actions have a keyboard equivalent
    Description
    The page can be operated with a keyboard alone.
    Examples
    A custom select menu can be used with the keyboard
    A custom date picker can be used with the keyboard
    How to implement
    Try to use native HTML elements, as they are already keyboard accessible
    For custom elements, research needs and implement full keyboard support
    Do not rely on mouse events only to trigger actions on custom elements
    Use the tabindex attribute to make elements focusable / hidden
    Hide elements that should not be focusable with aria-hidden
    Resources
  4. 2.1.4 - Character Key Shortcuts
    Design
    Code
    Easy
    A
    Ensure character-only shortcut keys can be turned off or modified
    Description
    If your page provides keyboard shortcuts of single characters (like "c" or "1") at least one of the following is true:
    Turn Off - The user can turn them off
    Remap - The user can remap them to use a different key or combinations
    Active Only - The shortcuts are only available on focused elements (not the whole page)
    Examples
    The user can turn off the shortcut "c" to open a chat window
    The user can remap this shortcut to "Ctrl + c"
    The user can use the spacebar to pause a video, but only when the video is focused
    How to implement
    Avoid using single character shortcuts, as they can conflict with browser shortcuts
    If you must use them, provide a way for users to turn them off or remap them
    Make sure the shortcuts are only active when the element is focused, not on the whole page
2. 2.2 - Enough Time
  Provide users enough time to read and use content.
  1. 2.2.1 - Timing Adjustable
    Design
    Content
    Code
    Normal
    A
    Let users turn off, adjust, or extend time limits
    Description
    If your content has a time limit, at least one of the following is true:
    Turn Off - The user can turn it off before accessing the content
    Adjust - The user can make it 10 times bigger
    Extend - The user is warned 20 seconds before it expires, and can extend it with a simple action, an can repeat the process at least 10 times
    Real-time Exception - It is a real-time event, such as a live broadcast or a real-time chat, and can not be changed
    Essential Exception - It is essential and extending it would invalidate the activity
    20 Hours Exception - It is longer than 20 hours
    Examples
    The user is waiting for a meeting to start. After waiting for 10 minutes, the user is asked if they still want to wait. If they do not respond, the page times out
    A ticket booking site has a 15-minute time limit to complete the purchase. The user is warned 1 minute before the time limit expires, and can extend the time limit by clicking a button
    An auction site can not allow the user to extend the time limit, as it would invalidate the auction
    How to implement
    Warn users of time limits before they encounter them
    If possible, provide a way for users to turn off or adjust time limits
    Otherwise, warn users beforehand and before the time limit expires
  2. 2.2.2 - Pause, Stop, Hide
    Design
    Code
    Easy
    A
    Let users control content changes that occur in parallel with other content
    Description
    For moving, blinking, scrolling, or auto-updating information, all of the following are true, unless it is essential:
    Moving, blinking, or scrolling - If it starts automatically, lasts more than 5 seconds, and is presented in parallel with other content, there is a way for the user to pause, stop, or hide it
    Auto-updating - If it starts automatically and is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update
    Examples
    A carousel that automatically rotates can be paused or stopped
    An elements that blinks stops after 5 seconds
    A game where the decor scrolls automatically can be paused
    How to implement
    Try not to display moving content that is not essential
    Provide a way for users to pause, stop or hide moving content
    Provide a way for users to pause, stop or hide auto-updating content
  3. 2.2.3 - No Timing
    Design
    Content
    Code
    Normal
    AAA
    Do not use time limits, except for video and live events
    Description
    Timing is not an essential part of the content, except for non-interactive synchronized media and real-time events.
    Examples
    The user is not required to complete a form within a certain time limit
    A test is designed to score users based on their answers, not on the time taken to answer
    How to implement
    Do not use time limits, except for video and live events
  4. 2.2.4 - Interruptions
    Code
    Easy
    AAA
    Let people delay or turn off updates, except in emergencies
    Description
    The user can turn off interruptions, except for emergencies.
    Examples
    The user can turn off notifications that appear on the screen
    How to implement
    Do not interrupt users with content that is not essential
    Provide a way for users to turn off or delay interruptions
  5. 2.2.5 - Re-authenticating
    Code
    Normal
    AAA
    Preserve users' prior activity and data through reauthentication
    Description
    When a session expires, the user can continue the activity without loss of data after signing in again.
    Examples
    The user is filling out a form, but the session expires. When the user signs in again, the form is still filled out with the data they entered
    The user is shopping online, but the session expires. When the user signs in again, the shopping cart is still filled with the items they added
    How to implement
    Save user data in the browser's local storage or session storage
    Automatically restore the data when the user signs in again
    Resources
  6. 2.2.6 - Timeouts
    Design
    Code
    Easy
    AAA
    Tell users how long their session can be inactive before they may lose information
    Description
    Users are warned if inactivity can cause data loss, unless the data is preserved for more than 20 hours.
    Examples
    A tax filing platform indicates that after 1 hour of inactivity, the user will be logged out and lose any unsaved data
    The user shopping cart is preserved for 20 hours, so no warning is needed
    How to implement
    If possible, preserve user data for more than 20 hours
    Otherwise, warn users if inactivity can cause data loss
3. 2.3 - Seizures and Physical Reactions
  Do not design content in a way that is known to cause seizures or physical reactions.
  1. 2.3.1 - Three Flashes or Below Threshold
    Design
    Content
    Code
    Easy
    A
    Avoid content that flashes, or keep it under thresholds
    Description
    Do not make elements flash more than 3 times per second, or keep the flash below the red flash thresholds.
    Examples
    A CTA button flashes 2 times per second to draw attention
    A video contains a sequence with a flashing title card that flashes 1.5 times per second
    How to implement
    Keep flashing content to a minimum
  2. 2.3.2 - Three Flashes
    Design
    Content
    Code
    Easy
    AAA
    Do not flash content more than 3 times a second
    Description
    Do not make elements flash more than 3 times per second.
    Examples
    A video contains a sequence with a flashing title card that flashes 1.5 times per second
    How to implement
    Keep flashing content to a minimum
  3. 2.3.3 - Animation from Interactions
    Design
    Code
    Easy
    AAA
    Support user preferences for motion, and eliminate unnecessary motion effects
    Description
    Motion triggered by interaction can be disabled, unless it is essential.
    Examples
    A parallax effect on a page can be turned off by the user
    A page turning effect respects the prefers-reduced-motion media query
    An animation sandbox does not allow users to turn off the animation, as it is essential to the experience
    How to implement
    Use the prefers-reduced-motion media query to detect user preferences
    Provide a way for users to turn off or adjust motion effects
    Resources
4. 2.4 - Navigable
  Provide ways to help users navigate, find content, and determine where they are.
  1. 2.4.1 - Bypass Blocks
    Design
    Code
    Easy
    A
    Provide a means of skipping repeating content
    Description
    Give keyboard users a way to skip content that is repeated on pages.
    Examples
    The user can use a "Skip to content" link to avoid the header content
    The user can use a "Skip to content" link to avoid the sidebar menu
    How to implement
    Wrap the main content in a main element
    Provide a "Skip to content" link at the top of each page
    You can hide it visually, but it should become visible on focus
    Resources
  2. 2.4.2 - Page Titled
    Design
    Code
    Easy
    A
    Provide a descriptive page title using appropriate technology
    Description
    Every page has a title that describes its topic or purpose.
    Examples
    A page titled "Contact Us - Amazon UK" clearly indicates the purpose of the page
    A page titled "About Our Company - Ikea" provides context about the content
    How to implement
    Use the title element in the HTML head
    Ensure the title is unique and descriptive for each page
    Try to use the same title for the h1 element on the page
    Resources
  3. 2.4.3 - Focus Order
    Design
    Code
    Normal
    A
    Elements receive focus in an order that preserves meaning
    Description
    When the user navigates the page with the keyboard, the focus order is logical and intuitive (usually the same as reading order).
    Examples
    A form with 2 columns will have the focus go through the first column, then the second
    A navigation menu will have the focus go through each item in the order they appear visually
    How to implement
    When designing interfaces, keep a consistent order across different breakpoints
    When the order changes, communicate the change to the developers team
    Be careful about using CSS properties like position, order or flex-direction as they can change the visual order without changing the DOM order
  4. 2.4.4 - Link Purpose (In Context)
    Design
    Content
    Code
    Easy
    A
    Provide descriptive names or context for all links
    Description
    The purpose of each link should be clear from the link text alone, or from the link text and its context.
    Examples
    A text "If you have a question, visit our " follow by a link "FAQ section"
    A link labeled "Read more" contains a visually hidden text " about the peach pie recipe"
    A contact card identifying the person's name and role, with a link labeled "Email"
    How to implement
    Avoid labeling links with generic text like "click here" or "read more"
    If the text label is generic but its context is clear, it is acceptable
    Otherwise, provide more context in a visually hidden element
    Resources
  5. 2.4.5 - Multiple Ways
    Design
    Easy
    AA
    Provide at least 2 options for reaching the same content
    Description
    Users can find pages using more than one method, except when the page is a process step or result.
    Examples
    The user can browse the categories menu or search for a specific item
    How to implement
    Provide a search function that allows users to find content
    If your website is small, consider providing a site map
  6. 2.4.6 - Headings and Labels
    Design
    Easy
    AA
    Provide descriptive headings and labels
    Description
    Headings describe the page sections, and labels identify form fields.
    Examples
    A heading labeled "Contact Information" clearly indicates the section's content
    A form field labeled "Email Address" clearly indicates what information is expected
    How to implement
    Use descriptive heading elements to organize your page content
    Use clear labels on form fields
    Resources
  7. 2.4.7 - Focus Visible
    Design
    Code
    Easy
    AA
    Ensure each item receiving focus has a visible indicator
    Description
    When the user navigates the page with the keyboard, focused interactive elements are clearly identified.
    Examples
    A button has a visible outline when it receives focus
    A scrollable container has a visible focus ring when it is focused
    A link is underlined when it receives focus
    A form field changes background color when it receives focus
    How to implement
    Design focus styles that are clearly visible
    Use consistent focus styles across the site
    Do not hide focus styles with CSS for keyboard users
    Resources
  8. 2.4.8 - Location
    Design
    Easy
    AAA
    Use breadcrumbs, site maps, or other indicators to give context
    Description
    Provide a way for the user to locate themselves within the content.
    Examples
    A breadcrumb trail shows the user's current location on an online store
    A site map provides an overview of the website's structure
    How to implement
    Use breadcrumb navigation to show the user's current location in nested pages
    Label the breadcrumb links concisely and use a clear structure
    Provide a site map for smaller websites
    Resources
  9. 2.4.9 - Link Purpose (Link Only)
    Design
    Content
    Code
    Easy
    AAA
    Provide descriptive names for all links
    Description
    The purpose of each link should be clear from the link text alone.
    Examples
    A text "If you have a question, visit our " follow by a link "FAQ section"
    A link labeled "Read more" contains a visually hidden text " about the peach pie recipe"
    How to implement
    Do not use icons only links
    Avoid labeling links with generic text like "click here" or "read more"
    If the text label is generic, provide more context in a visually hidden element
    Resources
  10. 2.4.10 - Section Headings
    Design
    Easy
    AAA
    Where content is organized in sections, provide section headings
    Description
    Headings describe the page sections.
    Examples
    A heading labeled "Contact Information" clearly indicates the section's content
    A heading labeled "Notifications" clearly indicates the section for user alerts in the settings page
    How to implement
    Use descriptive heading elements to organize your page content
    Use heading elements to label groups of related content
    Resources
  11. 2.4.11 - Focus Not Obscured (Minimum)
    Code
    Normal
    AA
    Ensure when an item gets keyboard focus, it is at least partially visible
    Description
    When the user focuses an element, this element is at least partially visible in the viewport.
    Examples
    The user focuses a link below the bottom of the viewport, the page scrolls to make the link visible
    How to implement
    When changing elements position, ensure they do not completely obscure focused elements
  12. 2.4.12 - Focus Not Obscured (Enhanced)
    Code
    Normal
    AAA
    Ensure when an item gets keyboard focus, it is fully visible
    Description
    When the user focuses an element, this element is fully visible in the viewport.
    Examples
    The user focuses a link below the bottom of the viewport, the page scrolls to make the link visible
    How to implement
    When changing elements position, ensure they do not obscure focused elements
  13. 2.4.13 - Focus Appearance
    Design
    Code
    Easy
    AAA
    Use a focus indicator of sufficient size and contrast
    Description
    The focus indicator is at least 2px wide and has a contrast ratio of at least 3:1 against the adjacent background, except when:
    The focus indicator is determined by the user agent and cannot be adjusted by the author
    The focus indicator and the indicator's background color are not modified by the author
    Examples
    The focus indicator is 2px wide and is black, against a white background
    How to implement
    Use at least 2px on outline-width for focus indicators
    Make sure focus indicators have a contrast ratio of at least 3:1 against the background
    Resources
5. 2.5 - Input Modalities
  Make it easier for users to operate functionality through various inputs beyond keyboard.
  1. 2.5.1 - Pointer Gestures
    Design
    Easy
    A
    Provide single-point operation for all functions
    Description
    All actions can be done using a single pointer (e.g. keypress, tap, click).
    Examples
    A map supports pinch-to-zoom, but also provides a button to zoom in and out
    A carousel supports swiping to change slides, but also provides buttons to change slides
    A kanban supports dragging cards to change their order, but also provides buttons to move cards up and down
    How to implement
    Provide buttons or other controls that can be activated with a single tap or click
  2. 2.5.2 - Pointer Cancellation
    Code
    Normal
    A
    Make pointer cancellation predictable and consistent
    Description
    For all pointer actions, at least one of the following is true:
    No Down-Event - The action is not triggered by a down-event
    Abort or Undo - The action can be aborted or undone before completion
    Essential - Completing the function on the down-event is essential
    Examples
    The user clicks a button to submit a form, but can drag the pointer away from the button before releasing the mouse button to cancel the action
    The user presses a key to start a video, but can press the escape key to cancel the action before the video starts
    A virtual piano key will play a sound as soon as the key is pressed
    How to implement
    Use keyup or mouseup events instead of keydown or mousedown
    Provide a way to cancel the action mid-way through, such as a drag or an escape keypress
    Resources
  3. 2.5.3 - Label in Name
    Code
    Easy
    A
    Where practical, make the control's text label and accessible name match
    Description
    Make sure the accessible name of a component matches or starts with its visible label.
    Examples
    A button with the text "Submit" has an accessible name of "Submit".
    A search bar with the label "Search" has an accessible name of "Search for a product".
    How to implement
    Avoid duplicating visible labels and other accessible names
    If using different means to label a control, ensure the accessible name matches or starts with the visible label
  4. 2.5.4 - Motion Actuation
    Design
    Code
    Easy
    A
    Do not rely solely on device motion to control page content
    Description
    If your page uses motion features, you provide a non-motion alternative and you allow the user to disable them, except when:
    Supported Interface - The motion is part of an accessibility supported interface
    Essential - The motion is essential for the function and doing so would invalidate the activity
    Examples
    Shaking the device can empty a text field, but the user can also click a button to clear the field
    Tilting the device can navigate between pages, but the user can turn that feature off
    How to implement
    Provide a non-motion alternative for any functionality that relies on motion
    Allow users to disable motion features
    Do not interfere if the feature is a native accessibility feature of the device
  5. 2.5.5 - Target Size (Enhanced)
    Design
    Easy
    AAA
    Make custom targets at least 44px by 44px
    Description
    Interactive elements must have a minimum target size of 44px by 44px, except when:
    Equivalent - The element has a duplicate on the same page that meets this requirement
    Inline - The element is in a block of text
    User Agent Control - The element is a native control and is not modified by the author
    Essential - The current presentation of the element is essential
    Examples
    A button is at least 44px by 44px in size
    A button is smaller, but has sufficient space around it to allow for a 44px by 44px target
    A button is smaller, but there is a duplicate on the same page that meets the requirement
    A link is part of a sentence and its size is constrained by the line-height of the text
    How to implement
    Use a minimum size of 44px by 44px for interactive elements
    OR ensure that the element has sufficient space around it to allow for a 44px by 44px target
    OR provide an equivalent control on the same page that meets the requirement
    Resources
  6. 2.5.6 - Concurrent Input Mechanisms
    Code
    Easy
    AAA
    Do not prevent users from switching their mode of input
    Description
    Your content must be usable by multiple input methods.
    Examples
    The user can navigate a page with the keyboard, then use a mouse to click a button
    The user can use a touchscreen to tap a button, then use a keyboard to type in a text field
    How to implement
    Do not restrict users to a single input method
  7. 2.5.7 - Dragging Movements
    Design
    Easy
    AA
    For any action that involves dragging, provide a simple pointer alternative
    Description
    If your page has a dragging feature, provide an alternative.
    Examples
    The user can drag a card to move it, but can also click a button to move it up or down
    The user can drag a slider to change the volume, but can also click the slider
    How to implement
    Provide alternatives for dragging actions
  8. 2.5.8 - Target Size (Minimum)
    Design
    Easy
    AA
    Make custom targets at least 24px by 24px
    Description
    Interactive elements must have a minimum target size of 24px by 24px, except when:
    Equivalent - The element has a duplicate on the same page that meets this requirement
    Inline - The element is in a block of text
    User Agent Control - The element is a native control and is not modified by the author
    Essential - The current presentation of the element is essential
    Examples
    A button is at least 24px by 24px in size
    A button is smaller, but has sufficient space around it to allow for a 24px by 24px target
    A button is smaller, but there is a duplicate on the same page that meets the requirement
    A link is part of a sentence and its size is constrained by the line-height of the text
    How to implement
    Use a minimum size of 24px by 24px for interactive elements
    OR ensure that the element has sufficient space around it to allow for a 24px by 24px target
    OR provide an equivalent control on the same page that meets the requirement
    Resources
3 - Understandable
1. 3.1 - Readable
  Make text content readable and understandable.
  1. 3.1.1 - Language of Page
    Code
    Easy
    A
    Indicate the predominant language on a page
    Description
    Indicate the language of the page in the HTML markup so a screen reader can read it correctly.
    Examples
    An english page has the lang attribute set to "en"
    How to implement
    Use the lang attribute in the HTML tag to specify the language of the page
    Use a 2-letter language code from ISO-639 Set 1 and do not specify a region or country
    Resources
  2. 3.1.2 - Language of Parts
    Content
    Code
    Easy
    AA
    Indicate when words are in a different language
    Description
    If different from the page language, indicate the language of a piece of content in the HTML markup, except for proper names, technical terms and common-use words or phrases.
    Examples
    A german word in an english page has the lang attribute set to "de"
    The french word "rendez-vous" in an english page does not need a lang attribute
    How to implement
    Use the lang attribute in the HTML tag to specify the language of a piece of content
    Use a 2-letter language code from ISO-639 Set 1 and do not specify a region or country
    If the attribute can not be used (e.g. in a text editor), give a translation or a definition of the word
    Resources
  3. 3.1.3 - Unusual Words
    Content
    Easy
    AAA
    Provide definitions for technical jargon and unusual terms
    Description
    If your content uses unusual words or phrases, provide a way for users to find their meaning.
    Examples
    A word that is not commonly used is followed by a definition or a link to its meaning
    How to implement
    Provide a definition or a link to the meaning of unusual words or phrases
    Use a glossary or a dictionary to explain technical jargon
  4. 3.1.4 - Abbreviations
    Content
    Code
    Easy
    AAA
    Provide the expanded form of abbreviations to users
    Description
    If your content uses abbreviations, provide a way for users to find their meaning.
    Examples
    An abbreviation like 'HTML' is followed by its expanded form 'HyperText Markup Language'
    How to implement
    Provide the expanded form of abbreviations in the content when they are first used
    Use a glossary or a dictionary to explain abbreviations
    You can use the abbr HTML element to mark up abbreviations
    Resources
  5. 3.1.5 - Reading Level
    Content
    Hard
    AAA
    When text information becomes complex, create a more easily understood version
    Description
    If your content requires an advanced reading ability (≃10 years old) after removal of proper names and titles, a simplified version is available.
    Examples
    A research paper provides a simplified summary for the general public
    A legal document provides a link to a plain language version
    How to implement
    Use plain language and avoid complex vocabulary
    OR provide a summary or an overview of the content
    OR create a simplified version of the content that is easier to understand
  6. 3.1.6 - Pronunciation
    Content
    Easy
    AAA
    Indicate how to pronounce a word, where its meaning is otherwise unclear
    Description
    If your content contains unusual or ambiguous words or phrases, provide a way for users to find their pronunciation.
    Examples
    The word "quinoa" is followed by its phonetic pronunciation "(pronounced keen-wah)"
    The word "lead" is followed by its phonetic pronunciation "(pronounced leed)" when it means to guide, and "(pronounced led)" when it means the metal
    How to implement
    Provide the phonetic pronunciation of unusual or ambiguous words or phrases
2. 3.2 - Predictable
  Make web pages appear and operate in predictable ways.
  1. 3.2.1 - On Focus
    Design
    Code
    Easy
    A
    Do not change the user's context when items get focus
    Description
    When any component receives focus, it does not trigger any action.
    Examples
    The user goes in a links menu with the keyboard, focusing a link does not change the page
    The user focuses on a button, the button does not trigger its action
    How to implement
    Do not trigger actions on focus (tab key) events
  2. 3.2.2 - On Input
    Design
    Code
    Easy
    A
    Warn users if their context will change based on their input
    Description
    When a form field is used, it does not trigger any surprising change.
    Examples
    Selecting an option in a form dropdown does not change the page
    Checking a checkbox does not submit a form
    Checking a checkbox can show or hide additional fields
    How to implement
    Do not trigger big changes on input events
  3. 3.2.3 - Consistent Navigation
    Design
    Easy
    AA
    Consistently order navigation that repeats across multiple pages
    Description
    Navigation links that are repeated on multiple pages should stay in the same order and location, unless the user has initiated the change.
    Examples
    The website always displays the search bar at the same location
    The main navigation always has the same links in the same order
    A navigation content depending on the current products category will change if the user changes the category
    How to implement
    Use the same location for navigation items across multiple pages
    Use the same order for navigation items across multiple pages
    Do not change the content of a navigation unless the user has initiated the change
  4. 3.2.4 - Consistent Identification
    Design
    Easy
    AA
    Identify repeating functions consistently
    Description
    If an element is repeated on multiple pages, it has the same accessible name.
    Examples
    A button that creates a new item is always labeled 'Create new xxx'
    A link that goes to the contact page is always labeled 'Contact us'
    How to implement
    Use the same label for the same element across multiple pages
    Use the same accessible name for the same element across multiple pages
  5. 3.2.5 - Change on Request
    Design
    Code
    Easy
    AAA
    Provide ways for users to trigger or turn off changes of context
    Description
    The user must stay in control of changes of context, and can request or turn off changes.
    Examples
    The user can turn off auto-updates in a feed, and use a "Refresh" button to update manually
    How to implement
    Do not trigger changes of context automatically
    Provide a way for the user to request changes of context
  6. 3.2.6 - Consistent Help
    Design
    Easy
    A
    Put help in the same place when it is on multiple pages
    Description
    When the web page contains any of the following help tools, they are displayed in the same location and order, unless the user has initiated the change:
    Human contact details - email, phone number...
    Human contact mechanism - chat, contact form...
    Self-help option - FAQ, Wiki, resource link...
    A fully automated contact mechanism - chatbot
    Examples
    A website has a contact form in the footer of every page
    A website has a chat button in the bottom right corner of every page
    A website has a FAQ link in the header of every page
    The user can drag the chat button to a different location, and it will stay there across pages
    How to implement
    Use the same location for help tools across multiple pages
    Use the same order for help tools across multiple pages
    Do not change the location of a help tool unless the user has initiated the change
3. 3.3 - Input Assistance
  Help users avoid and correct mistakes.
  1. 3.3.1 - Error Identification
    Design
    Code
    Normal
    A
    Provide descriptive notification of errors
    Description
    If the user makes a mistake while completing a form, identify where the error is and explain it.
    Examples
    The user has entered an invalid email address, the email field becomes red and an error message is displayed below
    The user has made several mistakes in a long form, the fields display errors and a summary of the errors is displayed at the top of the form
    How to implement
    When the field has an error, link the error message to the field using aria-describedby
    User the aria-invalid attribute to indicate that the field has an error
    Style the field and the error message so it is easy to locate the error visually (not just with color)
    If the form is long, consider displaying a summary of the errors at the top of the form
    Use the alert role on error messages and summary for assistive technologies
    Do not identify errors on fields before submission if the user has not interacted with them
    Resources
  2. 3.3.2 - Labels or Instructions
    Design
    Code
    Normal
    A
    Provide labels or instructions for inputs
    Description
    Use labels and hints to explain how the user should fill the form.
    Examples
    A field has a label that describes what the user should enter
    A checkbox has a label that describes what it does
    A name field explains what is expected (e.g. full name, first name...)
    A password field has an instruction that explains the requirements
    How to implement
    Use the label element to associate labels with form fields
    Try not to visually hide labels, as they help users understand the form
    Do not use placeholder texts as labels, as they disappear and are not accessible
    Use required on native elements or aria-required on custom elements
    Indicate which fields are required (OR which are optional) using a visual indicator
    When the field has hint, link the hint text to the field using aria-describedby
    Use fieldset and legend OR role group to group related fields
    Resources
  3. 3.3.3 - Error Suggestion
    Design
    Code
    Easy
    AA
    Where errors are detected, suggest known ways to correct them
    Description
    If the user makes a mistake while completing a form, give them suggestions on how to fix it.
    Examples
    For an invalid email field with no hint text, the error says "Enter a valid email address (e.g. jane@wong.com)"
    For an password field with a hint text that specifies the requirements, the error says "The password must meet the requirements"
    How to implement
    Do not use words like "forbidden" or "you forgot"
    Do not use humorous words like "oops" or say "please"
    Do not use technical jargon that the user may not understand
    If there was a hint text, refer to it in the error message
    Clearly indicate what is wrong (e.g. too long, too short, empty...)
    If the error is in a sign in form, do not indicate which part is wrong (e.g. email or password) to avoid security issues
    Resources
  4. 3.3.4 - Error Prevention (Legal, Financial, Data)
    Design
    Code
    Normal
    AA
    Provide ways for users to confirm, correct, or reverse important submissions
    Description
    If the user is making a financial transaction, legal commitment, or updating personal data, at least one of the following is true:
    Reversible - The user can reverse the submission
    Checked - The data is checked automatically and the user can correct them before submitting
    Confirm - The user can review, correct, and confirm their information before submitting
    Examples
    The user is making a payment, they can review the payment details before confirming
    The user is signing a contract, an alert is displayed, asking them to confirm their decision
    How to implement
    Provide a way for the user to reverse the process after submission for a certain period of time
    OR display a confirmation page before finalizing that allows them to correct their information
  5. 3.3.5 - Help
    Design
    Content
    Code
    Easy
    AAA
    Provide help to users on the function currently being performed
    Description
    The user can access help when completing a form or a process.
    Examples
    The user is filing their taxes online, a help tooltip is available next to each field
    The user is asked about their skin type on a makeup website, a chart is displayed next to the field
    The user is buying a shirt, a size guide link is available next to the size field
    How to implement
    For non-trivial forms, provide a help link, tooltip, or description next to each field
    For complex processes, provide a help link or tooltip on each step
  6. 3.3.6 - Error Prevention (All)
    Design
    Code
    Normal
    AAA
    Provide ways for users to confirm, correct, or reverse any submissions
    Description
    If the user submitting a form, at least one of the following is true:
    Reversible - The user can reverse the submission
    Checked - The data is checked automatically and the user can correct them before submitting
    Confirm - The user can review, correct, and confirm their information before submitting
    Examples
    The user is making a payment, they can review the payment details before confirming
    The user is signing a contract, an alert is displayed, asking them to confirm their decision
    The user is filling their profile information, they can review and correct their information before submitting
    How to implement
    Provide a way for the user to reverse the process after submission for a certain period of time
    OR display a confirmation page before finalizing that allows them to correct their information
  7. 3.3.7 - Redundant Entry
    Design
    Code
    Normal
    A
    Do not ask for the same information twice in the same session
    Description
    If the user has already given a piece of information, it will be auto-filled or selectable the next time they have to give it, except when:
    Re-entering the information is essential
    The information is required to ensure the security of the content
    Previously entered information is no longer valid
    Examples
    The next time the user has to enter their email address, it is auto-filled
    The next time the user has to enter their shipping address, it is suggested in a dropdown
    A credit card security code must be entered every time for security reasons
    A code verification sent by email expires when it is used (or after a period of time)
    The user must type the name of the Github repository they want to delete
    How to implement
    Use the autocomplete attribute on form fields to enable auto-fill
    Use the datalist element to provide suggestions for previously entered information
    Resources
  8. 3.3.8 - Accessible Authentication (Minimum)
    Design
    Code
    Easy
    AA
    Do not make people solve, recall, or transcribe something to sign in
    Description
    When the user signs in, do not ask them to pass a test (solve a puzzle or remember their password), unless:
    Alternative - You provide an alternative authentication method (e.g. magic link, OAuth...)
    Mechanism - You enable a mechanism to assist the user (e.g. auto-fill, 2FA, passkeys...)
    Object Recognition - The test is to recognize objects
    Personal Content - The test is to recognize user-supplied images or media
    Examples
    The user must solve a puzzle to sign in, but they can also sign in with a magic link
    The user must remember their password to sign in, but they can also sign in with a fingerprint
    The user must recognize objects in a picture to sign in
    The user can use a password manager to fill their password automatically
    How to implement
    Do not block pasting values in the sign in form
    Use the autocomplete attribute on form fields to enable auto-fill
    Use the inputmode attribute to indicate the type of input expected (e.g. numeric, email...)
    If possible, use mechanisms such as Fingerprint, Face ID, or Passkeys for authentication
    If you use a CAPTCHA, make sure it is accessible and provides an alternative method
    Resources
  9. 3.3.9 - Accessible Authentication (Enhanced)
    Design
    Code
    Easy
    AAA
    Do not make people recognize objects or user-supplied images and media to sign in
    Description
    When the user signs in, do not ask them to pass a test (solve a puzzle or remember their password), unless:
    Alternative - You provide an alternative authentication method (e.g. magic link, OAuth...)
    Mechanism - You enable a mechanism to assist the user (e.g. auto-fill, 2FA, passkeys...)
    Examples
    The user must solve a puzzle to sign in, but they can also sign in with a magic link
    The user must remember their password to sign in, but they can also sign in with a fingerprint
    The user can use a password manager to fill their password automatically
    How to implement
    Do not block pasting values in the sign in form
    Use the autocomplete attribute on form fields to enable auto-fill
    Use the inputmode attribute to indicate the type of input expected (e.g. numeric, email...)
    If possible, use mechanisms such as Fingerprint, Face ID, or Passkeys for authentication
    Resources
4 - Robust
1. 4.1 - Compatible
  Maximize compatibility with current and future user agents, including assistive technologies.
  1. 4.1.1 - Parsing (Obsolete and Removed)
    Code
    Easy
    A
    This success criterion has been removed from WCAG 2.2. It is included here for reference only
    Create web pages according to HTML standards
    Description
    The markup does not contain errors that cause conflicts with assistive technologies (incorrect nesting, missing end tags, duplicate id attributes...).
  2. 4.1.2 - Name, Role, Value
    Design
    Code
    Hard
    A
    Give components correct accessible names, roles, states, and values
    Description
    Components have accessible names and roles, and show their state and value to assistive technologies, even when they change dynamically.
    Examples
    A button with no visible label has an accessible name that is announced by screen readers
    A custom tabs component has a tablist role and each tab has a tab role
    A toggle button has an aria-pressed attribute that indicates whether it is pressed or not
    How to implement
    Always prefer native HTML elements, as they come with built-in accessibility features
    Always prefer to display visual labels for your components
    Link your form fields to label elements (you can hide them visually if needed)
    Use aria-labelledby to link existing text labels (you can hide them visually if needed)
    Avoid aria-label and title as it is not always announced or translated by browsers
    Use the correct role for custom elements
    Use the correct ARIA attributes to convey state and value
    Resources
  3. 4.1.3 - Status Messages
    Design
    Code
    Normal
    AA
    Let assistive technology notify users about status changes that do not take focus
    Description
    If your web page uses notifications or status messages that do not take focus, they are still announced by assistive technologies, even when they change dynamically.
    Examples
    When the user tries to submit an incomplete form, an error message appears
    The user receives a new message in a chat application
    The user deletes an item from a list, a confirmation message appears
    A search action returns results in a section below the search bar
    A progress bar shows the status the the current upgrade
    How to implement
    Use the role status for a successful message
    Use the role alert for an error or warning message
    Use the role log for sequential messages that do not require immediate attention
    Use the role progressbar for an error or warning message
    Resources

WCAG Content ​

Filters ​

Teams

Difficulty

Level

List ​

1 - Perceivable

1.1 - Text Alternatives

Description

Examples

How to implement

Resources

1.2 - Time-based Media

1.2.1 - Audio-only and Video-only (Prerecorded)

Description

Examples

How to implement

1.2.2 - Captions (Prerecorded)

Description

Examples

How to implement

1.2.3 - Audio Description or Media Alternative (Prerecorded)

Description

Examples

How to implement

1.2.4 - Captions (Live)

Description

Examples

How to implement

1.2.5 - Audio Description (Prerecorded)

Description

Examples

How to implement

1.2.6 - Sign Language (Prerecorded)

Description

Examples

How to implement

1.2.7 - Extended Audio Description (Prerecorded)

Description

Examples

How to implement

1.2.8 - Media Alternative (Prerecorded)

Description

Examples

How to implement

1.2.9 - Audio-only (Live)

Description

Examples

How to implement

1.3 - Adaptable

1.3.1 - Info and Relationships

Description

Examples

How to implement

Resources

1.3.2 - Meaningful Sequence

Description

Examples

How to implement

1.3.3 - Sensory Characteristics

Description

Examples

How to implement

1.3.4 - Orientation

Description

Examples

How to implement

Resources

1.3.5 - Identify Input Purpose

Description

Examples

How to implement

Resources

1.3.6 - Identify Purpose

Description

Examples

How to implement

Resources

1.4 - Distinguishable

1.4.1 - Use of Color

WCAG Content

Filters

List