Recommended Free Tools
Common UI bugs include controls that cannot be used with a keyboard, forms that fail without explaining why, status messages communicated only by color, unclear labels, and layouts that break at narrow widths or with enlarged text. Find them by carrying out a real task, repeating it with a keyboard, testing invalid form input, and checking whether visual cues and layouts still communicate clearly.
What are common UI bugs?
A user-interface (UI) bug is a failure in how an interface looks, responds, or communicates during a task. The examples below focus on accessibility-related failures: they are concrete, testable problems, not a ranking of which bugs occur most often or a complete inventory of UI defects.
As an Amazon Associate I earn from qualifying purchases.
| Bug pattern | What a user may notice | How to check |
|---|---|---|
| Mouse-only control | A menu, button, or other function cannot be reached or activated by keyboard. | Try every meaningful control without a mouse and make sure you can leave each component. |
| Focus or navigation failure | Focus skips a control, moves in a confusing order, or gets trapped. | Use Tab and Shift+Tab to move through interactive elements; check for a keyboard route out of each component. |
| Missing or vague error | A failed form submission gives no explanation, or only a generic notice. | Submit empty or invalid values and check whether the affected field and problem are identified in text. |
| Color-only status | A required, invalid, or successful state is shown only through color. | Check whether the state is understandable without color and what a screen reader announces. |
| Low contrast | Text or important controls are difficult to distinguish from the background. | Inspect text and control foreground/background contrast. |
| Missing or unclear label | The purpose of an input is unclear or its visible label is not associated with the control. | Inspect each input’s label and verify that it is associated with that input. |
| Weak interaction feedback | Controls are hard to identify, navigation changes inconsistently, or an action gives no clear result. | Compare navigation across pages and check whether controls and action results are identifiable. |
| Narrow-layout or enlarged-text failure | Content or navigation becomes unavailable or difficult to use. | Review the page at a narrow viewport and with larger text. |
How do I find UI bugs?
Use a task someone actually needs to complete, rather than only looking at a static page. For example, find an item, open a menu, change a setting, or submit a form. When the interface stops responding or communicating clearly, note the state and steps that led there.
- Choose a task and starting state. Record what page or screen you begin on and what you intend to accomplish.
- Repeat it using only a keyboard. Press Tab and Shift+Tab to move among links, buttons, and input fields. Activate controls with their standard keyboard behavior. Check that focus is visible and understandable, and that you can leave menus and other components. If the product supports mobile use with an external keyboard, include that setup too.
- Exercise form errors. Submit a required field empty or enter deliberately invalid data. Check whether the message identifies the affected item and explains the error in text. A browser’s built-in validation may show a generic message; the mere presence of a message does not ensure it communicates the problem clearly.
- Check meaning and visibility. Look for clear labels, sufficient contrast, non-color cues for statuses, recognizable controls, and feedback after actions.
- Vary the viewport and text size. Make the window narrow and enlarge text. Check whether important content, navigation, and controls remain available and understandable.
- Write a reproducible report. Include the task, input method, starting state, steps, expected behavior, actual behavior, and affected control. This makes the problem easier for someone else to verify.
What makes these accessibility bugs?
Keyboard access and focus
WCAG 2.2 requires functionality to be operable through a keyboard interface, subject to its stated exception for functions that depend on the path of movement rather than just its endpoints. A button that works only on mouse click, or a keyboard user who cannot move focus out of a component, is a practical failure to investigate. See the W3C WCAG 2.2 Recommendation. WebAIM describes Tab as the typical way to move among page links, buttons, and input fields in its keyboard accessibility guidance.
Error identification
W3C’s guidance for WCAG success criterion 3.3.1 says that an automatically detected input error must identify the item in error and describe the error in text. It also explains that, after an unsuccessful submission, simply redisplaying the form without a hint that submission failed is not sufficient. Native browser validation can be generic, and in some browser and screen-reader combinations only the first error may be exposed. See W3C’s Understanding Error Identification.
Color, contrast, labels, and feedback
Color alone can leave a status unclear to people with color-vision disabilities and may not communicate the same information to screen-reader users. Add another cue, such as text or a recognizable icon with an accessible name. Also check contrast, associated form labels, identifiable interactive elements, feedback, and consistent navigation. WAI covers these practical design checks in Designing for Web Accessibility; the U.S. Department of Justice also lists color-only information and inaccessible forms among examples of website barriers in its web accessibility guidance.
Responsive layouts and input modes
A page that works at one desktop width may hide content or make controls hard to reach in a narrow window or with enlarged text. Check more than one viewport. WAI recommends designing for different viewport sizes, and WebAIM notes that keyboard access matters on mobile devices when users connect an external keyboard.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →How far does this inspection go?
This manual workflow is a useful starting point, not proof that a site conforms to an accessibility standard or that every usability problem has been found. WCAG 2.2 is the normative reference for the requirements discussed here. WCAG 3.0, whose W3C page was published as a working draft on September 10, 2026, is draft material rather than the current conformance standard: W3C WCAG 3.0 working draft. DOJ guidance describes U.S. ADA-related website barriers; it should not be read as a universal legal conclusion for every site or jurisdiction.
These examples come from accessibility guidance, not prevalence studies. They do not establish how frequently each bug occurs, and the checks do not replace evaluation with assistive technology users.
Or skip the browser setup
For a screenshot of a page during visual review, ScreenshotNeo can return an image or PDF from one GET request. It accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, with the outcome identified in response headers. An MCP server provides screenshot and page-info tools for AI agents.
Example cURL request (replace the URL with the page you are reviewing):
Rank #4
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for request options. A screenshot can help with visual review, but it does not test keyboard operation or establish accessibility conformance. ScreenshotNeo includes 1,000 shots per month free with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Does passing an automated accessibility scan prove a UI is free of bugs?
No. A scan alone does not establish usability or WCAG conformance; the manual checks here are only a starting point.
Best Value
Are the examples ranked by how often they happen?
No. They are documented accessibility-related bug patterns, not a measured frequency ranking.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
