Tips for Content Creation

Page Titles and Headings

Use the correct heading levels and font size.

When using a proper page title, users can easily find the desired page or return to it. Ensure that page titles are clear and unique, and headings are descriptive.

Using headings on a page allows users to quickly view and recognize the structure of the page. Often a heading is bold and bigger in font size than other text on the page, which is impossible for visually impaired users to see or recognize. Screen readers can prompt the user with a list of available headings on the page. This means that on content pages it is important to follow the rules listed below:

After a heading of the 1^st level, a heading of the 2^nd level should follow.
After a heading of the 2^nd level, a heading of either the 2^nd or 3^rd level should follow.
Headings are used in sequential order. Therefore, you should not skip over a heading level.
There should be only one 1^st level heading on each page.

Text Size and Alignment

The text should be large enough with consistent spacing between words and letters to read comfortably.

Although there is no official minimum font size for the web content, it is generally recommended to use a size of 16px for body text. Of course, some text will be smaller, and headings will be larger, but the main body text is usually 16px.

Therefore, when you edit your theme's typography settings, make sure that your text is large enough for users to comfortably read. The text should also have consistent spacing between words and letters to make it easy to read.

Labeling of Links and Buttons

Use descriptive texts for the links and buttons.

Taking into consideration the WCAG recommendations, content management is a key element for making the webstore accessible. If a user is visually impaired, they can use screen readers. Screen readers can read a full page to a user. If a text contains any links or buttons, screen reader users can listen to a list of links and buttons. In that case, a screen reader may only read the link or button text and not the surrounding text.

Imagine the situation when all the links on the page sound Read more, Click here, More. Following such links can make the navigation for a person with disabilities quite complex. These links can be confusing when a screen reader reads them out of the content. Therefore, a link text should be unique and descriptive. It should convey the function and purpose of the link or button. The text links must be also either underlined or have another visual differentiator from a regular text.

Alternative Text for Images

Add alternative texts to the images that accurately describe each image.

The visually impaired, blind, people who have low vision, are not able to view the images on a page (clearly). Screen readers are created to provide these users with a possibility to listen to an extra description (alt text) of the image to make it clear what is shown on the image. When a screen reader encounters an image, it will read an alternative text of the image. Alternative texts are also important when images are not loaded on a page for some reason. If the alt text is empty, a screen reader reads out the image name, which is generally not very descriptive.

Sana allows to add descriptive alt texts to the images.

Text within an Image

Don't use text inside the image, instead add it on top of the image.

If the image itself contains text, a screen reader will not be able to read it out to the user. Try to avoid using such images and add the text on top of the image using the available content elements in Sana. If the text added on top of the image is short, then add it as the alt text of the image as well.

Color Contrast

Use enough contrast between the text and its background so that it can be read by people with moderately low vision.

The WCAG regulations have specific guidelines on the desired color contrast. For people who suffer from color blindness, certain color combinations make a website unreadable. These users rely on adequate color contrast to visually differentiate one thing from another. For example, it is not recommended to use light gray text on a white background, since it will be difficult for a user to read. Instead, you need to make contrasts so that the elements are easily distinguishable, for example, you can set a dark color of the text on a light background.

It is recommended to run the colors used on your web pages through a contrast checker. The tools below can help you to test the color contrast of your web pages:

Contrast Checker (online version)
WCAG Color Contrast Checker (Google Chrome extension)
WCAG Contrast Checker (Firefox extension)
WCAG Contrast Checker (Microsoft Edge extension)

Video

When you add videos to your webstore, make sure that you consider the needs of visually impaired users, deaf or hard of hearing users.

Make sure there are play and pause buttons.
Add transcripts for videos with dialogues.
Avoid flashing content that can cause seizures.