Visually hidden text

Most of the time content should be both visible on the screen and available to screen readers. However, sometimes when space is at a premium, we may want to hide text that would clutter the screen. This puts users of assistive technology like screen readers at a disadvantage.

We can hide content but make it available to users of assistive technology using the govuk-visually-hidden class. This library provides a helper method which makes hiding content easier.

p Regular text

= govuk_visually_hidden("This content is visually hidden")

p More regular text

<p>Regular text
</p>
<%= govuk_visually_hidden("This content is visually hidden") %>
<p>More regular text</p>

Output

Rendered
HTML

<p>
  Regular text
</p>
<span class="govuk-visually-hidden">
  This content is visually hidden
</span>
<p>
  More regular text
</p>

Input

Slim
ERB

p Regular text

= govuk_visually_hidden do
  p This paragraph is visually hidden

p More regular text

<p>Regular text
</p>
<%= govuk_visually_hidden do %>
  <p>This paragraph is visually hidden
  </p>
<% end %>
<p>More regular text</p>

Output

Rendered
HTML

<p>
  Regular text
</p>
<span class="govuk-visually-hidden">
  <p>
    This paragraph is visually hidden
  </p>
</span>
<p>
  More regular text
</p>

Visually hidden text

Setting visually hidden text with an argument

Input

Output

Setting visually hidden text with a block

Input

Output