davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>A short introduction to building digital services in the Canadian government (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://sboots.ca/2020/06/16/building-digital-services-in-the-canadian-government/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>A short introduction to building digital services in the Canadian government</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
    </p>
  </nav>
  <hr>
  <h2><a href="https://sboots.ca/2020/06/16/building-digital-services-in-the-canadian-government/">Source originale du contenu</a></h2>
  <main>
    <p>Back in March, some friends from the Ottawa civic tech community reached out. The pandemic was <a href="/2020/03/25/look-out-for-one-another/">ramping up</a>, and they were interested in volunteering their developer skills to help government departments respond to the crisis. Building digital services and IT systems in a government environment is complicated. The federal government in particular has a lot of rules to navigate, and it’s easy for these to overwhelm people and (at the least) siphon their time away from designing and building user-friendly software.</p>

<p>Here’s what I wrote, on a Sunday evening – none of this constitutes formal policy advice, but it was meant to give an introduction to which rules really do deserve a lot of attention, and potential landmines to avoid. (Note that some of the links below were added to this blog post after the fact, for extra context or further reading.)</p>

<p>You’ll notice that this skips over some of the most important practical steps in designing, delivering, and iterating on good digital services – doing research with actual users, using <a href="https://digital.canada.ca/2018/06/27/tools-to-do-good-work/">modern software development tools</a> and best practices, deploying early and frequently, etc. This was written for an audience that’s used to building digital products in the private sector, to better understand what’s new and different in a government context. Enjoy!</p>

<p><img src="/img/2020/parliament-feb-2020-cropped.jpg" class="img-fluid" alt="A photo from near Parliament Hill looking west at the Confederation Building and other buildings along Wellington, on a sunny February day."/></p>

<h2 id="a-short-introduction">A short introduction</h2>

<p>In case it’s useful, here’s a few suggestions on typical government implementation details – trying to focus here on the ones that really matter, not the seemingly-endless lists of rules that <a href="/2020/02/27/user-needs-not-government-needs/">ultimately don’t affect users</a>. These are the ones that government teams get accidentally crushed over when they screw them up (e.g. lawsuits or public shaming, etc.).</p>

<p>From a tech standpoint, anything you build is <a href="/2020/05/26/why-are-there-so-few-senior-developers-in-government/">almost guaranteed</a> to be higher-quality than most existing GC systems and services. Use what you’re familiar with and what you trust. Most of these suggestions ultimately have to do with the front-end/public-facing aspect of services, not back-end engineering decisions (where the GC norm is, y’know, <a href="https://www.macleans.ca/politics/ottawa/pulling-off-a-bureaucratic-miracle-how-the-cerb-got-done/">40-year-old COBOL</a> or dicey ASP.NET applications).</p>

<p><em>GC = Government of Canada; sorry in advance for any acronyms</em></p>

<h2 id="official-languages">Official Languages</h2>

<p>Anything that constitutes a Government of Canada service or communications product needs to be available in English and French, “<a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=26164">simultaneously and of equal quality</a>”. Ideally your departmental partner would have translation capabilities on standby so you wouldn’t need to translate things yourself – but you definitely need to build EN/FR internationalization support into everything from the start. Speaking from experience it’s a pain to add in after the fact. Publicly launching a service only in English, then adding French later, would be a huge (political) catastrophe.</p>

<p>Also count on at least one full business day for any translation request to come back, even ones that are marked super urgent. Write as much of your public-facing content as early as possible (e.g. in parallel to your software work) so that you can send it translation ASAP.</p>

<h2 id="accessibility">Accessibility</h2>

<p>Any Government of Canada service (and ones delivered and built by third parties) needs to meet <strong><a href="https://www.w3.org/TR/WCAG20/">WCAG 2.0 AA</a></strong> accessibility standards. This is mostly the basics e.g. keyboard navigable, has sufficient colour contrast, has good headings and image alt-text, etc.</p>

<p>Not meeting WCAG 2.0 AA is a semi-frequent source of lawsuits that the Government of Canada always loses. Run your service through at least two or three different online testing tools that check for WCAG compliance and save a copy of the results somewhere, send them to your departmental partners for posterity, etc. Your departmental partner should be doing much more extensive, ongoing accessibility testing (the <a href="https://digital.canada.ca/a11y/">CDS accessibility handbook</a> can help).</p>

<h2 id="federal-identity-program">Federal Identity Program</h2>

<p>Certain government types are <em>very</em> particular about how the government’s logos and visuals are used. The very short answer is: put the <a href="https://raw.githubusercontent.com/cds-snc/node-starter-app/master/public/img/sig-blk-en.svg">“Government of Canada / Gouvernement du Canada” signature</a> in the top left of the page, and the <a href="https://raw.githubusercontent.com/cds-snc/node-starter-app/master/public/img/wmms-blk.svg">“Canada” wordmark</a> in the bottom right, and don’t be too outlandish with fonts and colours. (The formal <a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/manual.html">Federal Identity Program requirements</a> are from the 1990s and mostly apply to government letterhead, building signs, and vehicle decals – there’s a lot of interpretation and debate about how to apply them to websites, and it’s best to avoid those debates if you can.)</p>

<p>On the French version of your website or service, the signature should use the <a href="https://raw.githubusercontent.com/cds-snc/node-starter-app/master/public/img/sig-blk-fr.svg">French-first “Gouvernement du Canada / Government of Canada” version</a>.</p>

<p>CDS has <a href="https://github.com/cds-snc/node-starter-app">a “starter app” repository</a> that you can use for inspiration (and logo files) but don’t worry too much if you’re using a different front-end library, etc.</p>

<h2 id="domain-names">Domain names</h2>

<p>The government is pretty inconsistent here, but in a perfect world everything run by the GC would have domain names ending in <code>*.canada.ca</code> or <code>*.gc.ca</code>.</p>

<p>When Global Affairs Canada sent out notifications to a bunch of international travellers last week [mid-March] and used bitly links, people freaked out because <a href="https://twitter.com/xdr/status/1240710656841486336">it looked like a scam</a>.</p>

<p>There’s a <a href="https://alpha.canada.ca/en/instructions.html">DNS setup</a> that CDS operates at <code>alpha.canada.ca</code> and can spin up a subdomain off of it relatively quickly, if that’s useful (and if your departmental partner doesn’t already have some specific URL in mind). It can be pointed at whatever cloud provider you need and it’s faster than going through the gauntlet of SSC + TBS + ServiceCanada that normally has to approve GC subdomains. It’d be better than something that isn’t clearly GC-operated.</p>

<h2 id="inclusive-design">Inclusive design</h2>

<p>Practically speaking, this is probably the hardest area to figure out (but <a href="/2020/02/25/our-services-arent-working/#why-this-matters">incredibly important</a>). Think about situations like: people applying for a service on behalf of their elderly non-tech-savvy parents; band councils trying to apply on behalf of everyone on their First Nations reserve; people applying on behalf of hospitalized family members or friends.</p>

<p>One notable mishap here last year was IRCC’s redesigned program to apply for family reunification visas; the team built a cloud service (for the first time) and it scaled really well to handle the giant surge of requests when the application period opened (compared to, well, IRCC’s normal, more fragile IT systems). But, the program was designed “first come, first serve” and as a result, <a href="https://www.cbc.ca/news/politics/ircc-parent-grandparent-sponsorship-filled-2019-1.4995806">inadvertently prioritized whoever could get through the complicated online application form fastest</a> (disadvantaging people with disabilities or accessibility requirements, people with slow bandwidth or computers, etc.).</p>

<p>People acting on behalf of other people is the most complicated area (and a bunch of GC services don’t handle it well, although the CRA and ESDC do have some online services that include delegating to family members / power of attorney contacts or, say, tax professionals). Whatever you build might not need to handle these edge cases, but figuring out ahead of time which ones you can and which ones you can’t (and clearly documenting why, and making sure that your departmental partners know) is important.</p>

<h2 id="shipping">Shipping</h2>

<p>In government, the hardest part of any IT-related project is <a href="/2020/01/10/shipping/">literally getting it out the door</a>. Under normal circumstances there’s a whole gauntlet of approval processes (security, privacy, quality control, infrastructure) usually all done by separate groups or committees. For a brand new online service, getting through these processes could typically take 6-24 months. (This is one reason why people say that tech implementation is only a small part of digital government work – the rest is, either <a href="/2020/01/28/introducing-agile-to-large-organizations-is-a-subtractive-process-not-an-additive-one/">navigating through or getting rid of all these waterfall processes</a>).</p>

<p>In an emergency situation like the COVID pandemic, the typical approval processes for something to get shipped (“go live” or “go into production”) could potentially be skipped – but in place of them, you would definitely need some kind of written confirmation from a senior public servant (e.g. assistant deputy minister or deputy minister) from the department in question. An email from them saying “I authorize the operation of this service” is sufficient.</p>

<p><strong>There is a whole graveyard littered with amazing digital products in government that never made it out the door.</strong> I can think of probably a dozen examples. Don’t be one of them. World-class tech implementation won’t get you through this; you need the backing from a public servant at the highest leadership level possible to fight through any potential gatekeepers and to give the green light to go live. Having a close relationship between the product team and that senior public servant from as early on as possible helps (direct communications, regular progress updates). I’d say, this is the biggest risk to any project – that you build something phenomenal, and then your partner department gets cold feet and it never ships. This happens frequently.</p>

<p><em>Thanks to <a href="https://twitter.com/rossferg">Ross Ferguson</a> for suggesting that I publish this as a blog post. If you’re a public servant working to navigate these rules in your department, <a href="https://twitter.com/sboots">don’t hesitate to reach out</a>! The rules here – and the long tail of other government requirements – can definitely be a challenge, and you’re not alone.</em></p>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script type="text/javascript">
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>