How to make your content accessible

Accessibility is all about making sure that your content is created in such a way, that it has the potential to be received by the maximum amount of viewers, despite their disabilities or the technical platforms they use.

Here are just a few easy steps to make sure that the content you create in Zapnito is accessible.

Text

Use heading elements to introduce content

Heading elements construct an outline of the content. Ensure you use the correct heading elements. Avoid using bold or italic text to visually section content.

To create a heading:

• Select the text you want to turn into one of your headings
• Remove any formatting (bold, italics, underlines etc.)
• Select the heading of your choice from the format dropdown menu (remember about the consequent use of headings - Heading 2 > Heading 3 > Heading 4 and so on) 

Do not use h1 (Heading 1) in your content

The h1 element should only be used the communicate the high-level purpose of the page. This is already being used by the headline or title of your content, therefore, all subheadings should start from h2 It's for this reason, we have removed the h1 element from the editor.

Heading levels should be sequential

The order of heading elements should descend based on the depth of your content. For example, a h4 element should not appear before the first h3

Use bulleted or numbered lists

When you need to list content, ensure you use bulleted or numbered lists. Do not manually recreate lists with paragraphs.

Links

Ensure link content is unique and descriptive

Avoid using terms such as "click here" as they don't provide any context. Some users navigate the page using a list of all buttons and links. Instead, try to describe where the link will take the user (for example, "register for our webinar").

In addition, do not reuse the same label for different links. If the link takes the user to a different URL, provide a different description.

Ensure links are recognisable as links

The styling of links is determined by your theme. We will always advocate for making your content links as recognisable as possible. Ideally, links should be blue and underlined. This is the most commonly-understood way to communicate the presence of a link.

Your brand may dictate that links should be another colour. In this case, ensure the colour has a high contrast against the page background and the text around it.

Images

Make sure all images have an alt attribute

Alternative text (or the alt attribute) gives a description of an image for people who may not be able to view them. When an alt attribute is missing, screen readers may read out the image's URL and filename. In many cases, the filename fails to describe the image.

Ensure that you use an alternative text that adequately describes the image to the user. If the image is purely decorative you can leave the alternative text field blank. The Zapnito editor will automatically insert a blank alt attribute for you, which is perfectly acceptable for WCAG.

For images containing text, make sure the alt attribute contains the image's text

It's best to avoid images containing text. However, there are situations where this isn't possible (e.g. logos). In these situations, ensure the alt text matches the text within the image.

Provide a text alternative for complex images such as graphs and maps

Charts and maps cannot be read by a screen reader therefore visually impaired users will miss out on this information. Try to describe the image or, when applicable, provide source data in a table so that visually impaired users don't miss out on vital information.

Tables

Use tables to describe tabular data

Ensure that tables used to display tabular data, rather than as a way of laying out content. In addition, under no circumstances should you use images to display tabular data. Alternative text is not enough to adequately describe the table and visually impaired users will miss out on important data.

Add a caption to provide a title for a table

The table's caption should describe what kind of information the table contains. Screen readers allow users to view a list of tables on the page. If the table has an accessible caption, the screen reader will provide that name to the user.