Skip to main content

afrigov is an open-source project. It is not a government website and is not affiliated with any government.

Previewing neutral core Change

afrigov Accessible government design system

Open source ยท MIT

Free tools for African government websites.

Build pages that are accessible and light, check any website, shrink its images, and run it on WordPress. Use one tool, or all of them.

Get started View on GitHub

The toolkit

Each tool works on its own. A site does not have to be built with afrigov to use the others.

  • Design system

    Components and country packs in plain CSS. Two link tags to install, with no build step.

  • Audit

    Scores any government page for accessibility and weight, and says what to fix first.

    npx afrigov-audit https://example.gov.ng/

  • Images

    Turns a heavy photograph into light WebP files for each screen size, with the HTML to paste.

    npx afrigov-images ./photos --out ./images

  • WordPress In development

    A theme and a blocks plugin: build pages from afrigov's components in the WordPress editor, with no code. The theme is on GitHub.

The design system

Version 0.15.0

One country-neutral core. A colour pack per country. Plain CSS that passes WCAG 2.1 AA on every commit and loads on a 2G connection.

The whole install

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/afrigov@0.15.0/dist/core.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/afrigov@0.15.0/dist/ng.min.css">

Nigeria's pack is shown as the example. Preview a country and this becomes its file.

CSS, gzipped
10 KB
Components
47
Country packs
7
Contrast
AA in CI

Styles

Colour, type, spacing and language. The rules every component follows, and the tokens behind them.

Components

47 building blocks, each with when to use it, the HTML, and its accessibility notes.

Patterns

Answers to common service questions, like asking for a date of birth or showing errors.

Country packs

National colours, flag, banner strings and country data, one JSON file per country.

Use cases

Four real government websites rebuilt on afrigov, with the real sites' scores beside them.

Community

How to contribute a pack or a translation, and the decisions behind the system.

Why afrigov

Most government websites on the continent are slow, heavy and hard to use with a screen reader. The people who build them care; the trouble is that every ministry and contractor starts from zero. afrigov is the starting point.

  1. Lighter pages cost people less

    Every megabyte a page downloads is paid for by the person reading it, most often on a prepaid phone bundle. afrigov is 10 KB of CSS. One ministry home page we rebuilt went from 8.9 MB to 29 KB, and from 14 seconds to 3 seconds on a phone.

  2. Fast on slow phones and networks

    System fonts only, so there are no fonts to download. Every component works with JavaScript turned off, and video loads only when someone presses play. A page is readable on a 2G connection.

  3. Accessible, and checked on every change

    The build fails if any colour pair misses 4.5:1. axe-core runs on every page of this site, with every pack, on every pull request.

  4. Two link tags to install

    Plain CSS with custom properties. No Sass, no bundler, no framework, and nothing to build.

  5. A pack for each country

    The core has no flag colours. A pack adds them, derives text-safe variants, and carries the official banner strings in the country's languages.

See the rebuilds and their scores