What is WCAG 2.0?
WCAG 2.0 covers a wide range of recommendations for making web content more accessible.
Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity, and combinations of these. Following these guidelines will also make your web content more accessible to all users, not just people with disabilities.
WCAG 2.0 will ensure that the page content can be perceived, operated, and understood by the user, and that it can be interpreted by a wide range of user agents such as browsers and supportive technologies.
Following these accessibility best practices can also help improve the Quality Score assigned by advertising platforms such as Google Ads and Meta, as accessibility improvements often enhance overall page usability and user experience.
- 1. Text alternative for non-text content
- 2. Accessible tables
- 3. Accessible lists
- 4. Footnote-type links for text
- 5. Check the text color contrast ratio
- 6. Text resizing for mobile devices
- 7. Allow people using screen readers to skip content
- 8. Heading hierarchy
- 9. Reading order
- 10. The language of a page - the lang attribute
- 11. The language of a part of the page
1. Text alternative for non-text content
alt attribute for images - it should be a text description of the image so that someone using a screen reader could understand the idea of the image; if the attribute is left empty, a screen reader will skip the image, deeming it as not important.
NOTE: The alt text will not show up on the live page if it is added after the image has been placed on the page, when adding it from the image library. In that case, you will need to remove the image and add it again. We advise adding the alt text before you place the image in this scenario.
Alt attribute added from the image library:
Alt attribute added to the image directly on the landing page:
The title for video widgets should be a descriptor of what the video is about, what the visitor should expect if they hit 'Play' on it;
The aria-label for non-text elements that serve as links (buttons, images) - it should indicate to a visitor using a screen reader where the link on that element would take them and what action would result from clicking on it. Example: "Click this link to go to the signup page for the limited-time seasonal offer."
Regular buttons:
Form buttons:
Links on images:
2. Accessible tables
With our builder, it is easy to create content that looks like a table, using paragraphs, images, and shapes. However, while they might look like real tables to someone viewing the page, they would not be as clear to someone using a screen reader.
What you can do to create accessible tables is use our HTML box feature, as seen here: https://d.pr/hxeRHY, and code the table sections. A resource you can refer to is https://www.w3.org/WAI/tutorials/tables/.
Choose a type of table from the list, and after clicking on its name, you will see the code needed for it. Of course, you can then alter the table with additional code to make it look the way you want it to.
3. Accessible lists
If you used individual text boxes to create what looks like an unordered list, with stand-alone images in place of bullet points, a screen reader would not know that it is supposed to be read like a list. In the image below, you can see an example where five different paragraph text boxes are made to look like a list, with images of a checkmark used instead of bulletpoints.
To achieve the same look while making the list accessible, place all of the lines in a single text box, set it to be an unordered list from our native options, and then you can make the bullet points invisible using inline CSS. Under contents-ul, add the property list-style and give it the value none. You can refer to the GIF below:
If you have the image that you want to use in place of bullet points on a URL that can be referenced, you can also add it using inline CSS, as shown in the screenshot below. Keep in mind that the image will have to be the exact size that you need! It is 15 pixels wide in the example below.
4. Footnote-type links for text
You can use this link option to give more context in the form of a footnote to another text box. The two textboxes will be connected - the numbers will be clickable, and a screen reader would be able to recognize that and click the number to be taken to the appropriate footnote.
5. Check the text color contrast ratio
The large text should have a contrast ratio against the background of at least 3:1. The regular-sized text should have a contrast ratio against the background of at least 4.5:1. You can use tools such as https://contrast-ratio.com to check your pages for this.
How to get the color from elements that do not pass, to check them using the tool above, by using Lighthouse on the live URL of the page:
6. Text resizing on mobile devices
To allow the user to resize the text on a mobile device, you can implement a widget that we created. Add the code below to the Javascript > Footer section, and the widget will appear on mobile devices, in browsers that support CSS variables.
<script>
const InstapageAccessibilityWidget = true;
const widgetElement = document.querySelector('.a11y-widget-wrapper');
widgetElement.setAttribute('data-position', 'right-center');
</script>You can replace 'right-center' with one of the following, depending on where you want the widget to sit on the page:
'right-top'
'right-bottom'
'left-center'
'left-top'
'left-bottom'
7. Allow people using screen readers to skip content
If your page has repetitive content (such as a menu that appears on multiple pages from your website) you can add an invisible HTML widget right before that, which will contain a link to the first piece of non-repetitive content that you want the visitor to be able to access right away.
We created a class called show-for-sr, which stands for Show for screen readers. Create a hyperlink with that class that links to the first content element, and it will not be visible to people using a mouse, but it will be accessible by those navigating with the TAB key on the keyboard and to those using a screen reader.
This is more common for websites that have a complex navigation menu present on every page of the website. In those situations, somebody navigating with the TAB key or with a screen reader would have to go through the same 20-30 elements every time they click to access a new page of the website, and this solution takes care of that. You would not normally have this kind of navigation on landing pages, but there might be cases where this is needed.
Please refer to the video below for the steps:
8. Heading hierarchy
You can define each heading (H1 to H6) by picking from the options available for any headline text box.
Important things to keep in mind about using headings:
- Only the first headline on the page should be H1
- Do not skip levels for nested headings. Example: H2 should be followed by H3, not by H4
- You can fully adjust the size and appearance of a headline text box regardless of what rank it has.
- You can go learn more about headings here: https://d.pr/UzpL3j
9. Reading order
The text boxes on the page will be read (by navigating with TAB; by a screenreader) in the order of top to bottom, left to right.
If you have multiple columns of text in headline+paragraph pairs in the same horizontal area, you will need to group the columns in order for them to be read together. If they are ungrouped, all the headlines will be read first, then all the paragraphs. To group elements, click and drag across them, then click on Group.
10. Setting the language of a page - the lang attribute
The pages that you build with our platform do not have a lang attribute by default.
If your pages need to have one, you can request that it be added by our Support Team from the backend.
If you are on our Convert plan, you can use your development/production hours to set different language attributes for individual pages.
Regardless of your subscription level, you can have a default lang attribute for the entire account or a different one for each workspace, free of charge.
Message us at help@instapage.com with the request, mentioning the desired language and if it should be for the entire account, a specific workspace, or a list of pages, if you have development hours in your Convert contract.
11. The language of a part of the page
If you have a page that uses multiple languages, you can set the language attribute for parts of the page instead of having the same one for the entire page.
To find the language codes in ISO 639-1 you can go here: https://www.w3schools.com/tags/ref_language_codes.asp