Class VisuallyHidden


public class VisuallyHidden extends Span<VisuallyHidden>
A span that is visually hidden but readable by screen readers.

Use this component to provide additional context for screen reader users that sighted users don't need. Common use cases include:

  • Describing icon-only buttons
  • Providing additional context for abbreviated content
  • Clarifying ambiguous links (e.g., multiple "Read more" links)

Usage:


 // Icon button with accessible label
 Button deleteBtn = new Button();
 deleteBtn.addElement(new Icon("trash"));
 deleteBtn.addElement(new VisuallyHidden("Delete item"));

 // Clarify a "Read more" link
 Anchor readMore = new Anchor("/article/123");
 readMore.setText("Read more");
 readMore.addElement(new VisuallyHidden(" about Web Accessibility"));

 // Provide context for an abbreviation
 Span price = new Span();
 price.setText("$99");
 price.addElement(new VisuallyHidden(" dollars"));
 

This implementation uses the standard "visually hidden" CSS technique that:

  • Removes the element from visual flow without using display:none
  • Keeps content accessible to screen readers
  • Works across all modern browsers and assistive technologies
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:
  • Field Details

  • Constructor Details

    • VisuallyHidden

      public VisuallyHidden(String text)
      Creates a visually hidden element with the specified text.
      Parameters:
      text - Text for screen readers only.
    • VisuallyHidden

      public VisuallyHidden()
      Creates an empty visually hidden element.

      Use this constructor when you want to add child elements instead of text.

  • Method Details

    • initialize

      protected void initialize()
      Description copied from class: Element
      Hook method called during element initialization.

      Override this method to set up the element's structure by adding child elements. This is called before Element.create() and only once during the element's lifecycle.

      Overrides:
      initialize in class StyledElement<VisuallyHidden>