Hiding Elements On The Web, by Ahmad Shadeed

In normal development work, sometimes there is a need to hide elements. For example, a button needs to be hidden on the desktop and displayed on the phone. A navigation bar that needs to be hidden on the mobile and displayed on the desktop. The word “hidden” is not as simple as it looks. It also has several meanings:

  • Hide the element completely removed from the document stream.
  • Elements are only visually hidden and still accessible using assistive technology (” AT “) such as screen readers.
  • The element is visually visible, but hidden from the screen reader, meaning that the screen reader is not accessible.

In this article, you’ll learn how to hide elements using HTML/CSS, covering accessibility, animations, and use cases. Let’s take a look!

HTML5 hiddenattribute

This is a Boolean attribute used on HTML tags. Elements decorated with the hidden property render like display: None when the browser loads the page. Of course, if you override the Hidden property manually using CSS, it’s a different story.

Consider the following example:

This section contains a title, picture, and description. Images will only be displayed if the viewport width is greater than 400px. Here I added a hidden property to .

I wrote some CSS code to make the image decorated by the Hidden property appear when the viewport width is greater than 400px.

img[hidden] {
  display: none;
}

@media (min-width: 400px) {
  img[hidden] {
    display: block; }}Copy the code

Here is the render at a large viewport (> 400px).

Demo

You might ask, why not just use display: None? Good question. The advantage of using the hidden property for images is that even if the CSS does not load successfully for some reason, the image will be hidden.

hiddenThe impact of attributes on accessibility

Hidden hides elements completely from the page, so screen readers cannot access them. Avoid using it for visual purposes only.

CSS displayattribute

Each element has a default display value, which could be inline-block, block, table, and so on. We use display: None to hide the element, and all of its descendants are hidden with it.

Similar to the above code, except this time we use display: None:

img {
  display: none;
}

@media (min-width: 400px) {
  img {
    display: block; }}Copy the code

Display: None removes elements from the document stream and is inaccessible to screen readers. So, what is document flow? We can describe it vividly with the following picture:

We hid the blue book with display: None and found that it disappeared completely from the pile, as if it had been removed. The space occupied by blue books no longer exists. HTML is similar, indicating that the document flow has been changed.

The following animation shows what happens when the blue book is removed:

Will images still load after they are hidden?

Will. For example, is hidden with CSS by default, and we set it to display at a breakpoint. We opened DevTools, checked the Networks TAB, and still found that the image was loaded, even though it wasn’t displayed.

Demo

<style>The element

It is worth mentioning that some elements are display: None by default. Such as < style >. We can set the display value of 

<body>
    <style>
       .title { color: # 000; }
    </style>
</body>
Copy the code
style {
    display: block;
}
Copy the code

This would be even more interesting if you were making style blocks editable. This can be done by adding the contenteditable property to

Demo (see above in Firefox, but not in Chrome)

display:noneImpact on accessibility

Like the hidden property, the display: None element is completely hidden from the page and inaccessible to screen readers.

opacity

If the element is set to opacity, any descendant, including none, is hidden, not because of inheritance. However, this is just a visual concealment. Also note that elements with a opacity value less than 1 create a cascading context.


In the image above, the blue Book is only visually hidden. The space it occupies remains, and the order of the stack remains the same compared to display: None.

img {
    opacity: 0;
}
Copy the code

Overriding the initial example with opacity: 0, the result would look like this:

The image is visually hidden, but the space it occupies is still there.

Dusan Milovanovic pointed out that the pointer – events: none | auto can be used to disable the opacity of use: 0 hidden elements on mouse events. Still, this is important, because it’s weird to have an element that’s invisible but still responds to user clicks, hovers, or selects text.

Demo

opacity: 0Impact on accessibility

Elements hidden with opacity: 0 can still be accessed by on-screen readers and can also be focused by the keyboard.

visibility

Hidden elements using visibility: hidden are similar to those using opacity: 0 and do not affect visual document flow.

Note that the blue book is hidden from the visual stream, but does not affect the order of the stack.

One thing is that if visibility: hidden is used on a parent element, it and other descendants are invisible by default. However, if you use visibility: hidden on a child element, that child element will be visible.

<article>
  <h1>Spring is on the way</h1>
  <img src="landscape.jpg" alt="">
  <p><! -- Desc --></p>
</article>
Copy the code
article {
    visibility: hidden;
}

img {
    visibility: visible;
}
Copy the code

In the example above,

uses visibility: hidden, while the child
uses visibility: visible, and the resulting image is still displayed. That is, child elements can override the visibility attribute of their parent elements.

Demo

visibility: hiddenImpact on accessibility

If an element visibility: hidden, then it and all its descendants will be removed from the accessibility tree and will not be read by screen readers.

CSS positionattribute

The principle behind hiding an element using the position attribute is to move the element off-screen and set its dimensions to 0 (width and height). For example, skip navigation links on web pages:

To locate the link off-screen, we can do this:

.skip-link {
    position: absolute;
    top: -100%;
}
Copy the code

-100% will push elements online one viewport height away. As a result, the link is completely hidden. When the link is focused by the keyboard, it can be set like this:

.skip-link:focus {
    position: absolute;
    top: 0;
}
Copy the code

Demo

position: absolute | fixedImpact on accessibility

Elements can be read by screen readers and focused by the keyboard. It just moved out of the viewport.

clip-path

The clip-path property is used to create a clipping area where only the element content is visible and the rest is hidden.


To illustrate in a more intuitive way, I use the Clippy tool to explain. In the GIF below, I define the following clip-path:

img {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
Copy the code

Setting the coordinates of each point of the polygon to (0, 0) changes the clipping area to 0. As a result, the image will not be displayed. Also, you can use a circle instead of a polygon:

img {
    clip-path: circle(0 at 50% 50%);
}
Copy the code

The invisibility achieved with clip-path is only visual, the screen reader is still accessible, and the keyboard can be focused.

Demo

operationcolor 和 font-size

Although these two techniques are not as common as we discussed earlier, they can be useful in some scenarios.

color: transparent

The text is set to transparent, but it is visually hidden. This works better for buttons with only ICONS.

font-size: 0

Setting the text size to 0 is also visually hidden.

Consider a button with the following structure:

<button>
  <svg width="24" height="24" viewBox=24 24 "0 0" aria-hidden="false" focusable="false">
    <! -- Path data -->
  </svg>
  <span>Like</span>
</button>
Copy the code

Our goal is to hide the text in such a way that it can be accessed. To do this, I use the following CSS:

.button span {
    color: transparent;
    font-size: 0;
}
Copy the code

The text is hidden.

Demo

aria-hidden

When aria-hidden is added to an element, it is removed from the access tree, which can be used to enhance the screen reader user experience. Note that the elements are still visually visible.

<button>
    Menu
    <svg aria-hidden="true"><! -- --></svg>
</button>
Copy the code

Here is a menu button with label and chart. To make SVG hidden from screen readers, aria-Hidden has been added.

According to the MDN document, ariA-Hidden’s usage scenarios include:

  • Used to hide decorative content, such as ICONS and images.
  • Hide repeated text.
  • Hides off-screen or collapsed content.

Aria-hidden is designed for screen readers, so it hides content only from screen readers. However, the content is still visible to the visual user, and keyboard focus is also supported.

Animation and Interaction

Quick table

Before we start, I want to remind you of the properties mentioned earlier. I took inspiration from the CSS-Tricks article and created the following quick list so that you can choose the right method to use.

View on Codepen

When we want to animate hidden elements. Displaying hidden mobile navigation, for example, needs to be done in an accessible way. To get an accessible experience, we’ll explore some good examples to learn from, and some bad examples to avoid mistakes and make the screen reader user experience better.

Menu animation – bad example

We have a menu that uses a swipe animation when it expands. The simplest way is to use the following method:

ul {
    opacity: 0;
    transform: translateX(100%).transition: 0.3 s ease-out;
}

ul.active {
    opacity: 1;
    transform: translateX(0);
}
Copy the code

In this way, the menu is displayed when the.active class is added, otherwise it collapses. This class was added via JavaScript, as shown below.

menuToggle.addEventListener('click'.function(e){
  e.preventDefault();
  navMenu.classList.toggle('active');
});
Copy the code

The result looks good, but it has one big problem. Using opacity: 0 does not remove navigation from the access tree. Even if navigation is visually hidden, it can still be focused by the keyboard and read by the screen reader.

Here is a screenshot of the access tree from Chrome DevTools:

Here is a screenshot of what VoiceOver, an access tool on Mac OS, sees on the page. Same as above,

Simply put, an access tree is a list of all the content that a screen reader user can access. In our example, we include a navigation list that appears in the access tree even though it is visually hidden. Therefore, we need to solve two problems when hiding the menu:

  1. Cannot be focused by the keyboard
  2. Cannot be accessed by screen readers

Demo

Menu animation – good example

To solve the above problem, we need to use visibility: Hidden in the menu navigation. This ensures that menus are not only visually hidden, but also inaccessible to screen readers.

ul {
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%).transition: 0.3 s ease-out;
}

ul.active {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}
Copy the code

The menu is now hidden from the screen reader as well. Let’s test VoiceOver’s results again:

Demo

Customize check boxes

The default checkbox design is difficult to customize. Therefore, we need to design a custom style for the check box. Here’s how it works:

<p class="c-checkbox">
  <input class="sr-only" type="checkbox" name="" id="c1">
  <label class="c-checkbox__label" for="c1">Custom checkbox</label>
</p>
Copy the code

To customize the check box, you need to hide the input box in an accessible way. To do this, you need to use other attributes such as position. There is a common CSS class called SR-Only or Visual-Hidden that hides an element visually, but is still accessible to keyboard and screen readers.

.sr-only {
  border: 0; 
  clip: rect(0 0 0 0); 
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
Copy the code

In this way, you can access custom checkboxes. If you’d like to learn more, I wrote an article on the subject.

Demo

Hide content from screen readers


In the caption, I used an emoji. If hidden, the screen reader reads it as follows:

Hiding On The Web grinning face with open mouth

Each emoji has a specific description that screen readers use when reading it. Imagine you’re browsing a web page right now, and suddenly you hear this headline, and you get to the end of it, and you get a little confused. To avoid this confusion, aria-hidden can be used to make the emojis hidden from screen readers.

<h1>Hiding On The Web <span aria-hidden="true">😃</span></h1>
Copy the code

Small story, big truth small change, big victory!

Hide button

On Twitter, there is a button called “See New Tweets,” which is hidden from screen readers by default using aria-Hidden and only shows when there are New Tweets.

Hide embellishments

The dot between the user ID and the date is decorative. Therefore, aria-hidden=”true” is used to avoid being read by screen readers.

Related articles

  • Toggle Visibility When Hiding Elements
  • Hiding Things with CSS
  • Places it’s tempting to use display: none;, but don ‘t
  • Exploring how to build an accessible checkbox
  • Accessible Skip Navigation Link
  • See No Evil: Hidden Content and Accessibility

(after)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

At ~