What elements receive default focus styling?

Question

While tabbing through a page of default form elements I noticed the button and select elements don't receive the same border styling that certain input types, textarea, and the a tag get while focused.

In this codepen I've tried a series of different types of buttons:

• button element
• button element with type="submit" & role="button"
• button element with tabindex="0"
• span element with role="button"
• input element with type="submit" value="Submit"

None of which receive the browser's default focused styles.

Have these elements always been this way? I'm using Chrome 43.0.2357.124 but Firefox displays the default blue box shadow border. I've always read not to tinker with focus styles with links and form elements for accessibility reasons but these elements don't even have one. How would someone who used those focus states while tabbing through a page know where they're located within that page? I know I can make my own focus styles but shouldn't the browser have them by default?

Answer 1

It depends on the browser. You can also change which elements are focusable. For example, Safari:

By default tab-access is disabled in safari(!). To enable it, check "Preferences > Advanced > Press tab to highlight each item on a page".

To answer your other questions:

How would someone who used those focus states while tabbing through a page know where they're located within that page? I know I can make my own focus styles but shouldn't the browser have them by default?

You can add tabindex to the elements that you want to be "focusable" that aren't focusable by default in the browser that you're targeting.

I've always read not to tinker with focus styles with links and form elements for accessibility reasons

What accessibility reasons are those? You're more or less correct, but you have to define first what your concerns regarding accessibility are. You can tinker with focus styles. If you mess them up to the point where they defeat the purpose of accessibility, then yes, at that point you've messed up and probably shouldn't have tinkered with the styles.

Most of your accessibility concerns are going to be with those who are visually impaired and using screen readers. In that case, focus styles are less important that paying attention to aria.

How would someone who used those focus states while tabbing through a page know where they're located within that page?

They wouldn't see a focus state, unless you have a visual focus state. But blind readers using a screen reader would hear that the element is selected, and that's the important point for them. If you're having these concerns, I might suggest checking out ChromeVox, which is a screen reader for Chrome, so you can see what the experience of tabbing/listening to a page is like.