Essential Accessibility: How to Lower the Cost of Building Accessible Web

The majority of digital products fail to address the rising needs of users with impairments. WebAim’s 2023 report states that over 96% of the top million websites have accessibility errors. As surprising as it may seem, only 4% of the internet is currently accessible! 

One of the reasons why business owners don’t decide to implement accessibility standards is a concern that it may raise the cost of web development. We say: not necessarily if you build your digital product or a web with accessibility in mind since day one. Keep reading.

How important is accessibility in web design

In 2022, as the World Health Organization (WHO) estimated, 15% of the population worldwide experienced significant disabilities in various forms, including hearing, visual, motor, or cognitive disabilities. With the aging population, this figure is expected to double by 2030, translating into over 2 billion people in need of at least one assistive technology. That’s too big of a number not to take the needs of people with disabilities into consideration.

You may think: that’s impossible; nobody has ever complained about my app's accessibility; however, according to research conducted in the UK in 2019 by Rick Williams and Steve Brownlow, 90% of the customers who experience accessibility barriers will not contact the site owners, leaving them unaware of existing accessibility issues.

Digital accessibility compliance matters - the study shows that 69% of users with access needs just abandon the app when confronted with accessibility issues, looking for a barrier-free accessible website and thereby redirecting their spending elsewhere.

If you need support with developing an accessible web app, check out custom web app development services.

Lack of WCAG compliance is a risk to business

How does it affect the business? With the online spending power of users with disabilities in the UK amounting to £24.8 billion, the click-away pound now stands as high as £17.1 billion – that’s over 10% of the total UK online retail spend. The spending power is there; 86% of respondents claim that they would spend more if there were fewer accessibility barriers, just the website owners keep neglecting the accessibility’s impact on their audience and bottom line.

And even if possible profit gains are of little concern to you, you should be aware of the potential legal consequences of not complying with the accessibility regulations of your country. Two main regulations are: the Americans with Disabilities Act (ADA) and European Accessibility Act (EAA). ADA’s goal is to ensure the accessibility of all areas open to the US public. EAA, on the other hand, is a directive aiming at improving the accessibility of products traded between EU countries; it requires state-level accessibility regulations to be implemented by 2025.

In view of the above statistics, accessibility - digital accessibility compliance, to be precise - comes up as one of the most important issues that online businesses are facing, yet remains neglected by many business owners. If you’re one of them, I’ve got bad news: the longer you wait to adopt accessibility standards, the more you’ll have to pay to settle your accessibility debt.

Accessibility debt as a hidden cost

Accessibility debt is analogous to technical debt: it’s the cost of future reworking required when prioritizing speedy product delivery over generally the best solution, in this case, in terms of accessibility guidelines compliance. 

Let’s imagine you’re a business owner, and your first goal is to validate your product idea by creating a Minimum Viable Product (MVP) and gathering user feedback. Understandably, you’d want the development process to be reasonably priced and fast as not to invest too much in the unknown. While researching accessibility guidelines, you start panicking, seeing all these standards that must be met. In the end, you classify accessibility matters as difficult and possibly redundant - your product is, after all, just an MVP. 

Frontend-wise, it starts with one inaccessible component - let it be a dialog created without specified accessibility acceptance criteria and tested by the user without disabilities who skips accessibility checks. After some time, the hypothetical dialog becomes a base component populated across the app, or maybe its code is reused to build other elements – making half of your app inaccessible. The more time passes, the more accessibility barriers your users face. When you finally decide to fix piling-up accessibility errors, it turns out that most of the components need to be rewritten, and some of them are even completely replaced.

Our imagined application launch example should be sufficient to make you rethink accessibility prioritization, but here comes the great part: building for accessibility will not only prevent you from falling into accessibility debt but will also improve your product quality. That's why you should take the web accessibility initiative seriously and deliver equal access.

Benefits for business from digital accessibility

Digital accessibility is an overlapping concept of overall app usability, aiming to improve user experience regardless of their disabilities. Raise your hand if you’ve ever experienced lowered app readability resulting from inadequate color contrast when the sun was shining bright or when you were limited to keyboard navigation only, but parts of the app could not be accessed that way at all.

Building for accessibility will help you address such conditions and improve website understandability and navigation structure in general, bringing benefits to the broader audience. Thus, by prioritizing accessibility for those with disabilities, you’re prioritizing usability for all customers - which may result in wider market reach for your product.

Just as accessibility and usability are linked, websites with fewer barriers tend to be ranked higher by search engines. What influences your app SEO score in terms of accessibility, besides usability and readability, is bounce rate, which stands for the percentage of users who will come to your website and soon leave without using any other page on your website or interacting with it in any meaningful way. 

A better navigation structure makes content easier to find by users and robots crawling through your site, looking for information, and trying to understand the content of your page. Search engines, in general, want to favor websites that are engaging, organized, and easy to use. That’s why by implementing good practices in areas like font size, color contrast, images, alternative text or proper page structure, you can make your product more likely to be found.

Moreover, when brands embrace digital accessibility, they improve their reputation. However, if you’re still rather reluctant to embrace the idea of building for accessibility, we suggest starting small. 

Web accessibility guidelines - 7 essential elements to improve

According to Web Aim’s 2023 report on the accessibility of the top 1 million pages, 96.1% of all detected errors fall into six categories: low contrast errors, missing alternative text for images, empty links, missing form input labels, empty buttons, and missing document language tag. There are many accessibility problems, but fixing only these errors would significantly improve the experience of users with disabilities. 

We suggest going a bit further and trying to ensure basic accessibility compliance in the following areas:

1. Font

When following accessible design, ensure your web content - text - is readable in terms of style and size. To improve your web accessibility, do not lower your font size below 12px, with 16px as a starting point. Make sure that you can zoom in to make the text 200% larger. Avoid full-text justification and centered justification for blocks of text. Set the line height to at least 1.5 times the font size and the letter spacing to at least 0.12 times the font size. This will help not only people experiencing low vision but also the users with dyslexia. Remember to check how it looks on different screen readers or other devices with small screens, like mobile phones.

2. Colors & contrast

Make sure that text and interactive elements on your page have a color contrast ratio of at least 4.5:1. Do not rely on the color as the sole way of distinguishing elements, but make use of different sizes, shapes or labels instead. Chart lines with the same shape and stroke color are impossible to tell apart for users struggling with visual disabilities such as color blindness.

3. Keyboard navigation

Check whether all functionalities on your page are accessible by keyboard only (especially take care of complex, interactive elements of user interface like dropdowns or dialogs). Maintain the logical order of focusable elements, coordinated with the structure of the page, and allow users to easily indicate which component currently has focus (e.g., with contrasting element outline) to ensure digital inclusion.

4. Document structure

Make sure your web content, such as page headings, is logically nested and sections are labeled according to their relationships and importance. Check if interactive elements on your page have proper semantics corresponding to their functionality.

5. Alternative text for images

Remember to add appropriate alternative text to your images. The alt text should concisely describe your image’s purpose, adjusted to the context of your page, and convey understandable information to your users.

6. Hyperlinks context

Following the web content accessibility guidelines, check whether all the hyperlinks on your page are descriptive, i.e., their destination and context are clearly exposed to the users. It is recommended to create hyperlinks with rather concise, descriptive text instead of using long URLs, as it is more screen-reader friendly. The link should include a non-empty “href” attribute in order to be considered a “true link”. Needless to say, all links should be keyboard accessible.

7. Understandability

The website, to meet accessibility requirements, should be understandable and act in a predictable way. Remember to add a “lang” attribute to your document to allow the screen reader to detect and read page language. An accessible website requires a consistent navigation layout - the users should always be aware of where they are and where they can navigate across the page.

Help users avoid mistakes, inform them about the errors and provide instructions on how to fix them. Ensure your error messages are understandable, identifiable, and easy to distinguish by users struggling with color blindness. Give users enough time to read and interact with the page, and let them know how much time is left to complete an ongoing operation.

If you’re planning to use external components libraries, choose them wisely, taking built-in components accessibility into consideration.

Once you see your product up and running and you’re ready to implement further accessibility guidelines, reach for at least A or AA level of conformance with web content accessibility guidelines. Sometimes small accessibility issues can become impenetrable barriers for users with disabilities.

Conclusions on accessibility for apps and websites

Website accessibility is not only important from a pragmatic perspective, but it is just the right thing to do. Everyone, regardless of their disabilities, should be treated equally and be granted equal access to services - especially since electronic and information technology has moved forward and we're equipped with all the necessary tools to create accessible applications. Let’s treat others the way we would like to be treated - digital accessibility issues are something we may stumble upon in our everyday lives.

Now, as you are aware of accessibility compliance costs and benefits, make the decision at your own peril. We strongly suggest creating digital products with accessibility in mind because it’s a win-win solution, benefiting both the company and the users. 

Look at accessibility compliance not as a cost but as an investment. Let the accessibility discussion resound - talk over the good practices implementation with your team or consult it with the specialists with the appropriate know-how.

Reach out to the LeanCode team if you need help with building an accessible digital product - we develop apps with accessibility principles in mind. Here you can read more about our custom enterprise software development services.