Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more

Seven website design mistakes deserve a deliberate check on every site: mouse-only interaction, weak contrast, missing media alternatives, confusing structure and forms, inconsistent navigation, poor responsive behavior, and designing without representative users. They are not a ranked list of the most common failures; they are evidence-backed areas where accessibility and usability frequently depend on implementation details.

Use the checks below during design, development, and content review. Accessibility applies to content, code, and interactions, including experiences for keyboard users, screen-reader users, people who magnify text, voice-command users, and people who change browser or operating-system settings.

Important scope: The Government Digital Service guidance cited here was written for UK public-sector accessibility work. It is useful practical guidance, but it does not by itself establish legal requirements for every website or jurisdiction. Check the standards and laws that apply to your audience and organisation.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

1. Making interaction difficult without a mouse

A site fails this check when a person cannot complete a task with a keyboard, voice control, or another non-pointer method. Common examples include controls that only respond to hover, drag-and-drop actions with no alternative, swipe-only carousels, custom widgets that never receive focus, and a focus indicator that disappears against the background.

#1 Best Overall
Sale
HTML and CSS: Design and Build Websites
  • HTML CSS Design and Build Web Sites
  • Comes with secure packaging
  • It can be a gift option

What to inspect

  • Press Tab and Shift+Tab through every page and confirm that each interactive control receives focus in a sensible order.
  • Confirm that the focused item is visibly identifiable at all times. Do not rely on a faint colour change that disappears on a similar background.
  • Use Enter, Space, arrow keys, and Escape where appropriate to operate links, buttons, menus, dialogs, date pickers, accordions, and carousels.
  • Check that opening a menu or dialog moves focus to a useful starting point, keeps focus inside a modal while it is open, and returns focus to a sensible control when it closes.
  • Replace hover, dragging, or swiping as the only way to reveal or move content. Provide buttons, keyboard commands, or another equivalent route.

How to fix it

Prefer native links, buttons, form controls, and headings before adding custom interaction code. Give custom components a clear name, role, state, and keyboard behaviour. Keep the focus order consistent with the visual and reading order. If a pointer gesture performs an action, expose the same action through a plainly labelled control. For voice users, visible labels should match the names exposed to assistive technology so a spoken command can identify the control.

How to verify

Run a complete task using only the keyboard, starting from the address bar and ending at the success message. Record every point where focus becomes invisible, trapped, or out of sequence. Then repeat the task with a screen reader or voice-control tool if your audience relies on one. GOV.UK’s WCAG 2.2 guidance emphasises that people should be able to find and use content through different access methods, including keyboard and voice.

2. Using weak contrast or relying on colour alone

Text and controls can be technically present yet unusable when foreground and background colours are too similar. A second failure occurs when colour is the only signal for meaning—for example, red and green status labels with no text, icon, or pattern to distinguish them.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use the correct WCAG thresholds

Government Digital Service guidance published in 2025 cites WCAG 2.2 Success Criterion 1.4.3 examples of a 4.5:1 minimum contrast ratio for regular text and a 3:1 minimum for large text. Treat these as named WCAG criterion thresholds, not as a universal aesthetic formula. The applicable text size, weight, and component state matter.

Check more than body copy

  • Test headings, navigation, button labels, placeholder text, captions, metadata, and error messages.
  • Check text over images, gradients, video, and changing backgrounds at their least readable point.
  • Inspect focused, hovered, disabled, selected, and error states. A control that passes in its default state can fail when focused.
  • Verify icons, charts, borders, and other non-text indicators where users need them to identify or operate a control.

Remove colour-only meaning

Add visible words, shapes, icons, line styles, or position cues alongside colour. A form error should say what went wrong and how to correct it; it should not merely turn a border red. A chart should identify series in text or a data table, not only through coloured lines. Provide enough contrast between adjacent components that boundaries and states remain understandable.

How to verify

Use a contrast analyser during design and again against rendered pages, because anti-aliasing, opacity, overlays, and real content can change results. Review the page in grayscale or with colour-vision simulation as a quick check for colour-only distinctions, then confirm the relevant WCAG criteria with an appropriate evaluation process.

3. Leaving images, video, or audio without useful alternatives

An alternative is useful only when it conveys the information or function a person would otherwise miss. Adding the file name, repeating a nearby caption, or writing “image” does not make an informative image accessible.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Choose the right alternative

  • Informative image: write concise alternative text that communicates its purpose in context.
  • Functional image: describe the action, such as “Download the annual report,” rather than its appearance.
  • Decorative image: use empty alternative text so a screen reader can skip it when it adds no information.
  • Complex graphic: provide a nearby explanation, data table, or equivalent text that communicates relationships and conclusions, not just a short label.
  • Video or audio: provide captions for spoken content and a transcript where people need a text equivalent. Add audio description or a detailed description when important visual information is not available through the soundtrack.

Keep alternatives current

When an image changes, its alternative must change. Check automatically generated captions and transcripts for names, numbers, technical terms, and speaker changes; automation can produce plausible but incorrect wording. For charts, compare the text equivalent with the underlying data whenever the data is updated.

How to verify

Turn images off and ask whether the page still communicates its purpose. Play media with sound muted and confirm that captions convey the spoken content. Listen with a screen reader to ensure decorative assets are skipped, informative assets have meaningful names, and complex graphics have an equivalent explanation. W3C accessibility guidance treats media alternatives as part of the content design, not a last-minute developer patch.

4. Creating confusing content structure, labels, or instructions

People scan before they read. A page with vague headings, unexplained jargon, unlabeled fields, or instructions hidden in placeholders forces users to guess what the site expects.

Build a predictable information structure

  • Use one clear page topic, then descriptive headings and subheadings that reflect the actual hierarchy.
  • Choose headings for meaning, not visual size. Do not skip levels merely to obtain a particular font size.
  • Write link text that makes sense out of context. “View eligibility requirements” is more useful than repeated “Read more” links.
  • Put essential instructions before the field or action that needs them, and use plain language for terms the audience may not know.

Make forms understandable

Give every field a visible label and associate it programmatically with the control. Do not use placeholder text as the sole label: it disappears when typing begins, can have weak contrast, and may be missed by assistive technology. Group related controls with an informative legend or heading, identify required fields consistently, and state accepted formats before submission.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Design recoverable errors

When validation fails, identify the field, describe the problem in specific language, and explain the correction. Preserve entered data where possible. Put a summary near the top for long forms and connect each summary item to its field. Error messages should not depend on colour alone and should be announced appropriately to assistive technology.

How to verify

Ask someone unfamiliar with the project to explain what each heading, field, and instruction means. If they must infer the intended answer, rewrite it. Test a form with an empty submission, an invalid value, a long value, and a correction after an error. Check that labels, instructions, and messages remain available when text is zoomed.

5. Making navigation inconsistent or hard to find

People build a mental map of a site from repeated locations and labels. Moving the main menu between pages, renaming the same destination, or changing its order without a clear reason makes orientation harder, especially for people with low vision, cognitive limitations, intellectual disabilities, and blind users.

Keep repeated navigation predictable

Place repeated navigation in the same relative order and position across pages. Keep labels stable and distinguish destinations with meaningful wording. Avoid changing the page or opening a new destination merely because a control receives focus; the UK Home Office User-Centred Design Manual specifically warns against on-focus navigation.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #4
Sale
Web Design with HTML, CSS, JavaScript and jQuery Set
  • Brand: Wiley
  • Set of 2 Volumes
  • A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers

Offer more than one route

Where the site’s size and purpose justify it, combine a primary menu with search, breadcrumbs, a site map, category pages, or contextual links. These routes serve different goals: a menu supports browsing, search supports a known target, breadcrumbs show current location, and a site map exposes the information architecture. Do not add every mechanism automatically; choose routes that match the content and users’ tasks.

Give orientation cues

  • Show the current section or page in a way that does not rely only on colour.
  • Use a clear page title and, where appropriate, a breadcrumb trail that reflects the actual hierarchy.
  • Ensure mobile menus have an identifiable button, an announced open or closed state, and a predictable way to close them.
  • Keep “back,” “next,” and step labels specific enough that users know what will happen.

How to verify

Start from several different pages and ask a tester to reach the same destination using the available routes. Record whether they can tell where they are, where they came from, and what will happen next. W3C’s guidance on consistent navigation explains why repeated order helps users predict where to find items.

6. Designing only for one screen size or text setting

A desktop screenshot is not a design specification. Users may open the site in a narrow window, zoom text, enlarge the browser interface, rotate a device, or use settings that change line wrapping and control size.

Test responsive reflow

Check the actual pages at narrow and wide viewport sizes, not only the homepage. Content should reflow into a readable sequence without hiding essential controls. W3C WAI illustrates a narrow-window pattern with one primary content column and navigation available through an icon; the exact layout can vary, but the content and tasks must remain available.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Test changed text settings

  • Increase text size and browser zoom, then inspect headings, menus, dialogs, tables, and form controls.
  • Look for clipped text, overlapping controls, truncated labels, and buttons that can no longer be reached.
  • Check that focus indicators and error messages remain visible after reflow.
  • Confirm that touch targets and keyboard order still make sense when columns stack.

How to verify

Use real content, long names, translated-looking strings, and multi-line error messages during testing; short placeholder copy hides layout failures. Test a complete task at the narrowest supported window and with enlarged text. GOV.UK guidance on WCAG 2.2 treats responsive behaviour and reflow as practical accessibility concerns, not optional visual polish.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

7. Skipping evaluation with real users

A design team can confirm that a page works for its creators while missing problems that are obvious to intended users. Automated checks and expert reviews are valuable, but they cannot replace observing representative people attempting realistic tasks.

Define users and scenarios first

Write down who the site serves, what they are trying to accomplish, what devices or access methods they may use, and what a successful outcome looks like. Include scenarios that cover finding information, completing a form, recovering from an error, and using the site at a narrow width or with a keyboard.

Evaluate during the design, not only at launch

  1. Review early structure and content with people who represent the intended audience.
  2. Test a clickable prototype before visual details are expensive to change.
  3. Run task-based sessions on working pages as interaction and content are implemented.
  4. Log observed barriers, the affected task, evidence from the session, and the planned correction.
  5. Retest the corrected flow and check that the change did not create a new barrier elsewhere.

A GOV.UK summary of the Foreign, Commonwealth & Development Office report Usability Issues in Web Site Design, published on 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 principle remains useful, but that report is an old design document, not current prevalence research or evidence that these seven mistakes are ranked by frequency.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

A practical review sequence for a live website

Use this sequence to turn the seven checks into a repeatable maintenance task:

  1. Map the critical journeys. List the tasks that matter most to users and the pages, controls, and content each task touches.
  2. Run a keyboard pass. Complete each journey without a mouse and record focus order, visibility, traps, and pointer-only actions.
  3. Review content and states. Inspect headings, labels, instructions, errors, link text, image alternatives, captions, and transcripts in their real context.
  4. Check visual access. Measure relevant contrast states and confirm that status, errors, and chart distinctions are not communicated by colour alone.
  5. Test responsive conditions. Repeat the journeys at narrow widths, with zoomed text, and with changed browser settings.
  6. Observe representative users. Ask people who match the intended audience to perform realistic tasks, then prioritise fixes by the barrier’s effect on task completion.
  7. Retest after every meaningful change. Accessibility is affected by content, code, and interaction updates, so a previously passing page can regress.

What a complete sign-off should record

For each journey, keep a simple record of the page or component reviewed, the access method used, the observed result, supporting evidence such as a screenshot or transcript, the owner of the fix, and the retest date. Mark an item as passed only when the task works in the tested conditions, not merely when an automated tool reports no errors. If a requirement depends on a particular jurisdiction, browser, assistive technology, or service context, record that qualification with the result.

These checks address different failure modes. Keyboard access cannot compensate for missing captions; good contrast cannot repair a confusing form; and a responsive layout still needs testing with the people who use it. Treat the review as an ongoing part of content, design, and development rather than a one-time visual inspection.

Quick Recap

SaleBestseller No. 1
HTML and CSS: Design and Build Websites
HTML and CSS: Design and Build Websites
HTML CSS Design and Build Web Sites; Comes with secure packaging; It can be a gift option
$14.94
SaleBestseller No. 3
SaleBestseller No. 4
Web Design with HTML, CSS, JavaScript and jQuery Set
Web Design with HTML, CSS, JavaScript and jQuery Set
Brand: Wiley; Set of 2 Volumes
$35.05

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.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.