Jump to content

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

Recommended Posts

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 comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

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

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
  • 3 weeks later...
  • 11 months later...
  • 1 year later...
On 1/26/2023 at 4:17 AM, PaolaAV said:

i have the same problem in the blog page.  My SEO consultant told me that I have to change the titles to h2 because with an SEO analysis tool there are many h1 titles and it's not good for SEO.  I use Fluid engine.  Is the script still valid?

Can you share link to blog page? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
23 hours ago, PaolaAV said:

You can use above code but remove this red code

image.thumb.png.41f91627a5b6bd3210b90b835997acd9.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.