LiquidPurple - Strategic Website Management
Liquid Purple Liquid Purple

Glossary of Terms

We have compiled this list of terms and definitions to help you better understand the terminology used within the web development community.

ARIA Hidden Body

Search for glossary terms (regular expression allowed)
ARIA Hidden Body happens when the entire page is accidentally hidden from assistive tools, making it completely unusable for screen reader users even though sighted visitors see everything normally. The fix is to only hide specific, non-interactive sections rather than the whole page.

ARIA Hidden Body

ARIA hidden body is one of the most severe accessibility failures you can have — and it usually happens by accident. When aria-hidden="true" is applied to the <body> element (or effectively inherited across the entire page), the entire page becomes invisible to screen readers. Sighted users see everything perfectly fine, but assistive tools treat the page as if it is completely empty.

Why It Matters

  • The entire page goes silent. Screen reader users hear absolutely nothing. No headings, no links, no content — just silence. There is no way to navigate or interact with the page at all.
  • It is invisible to sighted testers. Because the page looks completely normal visually, this problem can go unnoticed for weeks or months unless someone tests with an actual screen reader or automated accessibility checker.
  • It usually comes from modal dialogs. The most common cause is a modal overlay that sets aria-hidden="true" on the rest of the page and then fails to remove it when the modal closes.
  • It breaks everything at once. Unlike most accessibility issues that affect one element or section, this one takes out the entire page in a single attribute.

How to Fix It

  1. Check your <body> tag. Open your page in the browser and inspect the <body> element. If you see aria-hidden="true" on it, that is your problem. Remove it immediately.
  2. Audit your modal and overlay code. Look at how your modals open and close. They should set aria-hidden="true" on a wrapper sibling of the modal, not on the <body> itself — and they must remove it when the modal closes.
  3. Use the <dialog> element. The native HTML <dialog> element with showModal() handles focus trapping and background inertness without needing manual aria-hidden management at all.
  4. Use the inert attribute instead. The inert attribute is a modern, cleaner way to disable interaction and hide content from assistive tools on background sections while a modal is open.
  5. Add safeguards to your cleanup code. Make sure your modal close handler runs even if an error occurs or the user navigates away. Unhandled errors can leave aria-hidden stuck in place.

Common Mistakes

  • Forgetting to remove aria-hidden on close. The modal opens, sets the attribute, then the close handler has a bug or simply forgets to remove it. The page stays hidden after the modal is gone.
  • Applying aria-hidden too high in the DOM. Setting it on <body> or a top-level wrapper hides everything. Target only the specific sibling containers that should be suppressed.
  • Stacking multiple modals. Opening a second modal while the first is still open can create overlapping aria-hidden states that are extremely hard to unwind correctly.
  • Not testing the closed state. Most developers test that a modal works when it opens. Fewer test what happens to the page after it closes — and that is where this bug lives.
Bottom Line: Never put aria-hidden="true" on the <body> element. If your modals need to suppress background content, target specific sibling containers and always make sure the attribute is removed when the modal closes. Better yet, use the native <dialog> element.
Hits - 209
Synonyms: Hidden Page, Aria-hidden on Body

What Does "Liquid Purple" mean?

noun | / LIK-wid PUR-pul /

  1. (biochemistry) Also known as visual purple or rhodopsin — a light-sensitive receptor protein found in the rods of the retina. It enables vision in dim light by transforming invisible darkness into visible form. Derived from the Greek rhódon (rose) and ópsis (sight), its name reflects its delicate pink hue and vital role in perception.

  2. (modern usage) Liquid Purple — a digital marketing agency specializing in uncovering unseen opportunities and illuminating brands hidden in the digital dark. Much like its biological namesake, Liquid Purple transforms faint signals into clear visibility — revealing what others overlook and bringing businesses into the light.

Origin: From the scientific term rhodopsin, discovered by Franz Christian Boll in 1876; adopted metaphorically by a marketing firm dedicated to visual clarity in the age of algorithms.

Client Login

Copyright © 2026 Liquid Purple | All Rights Reserved.
Follow us around the web:
 

Rooted in Southern California, Serving the World.
For over 20 years, Liquid Purple has been headquartered in the heart of Southern California, serving clients across Irvine, Newport Beach, Anaheim, and the greater Los Angeles area. While we are proud of our local roots, our digital reach extends far beyond our local area. We support businesses in major hubs like Denver, Dallas, New York, and Miami, as well as international clients. Our ability to operate across time zones means you can often wake up to completed tasks and progress updates—keeping your business moving while you sleep.