Bug 95: Text Hidden from Viewport Inappropriately (F33)

WCAG 1.3.1 (Info and Relationships) | Text hidden in ways that break layout context or prevent screen reader access.

Failure F33: Negative Position Hides From Screen Reader

Issue: "Skip to main content" hidden with position: absolute; left: -9999px. Not in viewport, but also not accessible via focus. Screen readers may or may not reach it.

Failure F33: Margin Pushing Content Off-Screen

This is an important note about the search feature

Search:

Issue: "Important note" pushed off-screen with margin-left: -10000px. Not visible, but still in DOM. Impacts layout calculation and screen reader announcement unpredictably.

Failure F33: Opacity 0 Hides Content but Keeps in Tab Order

Hidden link 1 Hidden link 2 Hidden link 3

Issue: Three invisible links (opacity: 0) still in tab order. Keyboard users tab through nothing, confused about active focus. Screen readers announce but users can't see them.

Failure F33: Display None and Visibility Hidden Misuse

Issue: Company field uses display: none (removed from DOM flow, not announced). Notes field uses visibility: hidden (invisible but space reserved, confusing layout). Better to use hidden attribute or aria-hidden + controlled visibility.

Better Approach (For Reference)

Three correct patterns for hiding content:

Option 1: Visually hidden but accessible (best for skip links)


            .sr-only {

              position: absolute;

              width: 1px;

              height: 1px;

              overflow: hidden;

              clip: rect(0, 0, 0, 0);

              white-space: nowrap;

            }

Option 2: Remove from view AND accessibility (use aria-hidden)


            <div aria-hidden="true" style="display: none;">...</div>

Option 3: Conditional visibility with hidden attribute


            <input id="company" type="text" hidden>

HAL Fixes: HAL detects inappropriate use of display: none, visibility: hidden, opacity: 0, and extreme positioning. HAL converts to proper .sr-only pattern with clip property for skip links. HAL uses aria-hidden="true" for truly irrelevant hidden content. HAL ensures hidden form fields don't persist unexpectedly in form submission or tab order.