JS Junction

Examples

JS Toggle Visibility

Toggling Element Visibility

JavaScript toggle visibility uses aria-hidden for accessibility.

Introduction to Toggle Visibility in JavaScript

The ability to toggle the visibility of HTML elements dynamically is a powerful feature in web development. This mechanism allows developers to create interactive and user-friendly interfaces. In this tutorial, we will explore how to use JavaScript to toggle visibility, focusing on the use of the aria-hidden attribute to ensure accessibility.

Understanding aria-hidden

The aria-hidden attribute is used to indicate whether an element is visible or hidden to screen readers. It is a crucial part of developing accessible web applications. When an element is not meant to be read by screen readers, setting aria-hidden="true" hides it from assistive technologies.

Basic Toggle Visibility Example

Let's look at a simple example where we toggle the visibility of a text paragraph using JavaScript. We will also update the aria-hidden attribute accordingly to maintain accessibility.

Step-by-Step Explanation

  • HTML Structure: We have a button and a paragraph. The paragraph is initially visible and has aria-hidden="false".
  • CSS: A simple .hidden class is created to hide the paragraph using display: none;.
  • JavaScript: An event listener is added to the button. Upon clicking, the hidden class is toggled on the paragraph, and the aria-hidden attribute is updated based on the paragraph's visibility.

Best Practices for Accessibility

When implementing visibility toggles, always ensure that the changes in visibility are communicated to assistive technologies. This includes updating attributes like aria-hidden. Additionally, ensure that focus management is considered, so that users navigating via keyboard or screen readers are not lost in the interface.

Examples