Funraisin WCAG Guide

30 Nov 1999

Funraisin WCAG Guide

Accessibility isn’t a “nice to have”—it’s foundational to every digital experience you create in Funraisin. Every supporter should be able to read your content, understand your message, register, donate, and participate, regardless of ability, device, or browsing conditions. Accessibility also supports older donors, mobile users dealing with glare or small screens, and anyone navigating your content in less-than-ideal environments.

While accessibility can feel technical, many of the biggest wins come from everyday content decisions: the alt text you write, the colours you choose, how you structure headings, and the way you embed videos or format forms. Funraisin’s templates and components are built with accessibility best practices in mind, but your content choices are what make those experiences truly inclusive.

That’s where WCAG comes in. WCAG (Web Content Accessibility Guidelines) is the globally recognised standard for creating accessible digital content, and WCAG 2.1 AA is widely used as a benchmark for nonprofit compliance and best practice. It covers everything from colour contrast and keyboard navigation to captions, headings, and text alternatives.

Most importantly, accessible content improves outcomes. Clean structure, clear language, and usable forms reduce friction across the donor journey—leading to higher completion rates for registrations, donations, and event participation.

This guide turns WCAG into a practical, creator-friendly checklist tailored specifically for Funraisin, so you can build pages that look great and work for everyone.

Jump to:

Understanding the core principles of WCAG

WCAG is built around four core principles that make digital content usable for as many people as possible:

1
Perceivable: users must be able to see or understand the content, even if they use assistive technology
2
Operable: users must be able to navigate and interact with the page
3
Understandable: content and interactions must be clear and predictable
4
Robust: content must work across a wide range of browsers, devices, and assistive tools

You don’t need to memorise these principles. This checklist translates them into practical steps you can follow directly when building content in Funraisin.

Images

Add descriptive alt text for every meaningful image

1
What to Do: Provide clear, descriptive alt text for any image that conveys information or adds meaning to the page.
2
Why It Matters (WCAG): Screen readers rely on alt text to describe visual content to users who cannot see it. Without it, key information may be missed or misunderstood.
3
How to do it inside Funraisin: Add alt text when uploading an image to the media library; or edit the alt text on any image by opening the block and updating the field.

Tip! Every image block—including hero images and gallery items—includes an alt text field, so you can add or edit descriptions at any time.

Use empty alt text (“”) for purely decorative images

1
What to Do: If an image doesn’t add meaning (e.g., background textures or decorative icons), use empty alt text.
2
Why It Matters (WCAG): Decorative images should be skipped by assistive technologies to avoid clutter and reduce cognitive load for screen reader users.
3
How to do it inside Funraisin: In the image block, leave the alt text field empty for decorative visuals; ensure meaningful images always include alt text.

Tip! Funraisin allows you to leave the alt text field blank or mark an image as decorative.

Provide long descriptions for charts, diagrams, and infographics

1
What to Do: Offer a text alternative that explains the content of complex visuals, such as charts or data-heavy graphics.
2
Why It Matters (WCAG): Charts and infographics contain information that cannot be conveyed through standard alt text alone. A longer description ensures all users can understand the data.
3
How to do it inside Funraisin: Add a text block below the image with a plain-language explanation; or upload a file as an asset (e.g., detailed PDF) and link to it beneath the image.

Tip! You can add supporting text directly below the image or upload a descriptive file for download.

Video & Audio

Always provide captions for videos

1
What to Do: Ensure every video you embed includes accurate captions.
2
Why It Matters (WCAG): Captions are essential for people who are deaf or hard of hearing, and they also support comprehension in noisy or sound-off environments.
3
How to do it inside Funraisin: Upload your captioned video to a hosting platform (e.g., YouTube or Vimeo); embed the video link into a Video block in Visual Builder; confirm captions are enabled on the hosting platform.

Tip! Embedding a YouTube video will automatically include YouTube’s closed-captioning options. For uploaded videos, use a captioned version whenever possible.

Add a text summary below videos

1
What to Do: Include a short written summary of the video’s key points directly below the embedded player.
2
Why It Matters (WCAG): Text summaries support people using screen readers, those with cognitive impairments, and anyone who prefers or needs written information instead of video.
3
How to do it inside Funraisin: Add a Text block below the Video block; write a short explanation of the video’s purpose or key information.

Tip! A simple, two–three sentence summary is often enough—keep it clear and focused.

Headings

Use one H1 per page

1
What to Do: Ensure each page contains only one H1 heading—the main title of the page.
2
Why It Matters (WCAG): A single H1 helps screen readers understand the primary topic and ensures a clear, logical starting point for users navigating by assistive technologies.
3
How to do it inside Funraisin: Use the Title block for your main page heading; avoid manually applying H1 formatting to additional headings in Text blocks.

Tip! Most Funraisin templates automatically assign the H1 based on the title block or page configuration.

Follow a logical heading order (H2 → H3 → H4)

1
What to Do: Structure your content using sequential headings to divide sections and subsections.
2
Why It Matters (WCAG): A consistent hierarchy allows screen reader users to skim and jump through sections just like sighted users do visually.
3
How to do it inside Funraisin: In Text blocks, select the appropriate heading level from the style dropdown; keep your structure linear: don’t jump from H2 straight to H4; review heading styles in Platform Setup to ensure global consistency.

Tip! Heading styles are built into both the Title block and Text block, making it easy to apply the correct hierarchy without styling text manually.

Don’t skip heading levels

1
What to Do: Avoid jumping from one level to a non-sequential level (e.g., H2 → H4). Always nest headings in order.
2
Why It Matters (WCAG): Skipping levels can confuse assistive technologies and disrupt how users interpret the page’s structure and hierarchy.
3
How to do it inside Funraisin: Check the heading level before publishing; use Platform Setup → Styles to manage platform-wide heading behaviour; build pages in mobile preview occasionally—hierarchy issues often show more clearly in a smaller layout.

Tip! Your heading styles can be configured globally so your team uses a consistent hierarchy across all pages.

Use meaningful link text instead of “click here”

1
What to Do: Write links and button labels that clearly describe their purpose—for example, Register now, Read the event guide, or Donate today.
2
Why It Matters (WCAG): Screen reader users often navigate using a list of links. Generic text like “click here” provides no context, making it difficult to understand where the link will lead.
3
How to do it inside Funraisin: In Text blocks, highlight your text and apply link styling; use Button blocks for primary calls-to-action and set a clear label in the block setting.

Tip! Button blocks and link styling within Text blocks allow you to set clear, descriptive text without extra formatting.

Ensure all buttons have visible, descriptive labels

1
What to Do: Avoid unlabeled icons or vague labels. Every interactive element should describe the action it performs.
2
Why It Matters (WCAG): Assistive technologies rely on labels to convey purpose. Buttons without labels—or with unclear labels—create barriers for users who depend on screen readers.
3
How to do it inside Funraisin: Use the Button block for consistent styling and accessible markup; check that your button text clearly conveys the action (“Start registration”, “View schedule”, etc.).

Tip! Funraisin button components automatically apply appropriate roles and accessibility attributes, as long as a visible label is included.

Avoid opening links in new tabs unless absolutely necessary

1
What to Do: Keep links set to open in the same tab unless directing users to legal documents, external policies, or resources that must stay separate.
2
Why It Matters (WCAG): Unexpectedly opening new tabs can disorient users, especially those using screen readers or keyboard navigation.
3
How to do it inside Funraisin: In Button blocks, set the link to “Open in same tab” by default; use “Open in new tab” only for essential cases, such as external PDF downloads or off-site resources.

Tip! Every Button block and link has a simple toggle for choosing whether the link opens in a new tab.

Colour & Contrast

Ensure text meets a minimum contrast ratio of 4.5:1

1
What to Do: Use colour combinations that provide sufficient contrast between text and its background.
2
Why It Matters (WCAG): Adequate contrast is essential for readability—especially for users with low vision, colour blindness, or those viewing content on mobile in bright environments.
3
How to do it inside Funraisin: Use the overlay settings within image blocks or hero sections; test your text against background colours using built-in colour pickers; prefer high-contrast theme colours from your platform’s brand palette.

Tip! Most image-based sections (like hero banners) include adjustable overlays that help improve contrast without changing your brand colours.

Avoid placing text over busy or low-contrast images

1
What to Do: Ensure text is always placed on a background that supports clear readability. If the image is detailed or bright, use an overlay or reposition the text.
2
Why It Matters (WCAG): Text placed directly over complex images often becomes unreadable, creating barriers for users with visual impairments and harming overall comprehension.
3
How to do it inside Funraisin: Increase the image overlay opacity in the block settings; move text into a separate Text block on a solid background; use prebuilt sections that stack content safely on mobile.

Tip! Funraisin section templates include layouts that separate text from imagery, helping maintain clarity across devices.

Stick to brand-approved, accessible colour combinations

1
What to Do: Use colours from your approved palette that are designed to work well together across headings, buttons, and backgrounds.
2
Why It Matters (WCAG): Consistent use of accessible colours reduces the chance of pairing low-contrast combinations and creates a smoother, more predictable visual experience.
3
How to do it inside Funraisin: Configure your colour palette in Platform Setup; apply these colours through the block editor rather than adding custom hex codes; consistently use your primary and secondary brand colours for CTAs and key messaging.

Tip! Your brand palette can be set at the platform level, making it easy to stay consistent and ensure accessible combinations across pages.

Text Content

Use clear, concise language

1
What to Do: Write in short, readable sentences and break up long passages with bullet points or separate text blocks.
2
Why It Matters (WCAG): Plain, straightforward language supports cognitive accessibility and improves comprehension for all users, especially on mobile.
3
How to do it inside Funraisin: Break long paragraphs into shorter sections using multiple Text blocks; use bullet or numbered lists for clarity; preview the page on mobile to check readability.

Tip! Text blocks in Visual Builder make it easy to structure content for readability. Use multiple text blocks instead of one long section.

Avoid using ALL CAPS for emphasis

1
What to Do: Use bold, italics, or heading styles to highlight text rather than relying on capital letters.
2
Why It Matters (WCAG): Screen readers may interpret all-caps text letter by letter, and full caps can reduce readability for users with dyslexia or cognitive impairments.
3
How to do it inside Funraisin: Apply built-in emphasis styles in the Text block; configure font weights and styles in Platform Setup for consistent usage across your site.

Tip! Platform-level typography styles let you customise emphasis (e.g., bold, semibold, highlight) without resorting to uppercase text.

Don’t upload text embedded inside images

1
What to Do: Add all important text directly into the page content rather than embedding it within a graphic.
2
Why It Matters (WCAG): Screen readers cannot access text inside images, meaning users relying on assistive technology will miss critical information.
3
How to do it inside Funraisin: Add a Text block below the image summarising the text content; use alt text for short labels, but never rely on it for full paragraphs.

Tip! If you need to use an image containing text (e.g., event poster), always repeat the key information in the page copy.

Form

Ensure all form fields have clear, visible labels

1
What to Do: Keep field labels visible at all times—don’t rely on placeholder text to describe what a field is for.
2
Why It Matters (WCAG): Labels are essential for screen readers and help users understand form fields even after they begin typing. Placeholders disappear, but labels remain accessible.
3
How to do it inside Funraisin: Use the default field labels provided in donation, registration, and custom forms; when editing fields, keep labels short, descriptive, and unambiguous.

Tip! All Funraisin forms automatically include accessible labels. Avoid removing or replacing them with placeholders.

Provide clear, helpful error messages

1
What to Do: Write simple, actionable messages that help users understand what went wrong and how to correct it.
2
Why It Matters (WCAG): Clear error messaging supports users with cognitive impairments and helps everyone complete forms with confidence.
3
How to do it inside Funraisin: Customise validation text in Platform Setup if needed; keep error messages short and direct (e.g., “Please enter a valid email address”).

Tip! Platform-level validation settings ensure consistent styling and behaviour across all forms.

Keep placeholder text short and avoid using it as a label

1
What to Do: Use placeholders only for short examples or hints—not as substitutes for proper field labels.
2
Why It Matters (WCAG): Placeholders vanish once typing begins, making fields more difficult to understand for screen reader users and people with memory or attention challenges.
3
How to do it inside Funraisin: Leave placeholders blank unless they genuinely enhance clarity; never remove the main label or rely on placeholder text to carry meaning.

Tip! Because labels are always displayed by default, placeholders should be used sparingly and only to clarify formatting (e.g., “MM/YY”).

Tables

Use tables only for actual data

1
What to Do: Reserve tables for structured data such as schedules, results, comparisons, or pricing—not for page layout.
2
Why It Matters (WCAG): Assistive technologies interpret tables as data structures. Using them for layout confuses screen readers, making content harder to understand and navigate.
3
How to do it inside Funraisin: Add tables using the table tool in a Text block; use layout blocks (columns, sections) for positioning—not tables

Tip! Funraisin’s WYSIWYG editor includes accessible table tools, but layout should always be handled through sections and columns instead.

Mark header rows correctly

1
What to Do: Ensure the first row of your table is marked as a header row when presenting tabular data.
2
Why It Matters (WCAG): Screen readers use table headers to understand the relationship between cells, helping users interpret data accurately.
3
How to do it inside Funraisin: After creating a table, select the first row and apply “Header row”; keep header text concise and descriptive.

Tip! The WYSIWYG editor allows you to set a table header row with one click.

Keep navigation consistent across your site

1
What to Do: Use predictable navigation menus, footer layouts, and content structure across your event and campaign pages.
2
Why It Matters (WCAG): Consistency reduces cognitive load and helps users—especially screen reader and keyboard users—build familiarity with your site.
3
How to do it inside Funraisin: Configure navigation styles in Platform Setup; apply the same nav styles across all related pages and events.

Tip! Use navigation blocks and predefined themes to maintain a uniform structure.

Don’t disable skip links

1
What to Do: Allow the default skip link (“Skip to content”) to remain active.
2
Why It Matters (WCAG): Skip links are essential for keyboard-only users, letting them bypass repeated navigation and jump straight to page content.
3
How to do it inside Funraisin: Keep template defaults enabled; avoid overriding or hiding header elements.

Tip! Funraisin templates include skip links by default—simply don’t remove or hide them.

Avoid auto-play content

1
What to Do: Disable automatic movement or auto-advance on sliders and carousels unless absolutely necessary.
2
Why It Matters (WCAG): Unexpected motion can be distracting, disorienting, or even harmful for users with vestibular or cognitive sensitivities.
3
How to do it inside Funraisin: In the slider block, set timing to manual or choose the slowest interval; test transitions on mobile to ensure they’re gentle and not overwhelming.

Tip! Most slider components let you set manual controls or slow transitions.

Carousels & Animations

Ensure sliders have pause, stop, or manual controls

1
What to Do: Always enable controls that allow users to pause or navigate a slider at their own pace.
2
Why It Matters (WCAG): WCAG requires that users be able to stop or control moving content that lasts more than 5 seconds.
3
How to do it inside Funraisin: Use components with visible navigation arrows or pause buttons; avoid hiding controls in mobile layouts.

Tip! Slider blocks already include built-in controls—just ensure they’re visible and functioning.

Avoid flashing or fast animation

1
What to Do: Keep animations subtle and avoid rapid flashing, looping GIFs, or fast transitions.
2
Why It Matters (WCAG): Flashing content can trigger seizures or cause discomfort for users with vestibular disorders.
3
How to do it inside Funraisin: Reduce animation speed in block settings; replace GIFs with video or static images if motion becomes distracting; limit use of multiple animations on a single page.

Tip! GIFs and animation settings can be adjusted to reduce speed.

Files & Downloads

Upload accessible PDFs (tagged and structured)

1
What to Do: Ensure downloadable PDFs include proper reading order, tagged elements, and selectable text.
2
Why It Matters (WCAG): Untagged PDFs are difficult or impossible for screen readers to interpret correctly.
3
How to do it inside Funraisin: Upload PDFs to the Asset Library; link to files using a Button block or Text block; consider adding a text summary or HTML version below the download link.

Tip! If possible, provide an HTML version of documents directly on your page. Accessible HTML is always preferred over PDFs wherever possible.

Use descriptive file names

1
What to Do: Name your downloadable files clearly—for example: Event-Day-Guide.pdf.
2
Why It Matters (WCAG): Useful file names help all users understand the purpose of the download before opening it.
3
How to do it inside Funraisin: Edit asset names after upload; keep names short, descriptive, and meaningful.

Tip! File names can be edited directly in the Asset Library.

Accessibility essentials every page should meet

A quick baseline checklist your team can use before publishing:

1
Every meaningful image has alt text
2
Headings follow a clear H1 → H2 → H3 structure
3
Buttons and links use descriptive text
4
Text meets minimum colour contrast requirements
5
Videos include captions or text summaries
6
Forms include visible labels and clear error messages
7
Tables are used only for data—not layout
8
Navigation remains consistent across your pages

Final checks

Run an accessibility scanner

1
What to Do: Use tools like WAVE, Axe, or Lighthouse to catch common issues.
2
How to do it inside Funraisin: Use your browser’s accessibility testing tools; preview your page using the eye icon in Funraisin before publishing;

Test the page using only the keyboard

1
What to Do: Tab through your page and ensure you can reach every button, link, and form field.
2
Why It Matters (WCAG): Keyboard-only navigation is essential for many users with mobility or vision impairments.

Tip! Check focus indicators and interactive elements in both desktop and mobile previews.

Preview the page on mobile

1
What to Do: Review layout, readability, and content stacking on smaller screens.
2
Why It Matters: Mobile formatting can introduce new accessibility issues, especially with spacing, overlays, or stacked headings.

Tip! Use the mobile preview mode in Visual Builder and view the page on a live device when possible.

Test your page with a screen reader (recommended)

1
What to Do: Use a screen reader such as VoiceOver (Mac/iOS) or NVDA (Windows) to understand how your content is announced and navigated.
2
Why It Matters (WCAG): Even a brief screen reader test uncovers issues that automated tools miss — such as unclear link text, confusing heading order, or missing alt text.

Tip! You don’t need to test the entire site. Checking one or two key pages or flows (e.g., home, event landing page, donation page) is enough to catch common issues.

Every accessible choice adds up.

By following these WCAG-aligned practices inside Funraisin, you’ll create pages that welcome more supporters, reduce friction in key journeys, and strengthen trust in your organisation. Accessibility isn’t extra work — it makes your content work harder for everyone.

Still need help? Check out our design support articles or reach out to the Funraisin Support team by logging a ticket through the Support Module in your platform.