An introductory guide to creating accessible web applications

Accessibility in web app development: are you doing enough?

Accessibility is a wide term and one most often associated with people who have some form of disability. 

But‚ the essence of something being ‘accessible’ is simply making it usable and digestible by all people regardless of physical or mental disabilities or other limiting factors. 

Web app developers should consider accessibility in every digital product they create. We’re past the time where accessibility can be an afterthought or a niche field for specific projects. Accessibility must be considered in everything we build. 

Let’s take a look at accessibility standards for web applications and how we can embed them at every stage of the development process.

We’ve included some simple changes to make your web applications more accessible and a list of handy tools to help you. 

What is accessibility

Accessibility is about adapting products‚ services and infrastructure so that people with disabilities can use them. Lifts in buildings with multiple floors‚ Braille menus in restaurants‚ subtitles and audio-described films‚ clear street signs and‚ most recently‚ transparent facemasks are examples of accessibility in our everyday lives. 

Web accessibility means that websites‚ tools and technologies are designed and developed so that people with disabilities can use them. It ensures that people can perceive‚ understand‚ navigate‚ interact with and contribute to the web. 

Web accessibility encompasses all disabilities that affect access to the web‚ including: 

• Auditory

• Cognitive

• Neurological

• Physical

• Speech

• Visual

It also benefits people without disabilities by adapting websites‚ tools and technologies to individual and situational needs. When websites respond to being viewed on small screens or to bright sunlight when accessed outdoors on a smartphone‚ that’s accessibility. 

Web accessibility standards

W3C Web Accessibility Initiative provides a set of internationally recognised standards for web accessibility. These cover web content‚ user agents and authoring tools plus additional specifications for accessible rich internet applications. 

These standards are built on accessibility principles that aim to make four key areas of web usage more accessible: 

1. Perceive information and user interface

• Text alternatives for non-text content

• Captions and other alternatives for multimedia

• Content can be presented in different ways

• Content is easier to see and hear

2. Operable user interface and navigation

• Functionality is available from a keyboard

• Users have enough time to read and use the content

• Content does not cause seizures and physical reactions

• Users can easily navigate‚ find content and determine where they are

• Users can use different input modalities beyond keyboards

3. Understand information and user interface

• Text is readable and understandable

• Content appears and operates in predictable ways

• Users are helped to avoid and correct mistakes

4. Robust content and reliable interpretation

• Content is compatible with current and future user tools

To meet these standards‚ web pages must reach one of the following conformance levels: 

• Level A: For Level A conformance (the minimum level of conformance)‚ the web page satisfies all the Level A Success Criteria‚ or a conforming alternate version is provided.

• Level AA: For Level AA conformance‚ the web page satisfies all the Level A and Level AA Success Criteria‚ or a Level AA conforming alternate version is provided.

• Level AAA: For Level AAA conformance‚ the Web page satisfies all the Level A‚ Level AA and Level AAA Success Criteria‚ or a Level AAA conforming alternate version is provided.

Why accessibility is important

There are both moral and commercial reasons for embedding accessibility at the heart of web application development. 

Everyone should be able to access information and have the same quality of experience on web regardless of disabilities‚ impairments or level of experience with technology. However‚ this remains out of reach for many people. 

According to research by WebAIM‚ 60% of regular screen users (many of whom are disabled) feel the accessibility of web content has either not changed or got worse over the past year. Over 70% believe this is due to a lack of awareness or skills around web accessibility. 

We have a moral duty to embed accessibility at the heart of web application development to ensure everyone has equal access to services. 

There are also commercial benefits to making your digital products more accessible. A Click-Away Pound Survey found that 71% of people with disabilities will abandon a website that is difficult to use – that results in an estimated loss of £11.75 billion in the UK every year. 

It really is time for us to take accessibility in web apps seriously. 

How to include accessibility in all aspects of web app development

At hedgehog lab‚ our Pillars of Accessibility set out the overarching accessibility guidelines that we conform to on each and every project. 

These guidelines aren’t just the responsibility of our web app developers or web app designers – every person in our team considers how they can make their work more accessible. 

We do this in various ways when designing and building web applications. 

• Research and UX

Our researchers and UX teams consider every type of user that could use an application and lead on keeping us up to date with the latest research‚ guidelines and trends in accessibility. 

If one type of user is more likely to use a web application than others‚ an accessibility strategy is created with our products team so their specific needs can be met. 

We also ensure that participants with a range of needs are consulted during the prototype stage so that user testing is as comprehensive as possible. 

• Product

Our product team is responsible for forming top-level accessibility strategies and applying them to our digital products. 

They use the insights from the research team to tailor accessibility strategies to the needs of the users‚ developing a deep understanding of who the users are and their specific accessibility requirements. 

They also consider any commercial constraints that might affect the delivery of those strategies. 

• Design

Our designers have the most direct impact on applying accessibility guidelines to our digital products. They must ensure that the way the app looks‚ feels and functions is accessible in accordance with the accessibility strategy defined by the product team. 

Designers work with the development team to implement specific accessible design principles and with the UX team to test and refine these on our web applications. 

• Development

Our developers create an application to the specified design‚ ensuring the requirements of the accessibility strategy are met and the necessary technical enhancements are made. 

By working together in this way‚ accessibility is embedded in every stage of web application development at hedgehog lab. 

Simple changes to make your web apps more accessible

You can make some simple changes to improve the accessibility of your web applications. 

Design and UX quick wins: 

• Ensure users can navigate a website using a keyboard.

• Check that screen readers can navigate the page and read out content. 

• Make navigation clear and consistent. 

• Ensure content doesn’t overlap when zooming the page. 

• Use a logical heading structure.

• Don’t confuse users with icons – not everyone will understand their intended meaning. 

• Use high contrast when using colours – at least 4:5:1 for normal text.

• Make buttons big and easy to click and tap. 

Content quick wins: 

• Write in clear English. The Plain English Campaign has lots of advice on how to do this. 

• Provide a transcript for audio files.

• Provide subtitles and/or audio description on videos.

• Reduce animations on your pages. 

• Avoid using ALL CAPS in written content. 

• Make body text at least 16px or larger.

• Give all images meaningful alt text. 

These minor changes can result in major improvements for users with accessibility needs. 

Tools to test your current accessibility

These tools can help you to improve your accessibility standards during the development and quality assurance stages: 

• Screen readers on iPhone‚ Android‚ Windows and Mac

• Code linting such as ESLint

• WAVE Evaluation plugin for Chrome

• WebStorm and VSCode integrated development environment (IDE) plugins

Three great plug-ins‚ for design software such as Figma‚ are available to make sure your digital products comply with colour accessibility standards. 

• Able – analyses how well two colours work together and simulates what your choices will look like through the lens of different types of colour blindness. 

• Contract Checker – checks the contrast ratio of any two colours and shows how they appear against W3C’s standards.

• Color Blind – simulates how colour choices will look on the colour blindness spectrum. 

Read our guide on how to improve colour accessibility in financial services apps for more tips on this area.

Accessibility in web app development should be part of every stage of the design and build process. By using these tools and encouraging each team to consider accessibility from the start‚ we can help to give everyone access to the web apps that make their lives easier and more fun. 

Get in touch if you’d like to discuss how hedgehog lab could help you to improve the accessibility of your web applications.

If you would like to be the first to know about what’s new in the world of mobile app development or get industry news on digital transformation trends then sign up to our monthly newsletter here.