Skip to content

firwer/h4g-hackathon

 
 

Repository files navigation

Hack-4-Good Hackathon

InclusionLab

Problem Statement:

How might we, as a community empower , equip and co-create with persons with disabilities to enable them to access, use and enjoy places, services, products and/or information, whether physical or virtual so that persons with disabilities can connect to be included in the wider community?

Why InclusionLab?

As we would expect most to target solution towards PWDs, our solution is mainly targeted towards the root of the problem which is to improve web accessibility in Singapore so that PWDs can have easier access to online resources which are extremely important in helping them to bridge knowledge gaps and connect with the wider community.

What does InclusionLab do?

Users of InclusionLab are split into 2 roles, Assessors and Corporations.

The Asessors will be people with mild-minor disabilities. These assessors will look out for presence of accessibility features/tools, adjustable text size and high-contrast mode, clear and simple language).

The Corporations refer to companies keen on improving the accessibility and inclusivity of their websites. These assessors will look out for presence of accessibility features/tools, adjustable text size and high-contrast mode, clear and simple language)

Tech Stack

  • Frontend => Next.JS, Typescript, MUI UI Kit, CSS
  • Backend => Firestore, Google Cloud Functions, Node.JS, Express

Slide deck:

https://docs.google.com/presentation/d/1K3HpKcbNAiW8EnD295R0frCV5i0T0JFR8OszeE--I-I/edit?usp=sharing

Features:

  1. Corporate Page and Dashboard
  2. New Assessment Form
  3. Assessor Page and Dashboard
  4. Assessor Evaluation Form
  5. API Integration (Automatic updates with new forms submitted)
  6. User management (not implemented)
  7. Auto web assessibility testing tool (Powered using Axe-Core)

Design (Figma)

https://www.figma.com/file/HzpAeG5Q0AyqRLMYiA8VTn/Hack4Good-InclusionLabs-Design?node-id=0%3A1&t=E8hDip78uk38haEC-1

Screenshots

image image image

How to Setup:

  1. Clone repo to your computer
  2. In the terminal, run yarn dev
  3. Go to localhost:3000/ on your browser once server is up

Project Contributors:

  • Poh Wei Pin (@firwer) (Backend + Frontend)
  • Irving Alexander de Boer (@irving11119) (Frontend + Automated Testing (Axe-Core))
  • Thomas Joseph Lee Alba (@thomasjlalba) (Frontend)
  • Tan Zi Xi (@tzixi) (Frontend)

About

InclusionLab aims to help companies to improve the accessibility of their websites for persons with disabilities. We provide a platform where PWDs can conduct easy & clear accessibility testing and also an automated accessibility testing tool powered by Axe-Core to maximise testing outcome

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 74.8%
  • CSS 16.4%
  • JavaScript 8.8%