Squarespace, Wix, & Weebly: Accessibility Review

While watching the Kansas City Chiefs win Super Bowl LIV last night, one of the most effective commercials for me was the one from Squarespace, featuring Winona Ryder sitting roadside in the snow with her laptop. A local law enforcement officer shows up and they have an exchange that’s reminiscent of Fargo. The commercial isn’t hilarious or outrageous like some of the other commercials, but it’s kind of cute, and it sparked my interest. It’s actually the only Super Bowl commercial that inspired me to take action: I reached for my phone and went straight to the website Winona had created using Squarespace, WelcomeToWinona.com.

cebeci escort

In case you missed the ad, here it is, hosted on YouTube but played within the Able Player WordPress plugin.

Since I visited Winona’s site, I now am seeing ads everywhere for Squarespace, as well as for Wix and Weebly. Clearly The Universe thinks I want a website. I don’t, but I am curious to know whether these easy-to-use website authoring tools are capable of creating accessible websites. So I created an account on each service, and got started creating some simple websites. Here’s what I found…

ankara escort bayan

Squarespace

The home page at squarespace.com welcomes me with a prominent “Get Started” link. When I click on that, I’m offered a number of templates as a starting point for building my site, even before I provide my contact information. I chose “Bailard” since it’s the first choice. The templates are actually fully developed sites, with headings, images, and text. All I have to do now is edit what’s already there.

Headings

By default, my site has a prominent main heading, appropriately tagged as an <h1> element.

After that, the heading structure is not so good. Headings should form an outline of the page, and should not skip levels. My site’s home page includes sections of content with subheadings above each. These should be tagged as <h2>, but they’re actually <h4>. There are also a couple of large blocks of text that functionally aren’t headings at all, but they’re coded as <h3> elements.

When I edit the page, I can change any of these headings, so I can actually correct them if I know what I’m doing, but most users don’t know about such things so the templates should be accessible out of the box. Also, although the floating rich text toolbar includes a dropdown field for selecting heading level, the choices reinforce the notion that headings are all about size, not structure. Options are “Extra Large Heading”, “Large Heading”, “Medium Heading”, etc.

çayyolu escort

The accessibility documentation does say to “Use structured headings and a linear format.” However, this isn’t practiced in their own templates, and they don’t explain how to do that using the tools they’ve provided.

Landmark Regions

The template I selected has a banner at the top of each page with the site title and logo, a navigation menu, main content, and a footer. This is all coded appropriately using HTML5 semantic elements: <header>, <main>, <nav> and <footer> respectively.

Images

A big selling point of each of these tools is that they make it possible to create visually beautiful websites. Even in the Squarespace commercial, Winona Ryder tells the officer “It’s got pictures on it” and the officer replies “I like pictures”.

The template I selected has beautiful photographs of nature scenes, but I can replace those with my own images. There’s also an image editor that allows me to adjust the brightness, contrast, saturation, shadows, etc., using a set of sliders. I can also crop the image or apply any of several filters.

The Image dialog also provide a means of adding or changing the alt text. However, the label for that field is “Filename (Optional)”. The field is pre-populated with the file name, which was “20140302_Trade+151_0503.jpg” for the image I had selected. I changed that to “A group of people hiking through a lush marshy landscape” and sure enough, the alt attribute on my image changed to my more meaningful description.

So, like with headings, accessibility is possible but only if the author knows what they’re doing. I checked a few images on Winona Ryder’s website. She seems like a nice person and I’m sure if she knew about the importance of adding alt text to images she would do so, but unfortunately she doesn’t seem to be in the know; her images all have filenames for alt text.

Squarespace’s accessibility documentation for Adding alt text to images is actually pretty extensive, and even includes a captioned video explaining how to do it. Apparently what I’ve described above is one of several methods. Methods vary depending on whether an image is an image block, a gallery page image, a gallery block image, a product image, etc. There are at least eight different types of images, some of which have an optional caption that can be repurposed as alt text. It gets pretty complicated, and I suspect many authors will get lost if they try to figure it out.

Video

Video can be added to Squarespace pages, but it needs to be hosted elsewhere (YouTube, Vimeo, Animoto, or Wistia). Each of these supported video hosting services also supports captions, and the captions are accessible via the embedded media player in Squarespace pages.

Navigation Menu

The default menu in my template includes submenus that appear when mouse users hover over a menu item. The submenus are technically keyboard accessible, but they don’t conform to the W3C’s recommended design pattern for a menu. When a user tabs to a top-level menu item, the submenu automatically appears and focus moves to the first item in the submenu. The only way to navigate the submenu is with Tab and Shift+Tab. Arrow keys should work for that purpose, but don’t. And Escape key should close the submenu, but it doesn’t.

Also, there’s no ARIA markup to help screen reader users understand what’s happening with the menu. I would expect an interface that has popups to include some combination of aria-haspopup, aria-expanded, and aria-controls, but none of these are present.

Forms

Squarespace has templates for setting up e-commerce sites. I glanced at these but couldn’t get very far with setting these up without actually having something to sell and getting setup to accept payments. The one form field in my site template prompts users for an email address to sign up to receive news and updates. This is an <input> field that has a <label> element explicitly associated with it, which is great. However, the label is visibly hidden with display:none, which hides it from everyone, including screen reader users. It also includes a placeholder attribute, which is displayed visibly until the user starts typing. Screen readers do announce the placeholder text when the form field first receives focus, but it’s not a substitute for a label because it disappears after the users begins typing. Don’t hide labels using display:none; there are better ways to visibly hide content without hiding it from screen reader users.

Accessibility Documentation

Squarespace has a section within its support site called Making your Squarespace site more accessible. It begins “Accessible websites are parsable…” — I love that! It’s like “possible” with a southern accent.

I already mentioned the extremely detailed help page on how to add alt text to images. Overall, the accessibility documentation is not bad. According to the thumbs up/down widget at the bottom of the home page, 133 out of 158 users found it helpful.

Wix

When I create an account on Wix, I’m prompted with the question “Have you created a website before?” Options are “This is my first time”, “I’ve created a few”, “I’ve created many”, and “I build sites professionally”. I chose “This is my first time”. I suspect this may influence how much info they choose to provide about technical matters, including accessibility.

Like Squarespace, Wix presents me with a set of website templates. I choose “Consultant” because it features a hero image of a man (a consultant?) standing on a snowy mountain top holding an ice axe and admiring the expansive view.

Headings

Like Squarespace, a popup rich text editor enables me to choose the heading level of selected text. Unlike Squarespace, it identifies the various levels as “Heading 1”, “Heading 2”, etc., so I’m not led to believe that headings are all about font size. In fact, font size is controlled separately within the same popup.

Unfortunately, the main heading in my theme, despite being presented as huge text, uses “Heading 3” rather than “Heading 1”.

After that initial “Heading 3”, the first level of sub-headings on my site are tagged as “Heading 5”.

Landmark Regions

Like Squarespace, Wix uses HTML5 semantic elements well. My site includes a header, navigation menu, main content, and footer, and each of these is coded with the appropriate HTML element. The <nav> element for the menu include aria-label=”Site”, which suggests that somebody at Wix knows something about accessibility.

Images

Images can be edited by clicking a “Settings” button which opens an “Image Settings” dialog. This includes an alt text field, labeled “What’s in the image? Tell Google.” While this makes me chuckle, it’s much better than “Filename (Optional)”, and is arguably easier for most novice web builders to understand than trying to explain screen readers.

Also, the images that come with the templates have alt text pre-populated, and it’s not bad, though not great either. Examples include “Office Conversation”, “Office Meeting”, “Data Reviewing”, and “Team Members”.

If I upload my own images, the default alt text is (doh!) the file name.

Video

Vix, like Squarespace, allows me to add video that’s hosted elsewhere, but unlike Squarespace, it also allows me to upload videos directly to the site (maximum 15GB per video with my free account). This comes with an extensive set of features, including ability to add “Action Cards”, which are clickable popups that appear within specified start and stop times. Unfortunately, there appears to be no support for uploading captions or subtitles.

Navigation Menus

I switched my site to a new template in Wix (I’ll explain why in a moment) and both of the templates I tested had a flat navigation menu, with no submenu items. However, it’s possible to create submenus, in which case the menu is similar to one in Squarespace. Users can tab into the submenu, but using arrow keys or escape do nothing. The Wix menu has aria-haspopup=”true”, which was not the case in Squarespace. However, the Wix menu also has a bug that prevents the submenu from remaining open for screen reader users. Testing with JAWS 2020 in both Chrome and Firefox, I was informed that the link had a popup menu, but when I clicked the link I was not informed that a submenu had appeared, and before I could go looking for it, the submenu had closed (it was only open for a second).

Forms

Everything I said about forms in Squarespace is true in Wix:

1. I didn’t test an e-commerce site.
2. My site had a simple “Contact Us” form
3. All fields have labels properly associated with the form field
4. One of the fields has a visibly hidden label, hidden using display:none, therefore ignored by all screen readers. It also has a placeholder attribute, which is ok but not ideal, as explained above for Squarespace.

Bonus Feature: Accessibility Manager

In the “Settings” menu, there’s an “Accessibility” option. Selecting that displays an “Accessibility Manager” dialog, which enables users to “Enable Visual Indicators”, “Automatically Order DOM”, and “Turn On Advanced Settings”.

The first two of these three options are on by default in my theme. The third option, if enabled, will “Add aria-label, tabindex, and other attributes to elements on your site”. I compare my site’s source code before and after enabling this feature, and interestingly, there are actually more aria-label attributes if “advanced accessibility” is off (18) then if it’s on (14). I don’t do a deep dive to try to figure out which of the four aria-label attributes were removed for better accessibility.

The dialog also includes a link to “Follow these steps” if you “want to make your website accessible”. I follow the link, and a dialog pops up that explains what accessibility is all about, and includes an accessibility checklist. Significantly, I learn from this dialog that accessibility in Wix starts with choosing an accessible template. It lists 9 templates, and “Consultant” isn’t one of them. It would have been nice to have been informed of that earlier, when I chose my initial template. I start over to see if I had overlooked this information, but I see no mention of accessibility anywhere in the opening interview.

Now that I have more knowledge about which templates are accessible, I switch to the most interesting-sounding of the nine accessible ones, a template called “Jazz Musician”.

I’m honestly not sure what makes the Jazz Musician template more accessible than the Consultant template. Maybe the color contrast is better. And overall the heading structure is better, but not perfect (e.g., the main site heading is an <h1> element, but the sub-text beneath that is an <h6> element and shouldn’t be a heading at all).

Since this a site for musicians, it includes its own media player and is pre-populated with a playlist of kick ass blues-rock tunes with killer guitar solos. It ain’t jazz by anyone’s definition, but I’m not complaining. Also, the media player ain’t Able Player, but it’s pretty accessible. All the buttons are labeled and it’s easy to use with a screen reader (I tested it with JAWS in Chrome).

Accessibility Documentation

Like Squarespace, Wix has documentation that explains how to Make Your Site Accessible, which includes four main points:

1. Turn on Accessible Capabilities
2. Add Alt Text
3. Check Your Heading Tags
4. Explore These Stunning Templates with Accessibility Built-in

It also includes a captioned video that does an outstanding job of explaining accessibility and demonstrating how to check and change heading levels, alt text, and color contrast.

Weebly

Weebly is a tool from Square, Inc., which is not affiliated with Squarespace, just similarly named. Like the other tools, creating an account begins with selecting a theme. The next step though is unique: You have to select a domain name. Registering your domain name is free for the first year, but you have to setup an account and provide payment information in order to publish your site. I was able to skip this step to edit my site, but I couldn’t publish my site so I wasn’t able to examine the output.

From what I saw though, I wasn’t impressed.

Headings

Unlike the other tools, there appears to be no way to assign a heading level to text. It simply isn’t an option in the floating rich text editor toolbar.

Images

After uploading images, there are a variety of options for manipulating the image. I can even add a text overlay that appears on top of the image. But there is no option to add alt text.

Example Sites

Given my inability to publish a test site, I went looking for example Weebly sites. I found an article on Design Bombs titled 15+ Best Examples of Websites Built With Weebly. It’s hot off the press — published just a couple of weeks ago, on January 17 — so I’m surprised to find that three of the four top sites no longer exist. That suggests to me that something must be amiss in Weebly Land.

I was able to checkout the fifth site in the list, a musician named Japhlet Bire Attias, at japhletba.com. He plays a 10-string Chapman Stick, a really cool guitar that’s capable of producing amazing sounds if played well, and Japhlet plays it well! I’m totally a fan now. And I don’t hold him responsible for any of Weebly’s accessibility shortcomings.

His site does have headings: There’s no <h1> heading, but there are <h2> and <h3> headings, so he must have used a template that had some HTML structure built in. The heading elements have nested <font> tags to control size, which is a little troubling since <font> has been obsolete from the HTML spec for decades (deprecated in HTML 4.0, back in 1998).

All images on the site have alt=”Picture”, which apparently is the Weebly default. To confirm this, I went back to the 15+ article and found a couple of other Weebly sites that are still up. It’s true: All their images have alt=”Picture”.

Videos

Weebly supports video, but not with the free plan so I couldn’t test it.

Navigation Menus

I didn’t bother.

Accessibility Documentation

Weebly Support has a page on Web Accessibility, which has four sections:

• Images and Media
• What is Web Accessibility?
• What is Accessibility?
• Text, Links, and Pages

The second and third items have virtually the same content, quoting the Wikipedia definition of Web Accessibility. The first item (about Images and Media) is the most informative of the four, and ironically offers several tips on how to write good alt text. It claims I can add alt text to images in Weebly by clicking the “Advanced” option within the image editor. However, after reading this I went back to the Image Editor and looked everywhere for an “Advanced” option, with no success.

Conclusion

Each of these three tools creates visually pleasing, professional-looking websites and seems to be easy for novices to use, which is what they’re all about. For accessibility, avoid Weebly. Both Squarespace and Wix are capable of creating accessible sites, but the user has to be looking to do so—it isn’t gonna happen by default. Wix seems to be taking accessibility a bit more seriously than Squarespace, so I’m inclined to recommend Wix as the better option (sorry, Winona).

Note that all three tools include many additional features beyond what are provided in the default templates. I didn’t get into those here, and I suspect the more interactive a feature is, the more likely it is to introduce accessibility barriers. Also, I didn’t get into accessibility of the authoring interface. I suspect if a tool isn’t going to work for you, you’ll discover that pretty quickly in the process of setting up a site.

Finally, congratulations to the Kansas City Chiefs! I spent many years as a Chiefs fan while living in Kansas, and I’m excited that they finally won the big one.

windows 10 pro satın al