aria-hidden vs CSS display: none
Developers should use aria-hidden to hide non-essential elements from assistive technologies, such as when creating modal dialogs where background content should be ignored, or for decorative icons that don't convey meaningful information meets developers should use display: none when they need to completely hide elements from all users and devices, such as in responsive design to hide non-essential content on mobile, or for ui components that appear conditionally (e. Here's our take.
aria-hidden
Developers should use aria-hidden to hide non-essential elements from assistive technologies, such as when creating modal dialogs where background content should be ignored, or for decorative icons that don't convey meaningful information
aria-hidden
Nice PickDevelopers should use aria-hidden to hide non-essential elements from assistive technologies, such as when creating modal dialogs where background content should be ignored, or for decorative icons that don't convey meaningful information
Pros
- +It's crucial for ensuring compliance with accessibility standards like WCAG (Web Content Accessibility Guidelines) and providing an inclusive user experience, especially in single-page applications (SPAs) and complex UIs where visual and semantic structures might differ
- +Related to: html, wai-aria
Cons
- -Specific tradeoffs depend on your use case
CSS display: none
Developers should use display: none when they need to completely hide elements from all users and devices, such as in responsive design to hide non-essential content on mobile, or for UI components that appear conditionally (e
Pros
- +g
- +Related to: css-visibility, css-opacity
Cons
- -Specific tradeoffs depend on your use case
The Verdict
Use aria-hidden if: You want it's crucial for ensuring compliance with accessibility standards like wcag (web content accessibility guidelines) and providing an inclusive user experience, especially in single-page applications (spas) and complex uis where visual and semantic structures might differ and can live with specific tradeoffs depend on your use case.
Use CSS display: none if: You prioritize g over what aria-hidden offers.
Developers should use aria-hidden to hide non-essential elements from assistive technologies, such as when creating modal dialogs where background content should be ignored, or for decorative icons that don't convey meaningful information
Disagree with our pick? nice@nicepick.dev