Front-end: The easiest way to integrate an accessibility zoon in/out to your project

I always thought, “Wow! The client wants to add zoom in/out accessibility.” It’s tricky when the client decides to introduce this feature after the project has started, because the zoom feature requires adjustments to spaces, media queries, and various elements like span, p, and li… But not anymore since I arrived at this solution. Let’s take a look at the image below to see how it will work.

First, include the HTML structure, with the button, the icon library that is convenient according to your mockup (in my case, I used Feather Library) and also JQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoom In Button</title>
    
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <!-- Include Feather Icons CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
</head>
<body>
    <!-- Your content goes here -->

    <!-- Zoom In Button -->
    <button id="zoomInBtn" class="btn" data-feather="zoom-in"></button>

    <!-- Your content goes here -->

    <!-- Include Feather Icons Script -->
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

    <!-- Your custom script goes here -->
</body>
</html>

Now, the function code. To ensure icon replacement, you need to use the following replaceFeatherIcon function, for feather icons.

// Zoom
const body = $('body');
const btnZoom = $(".btn-zoom");
let zoomLevel = 100;

btnZoom.on("click", function () {
  if (zoomLevel < 101) {
    zoomLevel = zoomLevel + 20;
    body.css("zoom", `${zoomLevel}%`);
    replaceFeatherIcon('zoom-out');
  } else {
    zoomLevel = 100;
    body.css("zoom", `${zoomLevel}%`);
    replaceFeatherIcon('zoom-in');
  }
});

function replaceFeatherIcon(iconName) {
  // Remove the existing icon
  const btnZoonIcon = $("#zoomBtn");
  btnZoonIcon.replaceWith(feather.icons[iconName].toSvg());

  // Refresh Feather Icons
  feather.replace();
}

Trending now