In today's digital landscape, accessibility is not just a nice-to-have feature but a crucial aspect of creating inclusive user experiences. One often overlooked yet vital component of accessibility is focus management.
In this post, we'll look into what focus management is, and how it can greatly enhance the accessibility of your web applications.
Understanding Focus
Let's start with the basics: what exactly is focus? In web development, focus refers to the current interactive element on a page that will be activated if you hit the enter or space key. It's the cornerstone of keyboard navigation, allowing users to interact with various elements on a website without the need for a mouse.
Keyboard users move the focus forward between elements with the tab key (and sometimes arrow keys). The focus should always be visible, marked with a focus indicator. Browsers have built in focus indicators which are usually a blue or black outline around an element.
The browser default is classed as accessible even if the contrast is poor against the background. However, many designers take offence to the default indicator which all too often leads to a (very poor) decision to remove the outline indicator altogether. Please never do this. Always design a better focus indicator instead; one that stands out against the different background and foreground colours used in different parts of your site.
The Role of Focus Management
When a keyboard user presses the tab key the browser usually knows that it should move the focus to the next interactive element in the DOM tree. However, sometimes things happen on a website and the browser can't work out how to manage the focus. Examples include opening and closing modals, adding and removing elements from the DOM and changing pages in single page applications. When this happens, the developers need to jump in and help the browser out by telling it what to do.
Focus management involves programmatically moving the focus from one place to another using code when users interact with a website. This ensures that focus lands in the right place and users get a logical experience of the page.
Why Focus Management Matters
Keyboard users rely heavily on visual focus indicators to understand their current position on a webpage and navigate through interactive elements in a logical manner. A lack of focus management can be frustrating if you can't reach certain elements with a keyboard or focus lands in a strange place (such as the footer when loading a new page) leading to lots of extra tabbing.
Similarly, screen reader users depend on audio feedback to interact with content. Moving focus triggers a screen reader to announce the element where focus has been moved to. Without focus management, screen reader users often get no audio feedback and are left guessing whether an interactive element actually does something or not.
Without proper focus management, these essential cues may be missing, making the page challenging to use for individuals with disabilities.
Best Practices and Considerations
It is not always easy to know the best way to manage focus so it is important to conduct user testing whenever possible. It's important not to go overboard thinking that focus needs to be managed everywhere and it's just as easy to do too much as it is to do too little. We want to enhance accessibility without overwhelming people. So the best thing is to ask the people that need focus management the most.
If you are unable to do user testing, your next best option is to consult with accessibility experts to discuss what might be good options to consider.
And remember to include well-designed focus indicators that meet accessibility standards for colour contrast.
In conclusion, focus management plays a vital role in making web interactions more accessible to all users, particularly those with disabilities. By implementing proper focus management techniques, developers can create inclusive experiences that empower users to navigate and interact with digital content effectively.
In future posts, I will dive into specific interactions which can need focus management such as disclosure widgets, adding and removing items from the DOM, opening modals and handling route changes in single page applications. If there are any other interactions you'd like me to cover, feel free to drop a comment.
Top comments (2)
Great article, Emma. Looking forward to future articles on this topic with some design and coding examples :)
Thank you!
I really should write those more detailed blogs!