1. Home
  2. page-builder
  3. Page templates
  4. Accessible-ready blueprint templates for page builder

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.

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

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

 

Updated on May 11, 2022

Was this article helpful?

Need Support?
Can't find the answer you're looking for?
Contact Support