Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

how to change blog title from H1 to H2 in masonry page


kennedyc

Question

Site URL: https://www.futureparks.org/blogs

hi folks,

Had a complaint from a client that having multiple H1's in a single page is not good practice for accessibility - they're right and usually most organisations aren't too bothered.....until now. Legislation in UK is changing on 20th Sept where public organisations and public facing charities are mandated to reach WCAG AA and as much of AAA as does not place an 'ureasonable burden' on the organisation.

So on the blog index page masonry /blog, each title on each blog card is an H1 - how can I change to H2? I've had a poke around Design-->Fonts--> Advanced etc but can't find anything specific - so I guess custom css to change a class? - <h1 class="blog-title"?  I'm still learning the CSS for Squarespace and that's a bit beyond me at the moment and I have the client breathing down my neck!

Any help would be gratefully received!

Thanks, community ūüôā

 

Edited by kennedyc
Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

Hi.

Which plan do you use? If you use Business Plan or higher, let me know. We can check carefully.

And what is access password?

Edited by tuanphan

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

Hey @kennedyc,

Still looking for help with this?

It's worth noting that having multiple H1 elements isn't actually a WCAG failure, although as you've noted, it's a common accessibility practice to limit it to one per page.

You can use the following jQuery to add ARIA attributes and redefine heading levels. This won't change the tag itself, but overrides the semantics that are presented to screen reader users. Try adding this to your header injection within Settings > Advanced > Code Injection:

<!-- If you don't already have jQuery installed, add it here first. -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<script>
  //This code runs when the DOM is ready.
  $(document).ready(function(){

    //This code adds an aria-level value to the h1 blog title.
    //The aria-level tells screen readers to treat this element like an h2.
    $(".blog-basic-grid h1.blog-title").attr("aria-level", "2");

  });
</script>

 

With this expected result:

image.thumb.png.aa0a3457096dc277b3bb0c069bdde528.png

 

We helped several of our UK clients become compliant before last month's legislation deadline, so feel free to DM me here or email us if you need any further assistance!

Hope this helps!
-Tyler

Edited by tcp13

Is your Squarespace website ADA compliant? Find out in 60 seconds with our free accessibility audit!

Link to post

Create an account or sign in to comment

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


√ó
√ó
  • Create New...