How To

May 31, 2023

How to build accessible products with no-code tools

In a mad rush to ship products quickly, startups neglect accessibility. Here's how to make your product accessible to everyone using no-code tools

One in six people will develop a disability in their lifetime, according to the World Health Organisation — so building accessible tech isn’t just for a minority. “It's obvious to most, that making your work accessible to all people, no matter what impairment they may or may not have, is a morally right and inclusive thing to do,” says Nile Frater, founder and editor of NoCode.Tech, a media platform focused on all things no code. But it’s often something that gets pushed down the priority list of a product’s roadmap — designers and developers often fail to understand that accessibility is the key to good UX. 

And although no code creators are no different, “many platforms do make specific considerations to make it easy for users to implement accessibility features”, says Nile, and can be useful for building accessible products. 

 So where do you start? In our Startup Life newsletter, Nile gave his top tips: 

Choose a platform that supports accessibility

Some no code platforms have inbuilt accessibility features that are easy and quick to implement:

  • Webflow is taking the lead in the no code space in terms of championing and enabling accessibility. It has a thorough checklist of accessibility considerations, for example, and an audit panel to flag and grade the severity of accessibility-related issues in your build. 
  • Softr provides easy to use alt tags, which help screen readers describe images.
  • Bubble has a plugin that supports users to meet the international web accessibility standard, known as WACG (Web Content Accessibility Guidelines).
  • Adalo makes it simple to change your chosen colours to high-contrast colours in a couple of clicks. It also provides education for developers on why it’s important. 

Not all no-code tools have support out of the box for accessibility features — so choose a platform that best supports what you want to achieve or wouldn’t know how to implement manually.

Advertisement

Use ready made accessibility features

Unlike code, components and functions within no code platforms are standardised. That means that when there is an accessibility update, it's going to improve your app — without you having to do anything — wherever you’ve used that component or feature.

Add keyboard shortcuts

Try to keep these in line with how other popular tools are using them. Think of the ubiquity of Ctrl or command+S for save. Don’t force your users to learn something new. 

Build your app as if there were no visuals

How would your users experience your site/app/platform if they couldn’t see the images, videos, logos or colours? Your job is to ensure they can still use it and gain value from it. Some accessibility features you could use:

  1. Alternative text tags (alt tags). They describe what a visual is to a screen reader, other accessibility technology or can be read by a user if the image is broken or their internet connection is slow — accessibility isn’t just about disability. If you had an image of a yellow rose, for example, the alt text may read ‘yellow rose sat in a glass vase’. 
  2. Describe interactive elements. If you have ‘Submit’ buttons, forms, social media icons, menu bars, etc. you need to clearly state what they are and what they do. 
  3. Follow proper heading structure. Use headings to match the importance of the content on your page — the ‘h1’ is the most important heading level, the ‘h6’ is the least — not to style the content (this can be done later with formatting tools). Screen readers use headings to to figure out which order to read the screen in — if you don't use the right hierarchy of headers it may read things in the wrong order and confuse the user.

Avoid custom code

Unless you really know what you want to implement. It often will conflict with a no-code platform's inbuilt accessibility features and will cause more harm than good.

On the subject of… Accessibility in no code 

🔧 Make your platform accessible to disabled website users. Follow these guidelines to meet the international accessibility standard.

📈 How good is your site? Enter your website address here and get its accessibility scored. Ours scored a decent 9.1 (out of 10).

💬 ChatGPT developers need to do better. ChatGPT’s user interface isn’t usable for many people, says accessibility advocate Steve Faulkner. 

🎨 Designers need to prioritise accessibility too. This Twitter thread of Figma plugins helps address accessibility issues right from the beginning of a project. 

📚 Are you a Webflow fan? Check out this Little Book of Webflow Accessibility. 

Anisah Osman Britton

Anisah Osman Britton is coauthor of Startup Life , a weekly newsletter on what it takes to build a startup. Follow her on X and LinkedIn