The do's and don'ts
Do's
Use an organized heading structure
H1, H2, H3, H4, Paragraph text, Quotes, and Bullet and or Numbered List.
Make sure that there is enough contrast between text and background colors
4.5:1 Ratio - for reading text 3:1 Ratio - for heading text
If an image has text or is considered information bearing, it's important implement alt text.
If an image is only decorative then leave the alt text empty. Background images by default do not display alt text.
Required for all logos.
When you use a video with audio, make sure there are subtitles.
Enable the Accessible video player toggle in the Foleon Doc navigation settings to let readers use simplified but accessible video player controls that are keyboard and screen reader friendly.
Hotspots
Add descriptive hover text located in the element's hover settings.
Much like buttons, hotspots need to explain where a user will go when clicked. Custom aria-labels can further increase screen reader clarity. Edit these labels in the "advanced settings" of the edit link panel.
Use our prefixed setups
Use preset form fields. They include necessary autocomplete attributes for autofill. Custom fields will not include these vital accessibility attributes.
Accessible controls
Enable the accessibility toggle in the Foleon Doc navigation settings to let readers pause background videos, GIF images, or data elements motion animations.
Audio
If you have an audio fragment on a page, make sure there is a textual alternative on the page.
Data visuals
To ensure compliance, enable the "accessibility" setting to let users pause animations. Avoid setting speeds faster than 3000ms or animations exceeding 5 seconds.
Gates
Gating is optimized for accessibility in published Foleon Docs.
Note: Keyboard navigation bypasses the gate in Preview Mode.
Block/anchor links
⚠️
Block or Anchor linking have been updated to follow the readers focus, but the feature, released after our last audit, hasn't been formally reviewed.
Caution
⚠️ = use at your own risk
Background videos
⚠️
The accessibility setting allows motion to be paused, but we cannot guarantee accessibility with all third-party videos.
The accessibility toggle pauses all motion, including background videos. Since some video providers lack keyboard support, always test your background videos.
Column scroll
⚠️
Although we CAN access this internal navigation, it doesn't occur in the expected tab order and causes hidden content so it's best to limit or avoid it.
GIFs
⚠️
Although we CAN pause background videos, GIF files used in backgrounds do not pause with the accessibility toggle enabled. GIFs used as image elements will pause as intended.
Search
⚠️
The search feature is optimized for screen readers but has not yet been formally reviewed, as it was released after our last audit.
Navigation bar icons
⚠️
"Skip to main content" button allows keyboard users to skip the nav bar, but limiting enabled icons in the nav bar is recommended to reduce the tabbing amount.
Page names
⚠️
"Skip to main content" button allows keyboard users to skip the nav bar, but it's best to limit tabs to avoid page names hiding under the bar's right corner.
Page arrow buttons
⚠️
To limit confusion, disable the Page Arrow Buttons from the Foleon Doc Settings. The page navigation buttons are accessible with keyboard focus, but you can disable them to reduce the tabbing amount.
In place of Page Arrow Buttons, insert a dedicated block containing 'Previous' and 'Next' buttons to guide the reader manually
Horizontal page overview
⚠️
You can display the page overview in a Grid or Horizontally in the Doc settings. Please note that the Horizontal view limits logical focus order for keyboard navigation. We recommend the Classic or Grid view to maintain accessibility standards.
Avoid
Search
The search feature will not pass the accessibility check. It can't be controlled with a keyboard and isn’t optimized for screen readers.
Block links
Block linking will not pass the accessibility check. You can target this with the keyboard focus, but your focus is not moving with the anchor link.
Gates
Gating will not pass the accessibility check. You can target this with the keyboard focus, but only after you interact with all other links behind the gate.
Page scroll button
The page scroll button will not pass the accessibility check. It can't be controlled with a keyboard and isn’t optimized for screen readers.
Disclaimer: At Foleon, we're deeply committed to providing an inclusive platform. We are actively aligning the Foleon platform with WCAG 2.2 Level AA standards to better support accessible content creation.
To give you the most transparent view, we commissioned an independent audit by Deque Systems. This evaluation was performed in March 2025, with fixed issues validated in June 2025 , against the WCAG 2.2 Level AA standard. You can access the full Voluntary Product Accessibility Template (VPAT), also known as the Accessibility Conformance Report (ACR), which conforms to VPAT Version 2.5, by downloading the document here: Foleon Accessibility Conformance Report.
This Foleon Doc guide is an evolving asset meant to empower you to create accessible content within our Content Studio editor. Please remember that while Foleon provides tools to support accessible creation, the accessibility of the content created by users (Foleon Docs) is the sole responsibility of the Customer.