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. Reading order
10. The language of a page - the lang attribute
11. The language of a part of the page
12. Grouping form fields into fieldsets

_____________________________________

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

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

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

[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 as seen here: https://d.pr/hxeRHY 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. 

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:

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.

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

[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'

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

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

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

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 for it to 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. 

[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]

11. Grouping form fields into fieldsets

You can group the fields of a form into fieldsets in order to make the page more accessible for people that use a screenreader. 

To do this, click the form, then click on Edit. Press the SHIFT key on the keyboard and then click on the fields that you want to group together into a set.

The name that you give your fieldset will use the show-for-sr class mentioned at point #7 above. You can refer to the below image to see how it looks like when using the Inspect tool of the browser.

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