Hiding Content Correctly

The Paciello Group has illuminated various techniques to hide content and detailed the correct technique to hide interactive (focusable) content from visible display with CSS, but still have it in the tab order to aid keyboard users. The following technique is required to correctly hide long descriptions that contain interactivity and semantic structure. As stated,

Focusable content should only be hidden from visible display if the focusable element becomes visible when it receives focus:

Example code:
a.offscreen
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}
 
a.offscreen:focus 
{position:relative; 
left:0px; 
width:auto; 
height:auto; 
overflow:auto; 
}