Website accessibility in 2026: 10 mistakes that cost you customers

Website accessibility is not a feature to bolt on at the end of a project. If a customer cannot read a price, locate keyboard focus, understand a form error or dismiss an element covering the screen, your website simply does not work for them. This guide translates WCAG 2.2 into ten barriers a business owner can recognize - and explains how thoughtful web design and development remove them without sacrificing visual quality.

What website accessibility means - without the jargon

Web accessibility means people can find, understand and use content regardless of how they see, hear, move or process information. It includes people who are blind or have low vision, people who cannot use a mouse precisely, people with hearing loss or cognitive disabilities - but also someone with a broken arm, an older customer, a person using a phone in bright sunlight or anyone trying to complete a form one-handed on a bus.

WCAG 2.2 is the international standard that organizes accessibility around four principles: content must be perceivable, operable, understandable and robust. In practical terms, a person must be able to notice the content, control the interface, understand what is happening and use it with different devices and assistive technologies.

For a business owner, the definition is even simpler: an accessible website does not remove a potential customer from the buying journey because of a weak color choice, incorrect HTML structure or a control they cannot activate. It is an inclusion issue, a quality issue and a conversion issue at the same time.

Why website accessibility matters in 2026

The first reason is your audience. Shopping, booking, banking, support and research increasingly begin on a phone. When a button is too small, contrast is weak or a form does not explain an error, the problem is not limited to people with permanent disabilities. It affects anyone using the site in less-than-perfect conditions. W3C notes that following WCAG often improves usability for users in general, not only one group.

The second reason is market access. Official EU guidance on accessibility requirements lists online shops, ticketing platforms and banking services among the examples covered, with requirements applying to products and services placed on the EU market after 28 June 2025. Exemptions exist for microenterprises providing services, including businesses with fewer than 10 employees and turnover below EUR 2 million.

Operating a website from Serbia does not automatically make every provision of the European Accessibility Act applicable to you. If you sell to EU consumers or provide a covered digital service in that market, confirm your specific obligations with a qualified legal adviser. This article is a practical web guide, not legal advice.

The third reason is standardization. In 2025, WCAG 2.2 was approved as the international standard ISO/IEC 40500:2025. Accessibility is no longer a niche concern or a temporary design trend. It is becoming a normal part of procurement, design, development, testing and maintenance for digital products.

Mistakes 1-3: content that exists but is not accessible

1. Weak contrast between text and its background

Light gray text on a white background can look refined on a designer's calibrated display and become unreadable on an average phone, in daylight or for someone with low vision. WCAG AA generally requires at least a 4.5:1 contrast ratio for normal text and 3:1 for large text. The answer is not to make every site black and white. Keep the brand palette, but measure every combination that carries important information, especially prices, buttons, navigation and error messages.

2. Images without meaningful alternative text

A screen reader cannot see a product photograph. It reads the image's alternative text. `image123.jpg` or `photo` communicates nothing, while “Black leather handbag with a gold clasp, front view” preserves the reason the image is there. Decorative images should use an empty alt attribute so assistive technology does not announce them unnecessarily. Ask one question: if this image disappeared, what information would the customer lose? Describe that briefly and naturally, without stuffing in keywords.

3. Headings that only look like headings

A large bold paragraph is not the same as a real HTML heading. Screen-reader users often navigate a page through its heading list, just as other readers scan it visually. Each page needs a clear H1 followed by a logical H2 and H3 hierarchy. Do not skip levels to achieve a certain font size. This structure helps people, search engines and code maintenance, while CSS remains responsible for visual sizing.

Mistakes 4-6: the site works with a mouse, but not for the user

4. Interactive elements cannot be operated with a keyboard

A menu that opens only on hover, a card that responds only to a click on a `div`, or a modal that traps the Tab key creates a serious barrier. Open the website, put the mouse aside and use only Tab, Shift+Tab, Enter, Space and Escape. You should be able to reach every action, see where you are, activate the control and close any layer you opened. Native `button` and `a` elements provide much of this behavior already. Improvised controls require far more code and testing.

5. Focus is invisible or covered by a sticky element

A keyboard user must always know which element is active. Removing the browser's `outline` without a good replacement is one of the most common accessibility mistakes. WCAG 2.2 also requires the focused element not to be completely hidden by a sticky header, cookie banner or another layer. Focus should be obvious, high-contrast and visible in both light and dark modes. The sticky effect can remain - it simply cannot swallow the control the visitor is trying to use.

6. Links and buttons do not explain where they lead

Ten links labelled “Click here” make no sense when presented out of context. A name should describe the next step: “View pricing”, “Download the PDF proposal” or “Book a consultation”. An arrow icon without a visible or accessible name is not enough either. Descriptive labels help everyone by speeding up scanning, reducing uncertainty and making calls to action more persuasive.

Mistakes 7-9: mobile interfaces and forms that lose sales

7. Buttons and touch targets are too small

A tiny close icon, links packed together and a miniature checkbox demand precision many users do not have. WCAG 2.2's minimum target size criterion uses 24 x 24 CSS pixels with specific exceptions, while 44-48 pixels is often more comfortable on a phone. Measure the complete interactive area, not only the painted icon, and leave enough distance from the neighboring action.

8. Forms rely on placeholders and color

A placeholder disappears when the user begins typing, leaving no reminder of what the field requires. Every field needs a persistent label, a meaningful focus order and an appropriate input type such as `email` or `tel`, allowing the phone to display the right keyboard. Do not indicate a required field with red alone. Add text or a symbol with an explanation. For longer forms, use autocomplete attributes so customers do not re-enter information their device already knows.

9. The error message says something is wrong, but not how to fix it

“An error occurred” is not help. A useful message appears next to the relevant field, explains what is missing and suggests a solution: “Enter a phone number with the country code, for example +381 60 123 4567.” Move focus to the error summary or associate the message correctly so a screen reader announces it. Preserve information the user has already entered. Repeating an entire form after one mistake is one of the fastest ways to lose an enquiry or checkout.

Mistake 10: motion, media and time are outside the user's control

Parallax, autoplay carousels and large video can create a strong first impression, but they can also cause nausea, disorientation or distraction. Respect the system's `prefers-reduced-motion` setting, provide a pause control for moving content and avoid flashing. Video with speech needs captions, while important audio information needs a text alternative.

The same applies to time limits. If a session, reservation or payment is about to expire, warn the customer and offer an extension when possible. People using screen readers, voice control or alternative input devices may take longer to complete a task. That does not mean they are less likely to buy.

Accessibility does not require stripping all character from a website. It requires motion to be progressive enhancement rather than a condition for understanding or completing an action. We use the same rule when optimizing speed and Core Web Vitals: an effect stays only while it does not interfere with the page's primary job.

Why a Lighthouse Accessibility score of 100 is not certification

Automated tools are an excellent starting point. Lighthouse, axe and similar audits quickly find insufficient contrast, fields without labels, duplicate IDs and some problems with control names. A score of 100 means the tool did not find issues in the set of checks it can automate at that moment. It does not mean the website fully conforms to WCAG, that every user journey is usable or that people with disabilities have tested it.

Automation cannot reliably judge whether alternative text communicates the right information, whether the reading order is logical, whether instructions make sense or whether a screen-reader user can efficiently complete a purchase. W3C itself describes accessibility as something evaluated through a combination of automated testing and human assessment.

A minimum manual test every website owner can perform

1. Use only the keyboard to navigate the main menu, complete the primary form and reach the key call to action.
2. Zoom the page to 200% and confirm that text and controls do not disappear or overlap.
3. Turn on VoiceOver on a phone or computer and listen to the homepage and form.
4. Check light and dark modes, error messages and visible focus states.
5. Repeat the most important journey on a small phone: find a service, send an enquiry or complete a purchase.

A serious conformance claim requires a systematic audit of representative pages and functional journeys, documented findings and retesting after fixes. A widget that promises accessibility in one click cannot replace good code, clear content and real testing.

A practical checklist for your website

For a quick assessment, begin with the pages that make money: the homepage, key service or product pages, contact forms, cart and checkout. Then check the following:

• Text and controls have sufficient contrast in every theme.
• Every informative image has meaningful alternative text and every decorative image has an empty alt attribute.
• The page has one clear H1 followed by a logical heading hierarchy.
• Every function works with a keyboard and focus remains visible and unobscured.
• Buttons and links have descriptive names and comfortably sized interactive areas.
• Forms have persistent labels, useful instructions and specific error messages.
• Motion respects reduced-motion preferences and videos include captions when needed.
• Content remains usable at 200% zoom and on a narrow viewport.
• The primary journey has been checked with a screen reader, not only Lighthouse.

You do not need to solve everything in one sprint. Fix blockers that prevent purchasing, enquiry submission and navigation first. Then add accessibility requirements to the design system and the checklist for every new page. Fixing a shared component is far cheaper than repairing the same button in fifty places.

Conclusion: accessibility is quality people can feel

The best accessibility is often invisible: a clear hierarchy, strong contrast, a logical form, comfortable controls and a website that responds calmly to the way a person chooses to use it. A customer may never praise a properly associated form label, but they will complete the enquiry without frustration. That is a result a business can measure.

Do not treat WCAG as a checklist for the final day of a project. Include it in research, design, development, content and testing. The result is a website that works for more people, is easier to maintain and is better prepared for market expectations that will become stricter rather than weaker.

If you want us to review the key pages, forms and navigation on your website, send us the link through the contact page. You will receive a prioritized overview of real barriers, quick fixes and work to plan for the next phase - without the false promise that one score or widget solves everything.