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.

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.

  

   

• 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.

  
  

• 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:

     

    

    
    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.

• Add useful alt text to the right types of images
  To accommodate visually impaired readers that use screen reader software to convert text to speech, consider adding alt text to your images. 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 on the bottom. In the example below, we click on "Office".

  

  Here you'll be able to change the name of the image in the media library. Next to that, you can add alt text in the image alt field. In the example below, we've described the image as "Modern office building".

   

  

  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 warns readers and helps 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:

  • Learn how to add closed captions to YouTube videos

  • Learn how to add closed captions to Vimeo videos
    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.

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 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 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:

    

   

  • 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:

    

     

  • Use our field presets when possible as those 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. For this particular page, you can imagine that the text (which is also white) won’t be readable if the background image doesn’t load and shows the white background color instead. You can set a background color here to prevent this from happening.

  The content is still readable, even if the background image doesn’t load. For example, if you set a blue background color and the image doesn’t load, it would appear like this:

  

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 currently cannot be controlled with a keyboard and isn’t optimized for screen readers, so you may want to avoid using this feature.

• 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 the accessibility of Foleon Docs and we 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:

• WebAIM Color Contrast Checker lets you check if certain color combinations have enough contrast.

• Color Oracle is a free color blindness simulator that demonstrates how people with common color vision impairments see things.

• WAVE Web Accessibility Evaluation Tool is an automated tool that tells you where your content needs tweaking to improve accessibility.

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:

• Top 10 Tips for Making Your Website Accessible

• A is for Accessibility — 12 top tips for designing an inclusive user experience

• Designing for accessibility is not that hard

These articles also served as sources for this article.