Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesopacity: 0 makes an element transparent; it does not remove it from the interface. The element remains in the DOM and may still receive keyboard focus or pointer input. If a closed control should be unavailable to users and assistive technology, use a hidden state that fits the component—and manage focus when showing or hiding interactive content.
What `opacity: 0` actually changes
Opacity controls how much of an element is visually rendered. At opacity: 0, the element and its children appear invisible, but remain in the document. MDN notes that an invisible element can still register pointer events and, if it is in the tab order, receive keyboard focus. MDN’s opacity reference also cautions against using opacity alone to convey information to screen readers.
As an Amazon Associate I earn from qualifying purchases.
That means “not visible” and “hidden from interaction” are separate requirements. A transparent button can be absent to sighted users while remaining reachable with Tab. Its presence may also affect pointer interaction.
Why `pointer-events: none` is not enough
pointer-events: none prevents pointer input from targeting the element, but does not, by itself, remove a focusable element from keyboard navigation. In an example lightbox, Indie Core Dev found that three buttons remained tabbable despite the combination of opacity: 0 and pointer-events: none. The author reported 52 tab stops on the example site before changing the visibility approach and 49 afterward; those counts describe that site, not a general result. The lightbox article describes the author’s implementation and keyboard testing.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose a hidden state that matches the behavior
When a component is closed, choose a state that addresses more than its appearance. The relevant questions are whether it renders, accepts pointer input, can receive keyboard focus, is exposed to assistive technology, and can still perform the intended transition.
| Approach | What it does | What to consider |
|---|---|---|
opacity: 0 |
Makes the element visually transparent while it remains in the DOM. | It can remain interactive, focusable, and exposed to assistive technology. Use it for a visual effect, not as the only hidden state. |
pointer-events: none |
Prevents pointer events from targeting the element. | It does not by itself remove keyboard focusability or hide the element from assistive technology. |
visibility: hidden |
Hides the element visually and prevents it from receiving focus while hidden. | Plan when visibility changes if opacity is also animated. In the lightbox example, focus did not move while the target was still hidden. |
display: none |
Removes the element from layout and the rendered interface while it is not displayed. | It is not a visible fade-out state. Coordinate any transition and focus changes with showing or removing the component. |
HTML hidden attribute |
Marks content as not currently relevant for presentation. | Use it when the content should be hidden, and account for the timing needed to show it before moving focus into it. |
MDN identifies visibility: hidden, display: none, and the HTML hidden attribute as options when content should be hidden rather than merely transparent. The right choice depends on whether the component needs an enter or exit animation and whether users should be able to reach it while closed.
Manage focus when the hidden component is a dialog
Hiding a dialog correctly is only part of making it work. The W3C ARIA Authoring Practices modal-dialog pattern calls for focus to move into the dialog when it opens, remain within its tab sequence while it is modal, and return to an appropriate place—usually the opener—when it closes. Escape closes the dialog in the pattern. See the W3C modal dialog pattern.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →- On open: Make the dialog available, then move focus to a useful element inside it.
- While open: For a modal dialog, keep Tab and Shift+Tab within the dialog and prevent interaction with the background.
- On dismissal: Support the expected dismissal behavior, including Escape for a modal dialog, and restore focus to the opener when appropriate.
The timing matters. In the lightbox author’s example, calling focus() while the destination remained visibility: hidden did not move focus. Their implementation changed visibility immediately on opening and delayed hiding until the opacity fade finished on closing. That is one reported solution, not a universal timing rule: test the actual component and transition.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
aria-modal="true" tells assistive technologies that a dialog is modal; it does not create modality by itself. Apply it only when the implementation also prevents interaction outside the dialog and visually obscures the rest of the page, as the W3C pattern advises.
Check the closed and open states with a keyboard
For a lightbox, drawer, menu, tooltip, or carousel, test the component in both states rather than judging it by appearance alone:
Quick Recap
Best Value
- With the component visually closed, press Tab through the page. Confirm that its hidden controls are not encountered.
- Open it using the keyboard and verify that focus moves to a useful element inside it.
- If it is modal, test Tab and Shift+Tab at both ends of the sequence and confirm focus does not escape to the background.
- Dismiss it and check that focus returns to the opener when appropriate.
- Check that what assistive technology exposes and what the keyboard can reach match the visible state.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
