1

When navigating an HTML form using Tab, a properly designed form will allow that all interactive elements are accessible and focusable, but how does one break out of the focus using the keyboard?

Using a mouse click somewhere dead on the page, such as in between interactive elements, will achieve the removal of focus (blur) from whatever element had it, but can this be achieved with a keyboard combination?

I have tried every reasonable (to me) combination of keys while a form input has focus, but other than unintentionally doing all kinds of other things, I've found no way to simply stop focussing on the input.

I have searched the internet via Google, using multiple queries and can find no simple instructions regarding the actual keys to use to operate forms with a keyboard. I haven't even found documentation about how to select a radio option, or check a checkbox, and learned that by trial and error many years ago.

I feel it reasonable to assume that a modern web browser, built in line with standards, when presenting an HTML form, that has not been improperly designed or manipulated by JavaScript or CSS in any way that affects its operability, should allow simple navigation by Tab, and also, and importantly, allow that navigation to be terminated without requiring a mouse, but how?

Improve this question
7
  • 2
    Can I ask why you want to do this?
    – MRL
    Commented Mar 26, 2021 at 4:33
  • @MRL I fail to see how my reason for asking will affect any answer, but as a web developer, I try my best to assure good accessibility, and have frequently found this strange entrapment puzzling.
    – Fred Gandt
    Commented Mar 26, 2021 at 5:04
  • I'm trying to understand what problem it is you're trying to solve. I don't think it's an entrapment for those who rely on keyboard accessibility. It's a necessity.
    – MRL
    Commented Mar 26, 2021 at 5:14
  • 1
    I'm going to guess that this is more a question of how to use keyboard navigation and screen readers, which is totally relatable :) The answer is that you do not terminate navigation, and those who use screen readers either know already or need to learn how to get out of navigation to read the content. There are keyboard shortcuts that allow them to do just that. I'm no expert in it, but I've seen people do it so fast you barely see what they're doing.
    – MRL
    Commented Mar 26, 2021 at 5:26
  • 1
    If you want to learn, read up on JAWS shortcuts or NVDA shortcuts (the two screen readers I mainly use when checking on accessibility.)
    – MRL
    Commented Mar 26, 2021 at 5:27

2 Answers 2

Reset to default
1

First...

Using a mouse click somewhere dead on the page, such as in between interactive elements, will achieve the removal of focus (blur) from whatever element had it..."

Well, kind of.

As you know, Tab just moves focus through the focusable elements in the document, stepping through each focusable child of each HTML element.

However, the browser still keeps track of the region of the document that's last selected, even if it's not focusable—this means that at all times, some region is the last selected (at page load, this can be thought of as the document itself).

You can see this behavior yourself: if you click in a web document just before the footer links, then press Tab, the footer links gain focus instead of just continuing from wherever focus was last left.

This behavior illustrates that clicking a "dead" region of the page is not so much "blurring" the form fields, as much as it's selecting a new element of the document which may or may not be focusable.

So what about your question?

I have tried every reasonable (to me) combination of keys while a form input has focus, but other than unintentionally doing all kinds of other things, I've found no way to simply stop focusing on the input.

We've seen that the browser's selection doesn't just disappear... some region of the page is still selected, even though it might not be focusable. For whatever reason, modern web browsers have apparently not deemed it necessary to allow blurring of an element while keeping it still selected. This behavior is achievable through JavaScript, but not, it seems, through any standard convention.

I feel it reasonable to assume that a modern web browser...should allow...that navigation to be terminated without requiring a mouse or JavaScript...

To consult an authoritative source here, the W3C states the following about this exact situation, in section 7.3.2, Focus Management:

When an element that is focused stops being a focusable element, or stops being focused without another element being explicitly focused in its stead, the user agent should synchronously run the focusing steps for the body element, if there is one; if there is not, then the user agent should synchronously run the unfocusing steps for the affected element only.

If I'm reading this right (and I may not be), it seems that the W3C would suggest that the document's <body> tag should be focused after the blurring of some element in the document. In that case, the tabindex would reset, and restart at the top of the document. As a user, I'd think it strange to have a shortcut that blurs where I am and sends me back to the top of the tabindex. I'm guessing that browsers chose to just do nothing instead of doing something else.

Perhaps you can glean additional information from this source that may make things clearer, but this was the best I could find on the matter.

Improve this answer
4
  • The "point of regard" information you've linked to is especially enlightening and explains a lot about the behaviour I've witnessed.
    – Fred Gandt
    Commented Mar 26, 2021 at 17:52
  • While this use of comments is bordering on improper, you have indirectly provided the key phrase opening up my search; for those finding this question/answer in the future; "point of regard" is particularly helpful in tracing the related issues, standards and others' attempts to explain and work with it. This and this (e.g.) show how keeping track of this point can prove complex when attempting to deliver a consistent UX for all users.
    – Fred Gandt
    Commented Mar 26, 2021 at 18:38
  • @FredGandt Good to hear! That was a new phrase for me as well, but it seems to be similar to the "selected element" concept I was trying to describe. I'm glad the resource was helpful, because I only later noticed that it was described by a W3C Working Group that was no longer being pursued, and not actually part of an official web standard (see the header of that resource). Still, it seems that those concepts have persisted.
    – maxathousand
    Commented Mar 26, 2021 at 19:15
  • Yes, and I cannot find any information (yet) about how JavaScript may gain access to the browser's stored "point of regard" variable. Browsers are clearly keeping track of it, but other than document.activeElement, which only ever seems to provide a traditionally focusable element or document.body, I'm unaware of access to the apparently more spatially aware "point of regard". I may ask on SO when I have time. Thanks for your effort Max :)
    – Fred Gandt
    Commented Mar 26, 2021 at 19:45
0

I don't know if there's a way to do it, but the answer is that you should not terminate navigation unless you have some kind of reason for doing so for ALL users (mouse, touchscreen, keyboard, etc.)

Keyboard is another form of navigation and control, just like mouse and touch. The rule of accessibility is that whatever you can access or control by mouse/touchscreen, you should be able to navigate and control by keyboard, as well.

Edited to add: it's unclear to me whether you are asking how to navigate using a keyboard, or how to code a website that disables keyboard navigation. If I assume that what you're asking is how to stop tabbing through all of the interactive components and have the screen reader read the text, you could use the shortcuts in one of these shortcut reference guides (depending on which screen reader you're using.)

JAWS Keyboard Shortcuts

NVDA Keyboard Shortcuts

Improve this answer
2
  • I will give you an opportunity to improve your answer. You state in your answer that you "don't know if there's a way to do it", while in your comments under the question, you state that you have "seen people do it". You have also commented that there may be information available, but not where; this equates to "google it", and you've not supplied this tidbit in your answer. You've made an assumption about what I intend to do, and an effort to explain that I shouldn't, without any evidence that your assumption is correct (it isn't). I believe you are acting in good faith, but not effectively.
    – Fred Gandt
    Commented Mar 26, 2021 at 8:52
  • I asked you to clarify your question so I could better assist, to which you replied with snark. When I said I've "seen people do it" I was talking about seeing people use their keyboards to navigate effectively. I am very confused about what you are asking. Are you trying to learn how to use keyboard for navigation? Or are you trying to code a website in such a way that you can terminate navigation for keyboard users? I will add links to the JAWS and NVDA shortcut documentations if that improves my answer.
    – MRL
    Commented Mar 26, 2021 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.