WCAG guide for no-code creators on all other criteria except colors

Provide a useful element name

Usually, in the Freedom UI page designer, the title is at the top of each element's properties panel. If it’s present, fill it with meaningful value. Even if the title is hidden visually, it will help assistive technologies work correctly.

❌ An icon-only button to add a new contact has a title “Button 1” and a "+" icon.

✅ Title “Add contact”.

Input suggestions, error identification and prevention

When errors occur during user input, they must be clearly identified. Suggestions for correction or prevention should be provided

Showing appropriate hints, suggestions (labels or tooltips) if a field's purpose isn't immediately obvious, and errors where it's needed to help users while inputting information.

In serious cases, there must be a way for additional confirmation or the ability to revert the operation. For critical processes, add a process step that asks for confirmation or offers Undo.

✅ Mark all fields as required in the place of entry instead of later steps in the process where it has to be used. Business rules could also be used for that.

✅ Add tooltip “Please write colors on the product. You can input several colors, please try to be specific.” to the text input for the desired product colors in the order record.

✅ Add an extra process step “Confirm order” for the user to review the order information before submitting it.

Provide texts that understandable for more people

Formulate label content and other text messages without relying only on shape, colour, or screen position 

❌ Label: "To go to the next page, press the button to the right." (relies solely on visual location).

✅ Label: "To proceed, click the 'Next' button." (uses a specific name)

Avoid redundant entry

Users should not be required to enter the same information multiple times within the same session, unless it's essential for security or the previously entered information is no longer valid.

• When creating new records that are linked to existing ones (e.g., creating a new contact from an account page), ensure that "connection" fields (like the Account lookup field on a Contact page) are pre-populated by default

• If information is already known or can be retrieved from the system (e.g., default address), pre-fill those fields instead of asking the user to re-enter them. Including filling in the information from the corresponding process steps, if a page is a part of the business process.

❌ Asking users to fill in already known address every time when creating an order.

✅ Fill those fields instead of asking the user to re-enter them.

Consistent identification

Components that perform the same function across different pages must be identified consistently

Re‑use the same icon, label text, tooltip, and position for identical functions.

❌ A button that "saves" data is labeled "Save" on one page, "Submit" on another, and "Update" on a third, even though they all perform the exact same saving action.

✅ All buttons that save data are consistently labeled "Save" and use the same visual style.

✅ Similarly, a field for "Customer Name" should always be labeled "Customer Name" across all relevant pages.

Provide a relevant minimum target size (24 × 24 px or more)

Some Creatio elements are smaller than 24px in height or width. For example, buttons of the “S” size. You have to leave a space (e.g., container gap and spacing settings) for the elements near them to effectively increase button target area. Also, it’s always good to have a pace between independent buttons.

❌ Column with two “S”‑buttons flush together

✅ Buttons have at least a small gap between them (8px or more).

Non-text content, such as images, must have text alternatives so that users who cannot see them (e.g., screen reader users) can still understand their purpose and meaning.

This also applies to "images of text," where text is embedded within an image, making it inaccessible.

If possible, avoid images of text.

Use a Label component instead; you can style it visually. It allows you to avoid worrying about alt texts and the ability to translate the text to multiple languages directly within the Freedom UI no-code designer.

❌ Inserting a PNG that says “Contact Us”.

✅ Label component reading “Contact us”.

Provide alt text for every Image component on the page. The Alt Text (alternative text) describes the image's content or function.

You can set the "alt" attribute in the Image element properties in the page metadata.

See more at ImageInput component | Creatio Academy

❌ Leaving both fields blank → screen‑reader just says “graphic”

✅ “Company logo: Creatio”

Avoid flashing media

If you embed a GIF/video, preview it: no element may flash > 3× per second. This includes content that flashes quickly between light and dark, or between different colors, including strobes.

When in doubt, use a static frame or slower transition.

❌Embedding a GIF animation that rapidly flashes between bright colors with the text on the gif “Waning” to draw attention.

✅ Use a static label “Warning” with a specific styling (size, color)

Every page should have a clear and descriptive title

Keep the default PageTitle element (label); edit its text, don’t delete it.

In Creatio, by default, the PageTitle label is used to indicate the page title visually (at the top of the page) and programmatically (as the title of the browser tab).

Also, in the record pages, it’s automatically populated by the record primary display value to clearly indicate which record is opened.

❌ Deleting the PageTitle label from the page

✅ If needed, changing the label text, moving this element to another position, or changing style

Consistent navigation

Navigational mechanisms and interactive components that are repeated across multiple pages should appear and function consistently. This helps users learn and predict how to interact with your application.

Out of the box, Creatio provides a strict and useful navigation pattern utilizing the general page layout, navigation panel, and page structure. If you want to make a custom page layout or other navigation options, you have to make sure that it works for your users, and, possibly, you should organize such navigation patterns on your other pages as well to keep things consistent, when it's possible and needed.

❌ A "Next Step" button that is sometimes on the left, sometimes on the right, or changes its label to "Proceed" on different pages for the same function.

✅ A consistent set of process navigation buttons (e.g., "Previous," "Next," "Save") always appearing at the bottom right of the page with identical labels and icons.

Consistent help

If you add inline help, put it in the same region (e.g., right panel) across all pages.

❌ A help icon for a specific section appears at the top right of the section on one page, but at the bottom left on another, even for similar types of sections.

✅ Help texts are placed in the same places for the same page layouts, e.g. right panel. All help icons or links for form fields are consistently placed immediately to the right of the field label

Heading hierarchy conveys structure

Use the label component Heading levels H1 → H2 → H3 … top‑to‑bottom inside each page, including modal pages. This structure works best in simple-structured pages. As page complexity rises with lots of tabs, separate containers, collapsible expansion panels, page customizations in different Creatio packages, etc., it becomes difficult to keep track of heading levels. Use H2, H3, and other lower-level header structures only if you really need this structure.

❌ A page where a small, visually minor text element is set as H1, and the main section title is a regular Label or H3.

✅ Linear levels, one H1 per page or modal.

Provide a skip link/bypass repeated blocks

Creatio's Freedom UI shell layout inherently provides mechanisms (like skip links, though not always visibly exposed) to bypass repetitive content.

✅ It's safer not to alter the general structure of the Shell layout (BaseShell, MainShell schemas in Configuration) to avoid issues.

✅ Focus your customizations within the main page content area inside Freedom UI shell.

Make all page content localized to the language of the user

Ensure all page elements (Input titles, labels, button texts, etc.) are translated into all languages enabled in Creatio.
Avoid mixing languages on a single page unless explicitly intended for multilingual content (you can mark text inputs as “Localisable text”).

❌ Mixing untranslated field captions.

✅ The user with the Spanish language selected sees all page elements are consistently in Spanish.

Provide descriptive names or context for all links

This rule sets some limitations on how to write link text and surrounding content.

If you are composing a complex text label with links, please read the criteria official page and examples: Understanding Success Criterion 2.4.4: Link Purpose (In Context) | WAI | W3C

❌ A standalone (without surrounding text in the same paragraph) link “Click here”

✅ Link says “View pricing table”.

Provide useful status messages where it's needed

Creatio provides several ways to display, if necessary, additional status messages. For example, they can be configured for the Save data action.

Creatio's built-in notifications and validation message mechanisms adhere to this.

✅ If needed, provide an additional success message to the “Save” action