Use static checks to choose what to inspect next

An HTML fragment can reveal useful accessibility signals before a browser is opened. A source check can notice an image with no alt attribute, a form control without an obvious label, a link with no detectable name, or a large jump in heading levels. A color-pair calculator can compare two opaque colors against a selected contrast threshold. These results help prioritize review, but they do not establish that a page conforms to WCAG.

The difference is between a source clue and user experience. Accessibility also depends on computed styles, keyboard interaction, dynamic updates, focus order, browser behavior, and assistive technology. A static fragment may not include the labels or controls added by scripts. A page can pass a handful of source checks and still block someone from completing its main task.

Check image alternatives by purpose

For ordinary authored img elements, provide an appropriate alt attribute; its content depends on the image's role. A meaningful image may need a concise alternative that communicates its purpose in context. A decorative image can use an empty alt so it does not add noise. An image that functions as a control needs an accessible name for the action. Repeating nearby text in every image alternative can make the experience more verbose without adding information.

The HTML Accessibility Review flags an image that has no alt attribute and treats alt text as part of a nearby button or link name. It cannot decide whether the wording is accurate or whether an image is decorative in context. Review the actual page and ask what information would be lost if the image were unavailable. Use the WAI image decision tree to select an approach rather than treating any non-empty string as success.

Review names and relationships for controls

Text inputs, selects, textareas, buttons, and links need names that communicate their purpose. A visible label associated with a control is often the clearest choice; WAI's forms guidance explains common label patterns. An aria-label or aria-labelledby can provide a name when the visual design has another pattern, but its presence alone does not prove that the referenced text exists or is useful. A static checker may only detect a subset of these relationships.

Look at the label in the rendered page and operate the control with a keyboard. Confirm that required instructions and error messages are associated with the right field. If a group of controls has a shared question, provide a meaningful group label. The simple HTML review tool checks a narrow set of markup patterns; it does not compute the full accessible name or follow every ID reference.

Interpret contrast results with the right inputs

WCAG contrast calculations compare relative luminance for foreground and background colors. For text, WCAG 2.2's contrast criterion specifies minimum ratios that depend on text size and weight; the common AA thresholds are 4.5:1 for normal text and 3:1 for large text. AAA uses higher ratios. The exact classification of large text matters, so select the checker mode that matches the rendered text rather than the intended design token.

Benchlight's Color Contrast Checker accepts opaque hex or rgb colors and reports the calculated ratio against the selected normal or large-text threshold. It does not sample a screenshot, account for transparency, gradients, images, text shadows, hover states, or font rendering. If a text color sits over a photograph or a translucent overlay, a single color pair may not represent the actual pixels behind every letter.

Test all relevant states: default, hover, focus, disabled, error, and selected. Check text that appears inside buttons and badges as well as body copy. A strong contrast ratio does not make text readable if it is too small, crowded, or hidden behind another element. Also inspect non-text interface boundaries under the applicable criterion rather than applying a text ratio to every visual component.

Inspect headings as navigation

Headings help readers understand and navigate a page. A sequence such as H2 followed by H4 can be a sign that a heading level was skipped, but outline quality depends on the content. Check whether each heading describes the section and whether nested sections belong under the prior heading. Do not use headings only to get a visual size.

Benchlight flags jumps in level in the supplied fragment. It cannot see headings omitted from the fragment, headings inserted by a component, or the meaning of the outline. After source review, inspect the whole rendered page and navigate it using heading commands in a screen reader when available.

Test behavior that source cannot settle

Open the complete page at desktop and narrow widths. Use Tab, Shift+Tab, Enter, and Space to test the primary path. Confirm visible focus and that focus is not trapped or lost after a dialog, menu, or result update. Use browser zoom and ensure that content does not overlap or disappear. A mouse-only check can miss a task that is inaccessible to a keyboard user.

For dynamic tools, observe how status, validation messages, and results are announced. Test an empty value, an invalid value, and a valid value. If a form reports an error, the user needs to understand which field caused it and how to recover. These details are behavior, not just markup.

Fix a form relationship, then test the rendered interaction

Start with this deliberately incomplete fragment:

<label>Project name</label>
<input id="project-name" type="text">

The visible words look like a label, but the markup does not associate them with the input. Add for="project-name" to the label, or place the input inside it. With the explicit for relationship, clicking the label should focus the control, and its accessible name should describe the field. That behavior still needs inspection in the complete page. A source scan finding a matching identifier cannot establish that scripts preserve focus or that a later component duplicates the ID.

For an adjacent decorative image, an empty alt may be appropriate; for an image that conveys an instruction, it would remove information. The same source-level pattern therefore has different consequences depending on purpose. Read the surrounding content instead of changing every empty alternative to a filename. A warning about a missing attribute identifies an omission, not the correct wording for the image.

Use black text on white as an arithmetic control for Color Contrast Checker. Its ratio is 21:1, and it meets both listed text thresholds. Then test the actual opaque foreground and background values from the rendered form. WCAG treats 4.5:1 and 3:1 as thresholds: rounding 4.499 to a displayed 4.50 does not make it pass. The checker compares the unrounded ratio before formatting its output.

Large text in this criterion means at least 18 points, or 14 points when bold, with the equivalent sizing defined by CSS units and font context. A visually prominent 16-pixel badge does not automatically qualify. Select the mode from the actual size and weight, then inspect keyboard operation, error association, zoom, and focus. These observations complement the label and color calculations; together they still cover only the particular controls reviewed, not a declaration of whole-site WCAG conformance.