Issue: Red asterisk (*) generated by ::before pseudo-element. Screen reader doesn't announce fields as required. Visual users see *, but AT users don't.
Bug 94: CSS-Generated Content Without Fallback (F3)
WCAG 1.1.1 (Text Alternatives) | CSS ::before/::after symbols not exposed to screen readers.
Failure F3: Required Field Indicator via CSS
Failure F3: Status Indicator Icons via CSS
Issue: Green checkmark (✓) only in CSS. Screen reader says "Download complete" (good), but doesn't convey success status. Relies purely on visual symbol.
Failure F3: Menu Toggle and Close Buttons via CSS
Settings Panel
Adjust your preferences...
Issue: Hamburger menu (☰) and close (✕) buttons generated via CSS. Button doesn't have aria-label. Screen reader announces "button" but not purpose.
Failure F3: Star Rating Display via CSS
Customer Review
"Great product, highly recommended!"
Rated by Sarah M.
Issue: 5 stars (★★★★☆) generated by CSS ::after. Screen reader can't see or announce rating. Visual users understand "4 out of 5 stars" but AT users get nothing.
Better Approach (For Reference)
Include text content, not CSS symbols:
Option 1: Add text node (simplest)
<label>Email <span aria-label="required">*</span></label>
Option 2: Use aria-label on container
<button class="menu-icon" aria-label="Open navigation menu"></button>
Option 3: Use title attribute or aria-describedby
<div class="star-rating" aria-label="4 out of 5 stars"></div>
HAL Fixes: HAL detects CSS-generated content (::before/::after pseudo-elements with content property) and adds aria-label or visible text alternatives. HAL converts icon fonts and Unicode symbols to screen-reader-accessible labels. HAL ensures all meaning conveyed by CSS is also available as text.