Hiding content

Sometimes it’s necessary to hide content from some users in order to give the best experience.

Hiding content is usually either:

• Visually, but not for screen readers
• For screen readers, but not visually

The former is more common as sometimes it’s often helpful to communicate context to screen readers that is implicit visually, for example the ‘Edit’ links on a list of editable items:

Muhammad

Age 30

Edit Muhammad

Wendy

Age 53

Edit Wendy

Oscar

Age 70

Edit Oscar

John

Age 28

Edit John

Brian

Age 39

Edit Brian

Here a <span> with the class of visually-hidden has been wrapped around the person’s name, which is repeated in the ‘Edit’ link, but only to screen reader users. The CSS looks like this:

<style>
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
</style>