Inclusive by Design: How Web Accessibility Benefits Everyone.

Article — Accessibility in web design means creating digital spaces that are inclusive, usable, and barrier-free. Developer Matthew Wood, unpacks practical tips to ensure your website meets accessibility standards, improves user experience, and aligns with ethical and legal responsibilities.

Posted by Matt Wood

07.02.2025

The web was created to connect everyone. But this can only be realised when websites and applications are accessible to all. Designing for accessibility is not only ethical. But it is also vital for inclusivity and usability. And in some countries it is also becoming a legal requirement.

But what does accessibility in a web context mean? Why is it important? And how can you incorporate it into your design and content processes today?

The true power of the web lies in its universality. Ensuring access for everyone, regardless of disabilities, is a critical element.
Sir Tim Berners-Lee (Inventor of the World Wide Web)

Spicy Web Developer, Matt Wood

What is Web Accessibility?

Web accessibility ensures that people with disabilities can navigate, understand, and interact with the web effectively. It’s the process of removing barriers they may face such as:

Missing keyboard focus indicators.
Form controls without labels.
Buttons and links that can’t be operated via keyboard.
Images lacking alternative text (alt text).
Videos without captions or transcripts.
Low colour contrast and illegible font sizes.
Animations that can’t be paused or stopped.

While accessibility focuses on individuals with disabilities, its benefits extend to everyone. For example, those with temporary or situational limitations can also benefit. A user in a café, for instance, may rely on video captions, and users in poor lighting conditions benefit from proper colour contrast ratios.

Acessibility blog figure1 0 sotuerh timber focus elements

Example of keyboard focus indicators use on the website we built for Southern Timber Floors.

Why Web Accessibility Matters

Inclusive and Equal Access
Web accessibility provides fair opportunities for everyone to engage with digital content.
Legal and Ethical Responsibility
Many countries, such as the United States (US) and the European Union (EU), are now enforcing accessibility laws to protect the rights of people with disabilities.
Improved User Experience
Accessibility features enhance usability for all users, not just those with disabilities, making it easier to navigate and scan a website for content.
Broader Reach
An accessible website allows organisations to connect with millions of potential users worldwide. Disabilities can be permanent, temporary, or situational, meaning a business’s target audience includes a wide range of individuals who may face barriers to accessing web pages.
Fulfilling the Web’s Purpose
Accessibility aligns with universal design principles, ensuring the web remains a tool for everyone.

🌶️ Pro-Tip: Accessible websites often achieve better performance scores and higher search rankings.

The website we recently built for Allen’s Training scored top performance and accessibility scores in lighthouse testing

Accessibility, Inclusivity, and Usability

Accessibility falls under the umbrella of inclusivity which is then encompassed by usability. You can’t have accessibility without inclusivity. And you can’t have inclusivity without usability. But what are the key differences between the three?

Accessibility focuses on removing barriers for people with disabilities. Such as adding alternative (alt) text for images so screen readers can describe them.
Inclusivity addresses the needs of all users. Regardless of ability, background, culture, or context. A product is not inclusive if it isn’t accessible.
Usability ensures that all users can efficiently and effectively achieve their goals. Regardless of how they interact with a product. Such as an intuitive navigation for users across multiple devices.

As an example of inclusivity, the website we built for Harbour Radiology features a language selection option that translates the content on the page. It also respects the reading direction of right-to-left (RTL) languages, ensuring accessibility for a diverse audience

How Can You Make Your Website Accessible?

The Web Content Accessibility Guidelines (WCAG), first introduced in 1999 and revised in 2008 and 2018, define how to make web content more accessible. These guidelines serve as the foundation for accessibility standards and are the legal benchmark in both the EU and the US under the latest version, WCAG 2.1.

Adhering to WCAG guidelines not only ensures your website is accessible but also helps your business comply with legal accessibility requirements.

The WCAG 2.1 guidelines are structured into three conformance levels:

A:The lowest level, representing basic accessibility.
AA: The mid-range level, which includes all Level A requirements and provides broader accessibility. It is the recommended standard for all web-based content.
AAA:
The highest level, encompassing the requirements of both A and AA, though it is often challenging to achieve for all content.

While Level A ensures a foundational level of accessibility, it is often insufficient for many scenarios. AA conformance is widely regarded as the standard for meeting diverse accessibility needs.

Applying WCAG Guidelines

The guidelines apply to all aspects of your service or product, including design, code, content, and user interactions. While developers manage technical elements like screen reader compatibility and keyboard navigation, there are also essential guidelines for other stages of development. Design and content teams can contribute significantly to accessibility without requiring developer expertise.

Next, we’ll explore practical design and content guidelines you can start implementing today.

Design Accessibility Guidelines

There are various design guidelines that can help you create accessible designs. For example:

1. Text Contrast

Ensure there is sufficient contrast between text and its background. Normal text should have a contrast ratio of 4.5:1, and large text (over 18px or 14px bold) should have at least 3:1. This makes it easier for users with visual impairments to read content.

🌶️ Pro-Tip:If you use a tool like Figma for your design mockups, several plugins are available to help with color contrast. You can also use online tools like WebAIM Contrast Checker.

Image: For example the multi award winning website we built for AlignAbility. The headings are a color contrast of 12:29, well and truely meeting the WGAC’s AA guide of 3:1.

For example the multi award winning website we built for AlignAbility. The headings are a color contrast of 12:29, well and truely meeting the WGAC’s AA guide of 3:1.

2. Clear Navigation

Provide consistent and clear navigation with well-defined headings and labels. This allows users to easily understand and move through content.

3. Font Choices and Spacing

Use simple, legible fonts and avoid overly decorative fonts that can hinder readability. Ensure line height is at least 1.5 times the font size, and provide adequate spacing between words and characters to improve readability for all users.

🌶️ Pro-Tip: Pick fonts that have clear distinctions between numbers, letters, and special characters (e.g., check LL, II, ii, 0, and O combinations). There are also fonts specifically designed for accessibility, such as Braille Institute's Free Font and Inclusive Sans.

4. Font Size

Use a minimum font size of 16px for body text. Larger text (18px–20px) is often preferred for better legibility. Additionally, ensure text can be resized up to 200% without losing functionality.

Henri Living text still being able to zoom to 200% as per the WCAG 2.1 guidelines

5. Line Length

Keep line lengths between 50-75 characters to avoid strain and improve comprehension. Lines that are too long or too short can be hard to follow.

Considerations for Accessible Content Creation

Here are some key guidelines to ensure your content is accessible:

1. Text Alternatives

Provide text alternatives, such as alt text, for all non-text content (images, icons, etc.). This allows content to be interpreted by assistive technologies like screen readers.
For our Craft clients, there's a field for text alternatives in the asset settings. Simply double-click on the asset to edit, and you can fill out the text in the alternative text field.

2. Accessible Multimedia

Ensure that multimedia content (such as videos) has synchronised captions or transcripts. This accommodates users who are deaf or hard of hearing.

🌶️ Pro-Tip: Third-party platforms like YouTube and Vimeo offer automatic captioning as a quick solution. Some news websites, such as the ABC, even provide transcripts as part of the page content. For our latest projects at Spicy Web, we’ve added a field on video assets in the Craft CMS backend where clients can upload their own video captions.

3. Content Structure

Use proper HTML structure (headings, lists, etc.). This ensures content can be easily understood and navigated by assistive technologies. A well-organised structure helps users quickly locate and comprehend the information they need.

We can see from this example of Embroidy and Ink that even when vision is blurred, the visual hierarchy can still be made out. Highlighting content importance due to the correct heading use. This makes it easy for the user to visually scan content. The correct use of the headings will also assist in assistive technology such as a screen reader.

4. Avoid Using Text in All Caps

Text in all caps can be harder to read, especially for individuals with dyslexia. It reduces the ability to recognise words as whole units. Use capital letters sparingly, and reserve all caps primarily for headings or acronyms.

5. Accessible & Inclusive Forms

Clearly label all form fields and associate labels with the corresponding input elements. Include clear instructions and error messages when necessary to guide users through the form.

🌶️ Pro-Tip: While not a requirement, making your forms more inclusive can go a long way. Consider offering users the option to choose their preferred method of contact. Some users may have difficulty talking on the phone and would prefer to be contacted via email instead.

6. Unusual Words and Abbreviations

When using abbreviations, acronyms, or jargon, provide definitions or expand them in context. Especially when their meanings may not be immediately clear to all users. This helps ensure that abbreviations and acronyms are not a barrier to comprehension. Defining these terms ensures the content is accessible and understandable to a wider audience. For abbreviations used in more specialised contexts, like CEO or URL, ensure your audience is familiar with the terms. If there’s any doubt, provide clarification to make sure the content is understandable.

🌶️ Pro-Tip: When using abbreviations, always spell them out the first time they appear on the page, followed by the abbreviation in parentheses. For example, "Good Work For Good People (GWFGP)."

Conclusion

There are 13 guidelines organised under 4 principles. Under each guideline are 78 combined success criteria, which we can’t cover in this post. If you’re ready to dive deeper, you can explore the Web Content Accessibility Guidelines (WCAG).

For developers, WCAG does not mitigate against assistive technology and browser bugs. It’s just the bare minimum. It will make the web application meet its legal obligations, but you’ll still have to go a step further to make it inclusive. The technical components would require user group testing.

By incorporating these design and content guidelines into your process today, you can take meaningful steps toward making your digital content more inclusive and accessible. Remember, accessibility isn’t a one-time effort—it’s an ongoing commitment to building a web that works for everyone.