Pharmacy website accessibility: WCAG compliance guide for UK clinics

Pharmacy websites serve some of the most diverse patient populations in healthcare. Elderly patients managing chronic conditions, people with visual impairments ordering prescriptions, parents navigating services one-handed while holding a child, and patients with cognitive disabilities who need clear, simple interfaces. If your pharmacy website is not accessible, you are excluding the very patients who need your services the most.

Beyond the moral imperative, UK law requires it. The Equality Act 2010 places a legal duty on service providers -- including pharmacies -- to make reasonable adjustments so that disabled people can access their services. A website that fails basic accessibility standards is a legal liability, a patient safety risk, and a missed commercial opportunity.

This guide explains what WCAG 2.2 compliance means for pharmacy websites, identifies the most common accessibility failures, and provides a practical implementation checklist you can follow.

Why does accessibility matter specifically for pharmacies?

Pharmacies serve patient populations with higher-than-average rates of disability and impairment. The NHS estimates that over 14 million people in the UK live with a disability, and a significant proportion of pharmacy patients are elderly, managing chronic conditions, or experiencing temporary impairments.

Consider the typical pharmacy website visitor:

• A 78-year-old patient trying to request a repeat prescription online. They may have reduced vision, limited dexterity, and be unfamiliar with complex web navigation.
• A patient with dyslexia reading about Pharmacy First eligibility criteria. They need clear typography, short paragraphs, and logical content structure.
• A visually impaired patient using a screen reader to find your pharmacy's opening hours and phone number. If this information is embedded in an image without alt text, they cannot access it.
• A patient with motor impairments using keyboard navigation to book a travel vaccine appointment. If your booking form requires precise mouse movements, they are locked out.

These are not edge cases. They represent a substantial portion of your patient base. A pharmacy website that fails to serve them is failing at its core purpose.

The commercial case

Accessibility is not just compliance. The Purple Pound -- spending power of disabled households in the UK -- is estimated at over £274 billion per year. Pharmacies that make their digital services accessible capture a larger share of this market. Additionally, accessibility improvements often benefit all users: clearer navigation, faster load times, better mobile experiences, and more readable content.

The SEO connection

Many accessibility improvements directly benefit SEO. Proper heading structure helps search engines understand your content hierarchy. Alt text on images provides additional keyword signals. Semantic HTML improves crawlability. Accessible forms reduce bounce rates. If you are investing in pharmacy SEO, accessibility should be part of the same conversation.

What does WCAG 2.2 require for pharmacy websites?

WCAG 2.2 is organised around four principles, often remembered by the acronym POUR: Perceivable, Operable, Understandable, and Robust. Each principle contains specific guidelines with testable success criteria at three levels: A (minimum), AA (recommended), and AAA (enhanced).

For pharmacy websites, Level AA is the appropriate target. It covers the requirements most relevant to healthcare users without imposing unrealistic constraints on design and content.

Perceivable

All information and user interface components must be presentable in ways that users can perceive, regardless of sensory ability.

Key requirements for pharmacies:

• Text alternatives (1.1.1): Every non-text element -- images, icons, maps, charts -- must have a text alternative. For a pharmacy, this means alt text on team photos, service images, and any infographics. Decorative images should have empty alt attributes.
• Captions and audio descriptions (1.2): If you publish video content (consultation explainers, pharmacy tours), provide captions. If the video conveys essential information visually, audio descriptions are needed.
• Colour contrast (1.4.3): Text must have a contrast ratio of at least 4.5:1 against its background. Large text (18px bold or 24px regular) requires 3:1. This is particularly important for pharmacy websites, where many users have age-related vision decline.
• Text resizing (1.4.4): Content must remain functional and readable when text is resized up to 200 percent. Pharmacy users frequently enlarge text to read dosage information or service details.
• Reflow (1.4.10): Content must reflow into a single column at 320 CSS pixels wide without horizontal scrolling. This ensures mobile and zoom users can access all content.

Operable

User interface components and navigation must be operable by all users, including those who cannot use a mouse.

Key requirements for pharmacies:

• Keyboard accessible (2.1.1): All functionality must be operable via keyboard alone. This includes navigation menus, booking forms, accordion sections, and any interactive elements. Test by tabbing through your entire site without touching a mouse.
• No keyboard traps (2.1.2): Users must be able to navigate away from any component using only the keyboard. Modal overlays (cookie consent, booking confirmations) are common trap points.
• Timing adjustable (2.2.1): If your booking system has session timeouts, users must be able to extend the time limit. A patient with motor impairments may need significantly longer to complete a form.
• Focus visible (2.4.7): When navigating with a keyboard, the currently focused element must have a visible indicator. Many pharmacy websites strip default focus styles for aesthetic reasons, which makes keyboard navigation impossible.
• Focus not obscured (2.4.11 -- new in 2.2): The focused element must not be entirely hidden behind sticky headers, cookie banners, or chat widgets.
• Target size (2.5.8 -- new in 2.2): Interactive targets must be at least 24 x 24 CSS pixels. This is especially relevant for pharmacy booking forms, where small checkboxes or radio buttons are common.

Understandable

Information and the operation of the user interface must be understandable.

Key requirements for pharmacies:

• Language of page (3.1.1): Declare the language of your page in the HTML. For UK pharmacy websites, this is lang="en-GB".
• Error identification (3.3.1): When a form input error is detected, the error must be identified and described to the user in text. For prescription request forms, clearly state which fields need correction and why.
• Labels or instructions (3.3.2): Every form field must have a visible label. Placeholder text alone is not sufficient. Pharmacy booking forms frequently rely on placeholder text that disappears when the user starts typing, leaving them uncertain what information is required.
• Error suggestion (3.3.3): Where possible, provide suggestions for correcting errors. If a patient enters an invalid date of birth format, suggest the correct format rather than simply rejecting the input.
• Redundant entry (3.3.7 -- new in 2.2): Do not require users to re-enter information they have already provided in the same process. If a patient enters their name on one booking step, do not ask for it again on the next.
• Accessible authentication (3.3.8 -- new in 2.2): If your patient portal requires authentication, do not rely on cognitive function tests (CAPTCHAs, memorisation) as the sole method.

Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Key requirements for pharmacies:

• Parsing (4.1.1): Your HTML must be valid and well-formed. Broken markup can cause screen readers to misinterpret content.
• Name, role, value (4.1.2): All interactive elements must have programmatically determinable names, roles, and values. Custom-built booking widgets, dropdowns, and toggles must use appropriate ARIA attributes if native HTML elements are not used.

What are the most common accessibility failures on pharmacy websites?

Based on our experience auditing pharmacy websites across the UK, these are the issues we encounter most frequently.

Poor colour contrast on call-to-action buttons

Many pharmacy websites use light green or blue buttons with white text. This combination often fails the 4.5:1 contrast requirement. The irony is that these are the most important interactive elements on the page -- booking buttons, contact links, prescription request forms. If patients cannot read them clearly, they cannot convert.

Fix: Test all button and link colour combinations using a contrast checker. Adjust colours to meet or exceed 4.5:1 for normal text and 3:1 for large text.

Missing or inadequate form labels

Prescription request forms and booking widgets frequently use placeholder text instead of visible labels. When a patient tabs into a field and the placeholder disappears, they lose context for what information is required. Screen readers may also fail to announce the field purpose correctly.

Fix: Add visible <label> elements to every form field, properly associated using the for attribute. Keep placeholder text as supplementary guidance, not the primary label.

Inaccessible navigation menus

Dropdown menus that require hover interactions are unusable for keyboard and touch users. Mega menus that do not support keyboard navigation trap users in the header. Mobile hamburger menus that lack proper ARIA attributes are invisible to screen readers.

Fix: Ensure all menu items are keyboard accessible. Use aria-expanded, aria-haspopup, and proper focus management for dropdown interactions. Test the complete navigation flow using only the Tab and Enter keys.

Images without alt text

Team photos, pharmacy exterior shots, service illustrations, and map screenshots frequently lack alt text. This means screen reader users receive no information from these elements.

Fix: Add descriptive alt text to all meaningful images. For decorative images, use alt="" to indicate they should be skipped by assistive technology.

Missing skip navigation links

Pharmacy websites with extensive header navigation force keyboard users to tab through dozens of links before reaching the main content. Without a "skip to content" link, this creates a frustrating barrier on every page load.

Fix: Add a visually hidden skip link as the first focusable element on every page. Make it visible on focus so keyboard users can see it when they need it.

Inaccessible embedded maps

Embedded Google Maps iframes are often the only way patients can find your pharmacy location. Without proper labelling, screen readers announce these as "iframe" with no context. Keyboard users may get trapped inside the map.

Fix: Add a descriptive title attribute to the iframe: title="Google Map showing the location of [pharmacy name]". Provide your full address in text on the same page so map-dependent information is available to all users.

What are the legal obligations for UK pharmacy websites?

The Equality Act 2010

The Equality Act 2010 requires service providers to make reasonable adjustments to ensure disabled people can access their services. Websites are considered part of your service provision. A pharmacy that offers online prescription requests, appointment booking, or health information through its website must ensure those digital services are accessible.

The Act does not specify WCAG compliance explicitly, but courts and regulators consistently reference WCAG as the benchmark for web accessibility. Meeting WCAG 2.2 Level AA is widely considered sufficient to demonstrate compliance.

The Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018

While these regulations technically apply to public sector bodies, pharmacies providing NHS-funded services exist in a grey area. If your website is funded by or closely associated with NHS services, it may fall within scope. Regardless, the principles established by these regulations are increasingly applied as best practice across all healthcare websites.

GPhC standards

The General Pharmaceutical Council requires pharmacies to provide services that are accessible to all patients. While GPhC standards do not explicitly address website accessibility, a pharmacy that offers digital services (online consultations, prescription requests) through an inaccessible website is arguably failing to meet its regulatory obligations to ensure equitable access.

Enforcement and risk

The Equality and Human Rights Commission can investigate accessibility complaints. Individual patients can also bring legal claims. While high-profile cases have primarily targeted large retailers and public sector organisations, the legal framework applies equally to smaller healthcare providers. The reputational damage of an accessibility complaint -- particularly for a healthcare provider -- can be more significant than any financial penalty.

How do you test your pharmacy website for accessibility?

Automated testing tools

Automated tools catch approximately 30 to 40 percent of accessibility issues. They are a good starting point but must be supplemented with manual testing.

• axe DevTools (browser extension): The industry standard for automated accessibility testing. Run it on every page of your site and address all critical and serious issues.
• WAVE (web accessibility evaluation tool): Provides a visual overlay showing accessibility errors, alerts, and structural elements directly on your page.
• Lighthouse (built into Chrome DevTools): Includes an accessibility audit as part of its overall performance assessment. Useful for quick checks during development.
• Pa11y: A command-line tool that can be integrated into your build process to catch accessibility regressions automatically.

Manual testing

Manual testing catches the issues automated tools miss:

• Keyboard navigation: Tab through your entire site using only the keyboard. Can you access every link, button, and form field? Can you see where focus is at all times? Can you escape from modals and overlays?
• Screen reader testing: Use VoiceOver (macOS/iOS) or NVDA (Windows, free) to navigate your site. Listen to how page structure, headings, links, forms, and images are announced. Pay particular attention to your booking flow and prescription request forms.
• Zoom testing: Zoom your browser to 200 percent. Does all content remain visible and functional? Does the layout adapt without horizontal scrolling?
• Colour contrast: Use the Colour Contrast Analyser tool to check specific text and background colour combinations that automated tools may miss (e.g., text overlaid on images).

User testing

The most valuable accessibility testing involves real users with disabilities. If your pharmacy has regular patients who use assistive technology, ask if they would be willing to test your website and provide feedback. Even informal testing sessions can reveal critical issues that no automated tool would catch.

What does an implementation checklist look like?

Use this checklist to systematically address accessibility on your pharmacy website. Work through it in priority order.

Priority 1: Critical fixes (Week 1-2)

• Add visible labels to all form fields (booking, prescription, contact forms)
• Fix colour contrast on all buttons, links, and body text
• Add alt text to all meaningful images
• Ensure all pages have a logical heading hierarchy (H1 > H2 > H3)
• Add a skip navigation link to every page
• Set lang="en-GB" on the HTML element
• Ensure cookie consent and chat widgets are keyboard accessible

Priority 2: Structural improvements (Week 3-4)

• Make all navigation menus keyboard accessible with proper ARIA attributes
• Add descriptive titles to all iframes (maps, booking widgets)
• Ensure all interactive elements have visible focus indicators
• Test and fix the complete booking flow for keyboard-only users
• Add error identification and suggestions to all form validations
• Ensure no keyboard traps exist (modals, overlays, embedded content)

Priority 3: Enhanced accessibility (Week 5-6)

• Add captions to all video content
• Implement target sizes of at least 24 x 24 pixels for all interactive elements
• Remove redundant entry requirements in multi-step forms
• Ensure accessible authentication methods are available
• Test with VoiceOver/NVDA screen readers and fix announced content issues
• Validate HTML for parsing errors that affect assistive technology

Priority 4: Ongoing maintenance

• Add accessibility testing to your development workflow (Pa11y in CI/CD)
• Review accessibility quarterly and after any major site updates
• Publish an accessibility statement on your website
• Provide a contact method for patients to report accessibility issues
• Train content editors on accessibility best practices for new content

How does accessibility connect to your pharmacy website build?

If you are building or redesigning your pharmacy website, accessibility should be built into the project from the start, not bolted on at the end. Retrofitting accessibility is always more expensive and less effective than designing for it from the beginning.

Our pharmacy website design guide covers the full build process, and our pharmacy website SEO checklist includes UX elements that directly support accessibility goals.

When evaluating website platforms or agencies, ask specifically about their accessibility approach. Can they demonstrate WCAG 2.2 AA compliance on existing projects? Do they include accessibility testing in their development workflow? Will they provide an accessibility audit as part of the deliverables?

The pharmacies that get accessibility right from the start avoid costly retrofits, reduce legal risk, serve more patients effectively, and build a digital presence that genuinely reflects their clinical commitment to inclusive care.

About the Author

Pankaj Karad

Founder & CEO

Pankaj Karad is the founder of Karad Infotech, a London-based agency specialising in web design, SEO, and software development for healthcare businesses across the UK.

Connect on LinkedIn