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)

中文版本

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

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

AttrsProps Interface

Field Name	Field Introduction	Field Type
tabindex	Focus order, follows w3c	string | number
role	Such as button, link, dialog, etc., follows w3c	string

• This category can support any standard HTML element attributes.

CalcAttrsProps Interface

Field Name	Field Introduction	Field Type
label	Sentence, the final reading result of a focus	LabelProps

LabelProps Interface

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

ListProps Interface

Field Name	Field Introduction	Field Type
list	Segment, a sentence contains multiple segments	WordProps[]

WordProps Interface

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

AttrMap Interface

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 }

termsProps Interface

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

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.