Guidelines to Make Your No-Code Website Tool Accessible

Why Accessibility Matters

No-code tools let people create websites without having to code.

People with disabilities need to use your no-code tool. Your tool needs to be accessible to disabled content creators.

The websites and widgets that your tool outputs also need to be accessible to disabled website users.

Accessibility is required by law and is a procurement requirement in many situations.

Improving the accessibility of your tool and its output can be a strong competitive advantage, particularly with the current focus on diversity, equity, and inclusion.

Example Scenarios

These persona scenarios show examples of accessibility problems that disabled people experience using no-code tools, and what works well in tools that are accessible.

Everyone can add blocks of content

Persona: Martin is an independent consultant who has a website to attract clients. He is blind and uses a screen reader that reads aloud the information on his screen.

Problem: I want to add a new section to my home page. The tool documentation says to drag and drop a content block. I can't do that, because I can't use a mouse. I tried using my screen reader’s built-in functionality to drag and drop, but it doesn't work with this tool.
Works well: I can use the keyboard to select the content block and put it where I want on the page. Everything is announced properly, including the block type and the location where I place it.

Users who have auditory, cognitive, neurological, physical, speech, or visual disabilities need to be able to add, customize, and remove blocks of content.

The tool provides accessible components and templates

Persona: Amahle is a hairdresser and is proud that she created her own website. Clients use her website to schedule appointments, and it's a real time saver for her.

Problem: Some of my older clients say they cannot use the calendar widget to schedule an appointment. One says she uses large text and the buttons are cut off. Others have complained that the light gray text is too hard to read.
Works well: The calendar widget that the tool provides works great for all my clients, including the older ones. The tool helped me pick color combinations that are easy to see.

The templates, components, and pre-authored content that your tool provides need to be accessible. That includes making things like headings, lists, and labels accessible. When your tool offers customization options, such as colors, help content creators make accessible choices.

The tool helps make images and videos accessible

Persona: Dacso runs a car repair shop and does a lot of body work. His daughter created a website for him to showcase his work. Dacso uploads before-and-after photos of his projects. He also posts videos with simple maintenance tips.

Problem: I usually get lots of great feedback on my website. A couple of Deaf people say they want to learn from my videos, but of course they can't hear what I'm saying. I really want to make it so they can get advice from my videos, but I have no idea what to do.
Works well: Whenever I upload a picture, the tool asks me for a text description. It has "more info" that explains how to write a good text description for people who are blind and can't see the image. It also has good support for adding captions to videos. And the "more info" for videos explains how to describe what I'm doing when I make the video, for people who don't see too well.

Your tool should enable and encourage content creators to provide alternative text for images, audio, and videos. It should include guidance on how to provide useful alternatives for their website consumers who have disabilities.

The Accessibility Standard to Help You

Your no-code tool is sometimes called an “authoring tool” because people use it to author or create websites. There is an international standard that addresses accessibility needs in no-code tools: Authoring Tool Accessibility Guidelines (ATAG).

Use ATAG to help make your tool:

accessible to website creators (Part A)
support accessible content for website consumers (Part B)

Examples

ATAG covers the example scenarios above:

Everyone can add blocks of content — ATAG says: Provide keyboard access to authoring features. Some authors with limited mobility or visual disabilities do not use a mouse and instead require keyboard interface access to all of the functionality of the authoring tool.
The tool provides accessible components and templates — ATAG says: Assist authors with accessible templates. There are accessible template options for a range of template uses. Assist authors with accessible pre-authored content.
The tool helps make images and videos accessible — ATAG says: Assist authors with managing alternative content for non-text content. Ensure that documentation promotes the production of accessible content.

And ATAG covers much more.

To get started putting ATAG to work for you, see:

Authoring Tool Accessibility Guidelines (ATAG) Overview, with links to the ATAG standard and Implementing ATAG
ATAG at a Glance, a paraphrased summary to give you an idea of what’s covered in ATAG