Skip to content
Amplify from Studio 24
  • Get started
  • Fundamentals
  • Layout helpers
  • Core components
  • Advanced components
  • Design handover & standards
  • Colours
  • Typography
  • Buttons and links
  • Lists
  • Icons
  • Breakpoints
  • Vertical spacing
  • Hide and show items inclusively
  • Skip link
  • Images
  • Forms
  • Form error messages
  • Tables
  • Blockquotes
  • Details and summary
  • Utility classes
  • Flow elements
  • Print styles

Hide and show items inclusively

Scott O'Hara's article, Inclusively Hidden, is highly recommended reading. The following summarises that advice.

Hiding items from everybody

To temporarily hide items from all users until needed:

  • Use the CSS display property display: none; to remove items completely from the DOM.
    • Note that if CSS is unavailable the items will no longer be hidden.
  • Use the hidden HTML attribute, which will work even if CSS is unavailable.
    • Note that this can be overridden by any CSS which alters the value of the display property.
  • Use the CSS display property visibility: hidden;, especially if you wish to transition the change from hidden to visible.
    • Note that, while the item is hidden, it retains the space that it occupies within the DOM. It is best paired with other CSS properties that negate this, e.g. position: absolute;. This is ideal for e.g. off-canvas navigation.

Visually hiding items

Use the visuallyhidden CSS class to hide an item visually but leave it accessible to Assistive Technology.

Hiding items from Assistive Technology

Use the aria-hidden="true" HTML attribute to hide items from Assistive Technology. This will not be overridden by any CSS. Note that it should not be used on focusable elements.

© Studio 24