Missing Text in the Title Not Updated for Dynamic Content: Inaccurate or Non-Informative Title: Mismatch Between Heading and Title: No Unique or Concise Title:
Key Errors:
Areas of Testing:
<title> Tag:<title> element is present but contains no text.<title> does not update when the page's purpose changes (i.e., when clicking the button to load new content).<title> is either empty or does not reflect the content of the page.<h1> heading is "Accessibility Test: Page Title Errors", but the <title> is empty or missing, so they do not match or align.<title> element is present and contains valid text.<title> matches or closely resembles the top-level heading (<h1>) on the page.
Page Language ( Inline Language Change ( Heading Structure: Concise and Informative Headings: All headings are concise and informative, clearly describing the content that follows them. Dynamic Title Update: Demonstrates how the page title updates dynamically when triggered by a user action, complying with WCAG 2.4.2 for dynamic content.
Key Errors:
lang="en"): The page is set to English using the two-character ISO 639-1 code in the <html> tag, which complies with WCAG 3.1.1.lang="fr"): A span inside a paragraph demonstrates an inline language change to French, marked with lang="fr" as required by WCAG 3.1.2.<h1>, <h2>, <h3>) is used, which supports assistive technologies in bypassing blocks of content and creating a meaningful outline.<h5> after <h3>), which is a violation of the best practice for consecutive levels.
Landmarks to Bypass Blocks of Content: Multiple Header Landmarks Without Distinguishable Names: Missing Main Content Landmark: Incorrect List Markup: Multiple Footer Landmarks: Missing Landmark for Navigation:
Key Errors:
<header> elements are both marked with role="banner", but neither has a distinguishable aria-label or aria-labelledby attribute, which violates the best practice of uniquely naming landmarks when there are multiple instances.<main> landmark is missing for the main content section, making it harder for screen readers to identify the primary content.<ul> are incorrectly marked with <span> instead of <li>, violating the WCAG requirement for appropriate semantic markup for lists.<footer> elements both marked with role="contentinfo", which is against the best practice of only having one instance of the <footer> or role="contentinfo" landmark.<nav> element is used for navigation, but it is missing a role="navigation" or an aria-label, which would help screen readers identify it as a landmark.
Missing Missing Incorrect Header and Data Cell Associations: In the third table, the data cells under "Warehouse 1" and "Warehouse 2" are not properly associated with their corresponding headers. Layout Table with Headers: The last table is being used for layout purposes (Contact Us info) but incorrectly uses
Key Errors:
<th> for Header Tags: The first table uses <td> elements instead of <th> for the headers, violating WCAG 1.3.1.scope Attributes: The second table has header cells marked with <th>, but they are missing the scope="col" or scope="row" attributes to indicate their relationship to the data cells.<th> elements, which should not appear in layout tables.
Emphasis with Styling Alone: The first paragraph uses only visual styling ( Highlighting without Using Inline Quote with Strikethrough without Inserted Text without
Key Errors:
font-weight: bold) for emphasis instead of using semantic elements like <em> or <strong>. This violates the best practice that emphasis should be conveyed semantically.<mark>: The second paragraph highlights text using a yellow background but does not use the <mark> element, which is recommended for semantic highlighting.<blockquote> for Indentation: The third section uses <blockquote> solely for visual indentation, which is incorrect because <blockquote> should only be used for actual block-level quotations.<q> Only: The inline quote in the fourth paragraph is only marked up with the <q> tag. Some screen readers and browsers may not fully support this element, so supplemental text is required.<del>: The strikethrough text in the fifth paragraph is applied with the <s> element for visual styling, but it should use <del> to convey the meaning of the strikethrough.<ins>: The sixth paragraph uses underlined text to indicate insertion, but it should be marked with the <ins> element to semantically represent new or inserted text.
Link Without Links Used for Button-like Functionality: The second link uses an anchor tag ( Unclear Link Purpose: The third link has generic text like "Click here," which doesn't explain its purpose clearly. Inconsistent Link Text for the Same Destination: Links to the same destination have different text ("More Info" and "Details"). Links Opening in a New Tab Without Indication: The fifth link opens in a new tab but does not inform the user about this behavior. Link to Non-HTML File Without File Type Indication: The sixth link points to a PDF file but does not mention that it leads to a PDF. No Visual Focus Indicator: The seventh link does not visually indicate focus when navigated to via keyboard. Using Link Text Includes "Link": The ninth link text states "Link to Example," which is unnecessary as screen readers already announce links. Link Only Differentiated by Color: The last link is distinguished from surrounding text by color alone, with insufficient contrast and no other indicators like underlines. Missing Skip Navigation: The page lacks a "skip to content" link, making it harder for keyboard users to bypass blocks of content.
Key Errors:
href or role="link": The first "link" is a <span> element styled like a link but missing proper semantic markup (<a> or role="link").<a>) for form submission, which should be a button element instead.tabindex with a Positive Value: The eighth link incorrectly uses a tabindex value of 1, which can disrupt the natural tab order.
Inconsistent Navigation Order: The order of navigation links differs between the first and second Missing "You Are Here" Indicator: No visual or non-visual indicator is provided to inform users which page they are currently on (Best practice). Missing Skip Link: There is no method to bypass repeated blocks of content, such as a "skip to content" link, violating the requirement to allow users to bypass blocks of content (WCAG 2.4.1). Inconsistent Help Links: The help link is presented differently in the footer and across different pages, violating the consistency rule (WCAG 3.2.4). Lack of Multiple Navigation Methods: There are no additional navigation methods like a site map, search functionality, or table of contents, violating the rule requiring multiple ways to navigate the site (WCAG 2.4.5). Tabindex Misuse: The use of No Visible Skip Link: Although there is a "Skip to content" link, it’s not visible at all times or when it receives keyboard focus (Best practice). Unclear Page Structure: There’s no table of contents or proper heading structure to reflect the content, making it harder for users to navigate the page (Best practice).
Key Errors:
<nav> elements, violating the requirement that navigation must appear in the same relative order across all pages (WCAG 3.2.3).tabindex with positive values creates an illogical focus order, which can confuse users when navigating with a keyboard (WCAG 2.4.3).
No alt text for an informative image ( Alternative text too long ( Redundant alt text ( Decorative image with non-empty alt text ( Complex image without extended description ( Informative background image without text ( Image of text instead of using real text ( Active background image without an accessible name ( CAPTCHA image without alt text. CAPTCHA without a sensory alternative (
Key Errors:
<img src="informative.jpg" />).alt="A beautiful sunset over the mountains...").alt="Icon of a bell").alt="A decorative border around the image").alt="").alt="A complex flowchart...").background-image: url('info-bg.jpg')).alt="Welcome to Our Website").background-image: url('active-bg.jpg')).aria-label).alt="Enter the characters shown in the image.").
Small Text Contrast Error: Large Text Contrast Error: UI Component Contrast Error: Focus Indicator Contrast Error: Color Information Error: Mobile Zoom Prevention:
Key Errors:
.low-contrast-small uses a color #999 (light gray) on a white background. The contrast ratio is less than 4.5:1 for text smaller than 18pt, violating WCAG 1.4.3..low-contrast-large uses a color #ccc (very light gray) on a white background. The contrast ratio is less than 3:1 for large text (20px bold), violating WCAG 1.4.3..low-contrast-button has insufficient contrast between the button and the background (#ddd on white), violating WCAG 1.4.11..low-contrast-focus:focus uses a light border (#ddd) for focus indication, which does not meet the 3:1 contrast ratio requirement for focus indicators, violating WCAG 1.4.11.<span class="status"> is only indicated by color (red), violating WCAG 1.4.1, which requires a programmatically discernible alternative.<meta name="viewport" content="user-scalable=no"> prevents zooming on mobile devices, violating WCAG 1.4.4, which requires users to be able to zoom.
Visual Meaning by Location: Label Proximity Issue: Multiple Focal Points: Orientation Restriction: Scrolling in Two Directions: Non-Responsive Text:
Key Errors:
.error-message class uses position: absolute to place the error message based on the assumption that users will understand its meaning by its location only. This violates WCAG 1.3.3, which requires meaning to be conveyed without relying solely on visual cues like shape or position.label and input are too far apart due to excessive margin (50px). This breaks the best practice of keeping labels adjacent to their controls for easy visual association..focal-point class is used multiple times, creating conflicting visual emphasis points, which goes against the best practice of having one primary visual focal point..scrolling-issue div is too large (600px in both width and height), forcing both horizontal and vertical scrolling on smaller screens, violating WCAG 1.4.10..non-responsive class uses white-space: nowrap, which prevents text from reflowing and forces horizontal scrolling on smaller viewports, violating the requirement for adaptive/responsive text.
Missing Transcript for Prerecorded Audio: Autoplaying Audio Without Controls: Missing Alternative Text or Audio Description for Prerecorded Video-Only Content: Missing Captions for Prerecorded Multimedia: Flashing Content:
Key Errors:
<audio> element does not provide a transcript for the audio-only content, violating WCAG 1.2.1.<audio> element is set to autoplay and lacks controls to stop, pause, or mute the audio, violating WCAG 2.2.2 and WCAG 1.4.2.<video> element represents video-only content but lacks alternative text or an audio description, violating WCAG 1.2.1 and WCAG 1.2.5.<video> element is a multimedia example that does not include captions or an audio description, violating WCAG 1.2.2 and WCAG 1.2.5.<div> with the class flashing has an animation that causes it to flash more than three times per second, violating WCAG 2.3.1.
Flashing Content: Parallax Effect: Color Contrast: Autoplaying Video: Timed Content:
Key Errors:
.flashing div flashes faster than 3 times per second (WCAG 2.3.1)..parallax div has a parallax scrolling effect but is not keyboard accessible (WCAG 2.1.1)..low-contrast-text class has insufficient contrast against the background (WCAG 1.4.3).#timed-content disappears after 10 seconds without any user control (WCAG 2.2.1).
No Visual Focus Indicator (WCAG 2.4.7): Positive Tabindex Values (Best Practice): Poor Color Contrast for Focus Indicator (WCAG 1.4.11): Small Button Target Size (WCAG 2.5.8): Broken Logical Tab Order (WCAG 2.4.3): No Visual Hover Indicator (Best Practice): Keyboard Trap (WCAG 2.1.2): No Visual Focus on Input Elements (WCAG 2.1.1):
Key Errors:
button and a elements have outline: none;, which removes the visual focus indicator.a link has a positive tabindex value (5), which is not recommended.input:focus has a border with insufficient contrast..small-button element is smaller than 24x24 pixels, violating the target size requirement.input fields is illogical (Last Name comes before First Name)..no-hover-indicator element has no change on hover.#keyboard-trap div, making it impossible to escape.input and buttons have insufficient focus styles.
Key Errors:
for attribute or the id attribute.label for the phone input does not match the programmatic name.disabled-field) without proper communication for assistive technologies.
Key Errors:
aria-invalid="true" for inputs that fail validation.
Focus moved without warning: Content change on input without notification: Pop-up window without prior notice: Lack of feedback for screen readers when content is dynamically added: No option to extend the session: Keyboard focus is lost or moved incorrectly:
Key Errors:
Area of testing
Missing Accessible Names: Incorrect ARIA Role and Attributes: Missing ARIA Live Regions: Incorrect Use of Lack of Accessible Name for Static Semantic Elements: Lack of Keyboard Support for Custom Widgets: No Feedback for State Changes:
Key Errors:
aria-label or aria-labelledby. Screen readers cannot identify the purpose of the button properly.role="slider") and the aria-valuenow state is not being announced or updated properly.aria-live region to announce these changes to screen readers.aria-expanded:aria-expanded attribute is not updated correctly when toggling the accordion, which can confuse screen reader users.<iframe> lacks a title or aria-label attribute, making it inaccessible to users relying on assistive technologies.aria-live regions for important dynamic updates, such as toggling visibility or adjusting the slider value.Area of testing
aria-live regions when dynamic content changes.
Missing Text Alternative for CAPTCHA Image: No Sensory Alternative for CAPTCHA: Poor Color Contrast: Lack of Keyboard Accessibility: No Dynamic Content Handling: No Custom Widget Accessibility:
Key Errors:
alt attribute describing its purpose, nor is there any text-based description or alternative.Area of testing