Design with a focus on accessibility: how to make websites user-friendly for everyone

In the digital age — where a website or web app is often the first point of contact with a brand — accessibility is becoming more than just a “nice to have” feature, but a key component of good UX and digital responsibility. An accessible website is not just about people with disabilities: it’s about usability, clarity, inclusion, and business benefits (fewer barriers = more audience).
In this article, we’ll look at:

• what new versions of WCAG 2.x standards exist, and what tools can be used to check accessibility;

• real cases of adapting websites for accessibility — what works, what are the pitfalls.

What is WCAG and why is it important?

The W3C Web Content Accessibility Guidelines (“WCAG”) standards define how to make web content more accessible to people with various forms of disabilities: vision, hearing, motor skills, and cognitive disabilities.

WCAG 2.1 and WCAG 2.2 are a logical continuation of WCAG 2.0, with additional criteria that take into account modern technologies (mobiles, touch screens, gestural interaction, etc.). 

Major additions in WCAG 2.1 / 2.2 (as "Accessibility 2.0")

Among the important innovations:

• criterion 1.3.4 “Orientation” (the ability to work in both portrait and landscape mode) – WCAG 2.1.
• 1.4.10 “Reflow” – content should adapt without horizontal scrolling when zoomed.
• 1.4.11 “Non-text contrast” – ensuring sufficient contrast between non-text elements.
• 2.5.x benefits for touch gestures, large button targets, and consistent interaction.
• WCAG 2.2 added new success criteria (for example, 2.5.7 Drag Drop Reordering) - this is now relevant for a large number of devices. 

POUR Principles

WCAG is based on four principles:

• Perceived – content must be perceptible (e.g. text instead of just images, subtitles for videos)
• Operable – the interface should be operable (e.g., keyboard navigation)
• Understandable – content and interaction should be clear (e.g. navigation sequence, logical structure)
• Robust – content should be usable by different agents (browsers, assistive technologies) 

Accessibility checking tools

• To make the accessibility process more manageable, there is a whole set of tools:

• WAVE is a visual tool for checking a page, showing where alt texts are missing, poor contrast, etc.
• axe DevTools is a browser application that integrates with CI/CD and automatically creates WCAG reports.
• Other tools: we can barely list them all – manual verification using assistive technologies (screen readers, magnification), keyboard navigation verification, etc.

"Automated scans only catch part of the issue — manual checks with screen reader + keyboard navigation are still essential." 

Integration into the development process

• Include accessibility early on — even at the prototype stage.
• Implement an accessibility checklist and integrate testing into CI/CD
• Do regular audits – not one-offs.

• Involve real users with limitations – this gives more insight than just automated tests.

Braille Institute

An organization that works with people with visual impairments. In its redesign, the website was created from scratch with accessibility in mind:

• typography – the Atkinson Hyperlegible font was used, designed specifically for people with low vision.
• clear color palettes, high contrast, logical page structure.
• a short quiz was created for users to immediately adjust the UI/UX to their needs (for example: “What part of the vision do you have?”, “Do you use screen magnification?”)
• testing with NVDA, JAWS, screen readers, and sighted users. This example demonstrates that accessibility is not just about “following a checklist,” but about a deep understanding of the user. 

TPGi (update site)

A company providing accessibility services has itself updated its website to comply with WCAG 2.1 AA:
new navigation, easier access, updated content.

The accessibility services company itself updated its website to comply with WCAG 2.1 AA:

• new navigation, easier access, content updates.
• Results: increased traffic + 474% page views + decreased bounce rate. This case study shows that users respond to high-quality, inclusive interactions, which translates into business benefits.

Audit case for Arun Council

The local government conducted a thorough audit of the existing website, found a significant number of errors, and then implemented an update – resulting in the new site passing the audit without any technical or oversight errors.
This case highlights that even government websites can be subject to accessibility updates, and this is done with measurable results.

Practical tips for an IT company: how to implement accessibility

Strategy definition

• Include accessibility as an explicit goal of the project (not “maybe we can do it”, but “we will do/achieve …”).
• Appoint a responsible person or team (accessibility champion) — someone to monitor, coordinate, and test.
• Determine the level of compliance (e.g., WCAG 2.1 AA) and prescribe KPIs (number of errors detected, time to fix them, UX indicators).

Integration into the development process

• At the design stage: use a design system with components that already meet standards (contrast, focus, keyboard support).
• During the development phase: apply semantic HTML, ARIA attributes where necessary, test with the keyboard, check focus states.
• At the QA stage: add automatic lining or testing via axe, WAVE, integration into CI. After the report – manual testing using a screen reader, users with limitations.

Content and design approaches

• Provide alternative text for images (alt text) and descriptions for media.
• Check the contrast of text/elements (according to 1.4.11 Non-Text Contrast).
• Provide logical and clear navigation: "Skip to content", clear headings, a chain of tabs.
• Provide keyboard support: all actions should be accessible without a mouse.
• Avoid excessive animation that can cause dizziness or cramps; consider criterion 2.3.3 Animation from Interactions.
• Ensure responsive layout – content should flow properly, without horizontal scrolling, when zooming is applied.

After launch – monitoring and support

• Conduct regular audits (e.g. quarterly).
• Track user metrics – for example: whether the number of sessions has increased, whether bounces have decreased, whether audience satisfaction has increased.
• Maintain documentation – design system, guidelines, testing reports – so that new functionality also meets accessibility requirements.
• Train your team – both designers and developers – on the basics of accessibility and inclusivity.

Accessibility is not just compliance with a standard or checklist. It is an approach to design and development that takes into account all users – with or without limitations, on mobile or desktop. It is also a strategic investment: better UX, a wider audience, lower risks (legal, reputational) and the ability to make a product “for everyone” is a competitive advantage.
 If your IT company is ready to approach the topic seriously – include accessibility from the very beginning, make it part of the process, not an “after-script”. Implement with understanding, tools and measurement – ​​and the results will come.