Accessible-ready blueprint templates for page builder

Supported pages

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

Item	Description
Amounts Button Selected Background	The background of the primary radio buttons when selected
Amounts Button Selected Border	The border of the primary radio buttons when selected.
Amounts Button Selected Color	The text color of the primary radio buttons when selected
Amounts Button Unselected Background	The background of the primary radio buttons when NOT selected
Amounts Button Unselected Border	The border color of the primary radio buttons when NOT selected
Amounts Button Unselected Color	The text color of the primary radio buttons when NOT selected
Border Radii	The radius of the border corners. For squared corners, enter 0. The higher the number (in rem) the more rounded.
Default Text Color
Error Field Background
Error Text Color
Error Text Size	In REM
Footer Background Color (template 1  & 3)	Color for the footer area below the form
Form Wrapper Background Color	Background color of the form
Header Background Color (template 1 & 3)	The color for the header area at the top of the page
Header Border Bottom Color
Header Logo Width	Width of the logo image
Headings Color	Color for the text headings
Info Box 1 Background	The background color for the first info box, if differentiation is required.
Input Border Color	Affects all inputs and select boxes
Link Text Color	Hyperlink text color
Nav Indicator Complete (template 1 & 2)	Color for completed navigation indicator item. If the indicator is past it will be considered complete.
Nav Indicator Current (template 1 & 2)	Color for current navigation indicator item.
Nav Indicator Unseen (template 1 & 2)	Color for unseen navigation indicator item. If the indicator is not yet reached it will be considered unseen.
Navigation Indicators (template 1 & 2)	Add navigation indicator titles, separated by commas. These are displayed above the form to indicate where the visitor is in the process. You may leave this field blank if you don’t want to display indicators.
Submit Button Background	The background color of the submit button
Submit Button Hover Background	The background color of the submit button that shows when the cursor hovers over it. If you don’t want this effect, keep both colors the same.
Submit Button Text Color	The font color of your submit button. This defaults to white

General tab

Item	Description
Currency Symbol	For use with “Other” amount selected. Does not update for geographical settings.
Home Website URL	URL that will be used as a hyperlink for the header logo image.
Image Overlay Title (for template 2)	The overlay title on the left side
Image Overlay Title Color (for template 2)	The color of the overlay title (make sure to have high contrast!)
Logo URL	URL of the logo image. Use ‘manage images’, to upload and select the file.
Main Background Image (template 1 & 2)	URL of the background image. Use ‘manage images’, to upload and select the file. Template1 and Template 2 have large background images. It is important to reduce image file sizes as much as possible, though you do not always need to reduce aspect ratio (width and height) to achieve small file sizes. Our minimum recommendations are: Template 1: Aspect ratio: 16:9 Dimensions: 1920 pixels wide by 1080 pixels high Image focus: Centered Template 2: Aspect ratio: 4:3 Dimensions: 1920 pixels wide by 1440 pixels high Image focus: Left
Navigation Indicator Numeration (template 1 & 2)	Whether to show navigation page number
Slogan	Used for the logo’s alt text

Custom code

Item	Description
Custom CSS	Add custom CSS styles to the template
Custom JS (Body)	Adds custom JavaScript to the template’s body tag
Custom JS (Head)	Adds custom JavaScript to the template’s head section

Meta tab

Item	Description
Document Title	Displayed in browser tabs to identify the page
Favicon URL	The image associated with the page. Visible in browser tabs
Google Tag Manager Account ID	The account ID, after “GTM-“
Meta Copyright	Page copyright year
Meta Description	Descriptive text for the page, which can be assistive and allows robots like Google crawlers to know more about the page.
Meta Keywords	Comma-separated values of keywords help robots like Google crawler to associate your page with topics to enhance search operations.
Meta Robots	Tell crawlers (robots), like Google, whether to index and/or follow the page. Indexing allows Google to crawl your page and show its content, media, and resources in search results. Following allows Google to open links on the page to discover new pages. The most common value for this field is “noindex,nofollow”, disallowing both indexing and following for crawlers on donation pages.
Meta Written Language	The page default language, e.g. EN for English.

Fonts tab

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

Item	Description
General Fallback Font	A fallback for your selected, uploaded general font in case of browser or loading error.
General Font Family Format	Format of font file (see extension)
General Font Family URL	URL of the font file uploaded in your Engaging Networks account
Heading Fallback Font	A fallback for your selected, uploaded heading font in case of browser or loading error.
Heading Font Family Format	Format of font file (see extension)
Heading Font Family URL	Use link picker, or link to external resource

Footer tab (template 1 & 3)

You can add additional content in the footer area. 

Item	Description
Footer Left Content	HTML markup for left footer column
Footer Center Content	HTML markup for center footer column
Footer Right Content	HTML markup for right footer column

Content tab (template 3)

You can add additional content in the footer area. 

Item	Description
Footer Left Content	HTML markup for left footer column
Footer Center Content	HTML markup for center footer column
Footer Right Content	HTML markup for right footer column