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

Top Posters In This Topic

Top Posters In This Topic

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!
-Tyler

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 👇

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

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.