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 11
  • Views 3.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 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

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 5/7/2024 at 3:29 AM, sadieellis said:

I've tried using this code and it doesn't seem to be working for me - can anyone help please?

website url: https://thelittlegreenfootprint.com/news

Add this line above your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.