Estimtest is an experimentation tool that simulates accessibility concerns. Accessibility is crucial, but unexpectedly, difficult to test.
Feel free to checkout the examples, or open an issue for support.
- Apply the component as a sibling or child of a container. For example, as a child of
<body></body>. - The
estimtest-coreelement should cover up the entire screen in absolute position.
Install Estimtest locally
npm install --save-dev estimtest-cli
Activate the server using the server provided by estimtest-cli
estimtest-cli start
Load the component by importing it
<script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/estimtest-core/loader/index.es2017.js';
defineCustomElements();
</script>Add the component
<estimtest-core
active='true'
move-selector='body'
experiments='[{"name": "Hello World", "description": "hello", "fontSize": 32}]'
></estimtest-core>Load the component by importing it
// index.tsx
import { EstimtestCore, defineCustomElements } from 'estimtest-react'
defineCustomElements();Add the component
// index.tsx
<EstimtestCore
active={true}
experiments={[
{name: "Hello World", description: "hello", fontSize: 32}
]}
moveSelector='body'
className='full-screen'
/>Load the component by adding the Estimtest module to the app module imports.
// app.module.ts
import { EstimtestModule } from "estimtest-angular";
@NgModule({
...
imports: [..., EstimtestModule],
...
})
export class AppModule { }Add the component
<!-- app.component.html -->
<estimtest-core
move-selector="body"
[active]="true"
[experiments]="[{name: 'Hello World', description: 'hello', fontSize: 32}]"
/>Load the component by adding the Estimtest module to the app module imports.
// main.ts
import { EstimtestLibrary } from 'estimtest-vue';
...
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('estimtest');
app.use(EstimtestLibrary);
...<!-- App.vue -->
<estimtest-core
class="full-screen"
move-selector="body"
:active="true"
:experiments="JSON.stringify([{name: 'Hello World', description: 'hello', fontSize: 32}])"
/>When using the CLI, Use a file named estimtest.config.js to modify props. When using components, use HTML attributes to modify props.
active boolean - Whether to activate the Estimtest prompt. Having this as false still imports the library but does not use it. Look at the examples for sloppy implementations of fully removing Estimtest in production.
experiments { name: string, description: string, fontSize?: number, colorBlind?: ColorBlind, keyboardOnly?: boolean }[] - The experiments to be performed on the app. This is set by default to perform multiple standard tests of common accessibility problems. This field accepts an array of objects each with the properties:
nameA quick ~15 letters title summarizing the test.descriptionA description explaining the test and why it's important. Supports Markdown (Commonmark-compliant).fontSizeThe font size to set the page. Many users have difficulty reading text at the default font size, users fix this by increasing the default font size.colorBlindA change of colors on the page reflecting what colorblind users may see.keyboardOnlyMany users may use keyboard navigation for a variety of reasons such as: Motor impairment, saving time, and more.
moveSelector string - An element selector containing the parent of where the element should be at. You could use this property in the event that your code does not permit you to place the element there.
If you have suggestions, feedback, issues, or bugs, please open an issue.
If are willing to contribute to Estimtest, please open a pull request.