Dos
Headings
Use an organized heading structure
H1, H2, H3, H4, Paragraph text, Quotes, and Bullet and or Numbered List.
Contrast
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
Alt 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.
Buttons & links
Make sure that people who can't see understand where a link leads to.
Custom aria labels can further increase screen reader clarity and reduce text length on the page. Edit these labels in the "advanced settings" of the edit link panel.
Hotspot
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.
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.
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.
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.
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.
Don'ts
⚠️
Reveal & hide (accordions)
The Reveal & Hide feature will not pass an accessibility check. It uses invalid HTML roles and creates "ghost" focus points when navigating by keyboard, which can confuse screen reader users.
