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

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 🙂

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?

Thanks! Its on the business plan - the site is https://oval-onion-yrpm.squarespace.com/  - pw FUTURE_PARKS_2020

The problem is on the blog and news collection pages, where each item title has an  H1 tag whereas they should really be H2  

Thanks for you help 🙂

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:

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

thank you! I'll give this a try

Did anybody try this?

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?

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

This is link :https://www.professionevirtualassistant.com/directory-va-qualificata

https://www.professionevirtualassistant.com/blog

Thanks
 

23 hours ago, PaolaAV said:

This is link :https://www.professionevirtualassistant.com/directory-va-qualificata

https://www.professionevirtualassistant.com/blog

Thanks
 

You can use above code but remove this red code