Accessibility checklist

In this article, you'll find a complete checklist for making your content more accessible. It's likely that you won't be able to follow all of these recommendations — but they're definitely a good starting point.

Quick checklist

• Structure
  ✅ Place important content higher on the page
  ✅ Use the correct heading hierarchy
  ✅ Set the right language in the Foleon Doc settings
  ✅ Use the top navigation bar with a centered logo

• Navigation
  ✅ Enable accessibility options in the Foleon Doc settings
  ✅ Write distinct and meaningful Foleon Doc and page names
  ✅ Give links unique and descriptive names
  ✅ Let your audience know where your links go
  ✅ Don’t neglect the mobile web experience

• 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

• Limitations (to avoid)

  ❌ Foleon branding
  ❌ Search function
  ❌ Page scroll button
  ❌ Anchor links
  ❌ Including page names in the top navigation

Learn more about each topic

• 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

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

      

       

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

    

   

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

    

     

  • Don’t neglect the mobile web experience

    Your audience will read your content on all kinds of devices, ranging from a 5" mobile phone to a 23" monitor — and everything in between.

    Foleon Docs are responsive out-of-the-box, which means that they adjust automatically to various screen sizes. However, you can fine-tune your content in our different view modes. This can help your audience to navigate your content on tablet and mobile devices.

    

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

    

     

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

    

     

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

   

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

  • Foleon branding

    Make sure to disable the Foleon branding. You can't target this with the keyboard focus.

  • 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

    This feature will not pass the accessibility check. You can target this with the keyboard focus, but your focus is not moving with the anchor link.

  • Including page names in top navigation

    This feature will not pass the accessibility check. We've currently only optimized the top navigation bar with a centered logo.