The do's and don'ts
Do's
Use an organized heading structure
H1, H2, H3, H4, Paragraph text and Quotes.
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.
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
Our prefixed elements have different accessibility checks in place.
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.
Caution
⚠️ = use at your own risk
Background videos
⚠️
The accessibility setting now allows motion to be paused, but the background video 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.
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.
Background videos
⚠️
The accessibility setting now allows motion to be paused, but the background video feature, released after our last audit, hasn't been formally reviewed.
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.
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.
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 nav. buttons
⚠️
To limit confusion, disable the Page Navigation Buttons from the Foleon Doc Settings. You can't target this with the keyboard focus in the expected order but you can use keyboard arrow keys to navigate pages.
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.
Avoid
Gates
Gating may not pass the accessibility check. This capability is being optimized to improve consistency of it's function to avoid readers sometimes being able to target items behind a gate when using a keyboard to navigate.
To be improved in 2025
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: As of March 20th, 2023, Foleon is a WCAG 2.1 AA-certified accessible platform. With WCAG 2.2 standards live as of October 5th 2023, Foleon is consolidating efforts to improve the commitment to providing a robust platform capable of producing content that can be accessible to everyone. This Foleon Doc guide is an evolving asset meant to give you the most transparent view of how to create accessible content within our Content Studio editor.