Beyond keyboards, there are other tools and input devices that rely on clearly indicated focus, like switches. For instance, there are many keyboard users: a person with a baby on one arm, people with chronic diseases that prevent the use of a mouse, and of course… developers and other power users. People who use a mouse, might use their cursor for this, but not everyone uses a mouse. They show which form field is currently filled in, or which button is about to be pressed. Who benefitsįocus outlines help users figure out where they are on a page. With CSS, you can override these defaults, which we’ll get to in a bit. The defaults vary between browsers and platform. The currently focused element can be found with document.activeElement.īy default, browsers convey which element currently has focus by drawing an outline around that element. If you’ve just loaded a page, it is probably the document, but once you start to click or tab, it will be one of the aforementioned interactive elements.

On a page, at any given time, there is one element that has focus. (See the focusable elements compatibility table for a more detailed and nuanced definition.) Interactive elements are elements like links, buttons and form fields: things that users can interact with. Let’s first look at what they are, and which people find them useful.įocus is something that happens between the interactive elements on a page.

What is focus?įocus indicators make the difference between day and night for people who rely on them. In this post I will explain what we mean by focus and show you how focus outlines make your site easier to use. It’s a common, but fairly easy-to-fix accessibility issue: lack of indicating focus.

Firefox focus tabs