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

Use cases

What afrigov looks like on a real government website, and the two tools that go with it.

Rebuilds of real websites

A use case takes a live government website and rebuilds it page for page on afrigov, installed from the CDN the way an agency would. Every gap the rebuild finds goes back into afrigov as a component or a fix. Each rebuild is unofficial and says so on every page.

  • Federal Ministry of Communications, Innovation and Digital Economy

    Nigeria · fmcide.gov.ng · 29 pages, including a multi-step application journey. Seventeen findings, which became ten components and patterns in afrigov 0.5 to 0.8.

    Rebuild accessibility score, updated weekly Real site accessibility score, updated weekly

  • National Identification Authority

    Ghana · nia.gov.gh · 32 pages, including a card replacement journey. A service agency in a second country, with the flag stripe, an accent band and a different look. Fifteen findings, which became the flag stripe, the accent band, feature, people, steps and key figures in afrigov 0.9.

    Rebuild accessibility score, updated weekly Real site accessibility score, updated weekly

  • Ministry of Health

    Ghana · moh.gov.gh · 43 pages. A ministry with six dropdown menus and a photo hero, the two things most government sites have. They became the section menus and the panel hero in afrigov 0.10, built before the rebuild began.

    Rebuild accessibility score, updated weekly Real site accessibility score, updated weekly

  • Federal Ministry of Innovation, Science and Technology

    Nigeria · scienceandtech.gov.ng · 41 pages, with video pages, events and a page for each department. The home page is 33 KB on a phone, against 6.7 MB on the real site. Two findings are open: a header that wraps when its items do not fit, and playing a video file.

    Rebuild accessibility score, updated weekly Real site accessibility score, updated weekly

All use cases, with the scores of the real sites beside the rebuilds. The badges update automatically every week.

Accessibility check

afrigov-audit checks any web page from the command line, at phone and desktop widths, and says which afrigov component fixes each problem. It is what scores the rebuilds above.

npx afrigov-audit https://example.gov.ng/
npx afrigov-audit https://example.gov.ng/ --badge badges/home.svg

With --badge it writes the grade and score as a badge for a README or a status page.

Light images

afrigov-images makes a folder of photos light enough for a government page: each one at the sizes phones and desktops need, as WebP, with the camera's location data removed, checked against afrigov's weight limits, and with the HTML printed to paste. See Images.

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

Add yours

Built something on afrigov, or want a site rebuilt as the next use case? Tell us in Discussions.