https://github.com/a11ywatch/accessibility-calculator

Accessibility Calculator source https://a11ywatch.com/web-accessibility-calculator
https://github.com/a11ywatch/accessibility-calculator

a11y-experiment a11ywatch accessibility web-accessibility

Last synced: about 1 month ago
JSON representation

Accessibility Calculator source https://a11ywatch.com/web-accessibility-calculator

• Host: GitHub
• URL: https://github.com/a11ywatch/accessibility-calculator
• Owner: a11ywatch
• License: mit
• Created: 2023-08-14T14:33:28.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-16T20:41:03.000Z (over 1 year ago)
• Last Synced: 2024-11-24T16:57:05.636Z (2 months ago)
• Topics: a11y-experiment, a11ywatch, accessibility, web-accessibility
• Language: TypeScript
• Homepage: https://a11ywatch.com/web-accessibility-calculator
• Size: 27.3 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# accessibility-calculator

The web accessibility calculator used at [A11yWatch](https://a11ywatch.com).

The source code is setup to be view only and not something to start up. In order to use the code you need to drop it in your project by copying the code and making some adjustments.

## Required Modules

The code used has some modules that we depend on to help improve the experience. The also depends on next.js since that is what we use at A11yWatch for the client.

Install the following for the application:

1. react

1. next-translate

1. @nivo/core

1. @nivo/bar

1. react-lag-radar

1. react-icons

1. @headlessui/react

1. prettier

1. chance

Install the following for testing comparison:

1. kayle

1. [email protected] - used to load deps missing for browser

Install dev modules:

1. typescript

1. tailwindcss

Optional: setup your translations with a target named `oss-accessibility-benchmarks`

## Getting Started.

```ts

import { CalculatorProvider } from './calculator/provider'

import { RenderCalculatorApp } from './calculator/render-intro'

import { RenderCalculatorApp } from './calculator/render'

export const OSSWebAccessibilityBenchmarks = () => {

  const { lang } = useTranslation('oss-accessibility-benchmarks')

  return (

    

        <>

            

            

        >

    

  )

}

```

In the future we plan on releasing it as an npm package that could be included. It should take very minimal changes to get the project up and running.