Review states, not just the first screen
List the states that matter for each component: default, hover, keyboard focus, loading, error, empty, and populated. Use realistic short and long content instead of checking only ideal placeholder text. Compare narrow and wide layouts, including the point where navigation changes and cards stack. A single desktop screenshot cannot describe responsive behavior.
Separate an implementation mismatch from a design decision. If spacing differs from the approved specification, state the intended value or relationship. If the design itself becomes unclear with longer content, describe the user problem and bring it back to the designer. Record which reference version was reviewed so a later mockup edit does not change the meaning of an older comment.
Pair visual judgment with basic interaction checks
Try the page with the keyboard and zoom the content. Check that focus is visible, controls remain understandable, and text does not disappear behind fixed UI. A reviewer can use W3C's preliminary accessibility guidance to structure these checks, while recognizing that a quick visual review cannot establish full accessibility conformance.
Discuss the intended experience before proposing a cosmetic fix. Making a button larger will not solve an unclear label or a disabled state without an explanation. After the update, check sibling components using the same styles. Keep a decision in the thread when the designer accepts a purposeful difference from the original mockup.
The review workflow
Choose the reference
Name the approved design version, page build, content sample, and viewports. Include the relevant component states so reviewers know which conditions to compare.
Pin a precise observation
Point to the affected element and describe the mismatch or usability concern. Include the expected relationship or behavior instead of relying on 'make it look better.'
Recheck the component family
Review the revision at the original viewport, then inspect shared variants and interactive states. Record any intentional deviation with the responsible designer.
DEFINE DONE
Acceptance checklist
- The implemented hierarchy matches the approved intent with realistic content.
- The agreed viewport range has no unintended overlap or clipped controls.
- Focus, errors, empty states, and loading states have been reviewed.
- Shared component changes have been checked on neighboring pages.
ILLUSTRATIVE EXAMPLE
Pricing cards with realistic plan names
Fictional example: a designer reviews three pricing cards. The longest plan name wraps to two lines and pushes its action button below the buttons on the other cards.
THE FEEDBACK
At the agreed tablet width, the third card's button drops out of alignment when the heading wraps. Keep the comparison readable with long plan names and without truncating the name.
The designer agrees a card layout that accommodates longer text. The frontend developer checks all three plans, keyboard focus, and the stacked mobile variant before closing the thread.
Fit and plan limits
Annot8 reviews the website; it does not import design files, measure every pixel against a mockup, or certify accessibility. Keep design specifications and specialist audits in the tools intended for those jobs.
Screenshot-based feedback is available within Free limits. Screen recordings for animations or complex interactions require a paid plan. Cross-origin content and browser rendering restrictions may require additional evidence outside the automatic screenshot.
Common questions
Can this replace reviewing a design file?
Keep concept and specification work in your design tool. Use Annot8 to discuss the implemented website, where responsive layout, real content, and browser interaction can be checked together.
Can a visual review prove accessibility compliance?
No. Preliminary checks can identify issues, but full evaluation needs broader testing and appropriate expertise. Annot8 provides a place to report findings, not a conformance certificate.
Further reading
- W3C WAI Easy Checks
A starting point for keyboard, contrast, text resizing, and other basic checks during browser review.