This test was originally created by Timo Hausmann and inspired by this post Toggle Visibility When Hiding Elements
This test has been adapted to include additional content within the targeted area to ensure interactive elements are not in the keyboard flow while hidden and available when displayed.
.test {
position: relative;
opacity: 0;
visibility: hidden;
transition: 0.5s opacity, 0.5s visibility;
}
.visible {
opacity: 1;
visibility: visible;
transition: 0.5s opacity, 0 0.5s visibility;
}
This content can be made visible by the "Toggle Opacity" button. The following links should not be available when this is hidden.
This information is visible and should not be affected by the toggle button
This technique of transitioning the visibility of a section does remove it from the keyboard flow and accessibility API. Further, the information is accessible when it appears. However, it is incomplete. We still need to manage focus: set focus on content when it appears, move focus back to the trigger link when it is hidden.