Jump to content

font resizer buttons for accessibility on government website - any way to do this within Squarespace?

Recommended Posts

Hey, team! 

I'm trying to implement a font resizer for a government website. This is all about accessibility and improving the experience for a broad range of folks. Of course, I know that it's up to us as designers to ensure that fonts are effective for all, but our client would like to see if we can implement this.

I've borrowed code from somebody who just put together a cool tutorial that makes this work within their small demo. I'd like to see if I can use this or make this work for the site I'm developing across all h3 and p classes.

Here's the reference site:  https://www.geeksforgeeks.org/allow-users-to-change-font-size-of-a-webpage-using-javascript/

And here's the code that I've played with that's presently limited to only the small container in my code.

Any suggestions about how to make this work across the site for all p and h3 classes?

<!DOCTYPE html>
<html>

<body>
    <div style="text-align:center">
        <button type="button" name="btn1"
            onclick="changeSizeByBtn('1rem')">-A</button>
        <button type="button" name="btn2"
            onclick="changeSizeByBtn('1.2rem')">A</button>
        <button type="button" name="btn3"
            onclick="changeSizeByBtn('1.4rem')">A+</button>
        <br /><br />
      
        <input type="range" min="1" max="3" id="slider" value="1"
            onchange="changeSizeBySlider()" />
    </div>
    <script src="script.js"></script>

          <div style="padding: 20px; margin: 50px;
            font-size: 1rem; border: 5px solid green;" id="container" class="container">

            <p>
                A Computer Science portal for geeks.
                It contains well written, well thought
                and well explained computer ming science
                and programarticles,quizzes and practice/
                competitive programming/company interview
                questions.
            </p>
        </div>
</body>

</html>
  
<script>
  let cont = document.getElementById("container");
  
  function changeSizeByBtn(size) {
    // Set value of the parameter as fontSize
    cont.style.fontSize = size;
  }
  
  function changeSizeBySlider() {
    let slider = document.getElementById("slider");
    // Set slider value as fontSize
    cont.style.fontSize = slider.value + "rem";
  }
  
  </script>

 

Link to comment
  • Replies 2
  • Views 705
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

22 hours ago, lottydotty said:

Hey, team! 

I'm trying to implement a font resizer for a government website. This is all about accessibility and improving the experience for a broad range of folks. Of course, I know that it's up to us as designers to ensure that fonts are effective for all, but our client would like to see if we can implement this.

I've borrowed code from somebody who just put together a cool tutorial that makes this work within their small demo. I'd like to see if I can use this or make this work for the site I'm developing across all h3 and p classes.

Here's the reference site:  https://www.geeksforgeeks.org/allow-users-to-change-font-size-of-a-webpage-using-javascript/

And here's the code that I've played with that's presently limited to only the small container in my code.

Any suggestions about how to make this work across the site for all p and h3 classes?

<!DOCTYPE html>
<html>

<body>
    <div style="text-align:center">
        <button type="button" name="btn1"
            onclick="changeSizeByBtn('1rem')">-A</button>
        <button type="button" name="btn2"
            onclick="changeSizeByBtn('1.2rem')">A</button>
        <button type="button" name="btn3"
            onclick="changeSizeByBtn('1.4rem')">A+</button>
        <br /><br />
      
        <input type="range" min="1" max="3" id="slider" value="1"
            onchange="changeSizeBySlider()" />
    </div>
    <script src="script.js"></script>

          <div style="padding: 20px; margin: 50px;
            font-size: 1rem; border: 5px solid green;" id="container" class="container">

            <p>
                A Computer Science portal for geeks.
                It contains well written, well thought
                and well explained computer ming science
                and programarticles,quizzes and practice/
                competitive programming/company interview
                questions.
            </p>
        </div>
</body>

</html>
  
<script>
  let cont = document.getElementById("container");
  
  function changeSizeByBtn(size) {
    // Set value of the parameter as fontSize
    cont.style.fontSize = size;
  }
  
  function changeSizeBySlider() {
    let slider = document.getElementById("slider");
    // Set slider value as fontSize
    cont.style.fontSize = slider.value + "rem";
  }
  
  </script>

 

Can you share your URL site after setting this feature so I can check it?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

By the way, after changing the size, clients go back to your site and they need to resize text again ? Or do you want to keep the last setting of clients?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.