Accessible-ready blueprint templates for page builder

The Accessible-ready blueprint templates have been developed to work with donation pages and data capture pages

Background

To help clients achieve WCAG 2.1 AA compliance for their Engaging Networks-hosted pages, we worked with our accredited partner Cornershop Creative to develop three accessible-ready page templates. The Web Content Accessibility Guidelines (WCAG) offer a wide range of recommendations for making Web content more accessible. For more details, please visit: https://www.w3.org/TR/WCAG21/

Use of the accessible-ready templates alone will not assure compliance with WCAG 2.1 AA, since clients must choose fonts, colour palettes and other design parameters. For example, your organization’s branding guidelines may specify fonts and colours, but when applied to web pages, these choices may not meet accessibility guidelines for colour contrast.

To assure accessibility compliance, clients are encouraged to use self-assessment tools, such as those found at https://webaim.org/, and to seek assistance from accessibility experts including some of our Engaging Networks accredited partners.

What makes the templates accessible ready

REM Units

Pixels are a non-scalable unit that are the basis of website styling. REM is a scalable unit that is gaining more prevalence, especially with regard to accessibility. REM is dependent on the default, or Root, browser font size and utilizes a ratio to calculate the number of pixels required. In most browsers, the default font size is 16 pixels. Some users – including those who use screen readers and other assistive technologies – may change this default for better visibility. If a paragraph is styled to be 16 pixels, then regardless of assistive technology it will remain 16px.

Units are applied in REM, with a base of 10. For example, if you’d like to use a unit of 24 pixels, you would instead use 24 / 10 = 2.4rem. REM is a scalable unit that is dependent on the root. Unlike pixels, REM units can be scaled when users define new defaults.

Semantic HTML Landmarks

Each template utilizes HTML landmark tags to identify important sections. These are:

• header

• main

• footer

Label Roles

We have included scripts that will apply role=”button” to some radio button labels. This is mostly important for the accessible labels (see below).

Aria Required

For mandatory form fields like inputs, selects, and textareas, we have written scripts to add a parameter of aria-required=”true” to each upon page load in most cases. Screen readers will announce that an input is required before reading the label when this is applied. It is better than the standard required HTML attribute, which will cause the browser to signal when it is missed. That would interrupt the Engaging Networks validation and verification methods.

General CSS

Each template includes lightweight CSS for the following:

• Reset to normalize styles for different browsers and devices.

• Fluid typography for auto-scaling fonts.

• Common form styles for consistent rendering.

Navigation Indicators

Two of the templates are designed for multi-step pages: Accessible Ready Page Template 1 and Accessible Ready Page Template 2. In this situation, it is important to indicate which page a visitor is on. Navigation indicators appear at the top when the page owner adds page names in the template user interface, like this:

Accessible Complex Labels

Ensuring forms can be navigated using only a keyboard is imperative for accessibility. Often, we see radio buttons that are transformed into larger, more visually-appealing buttons like this:

However, these buttons are not actually the radio inputs, but rather their associated labels. Labels are not accessible to keyboards in the same way that inputs are, and cannot be selected with either the spacebar or enter/return key. In fact, the radio inputs themselves are virtually always hidden using CSS. Screen readers see that, and skip them because of it.

Instead of using display or visibility to hide the input element, we have:

• Absolutely positioned it behind the label, out of sight

• Moved the input far outside the range of visibility, but without reducing opacity

• Created label styles that rely on the input selection to apply focus to the label as though it were the input

Now, these buttons can be navigated with the keyboard while remaining visually appealing!

How to create a template from a blueprint

1. Go to Pages > Components, and then Templates on the left menu

2. Click New Template, and then click on the Template blueprints tab. This will list all Sample templates (that we provide) as well as any Account blueprints that you may have added yourselves

3. Under Sample templates, click on the one you would like to use (see below for a rundown), and then click ✔ Select

4. The editor will open. On the left you’ll see various vertical tabs that allow you to adjust different parts of the template that will be created from the blueprint. For more information on what is available, read the information on the blueprint you are working with below

5. Give the template a name and Save. This will create a new page template for you to use on your page or pages.

Available Accessible-Ready blueprint templates

Accessible-Ready Page Template 1

This accessible template can be used for a single or multi-step donation page. It has a left-aligned, floating form block, a header, and a footer section with three column areas. A big background image and lots of customizable settings are included.

Accessible-Ready Page Template 2

This accessible template can be used for a single or multi-step donation page. The page is split down the middle. The left side shows a big background image, logo, and overlay text. The right side shows the form and is scrollable.

Accessible-Ready Page Template 3

This accessible template can be used for a single or multi-step donation page. The page features a header with your logo, a main body with two columns, and a footer. The main body’s left side is for the form, and the right side is for a feature image and two additional information boxes.

Editing Accessible-Ready blueprint templates

Global styles tab

General tab

Custom code

Meta tab

Fonts tab

Recommended to upload the font files into Engaging Networks and allow Engaging Networks to host them.

Footer tab (template 1 & 3)

You can add additional content in the footer area. 

Content tab (template 3)

You can add additional content in the footer area.