The web accessibility calculator used at A11yWatch.
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.
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:
- react
- next-translate
- @nivo/core
- @nivo/bar
- react-lag-radar
- react-icons
- @headlessui/react
- prettier
- chance
Install the following for testing comparison:
- kayle
- axe-core@4.2.1 - used to load deps missing for browser
Install dev modules:
- typescript
- tailwindcss
Optional: setup your translations with a target named oss-accessibility-benchmarks
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 (
<CalculatorProvider lang={lang}>
<>
<RenderCalculatorIntro />
<RenderCalculatorApp />
</>
</CalculatorProvider>
)
}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.