Accessibility training with gov.uk Prototype Kit

📝 Table of Contents

• Task
• Who we are ... Team AccessForce
• Problem Statement
• Idea / Solution
• Dependencies / Limitations
• Future Scope
• Setting up a local environment
  • Prerequisites
  • Continue setup and run app
• Lessons Learned
• Documentation
• Authors
• Acknowledgments
• Resources

Task

The goal of the 2 week prototype project is to:

• Be able to work with the GDS prototype kit and have an understanding of the benefits of this design system; learn some components, styles and design patterns
• Understanding why website accessibility is important especially government websites. Includes some time reading about why accessibility is important - things one should be thinking about when building an accessible website should incluse
  • responsiveness
  • colour contrast
  • ability to navigate through page (use of tab)
  • ability for screen readers to read content and navigate website

Other concepts to consider:

• Mobile first design
• Website non-js friendly

Team AccessForce Presents

AccessForce proudly presents our prototype for the GOV.UK website. The team comprises of 2 developers who are passionate about accessibility and inclusivity.

The project is a 2 week prototype project to learn about accessibility and inclusivity, the project is built using the GOV.UK prototype kit but modified to be a Who Wants to be a Millionaire themed quiz game.

🧐 Problem Statement

Every year, millions of people visit the GOV.UK website to find information about government services. The website is designed to be accessible to everyone, including people with visual, hearing, cognitive or motor impairments. The website is also designed to be accessible to people who use assistive technology such as screen readers and speech recognition software.

The goal of the 2 week prototype project is to educate ourselves on accessibility and inclusivity, and to build a prototype using the GOV.UK prototype kit.

💡 Idea / Solution

We came up with the idea of building a Who Wants to be a Millionaire themed quiz game. The game is designed to be accessible to everyone, including people with visual, hearing, cognitive or motor impairments. The game is also designed to be accessible to people who use assistive technology such as screen readers and speech recognition software.

⛓️ Dependencies / Limitations

• Node.js and npm
• Jest
• JsDom (for testing)
• jest-environment-jsdom

🚀 Future Scope

• Add more questions
• Add more lifelines
• Add more styling
• Add more accessibility features
• Add more animations
• Add more sound effects
• Add more music

🎈 Setup and Run

Prerequisites

Before attempting to run the app:

• Install Node.js and npm on ...
  • ... macOS run the following commands:
    • Install Homebrew: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    • Update Homebrew: brew update
    • Install Node.js and npm: brew install node
    • Check node version: node -v
    • Check npm version: npm -v
  • ... linux run the following commands:
    • Update Apt: sudo apt update
    • Install node: sudo apt install nodejs
    • Check node version: node -v
    • Install npm: sudo apt install npm
    • Check npm version: npm -v

Continue setup and run app

• Clone the repo
• Install dependencies with npm install
• Run the app with npm run dev
• Open browser and navigate to localhost:3000
• Enjoy!

🏫 Lessons Learned

📃 Documentation

• Trello
• Figma
• JamBoard

✍️ Authors

• Julio Velezmoro
• Pira Tejasakulsin

Acknowledgements

Resources

• GOV.UK Prototype Kit
• GOV.UK Design System
• GOV.UK Service Manual - Accessibility & Assisted Digital
• WCAG what it does and why
• All things accessibility
• Some Accessibility Best Practices
• Why website non-javascript friendly?
• Short video (2minutes) explaining GOV.UK design system and purpose
• Video (33minutes) of how to setup and build a basic prototype using GOV.UK Prototype Kit
• Nunjucks documentation
• Full list of HTML standard autofill field names