Accessible Document Widget

One script tag adds accessibility icons next to every PDF link on your site. Constituents can view accessible versions or request them instantly.

City of Springfield — Public Documents

Below is a live demo. Icons appear next to each PDF link.

Budget & Finance

Meeting Minutes

Plans & Reports

Case Study

Palm Beach TPA — Vision 2050 Long Range Transportation Plan

A 60-page transportation plan with complex tables, charts, and maps — converted to a fully accessible HTML version by CivicComply. When the widget is installed, constituents see a clear “View Accessible Version” button and can open the HTML version instantly.

How it looks on the agency's website

The widget adds a button next to every PDF link. Remediated documents get a filled button; others get an outlined action:

Green pill with checkmark = accessible version ready, opens immediately. Outlined pill with figure = not yet remediated, opens accommodation request form. Four color variants available (green, navy, dark, ghost) to match any agency brand.

Original PDF

PBTPA-LRTP-Vision-2050-SPREADS-compressed.pdf

60 pages · Complex tables · Charts & maps

View original PDF →

Accessible Version

WCAG 2.1 AA compliant HTML

Screen reader optimized · Accessible tables · Alt text for all images

View accessible version →

Remediated by CivicComply for the Palm Beach Transportation Planning Agency. The widget detects this accessible version automatically via the document manifest API.

Detects PDF links

The widget scans the page for same-origin PDF links and adds an accessibility icon next to each one.

Checks for accessible versions

When clicked, it checks whether CivicComply has an accessible HTML version of the document.

Request or view

If available, opens the accessible version. If not, shows a simple accommodation request form.

Installation

Add this single script tag before the closing </body> tag:

<script
  src="https://cdn.civiccomply.com/widget/civiccomply-doc-widget.js"
  data-site-key="YOUR_SITE_KEY"
  data-mirror-prefix="/civiccomply">
</script>

Icon style

data-icon-style

badge | pill | minimal

Color variant

data-button-variant

green | navy | dark | ghost

Modal theme

data-theme

light | dark

Get your site key freeCustomization guide

No credit card required. Widget is free forever.