Sometimes, off-screen interactive elements need to be in the DOM but should not be included in the tab order. For example, if you have a responsive side-nav that opens when you click a button, the user should not be able to focus on the side-nav when it's closed.
To prevent a particular interactive element from receiving focus, you should give the element either of the following CSS properties:
display: none-
visibility: hidden
To add the element back into the tab order, for example when the side-nav is opened, replace the above CSS properties respectively with:
display: blockvisibility: visible