🎉 Beta is now open

Book a free demo
Skip to main content
HelloCivic

Getting Started with HelloCivic Access: One Line of Code, Full Compliance

Samir Alley

Guides & Tutorials4 min read

HelloCivic Access deploys an accessibility overlay on any government website with a single script tag. This guide walks through setup, configuration, and customization.

HelloCivic Access is the fastest way to provide accessibility accommodations on your government website. A single line of code adds a comprehensive accessibility toolbar that gives residents control over how they experience your content — text size, contrast, spacing, screen reader optimization, and more.

This guide covers everything from initial installation to advanced configuration.

What HelloCivic Access Provides

The accessibility overlay gives residents a floating toolbar with controls for:

  • Text resizing: Increase or decrease text size without breaking layouts
  • Contrast modes: High contrast, dark mode, light mode, and inverted colors
  • Dyslexia-friendly fonts: Switch to OpenDyslexic or other readable typefaces
  • Line and letter spacing: Adjust spacing for readability
  • Link highlighting: Make all links visually distinct
  • Screen reader optimization: Enhanced ARIA labels and focus management
  • Reading guide: A visual ruler that follows the cursor for line tracking
  • Animation pause: Stop all motion and transitions
  • Text-to-speech: Read page content aloud (with AI add-on)
  • Language translation: Content available in 50+ languages

These controls persist across page navigations, so residents set their preferences once and browse normally.

Installation: Literally One Line

Add the following script tag before the closing </body> tag on your site:

<script src="https://cdn.hellocivic.com/access/v1/loader.js"
        data-workspace="your-workspace-id"
        data-site="your-site-id"
        async></script>

That's it. The widget loads asynchronously (no performance impact on page load), initializes when ready, and appears as a small accessibility icon in the corner of your page.

Where to Find Your IDs

  1. Log into your HelloCivic dashboard
  2. Navigate to Apps > Access > Settings
  3. Copy the installation snippet — your workspace and site IDs are pre-filled

CMS-Specific Installation

WordPress: Paste the script in Appearance > Theme Editor > footer.php, or use a plugin like "Insert Headers and Footers" to add it site-wide.

Drupal: Add the script to your theme's page template or use the "Asset Injector" module.

Custom/Static: Add directly to your HTML template's footer partial.

Single Page Applications: Include in your root index.html. The widget automatically reinitializes on route changes.

Configuration Options

The script tag accepts data attributes for customization:

Position

data-position="bottom-right"

Options: bottom-right (default), bottom-left, top-right, top-left

Color Theme

data-color="#1a56db"

Set the widget's accent color to match your brand. Accepts any valid hex color.

Language

data-lang="en"

Set the widget's interface language. Supports 50+ language codes.

Auto-Open

data-auto-open="false"

Set to true to have the toolbar open automatically on first visit (useful for accessibility-focused pages).

Compact Mode

data-compact="true"

Reduces the toolbar to a minimal set of controls for simpler sites.

Dashboard Configuration

Beyond script attributes, the HelloCivic dashboard provides deeper configuration:

Appearance Settings

  • Custom logo in the toolbar header
  • Color scheme matching your site's branding
  • Toggle which features appear in the toolbar
  • Custom welcome message

Behavior Settings

  • Keyboard shortcut to toggle the widget (default: Alt+A)
  • Whether to show the widget on mobile devices
  • Cookie duration for remembering preferences
  • Analytics opt-in for usage tracking

Statement & Policy

  • Generate an accessibility statement page
  • Configure the conformance level you're working toward
  • List known issues and timelines for resolution

Verifying the Installation

After adding the script:

  1. Clear your cache and reload the page
  2. Look for the accessibility icon in the configured corner
  3. Click the icon to open the toolbar
  4. Test each feature — resize text, change contrast, enable the reading guide
  5. Navigate to another page — preferences should persist
  6. Check mobile — the widget should appear and function on phone/tablet viewports

Common Issues

Widget doesn't appear:

  • Verify the workspace and site IDs are correct
  • Check the browser console for errors
  • Ensure no Content Security Policy is blocking the CDN domain
  • Confirm the site is added and activated in your dashboard

Features aren't affecting the page:

  • Some heavily-styled sites need CSS specificity adjustments
  • Check if your CSS uses !important heavily (the widget respects cascade order)
  • Contact support with your URL for site-specific tuning

Performance Impact

HelloCivic Access is designed for zero performance impact:

  • Async loading: The script loads after your page content, never blocking render
  • Tiny payload: The initial loader is under 5KB; the full widget loads on interaction
  • No layout shift: The widget uses fixed positioning and doesn't affect your page layout
  • CDN delivery: Served from edge nodes globally for sub-50ms load times
  • Cached aggressively: Returning visitors load from browser cache

Your Lighthouse scores, Core Web Vitals, and page load times remain unchanged.

What Access Is (and Isn't)

Access IS:

  • An immediate accessibility accommodation layer
  • A way to give residents control over their browsing experience
  • A tool that improves usability for people with various disabilities
  • A complement to your broader remediation efforts

Access IS NOT:

  • A replacement for fixing underlying accessibility issues
  • A magic wand that makes non-compliant HTML compliant
  • A substitute for proper semantic markup and WCAG conformance

Think of Access as the first layer of your accessibility strategy. It provides immediate help to residents while you work on deeper structural fixes with Scanner and Accessible Docs.

Next Steps

Once Access is live on your site:

  1. Run a scan with HelloCivic Scanner to identify underlying issues
  2. Set up scheduled monitoring to catch new issues as content changes
  3. Configure your accessibility statement in the dashboard
  4. Review analytics after a week to see which features residents use most
  5. Share with your team — Access requires no ongoing maintenance once installed

One line of code. Immediate accommodations. Zero maintenance burden. That's what Access delivers.

Related articles