For AI agents and LLMs: a machine-readable index is available at llms.txt. A plain-Markdown version of any documentation page is available by appending .md to its URL.
Skip to main content

Accessibility Rule Repository

Every accessibility rule TestMu AI evaluates across web, Android, and iOS, mapped to its WCAG success criterion with concise remediation guidance. Switch platforms with the tabs below.

Web rules map directly to WCAG success criteria.

RuleWCAGWhat it checksHow to fix
Non-text Content (1.1.1)1.1.1 (A)Meaningful non-text content exposes an accessible text alternative that explains its purpose or information.• add accurate alt text for meaningful content
• mark decorative content as decorative so it is ignored correctly
• ensure icon-only controls expose an accessible name through the appropriate attribute or label
Info and Relationships (1.3.1)1.3.1 (A)Headings, lists, tables, form groups, and landmark regions use correct semantic HTML rather than relying on visual appearance alone.• use native semantic elements for headings, lists, tables, and form groups
• add ARIA landmarks only when native elements are not available
• verify heading levels follow a logical nesting order without skipping levels
• test with a screen reader to confirm the announced structure matches the visual layout
Orientation (1.3.4)1.3.4 (AA)CSS or viewport meta configurations that lock the page to a single orientation, preventing users from rotating their device.• support both portrait and landscape orientations through responsive design
• remove JavaScript orientation locks unless the content genuinely requires a specific orientation (e.g., a piano keyboard app)
• test the layout in both orientations on real devices
• if a specific orientation is essential, clearly document why
Use of Color (1.4.1)1.4.1 (A)Instances where meaning is communicated exclusively through color without a secondary visual indicator such as text, icons, patterns, or underlines.• pair color with a text label, icon, pattern, or border change
• underline links or add a visible icon to distinguish them from surrounding text
• use patterns, hatching, or data labels in charts alongside color
• test the interface with a color-blindness simulator to confirm the secondary cue is visible
Reflow (1.4.10)1.4.10 (AA)Content that causes horizontal scrolling at 320px viewport width (equivalent to 400% zoom on a 1280px desktop display).• use responsive CSS (relative units, max-width, flexbox/grid) to allow single-column reflow
• wrap wide tables in a scrollable container so the rest of the page still reflows
• set images to max-width: 100% so they scale within their container
• test at 320px viewport width (or 400% zoom) and fix any horizontal overflow
Non-text Contrast (1.4.11)1.4.11 (AA)The contrast of interactive component boundaries (input borders, button outlines, focus indicators) and meaningful graphical objects (icons, chart segments) against their backgrounds.• ensure input and button borders meet the 3:1 ratio against adjacent background colors
• verify icon contrast against both light and dark backgrounds
• add borders or patterns to chart segments alongside color fills
• test all interactive states (default, hover, focus, active) for contrast compliance
Text Spacing (1.4.12)1.4.12 (AA)Content is clipped, truncated, or overlapping when text spacing is increased to WCAG-specified thresholds: line height 1.5x font size, paragraph spacing 2x font size, letter spacing 0.12x font size, word spacing 0.16x font size.• avoid fixed heights on text containers; use min-height or auto-height
• do not use overflow: hidden on elements that contain user-facing text
• test with a text-spacing bookmarklet that applies the WCAG thresholds
• ensure layouts flex and reflow when text occupies more space
Audio Control (1.4.2)1.4.2 (A)Pages where audio or video with sound starts automatically and runs beyond three seconds without an accessible pause or volume control.• never autoplay audio; if autoplay is required, start muted and let the user opt in
• provide a visible, keyboard-accessible pause or mute control near the top of the page
• ensure the control is the first or one of the first focusable elements so screen-reader users reach it quickly
Contrast (Minimum) (1.4.3)1.4.3 (AA)Text and important UI elements meet the minimum contrast requirements needed for readable, usable interfaces.• increase the contrast between foreground and background colors
• verify contrast after hover, focus, and active-state styling is applied
• avoid relying on color tokens that look correct in one theme but fail in another
Keyboard (2.1.1)2.1.1 (A)Interactive elements (links, buttons, form controls, and custom widgets) are reachable and operable using keyboard alone: Tab, Shift+Tab, Enter, Space, and arrow keys as appropriate.• use native interactive elements (<button>, <a>, <select>) whenever possible
• add tabindex="0" and keyboard event listeners to custom interactive widgets
• provide keyboard-equivalent actions for drag-and-drop, swipe, and hover interactions
• test the entire flow using only the keyboard (Tab, Enter, Space, Escape, arrows)
No Keyboard Trap (2.1.2)2.1.2 (A)For components that capture keyboard focus and prevent the user from tabbing or escaping out using standard keys.• ensure Escape closes modals and returns focus to the trigger element
• implement focus trapping in modals correctly: trap while open, release on close
• allow Tab to exit custom editors (provide a documented key combination or a skip link)
• test by tabbing into and then out of every interactive region on the page
Character Key Shortcuts (2.1.4)2.1.4 (A)Keyboard shortcuts bound to single character keys that are active globally on the page rather than scoped to a focused component.• require a modifier key (Ctrl, Alt, Shift) for global shortcuts
• scope single-character shortcuts so they only work when the relevant component is focused
• provide a settings UI to disable or remap character shortcuts
• if modifier keys are not feasible, ensure the shortcut deactivates when a text input has focus
Timing Adjustable (2.2.1)2.2.1 (A)Session timeouts, auto-redirects, and auto-updating content that impose a fixed time limit without user control.• provide a warning at least 20 seconds before a timeout and allow the user to extend it
• allow users to disable or increase time limits in account or session settings
• add pause, stop, and resume controls to auto-advancing content
• for real-time exceptions (auctions, live events), clearly document the constraint
Pause, Stop, Hide (2.2.2)2.2.2 (A)Animations, auto-scrolling regions, and auto-updating feeds that run for more than five seconds without user controls.• add visible pause, stop, or hide controls for any auto-moving content
• respect the prefers-reduced-motion media query to minimize or remove animation
• for live feeds, allow the user to opt in to updates rather than pushing them automatically
• ensure controls are keyboard accessible and announced by screen readers
Three Flashes or Below Threshold (2.3.1)2.3.1 (A)Content that produces rapid flashing (more than three flashes per second) in a large enough area to exceed safety thresholds.• limit flashing to three or fewer per second in any region of the page
• use the Photosensitive Epilepsy Analysis Tool (PEAT) to test video and animation content
• provide a warning before content that contains known flashing and allow the user to skip it
• respect prefers-reduced-motion to suppress flashing animations
Bypass Blocks (2.4.1)2.4.1 (A)Verifies the presence of skip-navigation links, landmark regions, or heading structures that allow users to bypass repeated content and jump directly to the main content area.• add a "Skip to main content" link as the first focusable element, visible on focus
• use <main> to wrap primary content and <nav> for navigation blocks
• ensure heading levels provide meaningful structure users can navigate by
• test by pressing Tab immediately after page load to confirm the skip link appears and works
Focus Not Obscured (Minimum) (2.4.11)2.4.11 (AA)Focused elements are not fully concealed behind sticky navigation bars, cookie banners, chat widgets, or other fixed-position elements.• add scroll padding (e.g., scroll-padding-top) to account for sticky header height
• ensure cookie banners and chat widgets do not overlap focusable page content
• implement scrollIntoView with appropriate offsets when managing focus programmatically
• test by tabbing through the entire page and confirming every focused element is at least partially visible
Page Titled (2.4.2)2.4.2 (A)Each page has a non-empty <title> element and that the title text meaningfully describes the page content.• write titles in the format "Page Purpose - Site Name" (e.g., "Order History - Acme Store")
• update document.title on route changes in single-page applications
• include key differentiators when pages are similar (e.g., "Edit Profile" vs. "View Profile")
• keep titles concise but specific enough to identify the page without seeing it
Focus Order (2.4.3)2.4.3 (A)The tab order of interactive elements follows a logical reading sequence and does not jump unexpectedly between unrelated sections.• rely on DOM source order rather than positive tabindex values
• ensure CSS visual reordering matches the underlying DOM sequence
• move focus into modals, dialogs, and drawers when they open, and return it when they close
• test with keyboard-only navigation to confirm the sequence feels natural
Link Purpose in Context (2.4.4)2.4.4 (A)Links whose text is generic (e.g., "click here", "read more", "learn more") without surrounding context that clarifies the destination or action.• write link text that describes the destination or action (e.g., "View order #1234" instead of "Click here")
• use aria-label or aria-labelledby to provide context when the visible text must remain short
• add aria-label to icon-only links that describes the action
• when multiple links share text, add visually hidden context (e.g., "Read more about pricing")
Focus Visible (2.4.7)2.4.7 (AA)Users can see where keyboard focus currently is as they move through interactive elements.• keep the default focus indicator or replace it with an equally visible custom style
• test focus styling on links, buttons, form fields, menus, and dialogs
• verify focus visibility in light and dark themes
Pointer Gestures (2.5.1)2.5.1 (A)Interactions that require multi-touch gestures (pinch, two-finger swipe) or precise path-based gestures (drawing a shape, swiping in a specific direction) without a single-click or single-tap alternative.• add button controls for zoom, pan, and delete alongside gesture support
• provide single-tap or single-click alternatives for every multi-point gesture
• for path-based input, offer an alternative method (e.g., typed input, button sequences)
• test with a single mouse click/tap only to confirm all features remain accessible
Pointer Cancellation (2.5.2)2.5.2 (A)Interactive elements do not fire irreversible actions on mousedown or touchstart alone, allowing users to abort by moving the pointer away before releasing.• use click events rather than mousedown or touchstart for actions
• if down-event activation is needed, provide an undo or confirmation step
• implement drag cancellation by allowing users to drop outside the target zone
• test by pressing down on a button, dragging away, and releasing to confirm no action occurs
Label in Name (2.5.3)2.5.3 (A)Compares the visible label text with the computed accessible name and flags mismatches where the visible text is not included in the accessible name.• ensure the accessible name starts with or contains the visible label text
• prefer visible <label> elements over aria-label when visible text is available
• when aria-label is needed, include the visible text within it (e.g., aria-label="Submit order form" for a button labeled "Submit")
• test with voice-input software to confirm controls can be activated by speaking their visible label
Motion Actuation (2.5.4)2.5.4 (A)Interactions driven by device sensors (accelerometer, gyroscope, camera) that do not offer an alternative button or control and cannot be disabled.• provide an on-screen button or control for every motion-triggered action
• allow users to disable motion-based activation in settings
• if motion is essential to the functionality (e.g., a step counter), document the exception
• test with the device in a fixed position to confirm all functionality is reachable through UI controls
Dragging Movements (2.5.7)2.5.7 (AA)Drag-and-drop interactions, slider controls, and reorderable lists that do not offer an alternative single-click or keyboard-based method.• add move-up/move-down buttons or a "Move to" menu for reorderable lists
• support click-on-source then click-on-destination as an alternative to drag-and-drop
• ensure sliders can be adjusted with arrow keys, or provide a text input alternative
• always include a file browse button alongside drag-and-drop upload zones
Target Size (Minimum) (2.5.8)2.5.8 (AA)Measures the rendered size of interactive elements (buttons, links, form controls) and flags those smaller than 24x24 CSS pixels that do not meet any exception criteria.• ensure clickable areas are at least 24x24 CSS pixels (44x44 is recommended for touch interfaces)
• add padding or transparent borders to increase the hit area without changing the visual size
• use min-width and min-height on interactive elements
• increase spacing between adjacent small targets so users can tap accurately
On Focus (3.2.1)3.2.1 (A)Elements that initiate a context change (navigation, submit, new window) when they receive keyboard focus rather than when they are explicitly activated.• trigger context changes only on explicit activation (click, Enter, Space)
• for select menus that act as navigation, add a separate "Go" button
• never attach onfocus handlers that cause navigation, submission, or window changes
• test by tabbing through all interactive elements without pressing Enter
On Input (3.2.2)3.2.2 (A)Form controls that trigger navigation, submission, or DOM restructuring on value change without prior notice to the user.• separate the selection action from the submission action (add a "Submit" or "Apply" button)
• if auto-submission is intentional, inform the user in advance (e.g., "Selecting a value will update the page")
• use ARIA live regions to announce dynamic content changes without a full context switch
• test all form controls by changing values and confirming no unexpected navigation occurs
Consistent Help (3.2.6)3.2.6 (A)Help-related UI elements maintain consistent placement and ordering across pages within the same site.• place help mechanisms in the same relative position across all pages (e.g., always last in the footer)
• use a shared layout component to ensure consistent ordering automatically
• if multiple help options exist, keep their order fixed (e.g., FAQ, then Chat, then Email)
• audit help element placement across page templates to confirm consistency
Error Identification (3.3.1)3.3.1 (A)Form validation errors are communicated through visible text messages associated with the relevant field, not only through color or icon changes.• display a text error message adjacent to or within the erroneous field
• associate the error message with the field using aria-describedby or aria-errormessage
• set aria-invalid="true" on the field when an error is detected
• move focus to the first error or provide a summary with links to each erroneous field
Labels or Instructions (3.3.2)3.3.2 (A)Form inputs have visible labels programmatically associated with the control, and that fields requiring specific formats include instructions.• add a visible <label> element with a matching for attribute for every form control
• include format instructions or examples near the field (e.g., "Enter date as MM/DD/YYYY")
• use <fieldset> and <legend> for logically grouped fields
• never use placeholder as a substitute for a visible label
Redundant Entry (3.3.7)3.3.7 (A)Multi-step flows where users are asked to re-enter information they have already provided in a previous step (e.g., name, address, email) without auto-fill or a selection option.• auto-populate fields with information provided in earlier steps of the same process
• offer a "same as shipping" checkbox for billing address forms
• use session storage or form state management to carry data across steps
• if security requires re-entry (e.g., password confirmation), document the exception
Accessible Authentication (Minimum) (3.3.8)3.3.8 (AA)Login flows that rely solely on cognitive challenges (CAPTCHAs, image puzzles, memory-based knowledge questions) without offering an accessible alternative.• allow password managers to auto-fill login fields (do not use autocomplete="off" on authentication fields)
• provide an accessible CAPTCHA alternative (audio CAPTCHA, email verification, or WebAuthn)
• support passwordless authentication (magic links, biometrics, passkeys)
• allow pasting into verification code fields for users who receive codes via email or authenticator apps
Parsing (4.1.1)4.1.1 (A)Validates HTML for duplicate IDs, malformed nesting, unclosed elements, and duplicate attributes that could confuse assistive technology parsers.• run an HTML validator to catch structural issues
• ensure every id is unique within the page
• fix unclosed or misnested elements
• avoid nesting interactive elements inside each other
Name, Role, Value (4.1.2)4.1.2 (A)Interactive elements have an accessible name, an appropriate ARIA or native role, and that state changes (expanded, checked, selected, disabled) are communicated programmatically.• use native HTML elements whenever possible (<button>, <input>, <select>)
• for custom widgets, add the appropriate ARIA role and maintain state attributes (aria-expanded, aria-checked, aria-selected)
• ensure every interactive element has an accessible name through visible text, aria-label, or aria-labelledby
• update ARIA states dynamically when the user interacts with the control
Status Messages (4.1.3)4.1.3 (AA)Dynamic status messages use ARIA live regions (role="status", role="alert", aria-live) so screen readers announce them without moving focus away from the current task.• use role="status" for non-urgent updates (result counts, save confirmations)
• use role="alert" for urgent messages (errors, warnings)
• ensure the live region exists in the DOM before the content is injected (add content to an existing container rather than injecting the container)
• avoid overusing alerts, since frequent announcements interrupt the user's workflow

Test across 3000+ combinations of browsers, real devices & OS.

×
Schedule Your Personal Demo
Book Demo

Help and Support

Related Articles