references/checklist-visual.md

Check point list: Visual verification and mouse pointer operation

Check points verified by looking at the screen and performing operations centered on the mouse pointer.

---

VIS-01: Captions for prerecorded video

• WCAG: SC 1.2.2 (A)
• Verification method: both
• Judgement: captions that make the content understandable without audio are provided for prerecorded video. Captions must include not only the speech of people appearing in the video, but also narration, sound effects, music, and anything else necessary to understand the content.
• Determination from code: whether <video> has a <track kind="captions">. If a video player library is used, whether a caption track is specified. For embeds such as YouTube, whether the embedded source has captions needs to be verified on the live page.
• Determination from page: actually play the video and check whether captions exist and whether their content is sufficient.
• Point likely to end as "cannot be determined": whether the caption content is sufficient requires watching the video to judge, and cannot be determined automatically. Check only whether a track exists; treat the validity of its content as needing further verification.
• Severity guideline: Major if the video is the main content or if it cannot be understood without watching it. Normal if the video is supplementary or alternative content is provided. Minor if the captions are only auto-generated by YouTube or similar.

VIS-02: Alternative for prerecorded video (text or audio)

• WCAG: SC 1.2.3 (A)
• Verification method: both
• Judgement: the content of a prerecorded video is explained in text or audio so it can be understood without the visuals.
• Determination from code: check whether there is a link to a transcript, or text explaining the content, near the video.
• Severity guideline: follows VIS-01.

VIS-03: Audio description for prerecorded video

• WCAG: SC 1.2.5 (AA)
• Verification method: both
• Judgement: the content of a prerecorded video is explained by audio so it can be understood without the visuals.
• Determination from code: look for <track kind="descriptions">, or an alternative video with audio description provided.
• Severity guideline: follows VIS-01.

VIS-04: Captions for live video

• WCAG: SC 1.2.4 (AA)
• Verification method: both
• Judgement: captions that make the content understandable without audio are provided for live-streamed video.
• Severity guideline: follows VIS-01.

VIS-05: Display orientation

• WCAG: SC 1.3.4 (AA)
• Verification method: both
• Judgement: the display orientation is not restricted to either portrait or landscape.
  • The screen rotates regardless of whether the device is held in portrait or landscape, and no message forcing the user to change orientation is displayed
  • At resolutions assumed for the user's environment (for example, 375×667px for the iPhone SE 2nd–3rd generation), neither the portrait nor landscape display has layout breakage or is so cramped that operation becomes difficult
• Determination from code: look for content being switched or hidden via CSS @media (orientation: ...), an orientation specification in the Web App Manifest, or an overlay implementation prompting screen rotation.
• Determination from page: check the display at both 375×667 and 667×375.
• Severity guideline: Major if the site cannot be used in one of the orientations.

VIS-06: Conveying information by color alone

• WCAG: SC 1.3.1 (A) / SC 1.4.1 (A)
• Verification method: both
• Judgement: conveying information, instructing an action, presenting a response, or distinguishing visual elements does not rely on color alone. A difference in text or shape is also provided.
• Determination from code: look for implementations where only the color changes depending on state (such as className={isError ? 'text-red' : 'text-gray'}, where there is no difference other than color), graphs whose legend is color only, and forms that indicate required fields only with red text.
• Determination from page: compare screenshots in grayscale, or visually check whether there are cues other than color.
• Common issues: an error is indicated only by a red border. A graph's legend is color only. A link is distinguished from body text only by color (no underline).
• Severity guideline: Major if a state or error cannot be identified. Normal if the distinction is decorative.

VIS-07: Sensory characteristics

• WCAG: SC 1.3.3 (A)
• Verification method: both
• Judgement: instructions for understanding and operating content do not rely solely on sensory characteristics such as shape, color, size, visual location, orientation, or sound.
• Common issues: "Press the button on the right", "Click the round icon", "Enter into the green field below". In addition to position and color, other cues such as a label name should also be given.
• Severity guideline: Major if the user cannot tell how to operate it. Normal otherwise.

VIS-08: Auto-playing audio

• WCAG: SC 1.4.2 (A)
• Verification method: both
• Judgement: if audio plays automatically and continues for 3 seconds or more, the user can either stop the audio or adjust its volume independently of the overall system volume.
• Determination from code: look for <audio autoplay> / <video autoplay> (not muted), and automatic calls to play() via JavaScript.
• Severity guideline: Major, because screen reader users cannot hear the screen reader announcement.

VIS-09: Text contrast ratio

• WCAG: SC 1.4.3 (AA)
• Verification method: both
• Judgement: text and images of text have a contrast ratio of at least 4.5:1. Large text (18pt or larger, or bold 14pt or larger; for Japanese text, roughly 24px or larger, or bold 18.66px or larger) needs at least 3:1.
• Determination from code: for places where the foreground and background colors are statically determined (Tailwind classes, CSS variables, design tokens, styled-components literals), resolve the colors and calculate the contrast ratio to judge it. Do not judge by eye or mental arithmetic. Where colors are determined at runtime, mark it "cannot be determined" and defer to verification on the live page.
• Determination from page: axe-core detects most cases. Places where axe-core returns incomplete (such as when the background is an image or gradient, or there is overlap) and places where text is rendered as an image are checked manually.
• When the background is an image or gradient, consider the contrast ratio between the text color and both the lightest and darkest colors within it.
• If the design specification limits the combinations of text and background color, predefine the available combinations and check only the places where an exceptional color is used.
• Severity guideline: Major if body text or important information cannot be read. Normal if it is supplementary wording.

VIS-10: Non-text contrast ratio

• WCAG: SC 1.4.11 (AA)
• Verification method: both
• Judgement: user interface components (input field borders, buttons, checkboxes, focus indicators, etc.) and graphical objects necessary for understanding content (icons, graph elements, etc.) must have a contrast ratio of at least 3:1 between the parts necessary to identify them and the adjacent color.
• Determination from code: calculate the input field's border color, the icon's fill / color, and the focus ring's color against the background color.
• Common issues: an input field's border is light gray and under 3:1 against the background. An input field with only a placeholder and no border. Pale-colored icons.
• Severity guideline: Major if the presence of an input field or button cannot be recognized.

VIS-11: Additional content (hover) can be dismissed

• WCAG: SC 1.4.13 (AA)
• Verification method: both
• Judgement: when additional content such as a tooltip is displayed on mouseover, it can be hidden without moving the mouse pointer (e.g. with the Esc key). However, this does not apply to content that conveys an input error, or that does not hide or replace other content.
• Determination from code: check whether the tooltip/popover implementation has a handler that hides it on the Esc key.
• Determination from page: trigger it by hover, then press Esc without moving the pointer and see whether it disappears.
• Severity guideline: Major if other content remains hidden. Normal otherwise.

VIS-12: The pointer can move onto additional content (hover)

• WCAG: SC 1.4.13 (AA)
• Verification method: both
• Judgement: the mouse pointer can be moved onto additional content displayed by mouseover, and the additional content continues to be displayed while it does.
• Common issues: there is a gap between the trigger element and the displayed content, and the content disappears while the pointer is moving across it. A user viewing the page zoomed in cannot read the content unless this movement is possible.
• Severity guideline: Major if the content cannot be read.

VIS-13: Additional content (hover) persists

• WCAG: SC 1.4.13 (AA)
• Verification method: both
• Judgement: additional content continues to be displayed until the hover ends, it is hidden by the user's intent, or a change occurs that makes the content invalid.
• Common issues: a tooltip that automatically disappears after a few seconds. It disappears before the user finishes reading it.
• Severity guideline: Normal if the content cannot be read in full. Major if it is important information.

VIS-14: Pause of moving, blinking, scrolling content

• WCAG: SC 2.2.2 (A)
• Verification method: both
• Judgement: content that moves, blinks, or scrolls can be paused, stopped, or hidden by the user (this applies to content that starts automatically, continues for 5 seconds or more, and is displayed in parallel with other content).
• Determination from code: look for auto-playing carousels, marquees, animated GIFs, and infinitely looping CSS animations, and check whether a pause control is implemented. Also check support for prefers-reduced-motion (this is not itself a requirement of SC 2.2.2, but supporting it is desirable).
• Severity guideline: Major in principle, because it interferes with concentration and prevents the content from being read.

VIS-15: Pause of automatic updates

• WCAG: SC 2.2.2 (A)
• Verification method: both
• Judgement: content that updates automatically and is displayed in parallel with other content can be paused, stopped, or hidden by the user, or its update frequency can be adjusted.
• Determination from code: look for automatic updates via polling, automatic reload, and feeds that update in real time.
• Common issues: a list updates automatically, shifting the position the user is reading or the target they are operating on.
• Severity guideline: Major if the target of an operation shifts and induces a mistaken action.

VIS-16: Flashing

• WCAG: SC 2.3.1 (A)
• Verification method: page (in practice this is often "cannot be determined")
• Judgement: nothing flashes more than three times per second.
• Note: WCAG SC 2.3.1 can be read as conforming even with more than three flashes per second, as long as it is "below the general flash and red flash thresholds", but this determination is difficult. A normal check does not consider this exception, and treats more than three flashes per second as an issue. Only when dealing with content that flashes should the thresholds be considered.
• This cannot be determined automatically. If there is content that includes flashing, mark it as needing further verification.
• Severity guideline: Critical, because it can induce photosensitive seizures.

VIS-17: Page title

• WCAG: SC 2.4.2 (A)
• Verification method: both
• Judgement: a page title based on the part unique to that page is specified.
  • Specified via the <title> element or document.title
  • The page title is not a heading, but it is desirable that it share wording with the heading at the start of the page's unique section, and that it be clear which website's page it is
  • The way of expressing which website's page it is should be consistent across every page in the site
• Determination from code: check the <title> specification, and, for SPAs, whether document.title is updated on navigation (many implementations leave it unupdated after routing).
• Common issues: every page has the same title. The title does not change on navigation in an SPA. A template's default value (such as "React App") is left in place.
• Severity guideline: Normal, because a user with multiple tabs open, or a screen reader user, cannot identify their current location. Major if every page is identical and impossible to distinguish.

VIS-18: Purpose of a link

• WCAG: SC 2.4.4 (A)
• Verification method: both
• Judgement: the purpose of a link can be inferred either from the link text alone, or from context provided by a structure such as a list, table, or heading.
  • Do not make only the word "here" in "For XX, click here" the link. If the purpose can be stated as text, state it, and make the whole of it the link
  • When each item of a list, or each row or column of a table, contains links with the same text but different purposes, the purpose is considered inferable if the difference in purpose relates to that item, row, or column
  • When links with the same text are in areas separated by different headings, the purpose is considered inferable if the difference in purpose relates to the heading
• Determination from code: look for links with text such as "here", "details", "read more", "click", or "Read more", and icon-only links with no text. For the latter, also check whether an accessible name is present (SEM-01, SEM-11).
• Severity guideline: Normal, because the destination of the link cannot be judged. Major if it is a primary navigation path.

VIS-19: Multiple ways to reach a page

• WCAG: SC 2.4.5 (AA)
• Verification method: both
• Judgement: pages within a website can be reached by one of the following, except when the page can only be reached through a specific process (such as a step partway through a process, or its result).
  • Reachable from any page without returning to the "home screen"
  • Reachable from an on-site search function
  • Reachable from a sitemap-like page
• It is desirable that a page be reachable by as many paths as possible.
• Severity guideline: Major if the target page cannot be reached. Minor if there are simply few paths.

VIS-20: Headings and labels

• WCAG: SC 2.4.6 (AA)
• Verification method: both
• Judgement: the content of a heading or label appropriately reflects the topic or purpose of the section it refers to.
• Determination from code: read and check whether the wording of a heading or label corresponds to the content beneath it.
• Common issues: a heading such as "Information" or "Other" that does not indicate its content. An input field's label that does not match what is actually being asked for.
• Severity guideline: Major if it misleads about the content. Minor if it is merely vague.

VIS-21: Pointer gestures

• WCAG: SC 2.5.1 (A)
• Verification method: both
• Judgement: a function that relies on multipoint gestures (such as using multiple fingers) or path-based gestures (such as swiping or drawing by dragging) has an alternative that can also be performed with a single pointer and no path-based movement, except when the gesture is essential.
• Determination from code: look for the use of touchmove, pinch zoom, and swipe-detection libraries, and check whether a button or similar with equivalent functionality is also provided.
• Common issues: a carousel can only be advanced by swiping. Content can only be zoomed by pinching.
• Severity guideline: Major if there is no alternative and the function cannot be used.

VIS-22: Pointer cancellation (down-event)

• WCAG: SC 2.5.2 (A)
• Verification method: both
• Judgement: for a function operated by a single pointer, one of the following holds.
  • The function is not executed on the down-event (touch start, mouse button press)
  • A function executed on the down-event can be undone
  • The up-event reverses the result of the down-event
  • Execution on the down-event is essential
• Determination from code: look for places that execute a function on mousedown / touchstart / pointerdown instead of the click event. This is the typical cause behind this check point.
• Note: for an ordinary button, click fires from the combination of a down and an up event within the element. If the pointer is pressed down within the element but moved outside it before being released, click does not fire and the function is not executed either. Even a mistaken press can be canceled by moving outside the element before releasing. Reversal by the up-event refers to something like a hint that is shown only while pressed and disappears on release.
• Common issues: in things such as ad banners, an attempt to make one target respond to both swiping and clicking results in an implementation that induces an uncancelable "mistaken tap".
• Severity guideline: Critical if a mistaken action cannot be undone and the result is serious (deletion, submission, billing). Normal otherwise.

VIS-23: Dragging movements

• WCAG: SC 2.5.7 (AA)
• Verification method: both
• Judgement: a function that uses a dragging operation can also be completed with a single-pointer operation that does not involve dragging, except when dragging is essential.
• Determination from code: look for the HTML5 Drag and Drop API, the draggable attribute, drag libraries (dnd-kit, react-beautiful-dnd, Sortable, etc.), and position manipulation via mousemove, and check whether a button or menu offering an equivalent operation is also provided.
• Common issues: reordering is only possible by drag and drop. A slider only supports dragging and does not support arrow keys or numeric input.
• Severity guideline: Major if there is no alternative and the function cannot be used.

VIS-24: Target size (minimum)

• WCAG: SC 2.5.8 (AA)
• Verification method: both
• Judgement: a target for pointer operation is at least 24×24 CSS pixels, or satisfies one of the following exceptions.
  • Spacing: for small targets under 24 CSS pixels, if a circle of 24 CSS pixels in diameter is placed at the center of each target's bounding box, that circle does not overlap another target, or the circle of another small target
  • Equivalent: the same function can also be achieved through a different control on the same page that meets this criterion
  • Inline: the target exists within a run of text, or its size is constrained by the line height of text other than the target
  • User agent control: the size is determined by the user agent and not modified by the content author
  • Essential: presenting that target in a particular way is essential, or is legally required for the information being conveyed
• Determination from code: look for fixed sizes specified on icon buttons or close buttons (such as w-4 h-4, width: 16px). However, the conclusion depends on whether padding or hit-area expansion is present, so it is best to list suspect places and defer them to actual measurement on the live page.
• Note: link text within a run of text, and checkboxes in the browser's default style, fall under the exceptions and are out of scope. Accessibility Visualizer has a feature that warns about targets close to these exceptions.
• Severity guideline: Normal, because a user with hand tremors may mis-tap. Major if the result of a mis-tap is serious.

VIS-25: Consistent navigation

• WCAG: SC 3.2.3 (AA)
• Verification method: both
• Judgement: navigation displayed across multiple pages within a website is arranged in the same order on every page. Items may be added or removed, but their relative order must not change.
• Severity guideline: Normal, because the user has to search for the target item again.

VIS-26: Consistent identification

• WCAG: SC 3.2.4 (AA)
• Verification method: both
• Judgement: icons and UI components used within a website are given the same appearance or text whenever they consistently carry the same meaning.
• Common issues: the same "save" function has different labels depending on the page, such as "Save", "Register", or "Update". Different icons are used for the same function.
• Severity guideline: Normal if it is mistaken for a different function.

VIS-27: Consistent help

• WCAG: SC 3.2.6 (A)
• Verification method: both
• Judgement: when contact information or contact methods (an email form, phone number, chat, etc.), help, a chatbot, or similar are provided across multiple pages within a website, they appear in the same order (relative position) consistently on every page.
• Severity guideline: Normal.

VIS-28: Identifying input errors

• WCAG: SC 3.3.1 (A)
• Verification method: both
• Judgement: when an input error is automatically detected, the location of the error can be identified, and the content of the error is described to the user in text.
• Determination from code: check the implementation of validation error display. Whether the error message is associated with the target input field (aria-describedby, aria-invalid) is checked together with SEM-11. Also check whether the error is indicated only by a change in color or border (VIS-06).
• Determination from page: actually enter an invalid value, submit it, and check the error display.
• Severity guideline: Major if the location or reason for the error is unclear and the form cannot be completed.

VIS-29: Label or instructions

• WCAG: SC 3.3.2 (A)
• Verification method: both
• Judgement: an input field has, in addition to a label indicating its purpose, sufficient instructions where needed. For example, if there is a required input format, it is either noted in parentheses in the label or accompanied by a sentence explaining how to write it. Whether a field is required is also made explicit.
• Determination from code: look for input fields that have a format constraint (pattern, a character limit, validation logic) but no visible explanation of it. Places that explain it only via a placeholder are also an issue, because the placeholder disappears once input begins.
• Severity guideline: Major if input cannot be completed. Normal if it merely requires trial and error.

VIS-30: Error suggestion

• WCAG: SC 3.3.3 (AA)
• Verification method: both
• Judgement: when an input error is detected and a correction can be suggested, the correction is suggested to the user (except where doing so would compromise security or purpose).
• Common issues: only "There is an error in your input" is shown, with no indication of what to fix or how.
• Severity guideline: Major if the user cannot tell how to fix it and cannot complete the form. Normal otherwise.

VIS-31: Error prevention (legal, financial, data)

• WCAG: SC 3.3.4 (AA)
• Verification method: both
• Judgement: on pages that perform legal actions, financial transactions, changes or deletion of data the user controls, or submission of test answers, at least one of the following is provided.
  • Submissions are reversible
  • Input errors are checked before submission and an opportunity to correct them is provided
  • There is a mechanism to review, correct, and confirm the content before submission
• Determination from page: this check sometimes cannot be determined without actually submitting. Always obtain the user's permission before doing so (see auth-and-safety.md). If permission cannot be obtained, mark it "cannot be determined" and record it as needing further verification.
• Severity guideline: Critical if a mistaken submission or deletion cannot be undone.

VIS-32: Redundant entry

• WCAG: SC 3.3.7 (A)
• Verification method: both
• Judgement: within the same process, when information the user previously entered, or information provided to the user, must be entered again, it is either auto-populated or the user can select the previous value (except where re-entry is essential, required for security, or the previous information is no longer valid).
• Common issues: a multi-step form makes the user re-enter an address they entered in a previous step. Input content is lost when the user goes back from a confirmation screen.
• Severity guideline: Major if the burden of remembering or re-entering is so great that the form cannot be completed. Normal otherwise.