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 relevant to your Doc's story, add alt text
If an image is only decorative then leave the alt text empty.
Required for all logos.
When you use a video with audio, make sure there are subtitles.
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 navigation
Ensure the accessibility toggle is enabled in the Foleon Doc navigation settings when you have background videos.
Audio
If you have an audio fragment on a page, make sure there is a textual alternative on the page.
Caution
⚠️ = use at your own risk
Background videos
⚠️
Although we CAN pause motion now with our accessibility settings enabled, the background video feature wasn't released before our last audit. Therefore, it hasn't been formally checked.
Column scroll
⚠️
Although we CAN access this internal navigation now with our new editor, it doesn't occur in the expected order so it's best to limit or avoid it.
Data visuals
⚠️
Although data visuals are accessible, manually increasing the animation speed to anything faster than the default 3000 milliseconds or using long numbers that animate longer than 5 seconds will not be compliant. To turn off animating data elements, set animation speed to 0.
GIFs
⚠️
Although we CAN pause background videos, the GIF animation used in backgrounds is not pausing with the accessibility toggle enabled as it should. GIFs used as image elements will pause as intended.
Navigation bar icons
⚠️
Although we CAN skip the navigation bar now with our new editor, it's suggested to limit the amount of enabled icons to reduce the amount of clicks needed to tab through.
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 arrow keys to navigate pages.
Page names
⚠️
Although we CAN skip the navigation bar now with our new editor, it is best practice to limit how many tabs are present to prevent any page names from hiding under the navigation bar's right corner.
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: 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.