We all know that the basic structure of any website is created using HTML, and the design and layout are managed through CSS. But what about making the site an interactive and engaging experience for users?

Some interactions are native to HTML, such as clicking on an anchor element that redirects the user to another webpage, an email address, a specific ID on the page, or any other behavior that a URL can handle.

Other interactions may require the assistance of JavaScript. You can add event listeners to the elements on the page that you want to “listen” for user actions.

One of the most common events is the “click” event. Enabling an element to listen for a click event is as simple as selecting that element as a variable, adding the event listener, and using it to trigger a function.

javascriptCopy code

myElement.addEventListener('click', myFunction);

function myFunction() {
    // Perform awesome tasks here;
}

For a comprehensive list of events, you can refer to this MDN Events Reference.

Now that we can create interactions, it’s important to consider how and when to implement them. One thing that is often overlooked is user experience and accessibility. Should we really attach a click event to a div or span? While it may achieve our intended goal, keyboard users may not be able to navigate to these elements.

We might attempt to make the span look like a button, but hover events won’t provide the expected cursor change. Yes, we could address this with CSS, but this already seems like a less-than-ideal solution. Alternatively, we could add an ARIA attribute for screen readers to convey that this span has the role of a button. At this point, it would have been simpler to start with an HTML button or anchor. Keep in mind that anchors are typically used to navigate users to specific locations, while buttons are meant for actions like submitting forms or triggering behaviors on the page (e.g., toggling light/dark mode or expanding/collapsing content).

Another often-overlooked event that contributes to user experience and accessibility is the “focus” event. While using proper HTML enables users to navigate content easily, it’s also important to indicate the active element with the outline provided by default focus styles. However, what if we click a button that opens a modal? The modal may not exist in the DOM until after the click, so the active element may not be immediately apparent when users see the modal content.

This presents an opportunity to use JavaScript to enhance the user experience. Once the modal opens, we can select the first focusable element (e.g., a close button) and give it focus using myBtn.focus().

But there’s more to consider! After tabbing through all the modal elements, focus may leave the modal and move to an element that’s not visible. Depending on the desired user experience, you might want to “trap” the user inside the modal until they intentionally close it. For mouse users, you can add an event listener outside of the modal:

javascriptCopy code

myElement.addEventListener('click', handleCloseModal);

function handleCloseModal() {
    // Hide or close the modal (e.g., set to display: none)
}

For keyboard users, you can keep them inside the modal until they press Enter or Return on the close button. In this case, you can create an array of all clickable items within the modal and listen for when the last element in that array receives focus. Then, you can return focus to the first element in the array to prevent it from escaping the modal.

One last consideration for accessibility is returning focus to the element that triggered the modal to open. You can achieve this by declaring a variable to hold the active element:

javascriptCopy code

let activeElement;

// When the triggering element is clicked, set the activeElement value:
activeElement = document.activeElement;// After closing the modal, use activeElement to return focus to the trigger:
activeElement.focus();

Sometimes it’s easy to get carried away with using JavaScript for its own sake. However, with thoughtful planning, we can leverage JavaScript to provide users with a superior experience and enhance accessibility.

Post originally published on Medium by Billy Chorey

Author: Billy Chorey