1

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?

Corey Bruyere
  • 786
  • 1
  • 10
  • 21
  • It depends on the browser. You can also change which elements are focusable (for example, in Safari). – Josh Beam Jun 11 '15 at 21:03
  • If you're seeing default styles in Firefox, it sounds like the problem is with Chrome rather than the HTML or the CSS. – stringy Jun 12 '15 at 04:39

1 Answers1

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.

Community
  • 1
  • 1
Josh Beam
  • 19,292
  • 3
  • 45
  • 68
  • There a plenty of people who navigate with a keyboard who do not use a screen reader. – steveax Jun 11 '15 at 21:09
  • @steveax, Yeah, and for them, the visual focus states are important. I wasn't arguing against that. – Josh Beam Jun 11 '15 at 21:11
  • The `button` element by default has a `tabindex` therefore it should already have a focus state. Even when adding a `tabindex` of 0 there's still no focus styles. I was mostly referring to doing things like this: `:focus { outline: none; }`. I tend to tab through a lot of forms and I like to know where I'm at. How would I know where I'm at if I was filling out a multi form page full of default `select` and `button` elements? – Corey Bruyere Jun 11 '15 at 21:21
  • @CoreyBruyere, yes, I am not sure why the designers chose that, but those using screen readers will be able to *hear* that the button is focused. If you want people to be able to see that the button is focused, then the only answer is that you will need to add a visual focus state to the button. – Josh Beam Jun 11 '15 at 21:23