Giter Club home page Giter Club logo

batuncer / cyf-record-a-goose-project Goto Github PK

View Code? Open in Web Editor NEW

This project forked from codeyourfuture/project-record-a-goose

0.0 0.0 0.0 468 KB

This is a website with lots of accessibility issues in it, that can be used for workshops and training purposes. See the README for more information.

Home Page: https://record-a-goose.onrender.com

License: MIT License

Shell 0.37% JavaScript 61.47% HTML 26.13% Dockerfile 0.12% SCSS 11.84% Procfile 0.06%

cyf-record-a-goose-project's Introduction

Record a goose sighting

Go to the 'Record a goose sighting' exercise

This is a fictional service, to help you record any sightings of geese (geese are awesome). It's using the GOV.UK Design system, which are WCAG 2.1 AA compliant, and benefits from hundreds of hours of work and testing. However, even if you're using a Design System, stuff can still go wrong...

There are places where the Design System is misused, misimplemented or misunderstood. This has caused accessibility issues, which range across code, design and content - because accessibility issues can be introduced by all of these disciplines. As such, anyone is welcome to have a go and use this as an exercise!

How to use this

The task is to find as many of the accessibility issues in this site as you can in ~20 minutes.

There is a worksheet, and there is also a list of answers - but give it the full 20 minutes before you look at the answers first, if you're working through this alone!

If you are running this as a group workshop, there is an answerless 'Record a goose sighting' exercise, that you can use with attendees. This prevents them from finding answers before you're ready to go through them!

What testing tools to use

I would recommend working through the site in the following order:

  • Can you access everything by pressing the tab key?
  • Does WAVE show any errors, or highlight any issues with the HTML structure?
  • Does the colour contrast tab on WAVE throw up any errors?

Government Digital Services have recently published how to conduct a basic accessibility audit, which is worth a look at too.

Testing like this is a good way to identify basic accessibility issues. It would not replace an audit against WCAG 2.1 to level AA, and its ~50 criteria. Why still do it? These are tests that are quick to run, and it's easier to fix accessibility issues at the start, rather than the end.

How to run locally

This is built using the GOV.UK Prototype Kit.

To run it locally, clone it down, run npm install and then npm start. It'll then tell you a port to go to in the browser.

Alternatively run it via docker & docker-compose

Depends on docker install and docker-compose install

  1. docker-compose build
  2. docker-compose up

Or get a bash console where you can run npm cmds via the built container (ensure step 1 above is done) docker-compose run --rm --service-ports --entrypoint="bash" goose

Run the tests via docker docker-compose run --rm --entrypoint="npm run test" goose

Suggesting changes

Feedback is welcome. Either submit an issue, or open a PR.

Resources for further learning

Any other suggestions, free free to add them!

Other versions of the exercise

This version is forked (and revived) from the MoJ archived repo. Other forks:

cyf-record-a-goose-project's People

Contributors

bnewing avatar camallen avatar jfranciswebdesign avatar mcheung-nhs avatar sallymcgrath avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.