中文版本

Environment Requirements

Node: It is recommended to use node v18.12.0 or higher versions.

Browser: depending on 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

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

AttrsProps Interface

• This category can support any standard HTML element attributes.

CalcAttrsProps Interface

LabelProps Interface

ListProps Interface

WordProps Interface

AttrMap Interface

termsProps Interface

Directory Introduction

.
├── CONTRIBUTING.CN.md
├── CONTRIBUTING.md
├── DSL.js                         // Cloud Label Standard Data Explanation
├── LICENSE
├── README.CN.md
├── README.md
├── commitlint.config.js
├── config
│   ├── deployment.config.js       // Deployment configuration, modify as needed
│   └── webpack.base.config.js     // Basic webpack configuration
├── examples
│   ├── a11y-webpack-loader-react  // Example of automatically generating a11y-id attributes in a React project using a11y-webpack-loader
│   └── nodejs-server              // Example of a data processing service built with nodejs
├── lerna.json
├── package-lock.json
├── package.json
├── packages
│   ├── a11y-web-client            // Cloud Label Annotation Tool 🔧, supports highlighting during the annotation process and real-time function effectiveness
│   ├── a11y-web-sdk               // Cloud Label Runtime SDK, integrates accessibility into the code
│   ├── a11y-web-socket            // Cloud Label Service, provides socket annotation capabilities
│   └── a11y-webpack-loader        // webpack build loader, adds fixed a11y-id attributes for easy annotation. (Supports JSX source code or product code)
├── script
│   ├── build.js
│   ├── clean.js
│   ├── start.js
│   ├── test.js
│   └── utils.js
└── yarn.lock

Contact US

If you have any questions, you can contact us by submitting an issue or leaving a comment, and we will respond within three business days.

License

Accessibility Cloud Label uses the Apache License 2.0.