< Back to Guides | Learn more at PaulJAdam.com >

Hiding/Showing Content - Accessibility Quick Guide

Hiding and showing content should be done with CSS display:none; or visibility:hidden;. You can add and remove the "hidden" attribute with JavaScript to accessibly hide and show content.

Guidance

  1. Hidden content that is not visible on screen must not be focusable by the screen reader or keyboard user.
  2. Don't use aria-hidden=true for hiding content that is not visible on screen.
  3. Always use CSS display:none, visibility:hidden, or HTML hidden attribute to properly hide invisible content for screen reader and keyboard users.
  4. HTML5 <details> <summary> elements hide content in an accessible manner by default.

Bad Example

Returning Items with a Gift Receipt

If you are returning a gifted item, the packing slip in your shipment has specific instructions for returns. We provide a pre-printed return label with our Returns Department Address. Please Note: Your packing slip is not a prepaid label. You will be required to pay for return shipping. Shipping charges are non-refundable.

Good Example

What is your return policy?
If you're not satisfied with your purchase, you may return it for a refund. We will issue a refund to your original form of payment for items returned within 14 days. All returned items must be in their original condition; shrink-wrapped products must be unopened.