Navigating hidden content

Today we begin our journey into the realm of hidden content and its impact on all customers. The way web developers hide content can significantly affect accessibility for users with disabilities. Join me as we explore HTML attributes and CSS properties, shedding light on how each method. Each technique carries its own implications for accessibility, shaping the way screen readers perceive and interact with each method used to hide content.

Off-screen styling

Imagine nudging content off the screen, like gently sliding it under the bed to tidy up your room. With CSS magic, you can position elements outside the viewport. While the content remains accessible, it gracefully bows out of the limelight, waiting patiently for its cue to step back into focus. Let’s explore some examples of this styling in action:

.off-screen {
  position: absolute;
  left: -9999px;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Off-screen styling end result

Before off-screen styling

After off-screen styling

HTML5 hidden attribute

Picture this attribute as a cloak of invisibility for your HTML elements. With a simple hidden attribute, you can effortlessly conceal an element from view. It’s like stashing away your belongings in a secret compartment, ready to be revealed when needed. This attribute is commonly used by developers to hide elements they don’t want seen. Note the hidden attribute will hide your content from everyone. Let’s see a simple example:

<p>This paragraph can be seen by all.</p>
<p hidden>This paragraph is hidden.</p>

Hidden attribute end result

Before hidden attribute

After hidden attribute

display:none styling

Using display: none is like sending content to an invisible realm. Poof! It’s gone, freeing up spacing on your webpage. Similar to the previous attribute display: none will hide your element from all customers. This CSS style hides elements from both sighted users and screen readers users alike.

.hide-element {
  display: none;
}

display: none styling end result

Before display: none styling

After display: none styling

visibility:hidden styling

visibility:hidden cloaks elements from view while preserving their position in the layout. It’s as if you’ve draped a sheer curtain over a window, allowing light to pass through but obscuring the view beyond.

visibility:hidden styling end result

Before visibility: hidden styling

After visibility: hidden styling

aria-hidden=”true”

When it comes to hiding content from assistive technologies, the aria-hidden="true" attribute steps into the spotlight. By signaling to screen readers that an element is purely decorative and should be ignored, you ensure that all users can navigate your content seamlessly, regardless of their abilities. Below are 2 paragraphs; the top one can be viewed by all customers, the bottom ignored by screen readers.

By default, the aria-hidden attribute is set to false, which means that screen readers can pick up and read the content. If you want to hide it from screen readers, just switch the attribute to true!

<p>This paragraph can be read by all customers.</p>
<p aria-hidden="true">This paragraph can NOT be read by screen reader customers.</p>

aria-hidden attribute end result

Before aria-hidden attribute

After aria-hidden attribute

Comparison table

Conclusion

And there you have it! Armed with these techniques, you possess the power to artfully conceal content in HTML, striking a delicate balance between visibility and discretion. By embracing best practices and prioritizing inclusivity, we pave the way for a digital landscape where everyone can navigate with ease and dignity. So, let’s continue to unveil the mysteries of accessibility, one line of code at a time.