Info Supported pages The Accessible-ready blueprint templates have been developed to work with donation pages and data capture pages
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
- Go to Pages > Components, and then Templates on the left menu
- 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
- Under Sample templates, click on the one you would like to use (see below for a rundown), and then click ✔ Select
- 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
- 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: |
| 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 |