Case source code:
https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. The 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 position attribute, we should move it off screen and set its size to 0 (width and height). An example is jump navigation links. Consider the following diagram:
To place the link off screen we should add the following
「css」
.skip-link {
position: absolute;
top: -100%;
}A value of -100% will push the element to 100% of its viewport height. As a result, it will be completely hidden. Once it's focused on the keyboard it will show up like this
.skip-link:focus {
position: absolute;
top: 0;
}Case source code:
https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. The impact of accessibility on position: absolute | fixed
The element is accessible to screen readers and keyboard focusable. It's just hidden from the viewport.
Clip Path When clip-path is used on an element, it creates a clipping area that defines which parts should be shown and hidden.
In the above example, the transparent black area has clip-path. When clip-path is applied to an element, anything under the transparent black area will not show up.
To demonstrate the above more visually, I will use the clippy tool. In the GIF below, I have the following clip-path:
Set the polygon value in each direction to 0 0 and the crop area will be resized to 0. As a result, the image will not be displayed. Likewise, this can also be done by replacing the polygon with a circle:
img {
clip-path: circle(0 at 50% 50%);
} 
7. The impact of accessibility on clip-path
The element is only visually hidden, screen readers and keyboard focus can still use it.
Case 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 text's color transparent, it will be visually hidden. 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 visually hides the text. Consider the following example, where there is 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 the text in an accessible way. For 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.
Case 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 visually hide the element, it is only intended for screen reader users
<button> Menu <svg aria-hidden="true"><!-- --></svg> </button>
In the above example, we have a menu button with a label and icon. To hide icons from screen readers, aria-hidden was added.
According to Mozilla Developer Network (MDN), below are the use cases for properties
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 because it hides 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 hidden mobile navigation, it needs to be done in an accessible way. For an accessible experience, we'll explore some good examples to learn from, and some bad examples to avoid making mistakes that can create a bad experience for screen reader users.
Menu Animation - Bad Example
We have a menu that needs to have a sliding animation when expanded. The easiest way 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, the menu will expand and collapse based on the .active class, which will be added via JavaScript as follows:
menuToggle.addEventListener('click', function(e){
e.preventDefault();
navMenu.classList.toggle('active');
});
The result may look good, but it has a big bug. Using opacity: 0 will not hide the accessibility tree navigation. Even if the navigation is visually hidden, it is still focusable via the keyboard and accessible to screen readers. It must be hidden to avoid confusing users.
Here is a screenshot of the accessibility tree from Chrome Dev Tools:
Simply put, an accessibility tree is a list of all content accessible to screen reader users. In our case, the navigation list is there, while it is visually hidden. We need to solve two problems:
Avoid using keyboard focus when menu is hidden Avoid telling navigation via screen reader when navigation is hidden
The screenshot below shows how the VoiceOver rotor on Mac OS sees the page. The navigation list is there while it is hidden
Case 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 that the menu is hidden from visual and 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 again and see what VoiceOver will display:
Case source code:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
5. Custom checkbox
The default checkbox design is difficult to customize, therefore, we need to create a custom design for the checkbox. Let's look at 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 visual-hidden that only visually hides an element 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;
}Case 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 to screen readers with aria-hidden content and only appears when new tweets are available come out.
Summarize
This concludes this article on the detailed tutorial on the methods and advantages and disadvantages of hiding elements in the Web. For more information on hiding elements in the Web, please search previous articles on downcodes.com or continue to browse the related articles below. I hope Please support downcodes.com more in the future!