![foleon_logo_white.png]](https://www.foleon.com/hs-fs/hubfs/foleon_logo_white.png?height=40&name=foleon_logo_white.png){kind=logo}
💡 Want to learn about accessibility in an engaging way? Check out The Ultimate Guide to Accessible Content. 📚 Or, follow our Academy course: Designing for Accessibility.
What is web accessibility?
The web should be for everyone.
Web accessibility has quickly become an important consideration in the content creation process. It's more than just a legal requirement — it's a chance for you to improve the experience for your audience in an inclusive way.
We’ve committed to continuously improving the accessibility of Foleon Docs by following the Web Content Accessibility Guidelines (WCAG) and considering these guidelines with every new feature we launch. Continue reading here for more information on our certification.
The WCAG Standards are composed of 4 pillars that help to define each web need:
- Perceivable
- Operable
- Understandable
- Robust
As a company, Foleon evaluates the content editor based on these four pillars and uses the standards defined within each to ensure our platform can provide our customers with the tools necessary to make their content accessible.
Creating accessible content is a collaborative effort between Foleon and our users. It's our job to make sure that it's possible to create accessible content within our editor and to provide guidance so you know if you're on the path toward accessibility compliance.
Structuring your design for accessibility
1. Place important content higher on the page
Make sure to place important links and interactive elements higher up on your pages. This is good practice because most readers, regardless of their physical or mental ability, expect important content closer to the top of a page.
💡 Easy exercise — Identify important hyperlinks and content elements that readers need to see. Got it? Navigate through your content using the tab key and check how long it takes until you reach them. Can you reach them easily, or did you have to press the tab key countless times?
2. Set the right language
Under Foleon Doc settings, you can set your Doc’s language. We highly recommend setting this as it translates certain default text and ensures screen reader software will correctly interpret the content of your Foleon Doc. We support a wide range of languages.
3. Use headings
Headings are critical to giving your content structure and hierarchy, which makes it easier for screen readers and search engines to interpret your Foleon Docs.
We have four text header levels you can pre-configure: H1, H2, H3, and H4. It's essential to use these in logical order if you want to create an accessible Foleon Doc because screen readers use these headers to assist readers in navigating the page's content.
When these headers are used out of order and without thought, readers using assistive technology will think your content is chaotic and, therefore, not accessible.
We recommend setting these headers in your Brand Kit, where you can outline the header structure in the font styles category.
To optimize your content for screen readers, here’s how you should use headings and paragraph text with Foleon:
- H1 (Header 1)
Must only be used once on the page and should always be used for content that is meant to be read/heard first. It is most commonly used for the title of the page and should also be set to the first block on the page.
- H2 (Header 2)
Use this header to introduce new sections on the page. It is most commonly used for subheadings, quotes, or introductory text. For longer-read content, you might have multiple of these on your page. - H3 (Header 3)
Use this header to introduce the next most important text of a particular section following the H2. It is most commonly used for subtitles, quotes, introductory text, or captions of data visuals and images. For longer-read content, you might have multiple of these on your page. - H4 (Header 4)
It's not always necessary to use H4. If there's no other important content that follows the subheadings and subtitles, then move on to paragraph styling. - Paragraph
Use for all content that follows your introductory text. After H1, H2, and H3, the reading tools will continue to keep all paragraph-assigned content in order. If this order is incorrect, you may need to introduce an H4 to help guide the reader.
It's good to know that paragraphs, quotes, numbers, and bullet lists are all categorized at the paragraph level. They are equal to each other, and when used together, they will be read in the order they appear.
💡 Direct style changes to text and changes to the brand settings of a Foleon Doc disconnect the account-wide Brand Kit. Learn more here.
If an image is information-bearing (like a chart, graph, or functional icon), it's important to provide alternative text (alt text). This text is read by screen readers, conveying the image's meaning to visually impaired readers. In the media library, select an image and add alt text in the Image alt field.
5. Improve link clarity
Use custom ARIA labels to further increase screen reader clarity for links and buttons. ARIA labels provide clear, descriptive information about where a button leads, which is especially important if you use minimal text in your links or if the element is an icon-only button. You can edit these labels in the "advanced settings" of the edit link panel.
Accessibility Checklist
The Do's
✅ Use an organized heading structure
✅ Work with enough color contrast
✅ Add alt text to images
✅ Let your audience know where your buttons and links go
✅ Add closed captions to your videos
✅ Add descriptive hover text for hotspots
✅ Make forms accessible
✅ Enable the accessibility toggle
✅ Provide text alternatives for audio fragments
✅ Make data elements accessible
Use with Caution
⚠️ Background videos
⚠️ Column scroll
⚠️ GIFs
⚠️ Search function
⚠️ Block/Anchor links
⚠️ Navigation bar icons
⚠️ Page navigation buttons
⚠️ Page names
Avoid
❌ Gating
Learn more about each topic 👇
The Do's
✅ Use an organized heading structure
Relying on the header structure set in the Brand Kit is essential for ensuring the proper order of actions for screen readers. As mentioned above, there are four text header levels you can pre-configure: H1, H2, H3, and H4.
✅ Work with enough color contrast
Contrast and color use are vital to accessibility. Enough contrast between the text and its background is necessary to make content readable for people with moderately low vision.
Your ability to optimize this usually depends on your brand style guide and its flexibility, but you must ensure you meet the required contrast standards. To check if your brand colors have a high enough contrast ratio, use a contrast checker tool like WebAIM. To achieve WCAG 2.2 Level AA conformance, ensure you meet these minimum ratios:
- 4.5:1 Ratio for Normal Text: This is required for all reading text and headings that do not qualify as "Large Text".
- 3:1 Ratio for Large Text: This lower ratio is only allowed for text that is at least 18pt (24px), or 14pt (18.66px) and bold.
- 3:1 Ratio for Non-Text Contrast: This is required for graphics, icons, and essential interface components (such as input field borders and button boundaries).
✅ Add alt text to images
To accommodate visually impaired readers that use screen reader software to convert text to speech, we recommend adding alt text to your images.
As mentioned above, you should always provide alt tags for images that are functional and informative. Don’t set alt tags for images that are purely decorative and serve no further function, since this might confuse your audience.
Alt text is not visible to screen readers on background images (block or column background). This is due to backgrounds being systematically programmed to display as decorative elements. If an image requires alt-text, it is recommended to design your page with image elements in mind.
💡 Easy exercise — Pretend you’re on a phone call with someone and you’re trying to explain what’s on your page and what it is about. If you find yourself describing certain images, you’ll want to add alt text to those ones as they appear to be important.
✅ Let your audience know where your buttons and links go
Make sure that people who can't see understand where a button 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.
For example:- ❌ Avoid using generic button text like ‘Read More’.
- ✅ Use descriptive button text or ARIA labels that make the destination clear, such as “Read more about button accessibility”.
✅ Add closed captions to your videos
If you’re using non-text content like video, audio, or podcasts, make sure you provide text alternatives so hearing impaired readers can still understand what the content is about.
For video, make sure you always include closed captions (subtitles). Don’t add these to the video file itself. Instead, use the video platform’s built-in captioning tools. You can learn how to add closed captions to YouTube videos (opens in new tab) or learn how to add closed captions to Vimeo videos (opens in new tab).
✅ Add descriptive hover text for hotspots
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.
✅ Make forms accessible
Forms allow you to capture information from your readers, which is why making them accessible is critical. Otherwise, you might miss out on new leads or subscribers because they were unable to fill out the form.
Always add labels to each field, so readers understand what they need to fill in. Next to that, always indicate which fields are required. You can do this by adding (required) to the end of every field label or by using an asterisk (*). If you opt for the latter, make sure you add a note above the form that explains that all fields that are marked with an asterisk are required.
Clean up your Field Names, as well. These field names will be read in screen readers to let the reader know what the field is dedicated for.
✅ Enable the accessibility toggle
Enable the accessibility toggle in the Foleon Doc navigation settings to let readers pause background videos, GIF images, or data elements motion animations.
Do enable this:
- Open your Foleon Doc
- Click Menu > Doc Settings
- Scroll to the section Accessibility
- Toggle on the Accessibility options and/or the Accessible video player
- Click Save
With the Accessibility options enabled, your readers will see an accessibility icon in the top-right corner of your Foleon Doc which they can control.
✅ Provide text alternatives for audio fragments
If you have an audio fragment on a page — e.g. from an embedded Spotify podcast — make sure there is a textual alternative on the page.
✅ Make data elements accessible
To ensure compliance, enable the "accessibility" setting to let users pause animations. Avoid setting speeds faster than 3000ms or animations exceeding 5 seconds.
Use with Caution
If you want to create a Foleon Doc that complies with the WCAG, use the following features and functionality at your own risk, as they fall in the grey area of compliance:
⚠️ 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 function
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 navigation 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.
To Avoid
❌ Gating
Gating may not pass the accessibility check. This capability is being optimized to improve consistency of its function and to avoid readers sometimes being able to target items behind a gate when using a keyboard to navigate.
Additional Resources
To deliver the most value to your entire audience, it's essential to know what it's like to use assistive tools to interact with the web. Being familiar with how they work will also be useful for reviewing your accessible designs.
- Screen readers 👀
Each computer has built-in accessibility tools that can be enabled. Helpful ones to experience for yourself are VoiceOver (Mac) or Narrator (PC). They allow you to feel what it's like to hear a Foleon Doc. Other popular alternatives include NVDA and Jaws. - Use the tab key ⏭️
Navigate without your mouse. Use the tab key on your keyboard to access links and content on web pages or your arrow keys to navigate pages. Mouses aren't for everyone, so consider this experience in your design, as well. - Online evaluation tools ✅
There are free resources you can download to your browser to assist in checking for some of the critical factors regarding accessible design. Below are some of the tools we recommend:
- Additional Resources 📚
💡 When you need to be thorough, consulting with a third-party specialist is always a good idea. Accessibility auditors are the true experts.
About our certification
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.