4.3. Hiding Content

Published

Introduction

This section is important to our presenting a comparable and equitable user experience. Hiding content from the DOM is perhaps the worst accessibility crime committed, and it’s committed constantly by immature production teams.

We hide content to reduce our visual users’ cognitive or motor overload. We believe it meets our learning theories of clumping and clumping can be achieved on the DOM with HTML and other landmarks. (Our departments also compete for publishing space).

Non-visual users and their alternative browsing methods don’t need ‘show and hide’ techniques at all. They navigate by skipping through all of the links or selected semantic HTML elements on a page such as Headings and Paragraphs. A content menu can be useful.

comparing a page with four sections of content showing against a page with only one expanded section of an accordion pattern of four sections.
Hiding content can make it look less intimidating for some of our users. (Visual users may find the graphic hard on the eyes? That’s the point.)

Hiding content is an ableist design strategy. Making our hide and show contents accessible is not the same as offering a comparable or equivalent experience.

Where our experienced and visually impaired users may recognise some patterns they may not recognise them across all applications. There is no standard.

For example, a tabbed interface.

The tabbed interface is a visual presentation strategy and not a content strategy.

Our visually impaired user must understand the affordance of tabs and recall the often complex interaction patterns that show and hide the content. It’s all unnecessary faff and can be frustrating: not delightful, no matter how gorgeous it looks and slick it feels to our able users.

Hiding content may not be great for our visual users, either. The additional cognitive load in determining what to reveal and motor load to interact and reveal content may be more overwhelming than only seeing all the content that is available.

An alternative to hiding content is to landmark it with visually discernable headings, white space, and other landmarks. And that’s another story.

Hide Methods

These are the most popular methods of hiding content.

Bad Methods

  • HTML attribute, “hidden”, which removes the element from the DOM. (Mostly bad and sometimes useful. It relies on JS to reveal the content or it is forever hidden).
  • CSS style declaration of, “display:none;”, which removes the element from the DOM. (Bad if CSS enabled in the browser)
  • JS function hide(), which removes the content from the DOM. (Bad if JS enabled in the browser. Almost the worst.)

Good methods

  • CSS style to visually displace content to out of view. (Good. Content remains in the DOM).
  • CSS style to update an element’s height and prevent the content overflowing from it. (Good. Content remains in the DOM).
  • JS function toggleClass(), which adds and, or removes a Class attribute from an HTML element. (Good if CSS and JS both enabled in the browser).

Example Hide Methods

The following are demonstrations of the effects of the Show and Hide techniques. They are styled on the page with CSS <style> tags.

Demo set up.

This paragraph is styled with CSS to show how the default content will render in your visual browser.

This is how the HTML appears in the DOM:

<p>This paragraph <span class="hideMe">is styled with CSS to show how the default content</span> will render in your visual browser.</p>

Non-script examples

This first demo explores the HTML native attribute of, hidden="hidden".

Demo 1: HTML hidden attribute.

This paragraph will render in your visual browser.

This is how the HTML appears in the DOM:

<p>This paragraph <span class="hideMe" hidden="hidden">is styled with CSS to show how the default content</span> will render in your visual browser.</p>

The hidden="hidden" technique leaves the content available in the DOM, which is useful. At the same time, if we do want to display the content, we need a script to remove the attribute. For example, in jQuery: $(".hideMe").removeAttr("hidden");. And that is not ideal if JS is disabled in the browser, or has other issues that prevent showing the content.

In this second demo, we relocate or displace the copy text within the <span class="hideMe"> tags. The content remains available on the DOM.

Demo 2: CSS text displacement.

This paragraph is styled with CSS to show how the default content will render in your visual browser.

This is how the HTML appears in the DOM:

<p>This paragraph <span class="hideMe">is styled with CSS to show how the default content</span> will render in your visual browser.</p>

The CSS:

.hideMe {
    display:block;
    position:absolute;
    top:0;
    left:-99999px;
    width:1px; 
    height:1px;
    overflow:hidden;
}

We are converting the inline element into a block one that we can resize and relocate at will. Then we make it so tiny that even if we did see it we won’t know.

Note: engineers will tell us this method imposes a small performance cost on the browser, which needs to process the displaced element off the screen, whether we can see it, or not. It’s a tiny price to pay to provide a comparable and equitable experience!

In this third and last demo, we can see that the experience of the paragraph changes in the DOM. Content is entirely removed from the DOM. In Demo 2, the content is removed from the visual experience and remains available to the DOM.

Demo 3: CSS display:hidden;.

This paragraph is styled with CSS to show how the default content will render in your visual browser.

This is how the HTML appears in the DOM:

<p>This paragraph will render in your visual browser.</p>

The CSS:

.hideMe {
    display:none;
}

Caution: Use display:none; sparingly, if at all.

Demo 4: CSS widths and heights.

This paragraph is styled with CSS to show how the default content will render in your visual browser.

This is how the HTML appears in the DOM:

<p>This paragraph <span class="hideMe">is styled with CSS to show how the default content</span> will render in your visual browser.</p>

The CSS:

.hideMe {
    display:inline-block;
    height:1px; 
    width:1px;
    margin:0;
    padding:0;
    overflow:hidden;
    color:transparent;
}

Wait! This leaves the remaining two non-breaking spaces together and looks like an error. We can fix that by placing one of the two spaces inside the span (highlighted). For example:

This paragraph is styled with CSS to show how the default content will render in your visual browser.

This is how the HTML appears in the DOM:

<p>This paragraph<span class="hideMe"> is styled with CSS to show how the default content</span> will render in your visual browser.</p>

Example using scripts

In this demo, we introduce the advantages and pitfalls of using scripts.

Demo 5: Script hide() function.

This paragraph is styled with CSS to show how the default content will render in your visual browser.

This is how the HTML appears in the DOM:

<p>This paragraph will render in your visual browser.</p>

The script:

//jQuery
$(".hideMe").hide();
Demo 6: Script addClass() function to accessibly displace text.

This paragraph is styled with CSS to show how the default content will render in your visual browser.

This is how the HTML appears in the DOM:

<p>This paragraph <span class="hideMe hideMe2">is styled with CSS to show how the default content</span> will render in your visual browser.</p>

The script:

//jQuery
$(".hideMe").addClass("hideMe2");

The CSS

.hideMe {
    border-bottom:2px dashed orange;
}
.hideMe2 {
    display:block;
    position:absolute;
    top:0;
    left:-99999px;
    width:1px; 
    height:1px;
    overflow:hidden;
}
Demo 7: Script toggleClass() function to accessibly displace text.

This paragraph is styled with CSS to show how the default content will render in your visual browser.

This is how the HTML appears in the DOM before the button is pressed:

<--Default-->
<p>This paragraph <span id="demoHideMe" class="hideMe">is styled with CSS to show how the default content</span> will render in your visual browser.</p>

This is how the HTML appears in the DOM when the class is toggled by script. The element’s class attribute is updated and not the copy text, which remains available on the DOM although visually ‘hidden’:

<--Activated-->
<p>This paragraph <span id="demoHideMe" class="hideMe hideMe2">is styled with CSS to show how the default content</span> will render in your visual browser.</p>

The script:

//jQuery
$("#toggleButton").click(function() {
    $("#demoHideMe.hideMe").toggleClass("hideMe2");
})

The CSS

.hideMe {
    border-bottom:2px dashed orange;
}
.hideMe2 {
    display:block;
    position:absolute;
    top:0;
    left:-99999px;
    width:1px; 
    height:1px;
    overflow:hidden;
}

Summary

We can do this and more without removing content from the DOM or making less able users jump through hoops when accessing our content. Only take care not to disadvantage your visual users by omitting content key to them.

With only simple CSS and easy JS techniques, we can all experience our content in a comparable and equitable way. Universally. Inclusively.

Unless you use a Content Management System. They are only crazy crap at delivering an accessible experience. And then, if a novice like me can add CSS and jQuery to this WordPress nonsense, then why shouldn’t our corporate CMS developer do the same?

Top