Accessibility Cloud Label - Empowering the Visually Impaired Community
Accessibility solutions no longer require front-end developers to continuously write code for adaptation. Simply integrate the Cloud Label SDK, use the annotation tool for visual configuration based on the data rules defined by Cloud Label, and conduct real-time accessibility testing. This entire process can be completed by QA or other roles with no development foundation. (When the UI view structure dynamically changes, the Cloud Label SDK will generate new accessibility attributes in real-time based on the page content) [中文版本](./README.CN.md) ### Environment Requirements Node: It is recommended to use **node v18.12.0** or higher versions. Browser: depending on [Socket.IO](https://www.npmjs.com/package/socket.io)  ### Quick Experience 1. Install dependencies ``` $ yarn bootstrap ``` 2. Build the **mark tool** and **runtime SDK** and start the **node server** ``` $ yarn build ``` Choose to run an example ``` ? Please choose usage: ❯ Run example Run packages ``` Choose to run nodejs-server ``` ? Please choose usage: Run example ? Please choose examples: a11y-webpack-loader-react ❯ nodejs-server ``` 3. Wait for the build to complete, and it will automatically open the annotation panel at http://localhost:3001/index.html and connect to the socket. 4. Open your project, and introduce the SDK in the code; or open any website in the browser, and introduce the SDK through the devtool console. Then you can start the accessibility annotation on the annotation panel at http://localhost:3001/index.html ```js const script = document.createElement("script"); script.src = "http://localhost:3001/sdk.min.js"; document.body.appendChild(script); ``` ### Quick Integration and Deployment To integrate the Accessibility Cloud Label into your project, follow these steps: 1. Use the `Build` command to build the front-end artifacts, and then place the artifacts from `packages/a11y-web-client/dist` into your resource platform, and introduce the artifacts from `packages/a11y-web-sdk/dist` into your project (you can also directly introduce the source code into your own project for building). ``` $ Yarn build ``` Choose to build packages ``` ? Please choose usage: Run example ❯ Run packages ``` Choose to build a11y-web-client and a11y-web-sdk ``` ? Please choose usage: Run packages ? Select the corresponding debug packages (multiple selections allowed, use space to select, supports fuzzy search): a11y-web-client ❯ a11y-web-sdk a11y-web-socket a11y-webpack-loader ``` Adjust the position of the artifacts after the build is completed. 2. Deploy the nodejs code in the `packages/a11y-web-socket` directory on your server and start it with the command (note: modify the port configuration in `config/deployment.config.js`) ``` $ cd packages/a11y-web-socket && npm run start ``` 3. Implement the mock interface in the `examples/nodejs-server` directory and store it in your own database (note: modify the port configuration in `config/deployment.config.js`). ### Cloud Label Standard Data Explanation **A11yTag Interface**| Field Name | Field Introduction | Field Type |
|---|---|---|
| desc | Accessibility function description | string |
| attrs | The Cloud Label SDK will directly set the attributes in attrs on the target element | AttrsProps |
| aid | The property value of the element's a11y-id attribute, generated by a11y-loader, used to select the element | string |
| query | The element's CSS Selector, used to select the element (alternatively used with aid) | string |
| calcAttrs | Definition of calculation rules, this entry will inform the Cloud Label SDK how to generate accessibility attributes based on the information of existing page elements | CalcAttrsProps |
| Field Name | Field Introduction | Field Type |
|---|---|---|
| tabindex | Focus order, follows w3c | string | number |
| role | Such as button, link, dialog, etc., follows w3c | string |
| Field Name | Field Introduction | Field Type |
|---|---|---|
| label | Sentence, the final reading result of a focus | LabelProps |
| Field Name | Field Introduction | Field Type |
|---|---|---|
| list | Segment, a sentence contains multiple segments | ListProps |
| terms | Conditions, specify when the segment is effective under one or more conditions | termsProps |
| Field Name | Field Introduction | Field Type |
|---|---|---|
| list | Segment, a sentence contains multiple segments | WordProps[] |
| Field Name | Field Introduction | Field Type |
|---|---|---|
| aid | The property value of the element's a11y-id attribute, generated by a11y-loader, used to select the element | string |
| query | The element's CSS Selector, used to select the element | string |
| value | Fixed text splicing | string |
| opt | Word processing method: default is append (+), can be set to subtract (-) | '-' | '+' |
| map | Map elements with specific attributes to text | AttrMap |
| Field Name | Field Introduction | Field Type |
|---|---|---|
| type | The type of mapping, fixed to attribute | 'attr' |
| attr | The attribute for mapping, such as 'src' for images | string |
| match | Matching rules | { [string]: string } |
| Field Name | Field Introduction | Field Type |
|---|---|---|
| bool | Effective condition, yes or no | boolean |
| check | Rule type, currently supports: existence check, numeric check | 'exist' | 'number' |
| aid | The property value of the element's a11y-id attribute, generated by a11y-loader, used to select the element | string |
| query | The element's CSS Selector, used to select the element | string |