Squarespace theme limitations

[xtine]

While Squarespace is great at getting up a customizable website with minimal upkeep, there are limitations to using the platform.

HTML editing
When we use an established theme, we are severely limited in customizing the underlying HTML. While it is possible to edit HTML using developer mode, we would have to give up features of the current theme we are using.

CSS editing
We have no control of the default CSS in the theme. It is possible to add custom CSS, but it actually runs before the main stylesheet and we can come into issues of hierarchy where we are not sure which style runs before another.

JavaScript behavior
While it is possible to edit HTML behavior using JS code injection, it would not be good practice to have multiple tweaks hidden layers deep within the Squarespace editor that may not be obvious to others editing the site.

Where while it is possible to run custom JavaScript after page load via code injection, there may be custom Squarespace JavaScript that will always run after code injection.

Here is a list of current accessibility issues that are blocked by using an off the shelf theme as well as code injection issues:

• Line length
  • The theme sets the text width in a hero section, only possible to tweak using JS code injection which is not recommended.
• Tab focus
  • The theme's CSS and HTML is limited, so it becomes difficult to know how we would need to override the CSS and HTML (via JS code injection) to get tab focus to work correctly.
• Social media icon aria labels
  • Because we cannot edit the HTML of the social media links in the footer, it is technically possible to inject the labels via JavaScript. However because we are using the Squarespace SVG generated icons, that particular node in the DOM is edited last, which limits our ability to correctly set the label after page body load.
• Redundant links for blogs
  • On the blog page, the image and link both link to the same destination. To avoid confusion we should only have the title link to the post. However because the theme sets the HTML to link both image and title, we cannot edit this behavior unless we use JS code injection to modify the DOM to remove the blog image links.