Building Bilingual Web Applications for the Canadian Market

Canada's Official Languages Act requires federal government communications and services to be available in both English and French. While this requirement applies directly only to government entities, the practical reality is broader — any company doing business with the federal government, operating in Quebec, or serving a national Canadian audience is expected to provide bilingual digital experiences. And Bill C-13, which amended the Act in 2023, strengthened these requirements significantly.

I have watched companies lose government contracts because their web platform was English-only. I have seen consumer brands get publicly called out on Canadian social media for launching without French support. And I have spent too many hours helping companies retrofit bilingual support into applications that were built without it — a process that is consistently three to five times more expensive than building it in from the start.

This article covers the technical architecture, implementation patterns, and practical advice for building bilingual web applications that work properly in both English and French.

The Legal Landscape: What You Actually Need to Know

The Official Languages Act applies to all federal institutions and any organization receiving federal funding or contracts. The Consumer Packaging and Labelling Act requires bilingual product labelling. And Quebec's Charter of the French Language — Bill 101 — requires that commercial signage, websites targeting Quebec consumers, and employment contracts be available in French. The Office quebecois de la langue francaise actively enforces these requirements.

For web applications, the practical implications are straightforward. If you sell products or services in Quebec, your website must be in French. If you do business with the federal government, bilingual capability is a procurement requirement. If you operate nationally, bilingual support is a strong market expectation even where not legally mandated.

Bill C-13 introduced new obligations for federally regulated private sector businesses — banks, telecommunications companies, transportation companies — to provide services in both official languages. If your software serves these industries, bilingual capability is increasingly a contractual requirement.

Architecture: Getting the Foundation Right

Building bilingual web applications requires thoughtful architecture decisions in the first week of development. Retrofitting later is painful because internationalization touches every layer of the application — from URL routing to database schema to UI components to content management.

URL structure is the first decision. We use subpath routing — /en/about and /fr/a-propos — rather than subdomain routing or query parameters. Subpath routing keeps content on the same domain for SEO benefits, is easy to implement with Next.js, and provides clean, readable URLs. Next.js App Router supports this natively through its internationalization configuration.

The routing layer must handle language detection, redirection, and fallback. When a user visits the root URL, we detect their preferred language from the Accept-Language header, browser settings, or geolocation, then redirect to the appropriate language subpath. A language switcher in the navigation allows manual override, and the preference is stored in a cookie for subsequent visits.

Content management must support parallel content in both languages with enforced parity. We build custom CMS configurations in Sanity that require both English and French versions of every content piece before it can be published. The CMS interface shows both language versions side by side, making it easy for content editors to ensure consistency. Draft content can exist in one language, but publishing requires both.

Text Expansion: The Layout Problem Nobody Warns You About

French text is typically 20 to 30 percent longer than equivalent English text. This single fact breaks layouts that were designed only with English in mind. A button that reads "Submit" in English becomes "Soumettre" in French — not a problem. But "View detailed transaction history" becomes "Afficher l'historique detaille des transactions" — and suddenly your button overflows its container.

UI components must accommodate text expansion without breaking. We use the following patterns. Buttons use min-width rather than fixed width, with padding that allows text to expand. Navigation items use flexible layouts that wrap gracefully when text is longer. Headings use responsive font sizes that scale down if needed to prevent overflow. Tables use flexible column widths rather than fixed percentages. Form labels are placed above input fields rather than inline, eliminating the constraint of label width.

We test every component with French content during development, not as an afterthought. Our Storybook instances include both English and French variants of every component, and our visual regression tests capture screenshots in both languages.

Translation Workflow: Beyond Google Translate

Machine translation has improved dramatically, but it is not sufficient for professional bilingual applications. Canadian French has specific terminology, idioms, and conventions that differ from European French. A professional translation workflow includes human translators who are native Canadian French speakers, a translation memory system that ensures consistency across the application, a glossary of domain-specific terms with approved French translations, and a review process where translations are validated in context — not just in a spreadsheet.

For UI strings — button labels, error messages, form instructions — we maintain a centralized translation file using the ICU message format, which handles pluralization, gender, and number formatting correctly in both languages. For content — blog posts, product descriptions, marketing copy — we use a CMS-based workflow where content is created in one language and then translated with the original visible for reference.

The cost of professional translation is approximately 0.15 to 0.25 CAD per word. For a typical SaaS application with 5,000 UI strings and 50 content pages, the initial translation cost is roughly 10,000 to 15,000 CAD. Ongoing translation for new features and content updates runs 1,000 to 2,000 CAD per month.

Accessibility: Bilingual WCAG Compliance

Canadian accessibility standards — the Accessible Canada Act for federal entities and AODA in Ontario — require that both language versions meet WCAG 2.1 AA compliance. This means screen reader compatibility in both English and French, with proper lang attributes on all elements. The html element must have the correct lang attribute for the current language, and any inline content in the other language must be marked with a lang attribute to ensure screen readers switch pronunciation.

Alt text for images must be provided in both languages. ARIA labels must be translated. Error messages must be in the user's selected language. Keyboard navigation must work identically in both versions. And the language switcher itself must be accessible — clearly labelled and reachable by keyboard.

We test accessibility in both languages using axe-core in our CI/CD pipeline and conduct manual screen reader testing with NVDA and VoiceOver in both English and French.

SEO for Bilingual Canadian Sites

Bilingual SEO requires specific technical implementation to ensure search engines index both language versions correctly and serve the right version to users. We implement hreflang tags on every page indicating the relationship between English and French versions. The x-default hreflang points to the English version for users whose language preference does not match either. Separate XML sitemaps for each language are submitted to Google Search Console.

Keyword strategy differs between languages. Search volume, competition, and user intent can be different for the same concept in English and French. We conduct separate keyword research for each language and optimize content independently rather than simply translating English-optimized content to French.

Google Search Console and analytics should be configured to segment traffic by language, allowing you to identify performance differences between the English and French versions and optimize independently.

Technical Stack for Bilingual Canadian Applications

Our standard stack for bilingual Canadian applications uses Next.js App Router with built-in internationalization for subpath-based routing and language detection. Sanity CMS with custom bilingual document types that enforce content parity. next-intl for UI string management with ICU message format support. Middleware that handles language detection, redirection, and cookie-based preference storage. And Vercel deployment with edge functions for language-aware routing.

This stack provides excellent performance in both languages, clean URLs for SEO, enforced content parity to prevent language drift, and a developer experience that makes bilingual development natural rather than burdensome.

If you are building a web application for the Canadian market, plan for bilingual support from the first sprint. The cost of doing it right from day one is a fraction of the cost of retrofitting later. We have built bilingual applications for Canadian clients across government, financial services, healthcare, and consumer sectors, and we can help you get the architecture right.