At Foleon, we take great pride in developing a platform that empowers organizations to easily create content experiences that look great on any device. What’s even more important, however, is making that content accessible to anyone.
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 publications 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 publications lies in making your content itself accessible. In this article, we’ll share tips on creating accessible Foleon publications.
In this article
- Structuring your content optimally
- Tips for creating accessible content with Foleon
- Designing for accessibility
- Types of content you may want to avoid
- Auditing your publication’s accessibility
- Recommended reads
Structuring your content optimally
Place important content higher on the page
When you’re creating a Foleon publication, 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.
A simple exercise to test if you’re doing this correctly is by identifying important hyperlinks and content elements that readers need to see in your publication. Once you’ve taken note of those, navigate through your publication 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?
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 publications.
Screen readers must recognize how your page is structured and its most important information.
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)
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 publication and pages distinct and meaningful names
When creating publications, it’s important to take some time to write good names for both the publication itself and the pages it contains.
By default, Foleon page titles start with the name of the page and end with the publication name:
<<Page name>> - <<Publication name>>
Your publication name should adequately and briefly describe the contents and purpose of the publication while your page names should describe what’s on that specific page. Additionally, they should all be unique. Avoid giving different publications or pages the same (or very similar) names.
Set the right language for your publication
Under publication settings, you can set your publication’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 publication. We currently support a wide range of languages. If your language is missing, please contact our support team at firstname.lastname@example.org.
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.
Note: images via our Unsplash integration currently don’t support alt text.
- 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
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 publication 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 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 publication (e.g., links to another page or an overlay) to open in the same tab, and setting external links that leave the publication (e.g., links to other publications, 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:
“To learn more about white paper marketing, read our eBook: How to write and format a white paper (opens in new tab).”
This links to another publication and should open in a new tab. In this case, you should include a warning in the link text to help readers 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:
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 contrasts. 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.
For example, if you set a blue background color and the image doesn’t load, it would appear like this:
The content is still readable, even if the background image doesn’t load.
Types of content you may want to avoid
If you want to create a publication 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:
- Background video: The WCAG states that readers should be able to pause background videos. That’s currently not possible with Foleon. You can still use background videos, but only if they last no longer than 5 seconds and don’t loop.
- GIF images: Similar to background videos, readers should be able to pause GIF images. That’s currently not possible with Foleon, so you may want to avoid using these.
- 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.
- Scrollable columns: If you set blocks to appear in full height, they always appear fullscreen (regardless of how much content the block contains), which works great. However, if you add more content to the block than what can fit on your screen, the columns within the block will become scrollable. The scroll buttons that appear for each column are not accessible as they currently can’t be controlled with a keyboard. We advise limiting the amount of content you add to blocks that are set to appear in full height or to disable these scroll buttons.
Of course, we'll continuously improve the accessibility of Foleon publications and we are working to improve the aforementioned features.
Checking your publication’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.
- AXE Google Chrome Extension allows you to test accessibility violations (only compatible with Google Chrome).
- WAVE Web Accessibility Evaluation Tool is an automated tool that tells you where your publication needs tweaking to improve the accessibility.
You can also use these easy checks from W3C to do a basic review of your content’s accessibility.
Additionally, we facilitate accessibility checks where we give you practical tips on how to further improve your publications. We can also connect you with expert companies that perform accessibility audits. If you’re interested in any of these 2 services, please contact our support team at email@example.com.
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.