Accessibility 101: A Brief Introduction to Web Application Best Practices

However, individuals who are visually impaired usually find these actions more difficult online when websites do not implement appropriate accessibility features. This article explores ways to make web applications more accessible to those who perhaps need it most.

What does “accessibility” mean?

Accessibility refers to the ability of a tool to be used by the widest possible audience including those with any type of disability. Examples include screen readers, braille displays, and devices adapted for people with reduced mobility. To include them, many strategies can be progressively adopted during different stages of development.

Why Should CTOs Prioritize Accessibility in 2025?

In 2023, the World Health Organization estimated that 16% of the world's population experiences a significant disability, and that there are over 2.2 billion people with a near or distance vision impairment. Statista also reports that vision loss is expected to rise 55% by 2050, with the rate rising as a result of an aging population and lifestyle changes. Companies that fail to implement accessibility features will ultimately fail to make their website usable to this large demographic, damaging their reputation in the process.
‍
Additionally, many countries— including Canada and the members of the European Union— have created policies that make accessibility mandatory. By knowing how to implement accessibility in agile development, businesses can successfully stay ahead of these regulations.

Accessible design

Accessibility should be a priority from the very beginning of the UI/UX design process. A well-defined, consistent style guide sets the foundation for an inclusive experience. For example, designers should give users the ability to adjust visual settings like brightness and contrast, which can assist people with low vision, color blindness, or light sensitivity— and improve usability for everyone across different environments.

Visual consistency is key. Avoid using multiple design patterns, like buttons with varying background colors or text with mismatched fonts, as they can make your site difficult to read. It's also important to avoid interactions that rely solely on a mouse, such as hover-based tooltips, since they can’t be accessed via keyboard navigation.

Typography choices also play an important role in accessibility. Serif fonts, justified alignment, or italicized text can make content harder to read for people with dyslexia. [1] Instead, use sans-serif fonts, keep text left-aligned, and avoid unnecessary decorations or shadows. These best font and color practices for inclusive UX design ensure your content remains clear, legible, and usable for a broader audience. [2].

If you're still unsure about how to implement accessibility in your website, The British Dyslexia Association (BDA) offers a style guide that could help you improve the content in your applications.

Accessible navigation

Navigation is one aspect where developers often fail, especially in single page applications. The main culprit is often the asynchronous loading of elements. Here’s an example:

Note there is a tabs pane which allows you to see a list of different items. When you open the page, by default, the first tab opens and the API is requested to load the elements. When you click on the next tab, the same thing happens, the only difference being the information displayed. The key point is the header, sidebar, and other sections remain unchanged.

The problem is that screen readers are not usually notified of such changes, which negatively affects people with blindness. Likewise, if the screen reader is focused on the lower part of the screen, they will never find out that the upper part has changed due to an asynchronous event [3].

To deal with this there are several strategies you can use including:

1. Always change the document.title on each page transition, as it is the first thing the screen reader reads. If the title is not present or descriptive enough, navigation will be much more complicated.
   

2. Once the content of the page has been loaded, make sure to put the main element of the page in focus. In this way, the user will know of the context change and not get stuck in the middle of a page without realizing it. 
   

An example in React:

const MyPage = () => {  
	const mainElementRef = useRef(null);        
    
    useEffect(() => {      
    	document.title = "About | Site Name";      
        /* Set focus to the content ref */      
        mainElementRef.current.focus();    
        }, []);    
        
	return (      
    	<article></article>                 
        
        tabIndex="-1" // more details at https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex          
        ref={mainElementRef}        
        >          
        Hello, here starts the new page                
        
        <main></main>          
        This is the main content, but what should be read first is the content of H1 so it must be focused.                  
	);
};

It’s also possible to communicate when a section’s content is modified asynchronously using ARIA live regions [4].

Is this all I need to know about accessibility?

No. Accessibility is in continuous development so the list of good and bad practices tends to be updated regularly. However, if you’re interested in the subject, simply start by thinking about how you can improve interaction of your users. In my personal experience, I’ve noticed many practices I used were not very accessible, so I changed them. I’ve even begun creating accessible forms that not only improve the interaction of people with disabilities but also those who find it easier to use just their keyboard.

How can I create accessible applications?

There are 2 great places to start learning and getting resources to build accessible web applications. The first one is the a11y project, a collaborative project where you will find resources, tools, and common tips to take your first steps on this process. Second place is the Web Content Accessibility Guidelines (WCAG) 2.0 document, that contains a huge list of recommendations, principles and test criteria that will lead you to build highly accessible web applications.

Developers can also use AI tools for accessibility in web development to automate testing for color contrast, keyboard navigation, and screen reader compatibility. These tools can help identify non-compliant patterns early, saving time and improving overall user experience.

In addition, if you’re a React developer, I recommend using the plugin for ESLint.

[1] Document Design for Users with Reading Disorders

[2] Good fonts for dyslexia

[3] Name, Role, Value: Understanding SC 4.1.

‍