# Accessibility Check Verify that a selected page meets the project's accessibility standard for structure, keyboard use, contrast, media, and motion. ## Instructions ### Before checking - Inspect the existing page, layer tags, settings, and components without changing them. - Read the Settings block first and use it as the source of truth. - Check every breakpoint, since tag settings, visibility, and order can differ per breakpoint. - Reference the WCAG success criterion for each finding where one applies. - Never state that a page is fully compliant. Automated and structural checks cannot prove conformance; state what was checked. ### Structure and semantics - Check landmarks: one header, one nav per navigation region, one main, and one footer, set through layer tags (1.3.1). - Check for one H1 and a heading order without skipped levels that break meaning (1.3.1, 2.4.6). - Check that lists, articles, and sections use matching tags where relevant. - Check that the reading order in the markup matches the visual order at every breakpoint, especially after reordering (1.3.2). - Check that content hidden on a breakpoint is also hidden from assistive technology, not just visually. - Check the page language setting (3.1.1) and that the page title is unique and descriptive (2.4.2). ### Images and non-text content - Check that informative images have alt text that conveys their meaning (1.1.1). - Check that decorative images are marked decorative or have empty alt text. - Flag alt text that repeats file names, says "image of", or repeats nearby text. - Check that text inside images is also available as real text, except logos (1.4.5). - Check that icons carrying meaning have a text alternative. ### Links, buttons, and controls - Check that every link and button has an accessible name, including icon-only buttons (4.1.2, 2.4.4). - Flag vague labels such as "Click here", "Learn more", or "Read more" without context. - Check that links go to pages and buttons perform actions. - Flag nested interactive elements, such as a button inside a linked card. - Check that links that open a new tab say so. - Check target size against the minimum target size, or that enough spacing surrounds smaller targets (2.5.8). ### Keyboard and focus - Check that every interactive element can be reached and used with the keyboard alone (2.1.1). - Check that focus order follows the visual order (2.4.3). - Check that a focus indicator is visible on every interactive element and meets the focus indicator setting (2.4.7, 1.4.11). - Check that focused elements are not hidden behind sticky headers, banners, or cookie notices (2.4.11). - Check menus, overlays, and modals: focus moves into them when opened, stays inside while open, returns when closed, and Escape closes them (2.1.2). - Check for a skip link to the main content according to the skip link setting (2.4.1). ### Color and contrast - Check text contrast against the set ratios, including text over images, gradients, and video (1.4.3). - Check contrast in hover, focus, active, and disabled states. - Check placeholder text and helper text contrast. - Check non-text contrast for input borders, toggles, icons, and focus rings (1.4.11). - Check that color is not the only way to convey meaning, such as links in body text or error states (1.4.1). ### Text and reflow - Check that body text meets the minimum body text size. - Check that the page reflows at the reflow width without horizontal scrolling or lost content (1.4.10). - Check that text can zoom to 200% without clipping in fixed-height containers (1.4.4). - Check that increased line, letter, and paragraph spacing does not clip text (1.4.12). ### Forms - Check that every input has a visible label, not only a placeholder (3.3.2, 1.3.1). - Check required fields are indicated in text, not only by color or an asterisk without explanation. - Check error messages are specific, visible, and connected to their field (3.3.1). - Check autocomplete attributes on common fields such as name and email (1.3.5). - Check that the submit confirmation is announced or visible. ### Media and motion - Check videos for captions and audio content for transcripts (1.2.2). - Check that no media autoplays with sound (1.4.2). - Check that auto-moving content longer than 5 seconds can be paused, stopped, or hidden (2.2.2). - Check that nothing flashes more than three times per second (2.3.1). - Check behavior with reduced motion turned on. Detailed motion values belong to the Motion check. ### Embeds and third-party content - Check that iframes and embeds have a descriptive title. - Check that cookie banners, chat widgets, and forms from third parties are reachable by keyboard and do not trap focus. Mark third-party internals for manual review. ### Manual verification - List the checks that need a person: a keyboard-only pass through the whole page and a quick screen reader pass with the set screen reader. - Do not mark manual items as passed without that test. ### Scope limits - Do not redesign the page, change brand colors, or rewrite copy unless explicitly requested. - Do not audit SEO, AEO, or CMS content beyond accessibility impact. - Do not apply fixes unless explicitly requested. When fixing color contrast, suggest the nearest passing color within the brand palette. ## Report to the User Mark each item as passed, issue found, needs manual review, or not applicable. For each issue, give the layer or location, the breakpoint, the WCAG criterion, the current state, the expected state from Settings, who is affected (e.g. keyboard users, screen reader users, low-vision users), and the recommended next step. Order issues by severity: blockers that prevent a task first, then serious barriers, then minor issues. End with: - The list of manual tests still required. - The top three fixes by impact. - A note that this check does not certify WCAG conformance.