Hidden Content for Some or for All

5 min readDec 14, 2019

In web development, sometimes we want to hide some contents. It has many ways to hide the content, but first we want to decide who we want to hide from.

Identify your audiences

A website is not only viewed by human users, but also by blind or visually impaired people who want to access the website. Those people use software to help them, to read the content in the website for them. The most commonly used software for this is called a ‘screen reader’.

Summary, the audience that we focus on here who view our website -

User — a human with access to the website by typing or reading directly.
Screen reader — software that helps blind or visually impaired users to access the website.

Hiding for All

A popular way — using CSS

The easy way or maybe the most well known way for hiding content is by using CSS

1. display:none;

<style>
    .hidden {
        display: none;
    }
</style><p class="hidden">This content is hidden.</p>

with display:none; there will be no space allocated between tags, but you can still interact with this tag through the DOM.

2. visibility: hidden;

<style>
    .hidden {
        visibility: hidden;
    }
</style><p class="hidden">This content is hidden.</p>

with visibility:hidden; , there will be space allocated between the tags, unlike display: none;.

3. font-size: 0px; or line-height: 0px;

<style>
    .hidden {
        font-size: 0;
    }
</style><p class="hidden">This content is hidden.</p>

These techniques may not be friendly with search engine optimization as the hiding may be interpreted to be malicious

4. width: 0px; and height: 0px;

<style>
    .hidden {
        width: 0px;
        height: 0px;
    }
</style><p class="hidden">This content is hidden.</p>

html5 attribute — hidden

“hidden” is a boolean attribute in html5. It can be used to hide elements or content in the page. The browser will not render content with the hidden attribute set.

<p hidden>This Content is hidden.</p>

The result of the “hidden” attribute will be no space allocated between tags, similar to CSS property display: none;.

What is the best practice to hiding for all?

The html5 hidden attribute is easier than using CSS, but the problem is some browsers, such as IE10 and below, do not support this hidden attribute.

According to Steve Faulkner recommends to use both CSS display: none; and the html hidden attribute. This way you can make sure that your content has been hidden well even when the browser does not load a stylesheet or if the browser does not support new html5.

<style>
    .hidden {
        display: none;
    }
</style><p hidden class="hidden">This content is hidden.</p>

Hiding for Some — hiding for a screen reader, but still present to users

This time we want to hide content just for the screen reader, but still be visible on the page. The solution is to use a html attribute called “aria-hidden”.

<p aria-hidden="true">This content is hidden from a screen reader.</p>

Aria-hidden is a html5 boolean attribute. If an element has aria-hidden set to “true”, the element and any of its children should not be exposed to accessibility API, regardless of whether the element is visually rendered or not.

Hiding for Some — hiding for users, but still present to a screen reader

In some cases, you might want to hide your content from a user, but not from a visually disabled user. For example, every website has a navigation bar. It is obvious for a user that it is a navigation bar, by color or by the position of the bar. But for the visually impaired users, it is not so clear. You need to have a ‘navigation header’ to tell them. This navigation header will be accessible to the screen reader, but not to the normal users. In this case, there are some CSS invisible content techniques to do this.

1. text-indent: -10000px;

text-indent with a negative value will move content to left out of the container. This technique will hide content from a visible display but not from a screen reader.

<style>
    .hidden {
        text-indent: -10000px;
    }
</style><p class="hidden">This content is hidden.</p>

This technique is not suitable for languages that read from right to left, such as Arabic, Hebrew. There are also other better techniques than using text-indent.

2. Off-screen

With this technique, the content will be out of view and hidden in the left of the visible browser window. Screen reader users still can access the content and read it normally.

<style>
    .hidden {
        position: absolute;
        left: -1000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
</style><p class="hidden">This content is hidden.</p>

In this CSS style, the content will be shift to the left by 1000 pixels so that it will be out of the screen. The content box will have a size of 1 pixel and hide everything that does not fit in this space.

3. CSS Clip

This is a modern technique to hide content by clipping the content that does not fit into the 1 pixel sized visible area.

<style>
    .hidden {
        clip: rect(1px 1px 1px 1px); /*IE6/7*/
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        width: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
   }
</style><p class="hidden">This content is hidden.</p>

Let’s analyze the styles in detail.

clip: rect(1px, 1px, 1px, 1px); specifies a rectangle to clip an absolutely positioned element to be shape as 1 pixel. Clip works together with overflow: hidden; and position: absolute;.

white-space: nowrap; makes sure that a block of text content always stays on the same line.

height: 1px; and width: 1px; sets the size of the block to 1 pixel in size.

Summary

The best way to hide content for all is using the html5 attribute “hidden” plus CSS style display: none;.
The best way to hide content for only a screen reader user is by setting the html5 attribute aria-hidden=”true”.
The best way to hide content from users but not from a screen reader is by using the CSS property “clip” or “off-screen” technique.

References

Steve Faulkner. (May 2012). HTML5 Accessibility Chops: hidden and aria-hidden https://developer.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
WebAIM. (Dec 2014). CSS in Action: Invisible Content Just for Screen Reader Users https://webaim.org/techniques/css/invisiblecontent/
J. Renée Beach. (Oct 2016). Beware smushed off-screen accessible text https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.2g9wpybl9
Paul Hebert. (Feb 2019). See No Evil: Hidden Content and Accessibility https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/
Adrian Bece. (Aug 2019). Accessibility: Hiding content in CSS https://dev.to/adrianbdesigns/accessibility-hiding-content-30of