If you’re looking to launch an improved website in 2022, now’s the time to investigate platform options and find the right website builder for your organization, without sacrificing accessibility, and the market growth and content engagement benefits that come with a more accessible website.

Our comparison

We looked at each of the major website builders along with other popular website and content management platforms to compare them across a range of accessibility factors needed for meeting standards like WCAG 2.X, and ranked them against each other to see which ones made it the easiest to build an accessible website effectively.

Accessibility scoring legend

• 
  does not support most accessibility considerations
• 
  supports some accessibility considerations
• 
  accessibility considerations can be met, but it will take work
• 
  almost out-of-the-box accessibility

Squarespace accessibility

Squarespace requires a moderate degree of custom code, depending on the template.

• Headings Yes


• Landmarks Partial


• Skip navigation Yes


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Partial


• Alt tags Yes

Wix accessibility

Wix requires custom code and some setting changes.

• Headings Yes


• Landmarks Yes


• Skip navigation Yes


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Partial


• Alt tags Yes

GoDaddy accessibility

GoDaddy’s template maker does not provide accessibility settings and does not allow for custom code.

• Headings Yes


• Landmarks Yes


• Skip navigation No


• Tab index Partial


• Visible focus ring Yes


• ARIA labels No


• Alt tags Yes

EditorX accessibility

Accessibility is not fully possible within the current EditorX system.

• Headings Yes


• Landmarks Partial


• Skip navigation No


• Tab index Partial


• Visible focus ring Yes


• ARIA labels No


• Alt tags Yes

Weebly accessibility

Weebly requires a high degree of custom code.

• Headings Partial


• Landmarks Custom


• Skip navigation Custom


• Tab index Partial


• Visible focus ring Yes


• ARIA labels Custom


• Alt tags Yes

Webflow accessibility

Implementation with Webflow is straightforward, but requires some code knowledge.

• Headings Yes


• Landmarks Yes


• Skip navigation Custom


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Yes


• Alt tags Yes

WordPress accessibility

Wordpress requires extensive custom code, but all of the required items for accessibility are possible.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

Drupal accessibility

Like WordPress, Drupal requires extensive custom code, but all of the required items for accessibility are possible.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

Joomla accessibility

Like WordPress/Drupal, Joomla requires extensive custom code, but all of the required items for accessibility are possible.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

Headless CMS accessibility

A Headless CMS requires extensive custom code, but all of the required items for accessibility are possible and the system is easier to use for advanced accessibility items.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

The winners

Squarespace for business owners

Squarespace is the most out-of-the-box accessibility-ready platform, and unlike competitors, does not require a lot of extra work on the part of someone setting up a site to enable accessibility features. These factors make it a great fit for business owners who want to get started with an accessible website without as much design or development time required.

Webflow for designers

Webflow is the best we tested out of all no-code website builders, with ease of use, built-in accessibility features, and customizability all at your disposal when creating a more accessible website.

Headless CMS for developers

A headless CMS such as Contentful, Ghost, Netlify, Sanity, Storyblok, or Strapi is an excellent choice in cases where you are working with a capable developer. A headless CMS offers advanced customizability for any and all accessibility needs, and is a blank slate full of possibilities for usability, design, and accessibility across your website.

An as-is template isn’t necessarily enough to be accessible

Although several of these platforms have taken the time to enhance their platforms’ accessibility, it’s typically more complicated to ensure your site is compliant when using one of these platforms.

For example, to make content on your site accessible, you’ll want to make sure that you have features like a skip navigation link, landmarks on the page for screen readers, and appropriate ARIA labels when needed.

Some of these features are not available on these platforms. When they are available, it may take some manual work to set them up, and your development team may not have all the answers.

If you need help navigating these standards in order to deliver an accessible website that opens up access to market and improves content engagement for all of your customers, get in touch.

Our accessibility-focused approach

By focusing on making your site accessible across content, design, and development requirements right from the start, and providing resources to your team to continue these efforts longer term, our approach helps save your team from costly rework and retrofitting your site later while guiding you towards maintaining your accessibility objectives with every content update.

When a site is built with this approach, you can focus on maintaining your site’s accessibility and continually improving other areas of your website without needing to spend time fixing larger accessibility issues across your whole website.

Looking for additional support on making a more usable, accessible, and inclusive website?

Get started with our Essential Website Audit to uncover issues with your current website, or get in touch to learn more about our accessible website design services.

Get in touch

The post 2022 Website Builder Accessibility Review (WBAR): choosing the best platform for your organization appeared first on Say Yeah!.

Although building a site with Webflow takes care of many content, design, and code accessibility considerations, making a more accessible Webflow website requires a few extra steps.

In our guide, we’ll walk you through the different areas you’ll need to consider when making your Webflow site to ensure accessibility for all. These factors include everything from form fields, to accessible navigation, to the structure of your site’s pages.

It’s important to consider accessibility when launching or updating your website. You could be inadvertently preventing members of your audience from using your site effectively.

And the best time to plan for accessibility in your work is right now, so let’s get started!

Explore the guide

Webflow accessibility can seem daunting, but our guide will help you with the processes and step-by-step requirements to deliver a more accessible site.

Whether you’re in the process of launching a new site or are looking to improve an existing one, the Webflow accessibility guide will help make your site, and your content, available to everyone.

Looking for additional support making your Webflow site more accessible?

We’ve done the hard work of understanding these requirements, how to execute, and bring these practices to your team for ongoing improvements and future projects. Whether you’re launching something new or looking to improve an existing site, we can help.

Get in touch

The post Introducing our guide to making your Webflow site more accessible appeared first on Say Yeah!.

It’s key to make sure these accessibility details are taken care of when you’re working on a new site or with your next site update since, without them, you could be preventing some of your audience from using your site effectively (or using your site at all).

An accessible website opens up new market opportunities by ensuring all the information on your website is available to disabled users or people with other accommodation needs.

Accessible websites also help improve access for all by ensuring your content is as understandable and available as possible across all devices and potential use cases.

Let’s walk through the areas you’ll need to consider and implement for an accessible Webflow site.

Landmarks and page structure

Webflow makes structuring your pages for screen readers and keyboards fairly straight-forward with changes to a few different settings on your page elements.

A survey from WebAim found that almost 60% of screen reader users used landmarks at least occasionally when browsing websites.

One of the most important things you’ll want to implement is landmarks. The best way to do this is by looking at your page’s major elements (navigation, footer, the main body of your page) and making sure the appropriate landmark is set.

Webflow steps for setting landmarks

Click on any element. In the right sidebar, click on the element Settings to set its Tag (Webflow’s setting for landmarks). Your navigation landmark will typically already be taken care of by Webflow if you’re using a navbar component, but you’ll need to set the main container for your content as “Main” and your footer as “Footer” in these settings.

Adding a skip navigation link

Another crucial part of making a website accessible is ensuring that screen reader users or keyboard-only users can skip having to go through your navigation links every time they reach a new page of your site. Webflow doesn’t have a built-in way to do this yet, so a skip navigation will need to be built into your site using custom code.

Webflow steps for adding a skip navigation link

This tutorial will help you implement the functional part of the skip navigation (which you’ll need to add to each of your pages and templates) and this guide will provide the necessary code to hide the skip navigation until it is revealed by tabbing to it.

By combining these two tutorials, you’ll be able to add skip navigation to your site, making it more usable for keyboard-only and screen reader users.

Make sure to create a site map page

One accessibility standard that’s often overlooked is support for multiple ways to navigate through a site easily. Your menu and link structure will typically take care of one way of doing this, but adding a site map is key to making the rest of your site’s pages discoverable.

Something that often gets confused in this process is the difference between a sitemap for search engine indexing (e.g. an XML/auto-generated site map) and a site map page that is available to your site’s users. Webflow will auto-generate an SEO sitemap for you if the setting is enabled, but a site map for your users will need to be created by you using a standard Webflow page.

Webflow steps for creating a site map page

To make a site map page:

1. structure a page with an overall heading of “Site Map”;
2. add headers for each of the main categories of pages on your site;
3. include links to every page of your site on this page under the appropriate categories.

This page on our volunteer org site for Together is an example of a simple site map for accessibility purposes created with Webflow.

Bonus: site map pages are also a benefit for SEO (search engine optimization) as they highlight and link to all the most important pages of your site.

Adding this page to your website and linking it in the footer will ensure that anyone looking for a specific page can find it more easily, especially if your site does not have search functionality, and it will also provide an extra boost to your SEO.

Making your site’s menu accessible

Another part of making a Webflow site accessible is making sure your menu works and is usable for all of your users.

This can involve many considerations depending on dropdowns, hover states, and more, but at its most basic, you should ensure that you add a state change (e.g. an underline on hover and selection) rather than just a colour change, and make sure that all menu items have a focus state when a keyboard user tabs to them.

Webflow steps for more accessible menus

Typically, all Webflow stock navigation will have focus states, but you will need to add underlines yourself so that changes on hover are also more accessible.

Ensure your Webflow forms are accessible

Forms can often present a complex accessibility challenge, but Webflow settings are available to make accessible forms without any custom code.

Some tips to boost your form’s accessibility

Ensure error states have a symbol and text associated with them, along with any colour change you might use to indicate errors.

The Webflow default is just an error message with a colour change, but colour changes aren’t necessarily visible to everyone, which is why an error symbol is a great addition. As an example, we like to use a rounded triangle with an exclamation mark inside of it.

Make sure your form labels are properly associated with the fields (this will also ensure your form responses make sense!)

To do this, in the settings for each text field, ensure the name is the same as the field label above. This ensures no confusion about which field belongs to which label.

One additional step to ensure your form fields are fully ARIA compliant (necessary for accessibility in many cases) is to change the name of your field to be a custom HTML field, to create a “for” label. This change ensures that screen readers can better understand the fields used.

This tutorial from Jeff S can help you implement these changes for your form fields

Ensure your focus states for your form fields have enough contrast and are present for all fields.

The focus states on your form field are a way for users to tell which field they are currently filling out when using a keyboard to navigate. It’s best to use a combination of a thicker box around the field, a contrast change in the colour, and/or a shadow around the field to ensure the focus states are as clear as possible.

A form field without focus, before it is clicked or navigated to.

The form field with the focus state when navigated to or clicked on. This is an example of a focus state that uses a darker colour, and a thicker border to ensure the change in state is more perceivable.

Webflow accessibility tools and resources

As you’re putting your site together, be sure to take advantage of Webflow’s built-in accessibility capabilities and learning resources.

Baked into Webflow is the ability to add alternative text descriptions to each of your images. You can also make your site more accessible by making sure you use correct headings, e.g. an H2 should come before an H3.

Webflow has recently released an accessibility tool right in the designer that will catch a lot of these smaller issues for you automatically.

You can also learn more about accessibility basics from Webflow university.

Webflow is a great accessibility platform for your site

Webflow accessibility can seem daunting, but it’s totally doable by following our Webflow accessibility guide along with general content, design, and code accessibility best practices. In fact, Webflow is one of the top website platforms we’ve reviewed for accessibility. It’s up to you to take advantage of this great opportunity to make your site more accessible to your audience!

And, by doing this work as you’re putting your site together, you’ll make sure you don’t have to reconstruct your template later in order to make your site, and your content, more accessible to everyone.

Looking for additional support on making a more usable, accessible, and inclusive website?

Get started with our Inclusive Website Audit to uncover issues with your current website or get in touch to learn more about our accessible website design services.

Get in touch

The post How to make Webflow sites accessible—a step-by-step guide appeared first on Say Yeah!.

If you’re looking to launch an improved website in 2021, now’s the time to investigate platform options and find the right website builder for your organization, without sacrificing accessibility.

Our comparison

We looked at each of the major website builders and compared them across a range of accessibility factors needed for meeting standards like WCAG 2.X, and ranked them against each other to see which ones made it the easiest to build an accessible website effectively.

Accessibility scoring legend

• 
  does not support most accessibility considerations
• 
  supports some accessibility considerations
• 
  accessibility considerations can be met, but it will take work
• 
  almost out-of-the-box accessibility

Squarespace accessibility

Squarespace requires a high degree of custom code

• Headings Yes


• Landmarks Partial


• Skip navigation Partial


• Tab index Yes


• Visible focus ring Partial


• ARIA labels Partial


• Alt tags Yes

Wix accessibility

Wix requires custom code and some setting changes

• Headings Yes


• Landmarks Yes


• Skip navigation No


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Partial


• Alt tags Yes

EditorX accessibility

Accessibility is not fully possible within the current EditorX system

• Headings Yes


• Landmarks Partial


• Skip navigation No


• Tab index Partial


• Visible focus ring Yes


• ARIA labels No


• Alt tags Yes

Weebly accessibility

Weebly requires a high degree of custom code

• Headings Partial


• Landmarks No


• Skip navigation Custom


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Custom


• Alt tags Yes

Webflow accessibility

Implementation with Webflow is straightforward, but requires some code knowledge

• Headings Yes


• Landmarks Yes


• Skip navigation Custom


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Yes


• Alt tags Yes

WordPress accessibility

Wordpress requires extensive custom code, but all of the required items for accessibility are possible.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

Headless CMS accessibility

Headless CMSs require extensive custom code, but all of the required items for accessibility are possible and the system is easier to use for advanced accessibility items.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

The winners

Webflow for designers

Webflow is the best we tested out of all no-code website builders, with ease of use, built-in accessibility features, and customizability all at your disposal when creating a more accessible website.

Headless CMS for developers

A headless CMS is an excellent choice in cases where you are working with a capable developer. A headless CMS offers advanced customizability for any and all accessibility needs, and is a blank slate full of possibilities for usability, design, and accessibility across your website.

An as-is template isn’t necessarily enough to be accessible

Although several of these platforms have taken the time to enhance their platforms’ accessibility, it’s typically more complicated to ensure your site is compliant when using one of these platforms.

For example, to make content on your site accessible, you’ll want to make sure that you have features like a skip navigation link, landmarks on the page for screen readers, and appropriate ARIA labels when needed. Many of these features are not available on these platforms, and if they are, it may take some manual work to set them up.

The more flexible the platform, the more likely you’ll be able to add these features, but even platforms like Webflow require manual coding to add features like a skip navigation link.

How to choose between WordPress, Webflow, and a Headless CMS

WordPress is a more open-ended and complex option for building a custom site. Because of its maturity as a platform, and the flexibility that comes from not using an existing template, it can be a good solution for making sites that require custom features that wouldn’t be available in a typical template builder.

Webflow is great for many simpler use cases that may have previously been powered by WordPress. Webflow solves several performance issues and other optimization issues, in addition to accessibility, that otherwise require a lot of manual testing and development work when using WordPress. Webflow is prebuilt with accessibility in mind in its components and features, meaning less work is required to make it accessible, even when starting completely from scratch.

For websites being built by a capable development team, a headless CMS system is likely the most ideal combination of flexibility, performance, content management, and development efficiency. Typically offering infinite flexibility and component workflows, a headless CMS can win out over Webflow when you need more control over advanced accessibility attributes or wish to more easily provide a rich content management system for everyday content managers.

Making a website accessible relies on choosing a platform that allows you to make the accessibility adjustments necessary and take an accessibility-centred approach to building your website from the start. Considering who will be helping you build out your website, who will be managing your content on an ongoing basis, and who will be responsible for ongoing maintenance and hosting are all key considerations of selecting the right platform for your needs.

Our accessibility-focused approach

By focusing on making your site accessible across content, design, and development requirements right from the start, and providing resources to your team to continue these efforts longer term, our approach helps save your team from costly rework and retrofitting your site later while guiding you towards maintaining your accessibility objectives with every content update.

When a site is built with this approach, you can focus on maintaining your site’s accessibility and continually improving other areas of your website without needing to spend time fixing larger accessibility issues across your whole website.

Looking for additional support on making a more usable, accessible, and inclusive website?

Get started with our Essential Website Audit to uncover issues with your current website, or get in touch to learn more about our accessible website design services.

Get in touch

The post 2021 Website Builder Accessibility Review (WBAR): choosing the best platform for your organization appeared first on Say Yeah!.