WCAG 2.0 (Web Content Accessibility Guidelines 2.0) on Instapage

 

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 types of users in general, not just people with disabilities.

WCAG 2.0 will ensure that the page content can be perceived, operated, understood by the user and that it can be interpreted by a wide range of user agents such as browsers and supportive technologies.

 

What can you do in our page builder to make your landing pages more accessible?

Table of contents:

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. The language of a page - the lang attribute
10. 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;

A GIF showing how to edit the alt text for images

  • title for video widgets - it should be a descriptor of what the video is about, what the visitor should expect if they hit 'Play' on it;

Where to add a title for videos in the Instapage builder

  • 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:

A GIF showing where to change the aria label for non-text elements with links on them

Form buttons:

A GIF showing where to change the aria label for form buttons

Links on images:

A GIF showing where to change the aria label for images with links on them

[Click here to go back to the table of contents]

 

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 somebody interacting with the page visually, they would not be as clear to people using a screen reader.

What you can do to create accessible tables is use our HTML box feature and code the sections of the table. 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.

[Click here to go back to the table of contents]

 

3. Accessible lists

If you used individual text boxes to create what looks like an unordered list, with stand-alone images in place of bulletpoints, 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. 

Image of list-looking elements

To achieve the same look but make 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 bulletpoints 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:

A GIF showing how to make a list accessible

If you have the image that you want to use in place of bulletpoints 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.

how-to-add-bulletpoint-images.png

[Click here to go back to the table of contents]

 

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.

[Click here to go back to the table of contents]

 

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, in order to check them using the tool above, by using Lighthouse on the live URL of the page:

A GIF showing how to use Lighthouse to see which elements do not pass the contrast ratio requirement

[Click here to go back to the table of contents]

 

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'

A GIF showing how the Accessibility Widget works on a real mobile device

[Click here to go back to the table of contents]

 

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: 

[Click here to go back to the table of contents]

 

8. Heading hierarchy

You can define each heading (H1 to H6) by picking from the options available for any headline text box.

A GIF showing how to pick a heading rank for a headline text box in the Instapage builder

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 here to learn more about heading ranks: https://www.w3.org/WAI/tutorials/page-structure/headings/ 

[Click here to go back to the table of contents]

 

9. Setting the language of a page - the lang attribute

The pages that you build with our platform have the lang attribute set to English (en) by default.

If your page is in a different language, the lang attribute will not change by itself, but you can request for it to be changed by our Support Team from the backend.
Message us at help@instapage.com with the request, including the URL of the page(s) and the desired language. The request can be for a single page, for multiple pages, for an entire workspace or for the entire account. 

[Click here to go back to the table of contents]

 

10. 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

[Click here to go back to the table of contents]