How to hide elements on the Web and their advantages and disadvantages

Example source code:

https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

5. Impact of accessibility on visibility: hidden

The element is hidden, its descendants are removed from the accessibility tree, and screen readers do not render the element.

(1) Positioning

To hide an element with the position attribute, we should move it offscreen and set its size to 0 (width and height). An example of this is a jump navigation link. Consider the following diagram:

To place the link outside the screen we should add the following

「css」

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

A value of -100% will push the element 100% of the viewport height. As a result, it will be completely hidden. Once it focuses on the keyboard it will show up like this

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

Example source code:

https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

6. Accessibility impact on position: absolute | fixed

The element is accessible to screen readers and focusable by the keyboard. It's just hidden from the viewport.

Clip Path When clip-path is used on an element, it creates a clipping region which defines which parts should be shown and hidden.

In the example above, the transparent black area has the clip-path. When clip-path is applied to an element, anything under the transparent black area will not show.

To demonstrate the above more intuitively, I will use the clippy tool. In the GIF below, I have the following clip-path:

Setting the polygon value to 0 0 in each direction will resize the clipping region to zero. As a result, the image will not be displayed. Likewise, this can also be done using a circle instead of a polygon:

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

7. Impact of accessibility on clip-path

The element is only hidden visually; it is still accessible to screen readers and keyboard focus.

Example source code:

https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

3. Control color and font size

While these two techniques are not as common as the ones we discussed earlier, they may be useful for certain use cases.

1. Transparent color

By making the color of the text transparent, it will be hidden visually. This is useful for buttons that only have icons.

2. Font size

Additionally, it is useful to set the font size to 0, as this will visually hide the text. Consider the following example where we have a button with the following structure:

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

Our goal is to hide text in an accessible way. To do this I added the following CSS

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

This way, the text is hidden. It even works without changing the color, but I added it for explanation purposes.

Example source code:

https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

3. Aria Hidden

When you add the aria-hidden attribute to an element, it removes the element from the accessibility tree, which can enhance the experience for screen reader users. Note that it does not hide the element visually, it only targets screen reader users.

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

In the example above, we have a menu button with a label and an icon. To hide icons from screen readers, aria-hidden was added.

According to the Mozilla Developer Network (MDN), the following are use cases for the attribute:

• Hide decorative content such as icons and images.
• Hide copied text.
• Hide off-screen or collapsed content.

4. Impact of accessibility on aria-hidden="true"

is designed for screen readers as it hides the content only from screen readers. However, the content remains visible to sighted users and the keyboard is focusable.

(1) Animation and Interaction

When we want to animate a hidden element, for example, to show a hidden mobile navigation, it needs to be done in an accessible way. We’ll explore some good examples to learn from for an accessible experience, as well as some bad examples to avoid making mistakes that could result in a bad experience for screen reader users.

Menu Animation - Bad Example

We have a menu that needs to have a sliding animation when it is expanded. The easiest way to do this is to add the following to your menu:

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

With the above in place, the menu will expand and collapse based on the .active class, which is added via JavaScript as follows:

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

The result might look good, but it has one big mistake. Using opacity: 0 will not hide the accessibility tree navigation. Even though the navigation is visually hidden, it is still focusable via the keyboard and accessible by screen readers. It must be hidden to avoid confusing the user.

Here is a screenshot of the accessibility tree from Chrome Dev Tools:

In short, the accessibility tree is a list of all the content that is accessible to screen reader users. In our case, the navigation list is there, but it is visually hidden. We need to solve two problems:

• Avoid keyboard focus when menu is hidden
• Avoid screen reader notification of navigation when it is hidden

The screenshot below shows how the page appears with the VoiceOver rotor on Mac OS. The navigation list is there, but it is hidden

Example source code:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

Menu Animation - Good Example

To fix this error, we need to use visibility: hidden for the navigation menu. This will ensure the menu is hidden visually and from screen readers.

「css」

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

Once added, the menu will be hidden from screen readers. Let's test it again and see what VoiceOver will display:

Example source code:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

5. Custom checkbox

The default checkbox design is difficult to customize, so, we need to create a custom design for the checkbox. Let's look at the basic HTML:

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

To customize the checkbox, we need to hide the input in an accessible way. For this purpose, position and other properties should be used. There is a common CSS class called sr-only or visually-hidden which only hides an element visually and makes it accessible to keyboard and screen reader users.

.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; 
}

Example source code: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

Hide Button

On Twitter, there is a button called “See New Tweets” that is hidden from screen readers with aria-hidden content and only displayed when new tweets are available.

Summarize

This concludes this article about methods to hide elements on the Web and a detailed tutorial on their advantages and disadvantages. For more content on hiding elements on the Web, please search for previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!