Preventing tab to cycle through address bar

Question

I realize this is probably an accessibility issue that may best be left alone, but I\'d like to figure out if it possible to prevent the tab from visiting the address bar in the

Answer 1

You can control the tabbing order (and which elements should be able to get focus at all) with the global tabindex attribute.

However, you can't prevent users to tab into another context not under control of the page (e.g. the browser's address bar) with this attribute. (It might be possible in combination with JavaScript, though.)

For such a (evil!) use case, you'd have to look into keyboard traps.

WCAG 2.0 has the guideline: 2.1.2 No Keyboard Trap. In Understanding SC 2.1.2 you can find "Techniques and Failures" for this guideline:

• F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type
• FLASH17: Providing keyboard access to a Flash object and avoiding a keyboard trap
• G21: Ensuring that users are not trapped in content

So maybe you get some ideas by that how such a trap would be possible.

Answer 2

Salinan solution worked for me Put this in the start of your html page:

<span tabindex="0" id="prevent-outside-tab"></span>

and this at the end of your html page.:

<span tabindex="0" onfocus="foucsFirstElement()"></span>

foucsFirstElement() :

foucsFirstElement() {
  document.getElementById("prevent-outside-tab").focus();
},