At Foleon, we enable you to create content experiences that look great on any device. It's important to make that content accessible to anyone. 🦾 In this article, we share a complete checklist on how to make your Foleon content more accessible.
💡 Want to learn about accessibility in an engaging way? Check out The Ultimate Guide to Accessible Content. 📚 Alternatively, follow our Academy course: Designing for Accessibility.
In this article
Why is accessibility important?
About 15 percent of the world’s population lives with some form of disability. These include visual, cognitive, auditory, physical, and speech disabilities, which make performing certain actions or interacting with the world — whether online or offline — more difficult for disabled people.
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.
The WCAG Standards are composed of 4 pillars that help to define each web need:
- Perceivable
- Operable
- Robust
- Understandable
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.
Accessibility checklist
1️⃣ Structure
✅ Place important content higher on the page
✅ Use the correct heading hierarchy
✅ Set the right language in the Foleon Doc settings
2️⃣ Navigation
✅ Enable accessibility options in the Foleon Doc settings
✅ Limit included page names in the navigation bar to avoid hidden components
✅ Write distinct and meaningful Foleon Doc and page names
✅ Give links unique and descriptive names
✅ Let your audience know where your links go
3️⃣ Content
✅ Work with enough color contrast
✅ Add useful alt text to the right images
✅ Make forms accessible
✅ Add closed captions to your videos
✅ Create meaningful button names
✅ Make hotspots accessible
✅ Provide text alternatives for audio fragments
4️⃣ Use with caution
⚠️ Background videos
⚠️ Column scroll
⚠️ GIFs
⚠️ Data elements
⚠️ Navigation bar icons
⚠️ Page navigation buttons
⚠️ Page names
5️⃣ To avoid
❌ Search function
❌ Page scroll button
❌ Anchor links
❌ Gating
Learn more about each topic 👇
1️⃣ Structure
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?
When a visitor uses the tab key to navigate your Doc, the Skip to main content button will appear. This allows them to skip the information in the navigation bar and go to the main content directly.
Use the correct heading hierarchy
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)
Only use this once on every page and for content that is meant to be read or heard first. Most commonly used for the page title and should be used in the first block only.
-
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.
Set the right language in the Foleon Doc settings
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.
2️⃣ Navigation
Enable accessibility options
In the Foleon Doc settings, in the navigation tab, you can enable accessibility options. This allows your audience to make content more accessible — by disabling autoplay for videos and GIFs.
Your audience will see an accessibility icon in the top-right corner of your Foleon Doc that they can control.
Write distinct and meaningful Foleon Doc and page names
When creating Foleon Docs, it’s important to take some time to write good names for both the Doc itself and the pages it contains.
Your Foleon Doc name should adequately and briefly describe the contents and purpose of the Doc while your page names should describe what’s on that specific page. Additionally, they should all be unique. Avoid giving different Foleon Docs or pages the same (or very similar) names.
In the example, you can see how the pages of the Getting started guide have names that are clear and recognizable.
Give links unique and descriptive names
When adding text links to your content, they should accurately describe what they’re about and where they lead. Using "click here" or “read more” is not ideal.
❌ Don’t say: “Click here to learn more about our company.”
✅ Instead, say: “To learn more about our company, read About us.”
It's a good exercise to check if your text links make sense out of context. If you don’t read the content but only see the links, do you still know what they’re about and where they lead?
Let your audience know where your links go
Internal links that stay inside the Foleon Doc (e.g. links to another page or an overlay) open in the same tab. External links that leave the content (e.g. links to other Foleon Docs, websites, etc.) will open in a new tab.
To let your audience know that a link or button will open in a new tab, you can help them by adding “(opens in a new tab)”.
3️⃣ Content
Work with enough color contrast
Contrast and color use is vital to accessibility. Enough contrast between the text and its background is necessary to make text readable for people with moderately low vision.
Your ability to optimize this usually depends on your brand style guide and its flexibility, but try to make sure you have enough color contrast. To check if your brand colors have a high enough contrast ratio, use the contrast checker tool from WebAIM (opens in a new tab).
Keep these contrast ratios in mind (you can check these with the tool from WebAIM):
- 4.5:1 = For all information-bearing elements.
- 3:1 = For large-scale text and info-bearing elements.
Good to know: decorative elements don't require contrast compliance
Add useful alt text to the right images
To accommodate visually impaired readers that use screen reader software to convert text to speech, we recommend adding alt text to your images.
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.
In the media library, select an image and add alt text in the Image alt field.
💡 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.
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.
We also recommend cleaning up your field names. These will be read in screen readers to let the reader know what the field is dedicated to.
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).
Create meaningful button names
When you use buttons on your page, always make it clear what your audience can expect when they click on them. A button with just "Read more" doesn't cut it. Instead, we recommend including more information such as "Read more about button accessibility".
Make hotspots accessible
Like buttons, hotspots need to explain where a user will go when clicked. That's why we recommend adding descriptive hover text. You can add this text in the element's hover settings.
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.
4️⃣ 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
Although it's possible to pause motion with the accessibility settings enabled, the background video feature wasn't released before our last audit. Therefore, it hasn't been formally checked by our accessibility partner.
Column scroll
Although it's possible to access this internal navigation with our new editor, it doesn't show in the expected order. That's why it's best to limit its use or avoid it altogether.
GIFs
Although it's possible to pause background videos, GIF animations used as background images don't pause as they should with the accessibility toggle enabled. GIFs used as image elements will pause as intended.
Data elements
The autoplay accessibility toggle for videos and GIFs also pauses data element animations. Once paused, data elements will jump to their final 'end' values. This is covered by the existing autoplay toggle, so there is no need to set it up separately.
Although the data elements are accessible, manually increasing the animation speed will negatively affect accessibility. Anything faster than the default 3000 milliseconds or using long numbers that animate longer than 5 seconds will not be compliant.
Navigation bar icons
Although it's possible to skip the navigation bar with the skip to main content button, it's suggested to limit the number of navigation bar icons to reduce the number of clicks needed to tab through.
Page arrows
To limit confusion, disable the page arrows from the 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 it's possible to skip the navigation bar with the skip to main content button, it's recommended to limit the number of pages included. This prevents any page names from being hidden on the right side of the navigation bar.
5️⃣ To avoid
If you want to create a Foleon Doc that complies with the WCAG, you may want to avoid certain types of content and Foleon features, as they are currently not fully accessible.
Search function
This feature will not pass the accessibility check. It can't be controlled with a keyboard and isn’t optimized for screen readers.
Page scroll button
This feature will not pass the accessibility check. You can display a scroll button on your page. However, it currently can’t be controlled with a keyboard.
Anchor links
Anchor linking, or linking to blocks, will not pass the accessibility check. You can target this with the keyboard focus, but your focus is not moving with the anchor link.
Gating
Using a content gate (often for lead generation) won't pass the accessibility check. You can target this with the keyboard focus, but only after you interact with all other links behind the gate.
Useful tools & 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:
💡 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
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 its commitment to providing a robust platform capable of producing content that is accessible to everyone.
This Help Center article is an evolving asset meant to give you the most transparent view of how to create accessible content within our Content Studio editor.