Accessibility of your Foleon Docs

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 tips on how to make your Foleon content more accessible.

💡 Want to work with a complete checklist for making your content more accessible? Go through our article Accessibility checklist.

 

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 ourselves to continuously improve the accessibility of Foleon Docs by following the Web Content Accessibility Guidelines (WCAG) and by taking these guidelines into consideration with every new feature we launch.

Governmental policies related to accessibility are often based on (or refer to) the WCAG. Among others, this includes the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act (508) which both apply in the United States of America and the Web and Mobile Accessibility Directive that applies for the European Union.

Some of WCAG’s guidelines are purely technical and have already been addressed by us. However, most of the work for creating accessible Foleon Docs lies in making your content itself accessible.

Structuring your content optimally

Place important content higher on the page
When you’re creating a Foleon Doc, make sure you 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. 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.
Accessibility - place important

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.

Screenshot of Accessibility Settings

Your audience will see an accessibility icon in the top-right corner of your Foleon Doc that they can control.

Screenshot of the accessibility icon

Use headings to structure your content
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.

Screen readers are a form of assistive technology that’s essential to blind individuals, as well as useful to people who are visually impaired, illiterate, or have a learning disability. Screen readers attempt to convey what’s on a website to their users via non-visual means, such as converting text to speech.

People with disabilities typically have their own software installed for this in their browser, which Foleon supports. To optimize your content for screen readers, here’s how you should use headings with Foleon:

  • Use header 1 (h1) only once per page, for the main heading (e.g., at the top of a page)

  • Use header 2 (h2) for main section headings (e.g., per block)

  • Use header 3 (h3) for subheadings (e.g., per column)

  • Etcetera

    Properly structured content should look something like this:

    Accessibility - use the correct headers image

     

    Plus, only use the Quote element for actual quotes.

Tips for creating accessible content with Foleon

Give your Foleon Doc and pages distinct and meaningful 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.

By default, Foleon page titles start with the name of the page and end with the Foleon Doc name:

<> - <></></>

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.

Set the right language for your Foleon Doc
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 currently support a wide range of languages. If your language is missing, please contact our support team at support@foleon.com.

Accessibility - language settingsAdd useful alt text to the right types of images

Consider adding alt text to your images to accommodate visually impaired readers who use screen reader software to convert text to speech. Additionally, alt tags also allow search engines to understand what your page is about, and using them correctly may positively influence your content’s ranking in search results.

  • You should always provide alt tags for images that are functional and informative. These are images that convey information that’s useful for interacting with or understanding the page’s content.  Always add alt texts to infographics and images of charts.
  • If you’re having trouble determining which images should have alt text, here’s an exercise that should help... 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 those appear to be important.
  • When writing alt text, try to describe the image’s purpose as concisely as possible. If an image contains text, you should include that text in the image’s alt text. To learn more about writing alt text, read this blog post from HubSpot with good examples of how to write alt text.
  • Don’t set alt tags for images that are purely decorative and serve no further function. Instead, leave the alt text empty, so screen readers can ignore decorative imagery.
  • If you’ve added a hyperlink to an image, screen readers will read the hyperlink if an alt text isn’t provided. We recommend adding alt text to hyperlinked images, even if they’re decorative.

💡 Images via our Unsplash integration currently don’t support alt text.

To summarize:

  • Only add alt text to images that are functional and informative.
  • Make alt text the most concise description of the image’s purpose.
  • If an image contains text, include that in the image’s alt text.
  • Don’t add alt text to images that are purely decorative and serve no further function.
  • Do add alt text to hyperlinked images, even if they’re decorative.
  • If you select an image in the media library, image data will appear on the right-hand side of the screen. Click on the name of the image at the bottom. 
Screenshot of how to set image alt text

Here, you can change the image's name in the media library and add alt text in the image alt field. That's it. You've now added alt text to your image.

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. For example, if you’ve included an About Us page in your Foleon Doc and want to link to it from another page.

❌ Don’t say: Click here to learn more about our company.
✅ Instead, say: To learn more about our company, read About us.

A good rule of thumb here is 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 have an idea of what they’re about and where they lead?

Determine if links should open in the same tab or a new one

When adding links, carefully determine if they should open in the same tab or a new one. Generally, we advise setting internal links that stay inside the Foleon Doc (e.g., links to another page or an overlay) to open in the same tab and setting external links that leave the content (e.g., links to other Foleon Docs, websites, etc.) to open in a new tab.

However, links that automatically open a new tab can be disorienting for readers with cognitive disabilities or those who have difficulty perceiving visual content because the browser’s “back” button won’t take them back to where they came from.

You can help those readers by simply adding “(opens in a new tab)” to the text link. This will warn them and help them find their way back.

If you’re using buttons that link externally, you could add (opens in a new tab) as a text below them.

Provide text alternatives for non-text content (i.e., video and audio)
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 like YouTube or Vimeo.


💡Learn more about adding closed captions to YouTube videos in this help article by YouTube.

💡Learn more about adding closed captions to Vimeo videos in this help article by Vimeo.

When adding closed captions to videos, ask yourself these questions to make sure you set the captions up correctly:

  • Are the closed captions in sync with the spoken content?

  • Are the speakers identified in the closed captions?

  • Are important sounds (other than dialogue) included in the captions (e.g., footsteps approaching, doors closing, glass breaking)?

If you’ve added audio files or podcasts, make sure you always include (or link to) a transcripted version. If you’re using hotspots, be sure to add mouse-over text.


Screenshot how to make hotspots accessible

Designing for accessibility

Use contrasting colors

Contrast and color use is vital to accessibility. Enough contrast between the text and its background is necessary to make the text readable for people with moderately low vision.

Screenshot showing an example of color contrast

Your ability to optimize this usually depends on your brand style guide and its flexibility, but try to ensure enough color contrast. To check if your brand colors have a high enough contrast ratio according to WCAG 2.1, use the contrast checker tool from WebAIM.

Also, be wary of using transparency, as this may decrease the contrast ratio between colors.

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:

Screenshot of an great form based on the accessibility criteria

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 marked with an asterisk are required.

Use our field presets when possible, as they include parameters for auto-filling.

Set up fallbacks for when background images don’t load

If you’re using background images with text on top of them, you might want to set a contrasting color behind your background image to make sure text can still be read in case the background image doesn’t load (due to slow internet connection or other similar issues).

Keep in mind that the color you set behind the background image should contrast well with the color of your text on top of it.

By default, the background color for blocks is set to white.

accessibility - background

Types of content you may want to avoid

If you want to create a Foleon Doc that's in accordance with the WCAG, there are certain types of content and Foleon features you may want to avoid as they’re currently not fully accessible:

  • Search feature: Our search feature is not accessible, as it cannot currently be controlled with a keyboard and isn’t optimized for screen readers, so you may want to avoid using it.

  • Page scroll button: You can display a scroll button on your page. However, this scroll button is not accessible as it currently can’t be controlled with a keyboard, so you may want to disable it in the page settings.

Of course, we'll continuously improve Foleon Docs' accessibility and are working to improve the aforementioned features.

Checking your Foleon Doc’s accessibility

If you’ve followed all the tips listed here, you probably want to see how well you’re doing in terms of accessibility. Luckily, there are numerous tools out there that help you check your content’s accessibility. Here are our favorite ones:

You can also use these easy checks from W3C to do a basic review of your content’s accessibility.

Recommended reads

If you want to learn more about creating accessible web content, we recommend reading the following articles:

These articles also served as sources for this article.