Request a Demo
Platform Infrastructure

Accessibility & i18n

The cross-cutting accessibility compliance, internationalization, and accommodation layer — every module's UI, documents, notifications, and public-facing content must adhere to standards enforced here.

2.1 AA

WCAG Level

100%

AODA Compliance

EN / FR

Languages

NVDA · JAWS · VO

Screen Readers

Purpose-Built for Canadian Municipalities

Ontario Compliant
MFIPPA Ready
AODA Accessible
Bilingual Support
Canadian Hosted
SOC 2 Aligned

How It Works

The identity journey, step by step

From first registration to golden record resolution — how a resident's identity evolves across the platform.

01

One-Click Language Switch

A French-speaking citizen switches the entire portal to French.

How it works

The citizen clicks the 'FR' toggle in the header. The entire application re-renders in French — navigation, labels, forms, content, notifications, and dates/numbers adapt to French Canadian formatting. Their preference is saved to their profile and applied on future visits across all devices.

Step 1 of 5

Purpose & Scope

What this module owns

Clear ownership boundaries prevent duplication and ensure every capability has exactly one authoritative home.

Owns

13

Delegated to

3

UI component library

ui/

Content authoring

portal-framework

Notification content

notification-engine

These capabilities are handled by dedicated modules and consumed via stable API contracts — keeping boundaries clean and ownership unambiguous.

Core Capabilities

What it does

5 capability groups comprising 13 discrete capabilities — each with API surface, business rules, and data ownership.

Text alternatives for non-text content, captions for video, adaptable content, and distinguishable visuals with enforced color contrast ratios.

Text Alternatives

Alt text for all non-text content; captions and transcripts for audio/video.

Color Contrast

Minimum 4.5:1 contrast ratio for normal text, 3:1 for large text — enforced platform-wide.

Adaptable Content

Content structure conveyed through proper semantic markup independent of presentation.

Distinguishable

Color is not the sole means of conveying information; audio control provided for auto-playing media.

Full keyboard accessibility with no keyboard traps, sufficient timing, no seizure triggers, and navigable interfaces with skip links and focus order.

Keyboard Accessible

All functionality available via keyboard; no keyboard traps; visible focus indicators.

Sufficient Time

Users can extend or disable time limits; auto-updating content can be paused.

Seizure Prevention

No content that flashes more than 3 times per second.

Navigable

Skip links, logical focus order, descriptive link purpose, multiple navigation methods.

Readable content with declared page language, predictable navigation, and input assistance with clear error identification and labels.

Readable

Language of page and language of parts declared; content written at appropriate reading level.

Predictable

Consistent navigation and identification patterns across the platform.

Input Assistance

Error identification, descriptive labels, inline error suggestions, and error prevention on important submissions.

Compatibility with assistive technologies through valid HTML, ARIA landmarks/roles, and proper name/role/value attributes.

Assistive Tech Compatibility

Tested with NVDA, JAWS, and VoiceOver screen readers.

Valid HTML

Proper semantic markup; no parsing errors that break assistive technology interpretation.

ARIA

Appropriate ARIA landmarks, roles, states, and properties for custom UI components.

Name / Role / Value

All interactive elements expose accessible name, role, and state to the accessibility API.

Real-World Scenarios

Who uses this, and how

4 persona-driven scenarios showing how Accessibility & i18n works in practice — from resident registration to privacy compliance.

Citizen with Disability

Accessibility Complaint & Accommodation

A citizen with a mobility impairment encounters a form that requires drag-and-drop interaction and cannot complete it with keyboard only.

Steps

  1. 1The citizen attempts to use the form with keyboard-only navigation
  2. 2They encounter a drag-and-drop widget that is not keyboard accessible
  3. 3They submit an accessibility complaint through the accessible feedback form
  4. 4The system logs the issue, creates an accessibility audit record, and notifies the responsible team
  5. 5Staff provides an alternative method to complete the task while the fix is developed
  6. 6The development team remediates the widget to support keyboard operation
  7. 7The fix is verified by automated axe-core testing and manual review

Outcome

The citizen's task is completed via accommodation, the underlying accessibility issue is permanently fixed, and the audit trail documents the entire resolution for AODA compliance.

View scenario

Municipal Clerk

Bilingual Election Content

The municipal clerk needs to publish election notices, candidate information, and voting instructions in both English and French before election day.

Steps

  1. 1The clerk creates election content in English through the CMS
  2. 2The translation management system queues all new strings for French translation
  3. 3A certified translator translates the election-specific content
  4. 4A reviewer verifies the French translations for legal accuracy
  5. 5Both language versions are published simultaneously
  6. 6Citizens see content in their preferred language; the language toggle works on all election pages

Outcome

Election information is available in both official languages, meeting MEA requirements. Citizens can participate fully regardless of language preference.

View scenario

Accessibility Coordinator

Quarterly Manual Accessibility Audit

The accessibility coordinator conducts the quarterly IAAP-certified manual audit of the platform's most-used citizen-facing pages.

Steps

  1. 1The coordinator selects the top 20 citizen-facing pages based on analytics
  2. 2Manual testing is performed with NVDA, JAWS, and VoiceOver screen readers
  3. 3Keyboard-only navigation is tested on every page and form
  4. 4Color contrast is verified with manual spot-checks beyond automated testing
  5. 5Findings are logged as Accessibility Audit records with severity and remediation guidance
  6. 6A compliance report is generated showing WCAG 2.1 AA conformance status
  7. 7Remediation items are assigned to development teams with SLAs

Outcome

The platform maintains its AODA compliance certification. All critical issues are remediated within one sprint. The audit report is filed as part of the municipality's multi-year accessibility plan.

View scenario

Citizen

Accessible Document Request

A citizen using a screen reader needs to review their property tax assessment notice, which was originally generated as a PDF.

Steps

  1. 1The citizen opens their property tax assessment notice in the portal
  2. 2The PDF is generated with PDF/UA compliance — tagged structure, alt text, reading order
  3. 3The screen reader announces the document structure and reads content in logical order
  4. 4The citizen requests an HTML alternative format for easier navigation
  5. 5The system generates an accessible HTML version of the same document
  6. 6The citizen reviews the assessment using their preferred format

Outcome

The citizen fully accesses their tax assessment regardless of ability. PDF/UA compliance ensures the default PDF is accessible, and alternative formats provide additional options.

View scenario

Internal Architecture

How it's built

4 architectural layers comprising 24 components — from API gateway to data quality engine.

4 layers · 24 total components

Accessibility & i18n

Every module owns a single bounded context, exposes stable APIs, and can be composed into any Civic product — that's the architecture that scales.

Krutik Parikh

Creator of Civic

Data Model

Entity Architecture

3 entities with 3 relationships — the authoritative schema for this bounded context.

Entities

Select an entity to explore its fields and relationships

API Surface

Integration Endpoints

9 RESTful endpoints across 3 resource groups — plus 4 domain events for async integration.

|
GET

/api/v1/i18n/strings/{module}/{language}

Get all translation strings for a module in specified language

GET

/api/v1/i18n/string/{key}/{language}

Get single translation by key and language

PUT

/api/v1/i18n/string/{key}

Update a translation string (EN or FR value)

GET

/api/v1/i18n/missing/{language}

List all strings missing translation for a language

Technical Specifications

Performance, Compliance & Configuration

WCAG Compliance

Target100% of citizen-facing pages pass WCAG 2.1 AA

AODA Compliance

TargetFull IASR web content compliance — zero violations

Translation Coverage

Target100% of UI strings translated; content pages within 5 business days

Automated Testing

Targetaxe-core integration in CI/CD pipeline; no deploy with critical violations

Manual Audit

TargetQuarterly manual accessibility audit by certified IAAP professional

Screen Reader

TargetTested with NVDA, JAWS, and VoiceOver

Keyboard

TargetFull keyboard navigation with visible focus indicators on every interactive element

FAQ

Frequently Asked Questions

Ready to Integrate

Build on Accessibility & i18n

Request an architecture brief, integration guide, or live demo environment for your team.