Jump to content

Multiple Paragraph Tags and Accessibility — What Are P1 & P3?

Recommended Posts

Site URL: https://chroma.agency

So, I'm digging into Accessibility and learning about how to properly structure font headings and paragraphs — however, I quickly realized that most articles and even regulations have no mention of multiple <p> tags on a site... so where do the .sqsrte-large (P1) & .sqsrte-small (P3) tags fall in the scheme of things?

I've always used them pretty liberally, as having more styles to work with is usually helpful. But, I certainly don't want to use them if they're negatively affecting accessibility or site crawling by search engines. Any help would be much appreciated. Cheers!

Link to comment
  • 4 weeks later...
  • Replies 1
  • Views 1.3k
  • Created
  • Last Reply

Hey @AaronRolston,

Blind and low vision people typically use a screen reader to audibly announce the contents of a webpage. As you've mentioned, heading structure is important for screen reader users, because they can quickly navigate by jumping around to different heading levels.

The best practice for headings is to "nest" your content. For example, the following would be easily navigable with a screen reader using keyboard commands to "read all the H2 elements on this page" or "jump to the next H3 element."

  • H1: Produce
    • H2: Fruit
      • H3: Strawberries
      • H3: Apples
      • H3: Bananas
    • H2: Veggies
      • H3: Cucumbers
      • H3: Carrots
      • H3: Celery

Anything other than nested content can be very disorienting when using a screen reader. Within Squarespace, headings are commonly misused for aesthetics rather than semantic purposes. One of the most common issues is skipping heading levels, such as from an H1 to an H3.

But to your question, paragraph ("p") elements are not announced as such to screen readers - they're just simply read out. You mentioned ".sqsrte-large" and ".sqsrte-small," which are classes used to visually style the size of paragraphs for us as sighted users. The only thing presented to screen readers is the tag itself ("p"), which isn't impacted by the style classes.

Hope this helps!

P.S. - you can quickly check your site for heading levels and other semantic markup issues using our free audit tool linked my signature below 👇

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


This topic is now archived and is closed to further replies.

  • 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.