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

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!

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 👇