AaronRolston Posted September 16, 2020 Share Posted September 16, 2020 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
tcp13 Posted October 11, 2020 Share Posted October 11, 2020 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 👇 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.