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.
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
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
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.
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.
Make sure all images have an
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.
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.