How can I make my Website Builder site more accessible?

An accessible website ensures all users, including those with disabilities, can navigate, understand, and interact with your content. If you're using a Website Builder, you can improve accessibility by adjusting key elements and following best practices - such as adding alt text to images and ensuring your site's design and content are clearly structured. You'll find a checklist of recommendations and resources in this article.

If you have any general questions on website accessibility, you can check out our guide: FAQ about Website Accessibility.

Note: At one.com, we do our best to provide the tools needed to ensure that you can build and maintain a website that adheres to accessability requirements. However, you are ultimately responsible for full compliance. Therefore, we strongly recommend that you familiarise yourself with your local or regional laws for accessibility, as there might be requirements for you that are not addressed in this article. 

Visual elements

Alt texts for images, icons and graphics

Alt text serves as a readable description of an image and may act as a stand-in if the website visitor cannot see it. The alt text can be picked up and read by a screen reader. You can find instructions on where to add alt text to images or other visual elements in these guides: 

You do not need to add alt text for background images, as these often only serve decorative purposes. Alt text should only be added to images that convey important content, serve informational purposes, or require interaction from the website visitor. 

To denote that an image serves as an image that assistive tools can skip, you can go to SEO in the image settings and slide the Set as decorative element toggle to ON.

To ensure full compliance, we recommend that you review all your website images and either give them alt text or set them as decorative elements.

Page language

Setting the language for each page on your site ensures that screen readers can read the page aloud properly. See this guide for step-by-step instructions: How do I set the language for a page in Website Builder?

Auditory elements

Captions and transcripts for audio and video

It's not possible to add captions or generate transcripts with the self-hosted video option in Website Builder. However, there are two workarounds for this:

Structure and design

Semantic headings

Use the semantic headings hierarchy (H1, H2, H3, paragraph) in your site's text layout. This hierarchy reflects a way of organising content logically and meaningfully via tags on HTML sites. It's used by assistive technologies, such as screen readers, to make sense of content and convey it in the correct order to the website visitor.

In the Website Builder editor, each heading is marked clearly (heading 1, heading 2, etc.) when you use a text component. You can select a heading from the side panel when adding a new text component to your site or edit the heading in the properties panel for existing text components. 

The Website Builder templates include clear headings and labels, and by default, follow the logic outlined above.

Screenshot showing the option to add semantic headings in a text component. A red arrow points to an open drop down menu in the properties panel, where you can see the different types of headings.

Contrast ratio for text

When it comes to website text, these are the minimum requirements for contrast ratio:

  • Headings: 3:1
  • Paragraphs: 4.5:1

You can adjust the text colour ratio in Website Builder like this:

If the colour theme function is set to ON:

If you're using a colour theme on your site, you should edit the contrast ratio via the colour theme settings. This guide explains how to do that: Using a colour theme in Website Builder.

If the colour theme function is set to OFF:

When the colour theme function is deactivated, you should edit the contrast ratio via the global settings:

  1. Go to Template settings in the bottom-right corner of the Website Builder editor.
  2. Click Edit template styles in the menu that appears.
  3. You'll now see an overview of all the text styles used on your website (text, links, menu, button, and table). Click the text colour icon for each item to access the colour settings. You can select a colour via the colour picker or enter a hex code.
Screenshot showing the open global settings. A red arrow points towards the colour picker symbol, and the colour spectrum is open. A magnifying glass zooms in on the field where you can add a hex code.

Note: The Website Builder cannot tell you the exact ratios of your site, but you can use external tools to analyse it and get the values you need. For instance, you can try this tool from WebAIM. Here, you can enter the hex codes for your foreground and background, and then adjust the colour until you have the right contrast ratio and corresponding hex codes. You can then copypaste these codes into Website Builder.

Non-text contrast

Colourful elements on your website that do not include text, such as background colours on sections or button colours, can be fully adjusted via either the colour theme settings or the global template settings, as outlined above.

Each element's style can be further adjusted via its component settings. For instance, if you click on a section, header, or footer, you'll see the option to change the item's colour or style.

Navigation

Keyboard access

We recommend you stick to clear content on your website and avoid complex items, such as focus-triggered content or hover boxes. The latter can be replaced with regular images and links.

It should be noted that drop-down menus are accessible via keyboard.

Pausing, stopping or hiding content

It must be possible to manually control or hide all moving or interactive elements on your website. Here are a couple of items that you should check if you have them on your website:

  • Image slider: This component's autoplay function is enabled by default, but you can turn it off and add manual controls instead. Go to your image slider component, click on Image slider settings, and then select Navigation to access these settings.
  • GIFs: Avoid uploading GIFs via the image component if they do not include controls.
  • Background images and videos: These items currently don't have a play/pause function, but we're working on a solution to accommodate this requirement. In the meantime, we recommend avoiding moving background images or video backgrounds.
  • Videos: Ensure you have visible controls on videos and that autoplay is turned off. You can read more about video settings in our guide: How do I add a video to my Website Builder site?

Flashing content

Content that includes more than three flashes per second should be avoided. The Website Builder does not contain standard flashing content, but you can upload it. However, we recommend that you avoid doing that or, at the very least, make it possible for the visitor to control and skip this content manually.

Related articles:

Was this article helpful?

Can’t find what you are looking for?

Start a chat

It's the quickest way to get in touch, every day of the year.

Start chat

Give us a call

Available on weekdays from 10am to 2pm (UTC).

Call +44 20 8106 0910