Seven website design mistakes repeatedly make otherwise functional sites harder to use: mouse-dependent controls, weak contrast, missing media alternatives, confusing structure, inconsistent navigation, poor responsive behavior, and no testing with representative users. Treat this as a practical inspection list, not a ranked survey. The available guidance does not establish that these are the seven most frequent problems.
Accessibility applies to content, code, and interactions. A visitor may use a keyboard, screen reader, magnifier, voice commands, a narrow window, browser zoom, or other changed settings. Check the experience through those access methods before treating a visual desktop review as finished.
As an Amazon Associate I earn from qualifying purchases.
1. Making interaction difficult without a mouse
A control is not accessible if a visitor must hover, drag, swipe, or precisely click it when no equivalent operation exists. Keyboard users should be able to reach every interactive element, understand where focus is, and activate it without getting trapped.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →What to inspect
- Use only the keyboard, normally with Tab, Shift+Tab, Enter, Space, and arrow keys, to move through menus, dialogs, forms, carousels, and custom widgets.
- Make the current focus location obvious. A faint outline that disappears against the background is not a useful focus indicator.
- Provide a non-drag alternative for any drag-and-drop action, and a non-swipe route through touch carousels or galleries.
- Do not hide essential information or controls behind hover alone. Hover can supplement a control, but the same information must be reachable by keyboard and other input methods.
- Check that opening a dialog moves focus into it, closing it returns focus sensibly, and keyboard users cannot tab into an obscured page behind it.
A quick keyboard audit
- Reload the page and leave the mouse untouched.
- Press Tab repeatedly and record every point where focus becomes invisible, jumps unexpectedly, or skips an actionable element.
- Operate each focused control. Test menus, accordions, date pickers, video controls, filters, and form submission—not just ordinary links.
- Open and close overlays, then confirm that focus remains in a logical place.
- Repeat with voice control or a screen reader when those tools are part of your audience’s likely access methods.
GOV.UK guidance on WCAG 2.2 describes finding and using content through different access methods, including keyboard and voice. This is an interaction requirement, not a cosmetic preference.
#1 Best Overall
2. Using weak contrast or color as the only signal
Text and controls that blend into their background can exclude people with low vision or make a site tiring for everyone. Color-only instructions also fail when a visitor cannot distinguish hues, prints the page, uses a monochrome display, or has color-vision differences.
Contrast thresholds cited in current guidance
The Government Digital Service’s 2025 accessibility guidance relays the following WCAG 2.2 examples. They are criterion thresholds, not a universal formula for judging whether a palette looks attractive.
| Content | Minimum contrast ratio | How to use the figure |
|---|---|---|
| Regular text | 4.5:1 | Apply the WCAG 2.2 contrast requirement cited by the guidance. |
| Large text | 3:1 | Apply the separate WCAG 2.2 threshold for large text cited by the guidance. |
Design and test beyond the ratio
- Check text against its actual background, including gradients, images, translucent panels, and dark-mode variants.
- Do not identify a required field only with red, or distinguish status only with green and amber. Add text, an icon with a meaningful label, a pattern, or another non-color cue.
- Give links a treatment that does not depend solely on a color change where they appear inside paragraphs; an underline is a familiar additional cue.
- Test disabled, focused, visited, error, success, and selected states. A compliant default color does not guarantee an understandable state change.
Contrast checks should be made on rendered components, not only on brand swatches. A design system can pass its base colors while a real notification, button label, or form error fails.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems3. Leaving images, video, or audio without useful alternatives
Media becomes an information dead end when its meaning is available only visually or aurally. The right alternative depends on the purpose of the asset; adding a generic sentence to every image is not accessibility.
Choose the alternative by purpose
| Media situation | Useful treatment |
|---|---|
| Informative image | Write concise alternative text that conveys the information a visitor needs from the image. |
| Decorative image | Use empty alternative text so assistive technology can skip it rather than hearing a redundant description. |
| Complex chart, map, or diagram | Provide a summary and an equivalent data table or detailed description; do not expect a short label to carry the whole message. |
| Video with spoken information | Provide synchronized captions and, when needed, an audio description or another way to obtain visual information. |
| Audio-only material | Provide a transcript that includes the material’s meaningful spoken content and relevant sounds. |
Write alternatives that answer “why is this here?”
For a product photo used only as decoration, an empty alternative may be correct. For a photograph showing a damaged component in a repair guide, describe the visible damage that the instruction relies on. Avoid repeating a nearby caption or link text. If the image is itself a link, the alternative should identify the destination or action.
Captions and transcripts should be available from the same page as the player, clearly labeled, and usable without the media controls. For a complex graphic, publish the underlying values or a text explanation so a screen-reader user can reach the same conclusion as a sighted reader.
4. Creating confusing content structure, labels, or instructions
Visitors scan before they read. A page with arbitrary heading levels, vague links, unlabeled fields, or instructions hidden in placeholders forces people to guess what the interface expects.
Make the document structure visible to technology
- Use one clear page heading, then nested headings that describe the sections beneath them. Choose heading levels for structure, not for visual size.
- Use descriptive link wording such as “Download the installation guide” instead of repeated “Read more” links whose destinations are unclear out of context.
- Associate every form control with a persistent, visible label. A placeholder is an example or hint, not a replacement for the label.
- State format, length, required status, and constraints before submission when possible. Do not make users discover a rule only after an error.
- Write error messages that identify the field, explain the problem in plain language, and say how to correct it. Preserve entered data when it is safe to do so.
Check headings and forms with assistive technology
Open a screen reader’s heading list, or use the browser’s accessibility tree, to see whether the outline matches the visual page. Navigate through the form by labels rather than by sight. If a field announces only “edit” or a cryptic code, its programmatic name is incomplete even if the design looks polished.
Plain language is part of the interface. Short instructions, familiar terms, and examples reduce cognitive load for people with cognitive or intellectual disabilities and help anyone completing an unfamiliar task.
Rank #4
5. Making navigation inconsistent or hard to find
Repeated navigation should appear in a predictable order and position. When the header, menu, or account controls move unpredictably between pages, visitors must relearn the site instead of learning its content.
Build predictable routes
- Keep repeated navigation components in the same relative order wherever they recur.
- Use clear names that describe destinations. Avoid changing a link’s wording merely to fit a page’s marketing language.
- Give visitors orientation cues such as a useful page title, breadcrumbs for deep hierarchies, a highlighted current section, or a clear back route.
- Offer more than one way to locate important content when practical: global navigation plus site search, category links, breadcrumbs, or a site map.
- Do not trigger navigation simply because an element receives focus. A keyboard user may move focus through a menu while still deciding what to choose.
W3C’s explanation of WCAG 2.2 Success Criterion 3.2.3 links consistent repeated navigation with benefits for people with low vision, cognitive limitations, intellectual disabilities, and blind users. Consistency reduces memory and orientation work; it does not mean every page must be visually identical.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 116. Designing for one screen size or text setting
A fixed desktop composition can become unusable on a phone, in a zoomed browser, or when text is enlarged. Responsive design is an access requirement because the visitor’s viewport and settings are not under your control.
Best Value
Test the states that expose failures
- Open the page in a narrow mobile-sized window. Confirm that content reflows into a readable primary column rather than requiring two-dimensional scrolling.
- Increase browser zoom and text size. Check that headings, buttons, menus, tables, and error messages remain usable and do not overlap.
- Rotate or resize the viewport while a menu, form, or dialog is open. Make sure content is not lost and focus remains available.
- Inspect long words, code samples, data tables, and unbreakable URLs. Give them a safe way to wrap or scroll without pushing the entire page sideways.
- Check touch targets and keyboard access after responsive styles change. A mobile menu that works by touch still needs a usable keyboard path.
W3C WAI illustrates a narrow-window pattern with one primary content column and navigation available through an icon. That is an example of reflow, not a command to copy a particular visual design. GOV.UK guidance likewise treats responsive behavior and reflow as practical WCAG considerations.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.7. Skipping evaluation with real users
A design team can approve a page that fails the people it is meant to serve. Visual inspection and automated checks catch important defects, but they do not reveal every misunderstanding, navigation dead end, or mismatch between an intended task and a real one.
Use a user-centred evaluation loop
- Define the intended users, their abilities, devices, assistive technologies, and key tasks.
- Write realistic usage scenarios, including interruptions, unfamiliar terminology, and the conditions in which people actually visit the site.
- Evaluate early wireframes and content structure before polishing the interface. Fixing a wrong hierarchy is cheaper than rewriting a finished component library.
- Test representative pages with participants who match the intended audience. Include people who use keyboards, screen readers, magnification, voice input, or changed browser settings when those methods are relevant.
- Record where participants hesitate, choose the wrong route, miss an instruction, or cannot recover from an error. Prioritize fixes by task impact and frequency observed in your own sessions.
- Repeat after changes. A redesign can solve one barrier while introducing another in responsive behavior, focus order, or content clarity.
The GOV.UK summary of the Foreign, Commonwealth & Development Office report Usability Issues in Web Site Design, published 1 January 1998, states: “Unless a web site meets the needs of the intended users it will not meet the needs of the organisation providing the web site.” The report is an early user-centred design source, not current prevalence research or a benchmark for how often defects occur.
Recommended Free Tools
Run a practical website design review
Assign an owner and review representative templates rather than only the homepage. A useful pass combines automated checks, manual inspection, and observed tasks.
- Inventory templates and journeys. List article, search, account, checkout, support, form, media, and error pages. Identify the tasks that matter on each.
- Check content structure. Inspect headings, link names, labels, instructions, error recovery, captions, transcripts, and alternative text.
- Check interaction. Complete every journey with a keyboard. Verify visible focus, dialog focus management, non-hover alternatives, and non-drag routes.
- Check perception. Measure the rendered contrast states against the WCAG 2.2 thresholds cited by the 2025 Government Digital Service guidance. Confirm that color is never the sole identifier.
- Check responsive behavior. Resize to a narrow window, zoom text, and inspect reflow, overflow, menus, tables, and dialogs.
- Check navigation. Compare repeated headers and menus across templates, then try to reach key content through the available routes.
- Observe representative users. Give participants realistic tasks without coaching them toward the intended path. Record failures and language they use to describe the problem.
- Track fixes to verification. Give each issue a location, impact, owner, and retest result. Do not close an item because a visual screenshot looks better.
Standards, evidence, and legal scope
WCAG 2.2 is a technical standard; the practical examples above explain how to inspect a site against its principles. The Government Digital Service material describes UK public-sector accessibility regulation. Whether a particular legal duty applies to your organisation depends on jurisdiction, sector, contract, and the edition of the standard named by that rule. Do not present UK public-sector guidance as a blanket legal requirement for every commercial or international website.
No source establishes how often these seven mistakes occur, their average business cost, or a universal ranking. Use your own analytics, support records, accessibility findings, and user sessions to decide what to fix first. The durable test is whether intended users can find, understand, operate, and recover from the site’s important tasks.
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.
Free tools Windows power users keep installed
One-click scans. No signup required.
