The Redesigned Interface

Overview

These redesigned interface screens aim to add accessible design integrations into Squarespace’s content management platform.

Squarespace is a website builder that allows anyone, regardless of their skill sets, to create a website. However, as someone who has used Squarespace on multiple occasions and has tested both their older and more recently updated interfaces, I have noticed that they are severely lacking in accessible design options.

For this exhibit, I identified three areas that could be easily remediated using better descriptive language, pre-existing accessibility checking tools, and prompts to help inform the person using it about accessibility guidelines. I have also developed a new section of the interface for accessibility scanning that would run before a person is able to publish their website.

These tools are designed to be easy to use and integrate seamlessly into the website design process. The designs in this exhibit may be specific to Squarespace, but the concept behind them could be applied to any CMS platform.

How to Use

To interact with the following interfaces, drag the slider (the blue line with two arrows in the middle) left or right to see the current interface on the left and the redesigned interface on the right. Clicking the arrow button in the top right corner of each image will make them fullscreen so you can see them in a larger format.

Redesigned Colour Theme Interface

The Squarespace colour theme editor allows the content creator to create custom themes based on background colour and text colour ranging from light to dark options. If you pull the slider to the left, you will see that the redesigned interface allows the creator to develop palettes based on text colour and background colour with a colour contrast checker that checks for WCAG 2.1 AA compliance. This will ensure there is enough contrast between the text and the background for a better reading experience. An alert will appear if one of the themes does not have a strong enough contrast that explains what contrast ratio is required to save. The save button will be inactive until all themes meet the minimum contrast ratio.

Redesigned Image Upload Interface

Squarespace currently has no section in the image editor called alt text. The field is labelled as file name, has no description, and the example is just a file name with .jpg at the end which is confusing and misleading. In my redesign, people now have a well-defined area to add alt text with a description, clear example, and the ability to learn more about alt text when clicking the ? icon. If an image does not contribute essential information for this page, it can now be labelled as decorative and a screen reader will be able to skip past it. The interface ensures that all uploaded images are accessible by showing an error message if the person tries to save their changes without using one of the fields.

Redesigned Colour Palette Interface

The current Squarespace colour palette shows the three main colours used in the themes. There is not much else displayed on this page and does not have a lot of use outside of that one function. The redesigned colour palette interface now has a new section that shows how this palette may look for people with varying types or degrees of colour blindness. This area will also alert a person if colours are too similar in each one of the areas and will mark which ones cannot be next to one another.

New Accessibility Compliance Scanner Interface

The new accessibility compliance scanner interface would be able to be accessed at any point during the build process and is recommended to be used periodically instead of just at the end. When a person is ready to publish their website, they will now be automatically taken to this screen.

The publish button will be locked until a scan has been run. After the scan is complete, any errors found will be listed in the left sidebar with descriptions of each issue. The errors that appear will automatically be highlighted on the right side when selected from the list and an explanation appears for how to resolve the issue using easy-to-follow language. There will also be a link in the description to take the person to the design interface required to make the correction. Once the scan detects no errors, the person may publish their website.

How to Use

To use the interactive image. Click on the purple i icons to open a description box. If you would like to preview the image in a larger format, click the icon with the arrows in the top right corner.

Thank You

I hope you enjoyed exploring the redesigned interfaces and have possibly reflected on how accessible your own web content is. If you have a moment, please fill out the feedback form below. Your participation is completely voluntary! Please note that your responses will help me to understand the effectiveness of my virtual exhibit and will not be used for any other purposes. Thank you for reading!