aria-hidden vs 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 hide elements entirely from the user interface, such as in responsive design to hide non-essential content on mobile devices, or in interactive features like tabs or modals where content is shown conditionally. 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
display: none
Developers should use display: none when they need to hide elements entirely from the user interface, such as in responsive design to hide non-essential content on mobile devices, or in interactive features like tabs or modals where content is shown conditionally
Pros
- +It is ideal for cases where the hidden element should not affect page layout or be accessible to assistive technologies, unlike alternatives like visibility: hidden which reserves space
- +Related to: css, responsive-design
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 display: none if: You prioritize it is ideal for cases where the hidden element should not affect page layout or be accessible to assistive technologies, unlike alternatives like visibility: hidden which reserves space 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