Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

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

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

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

Image AddedAccessible-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