Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/bytedance/a11y-cloud

无障碍可视化适配 - Empowering the Visually Impaired Community

https://github.com/bytedance/a11y-cloud

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Academic email domains
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (7.2%) to scientific vocabulary
Last synced: 10 months ago · JSON representation

Repository

无障碍可视化适配 - Empowering the Visually Impaired Community

Basic Info
  • Host: GitHub
  • Owner: bytedance
  • License: apache-2.0
  • Language: JavaScript
  • Default Branch: main
  • Homepage:
  • Size: 1.88 MB
Statistics
  • Stars: 10
  • Watchers: 2
  • Forks: 1
  • Open Issues: 0
  • Releases: 0
Created almost 2 years ago · Last pushed almost 2 years ago
Metadata Files
Readme Contributing License

README.CN.md

无障碍云标签-助力视障群体

无障碍解决方案，不再需要前端开发者持续写代码适配。只需接入云标签sdk后，根据云标签定义的数据规则，使用标注工具进行可视化配置，并实时进行无障碍测试，该工作全程可由 0 研发基础的QA或其他角色完成。 （当UI视图结构动态变化时，云标签sdk会根据页面内容实时生成新的无障碍属性）

English Version

快速体验

  1. 安装依赖

$ yarn bootstrap

  1. 构建 mark tool 与 runtime sdk 并启动 node server

$ yarn build

选择运行 example

? Please choose usage: ❯ Run example Run packages

选择运行 nodejs-server

? Please choose usage: Run example ? Please choose examples: a11y-webpack-loader-react ❯ nodejs-server

  1. 等待构建结束，会自动打开 http://localhost:3001/index.html 标注面板并连接 socket

  2. 打开你的项目，在代码中引入sdk；或在浏览器打开任意网站，通过devtool控制台引入sdk。随后即可在 http://localhost:3001/index.html 标注面板开始无障碍标注

js const script = document.createElement("script"); script.src = "http://localhost:3001/sdk.min.js"; document.body.appendChild(script);

快速接入部署

想要在你的工程中接入无障碍云标签，方式如下：

  1. 使用 Build 命令构建前端产物，随后将 packages/a11y-web-client/dist 产物放入你的资源平台，将 packages/a11y-web-sdk/dist 产物引入你的项目（也可以直接将源代码接入你自己的项目进行构建）。

$ Yarn build

选择构建 packages

? Please choose usage: Run example ❯ Run packages

选择构建 a11y-web-client 和 a11y-web-sdk

? Please choose usage: Run packages ? Please 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

构建完成后调整产物位置

  1. 将 packages/a11y-web-socket 目录下的 nodejs 代码部署在你的服务器，通过命令启动(提醒：修改端口配置 config/deployment.config.js)

$ cd packages/a11y-web-socket && npm run start

  1. 按照 examples/nodejs-server 目录下的 mock 接口 interface 实现，存入你自己的数据库。(提醒：修改端口配置 config/deployment.config.js)

云标签标准数据说明

A11yTag Interface

字段名 字段介绍 字段类型
desc 无障碍的功能描述 string
attrs 云标签sdk会直接将attrs内的属性设置在目标元素上 AttrsProps
aid 元素的a11y-id的属性值，通过a11y-loader生成，用来选择元素 string
query 元素的css Selector，用来选择元素（与aid二选一使用） string
calcAttrs 计算规则定义，该条目下会告知云标签sdk如何通过现有页面元素的信息去生成无障碍属性 CalcAttrsProps


AttrsProps Interface

字段名 字段介绍 字段类型
tabindex 焦点顺序，遵循w3c string | number
role 如buton、link、dialog等，遵循w3c string
  • 该类别下可支持任意标准html元素属性。

CalcAttrsProps Interface

字段名 字段介绍 字段类型
label 句子，一个焦点的最终朗读结果 LabelProps


LabelProps Interface

字段名 字段介绍 字段类型
list 片段，一个句子包含多个片段 ListProps
terms 条件，指定片段在某个或多个条件下生效 termsProps


ListProps Interface

字段名 字段介绍 字段类型
list 片段，一个句子包含多个片段 WordProps[]


WordProps Interface

字段名 字段介绍 字段类型
aid 元素的a11y-id的属性值，通过a11y-loader生成，用来选择元素 string
query 元素的css Selector，用来选择元素 string
value 固定文案拼接 string
opt 单词处理方式：默认为追加（+），可以设置为删减（-） '-' ｜ '+'
map 将包含特定属性元素进行文案映射 AttrMap


AttrMap Interface

字段名 字段介绍 字段类型
type 映射的类型，固定为属性 'attr'
attr 映射的属性，如图片使用'src' string
match 匹配规则 { [string]: string }


termsProps Interface

字段名 字段介绍 字段类型
bool 生效条件，是或否 boolean
check 规则类型，当前支持：是否存在、是否为数字 'exist' | 'number'
aid 元素的a11y-id的属性值，通过a11y-loader生成，用来选择元素 string
query 元素的css Selector，用来选择元素 string


目录介绍

. ├── CONTRIBUTING.CN.md ├── CONTRIBUTING.md ├── DSL.js // 云标签标准数据说明 ├── LICENSE ├── README.CN.md ├── README.md ├── commitlint.config.js ├── config │ ├── deployment.config.js // 部署配置，可根据需要修改 │ └── webpack.base.config.js // 基础的 webpack 配置 ├── examples │ ├── a11y-webpack-loader-react // React 项目使用 a11y-webpack-loader 自动生成 a11y-id 属性示例 │ └── a11y-nodejs-server // 使用 nodejs 搭建的数据处理服务示例 ├── lerna.json ├── package-lock.json ├── package.json ├── packages │ ├── a11y-web-client // 云标签标注工具🔧，支持标注过程高亮、功能实时生效 │ ├── a11y-web-sdk // 云标签运行时sdk，在代码中接入无障碍能力 │ ├── a11y-web-socket // 云标签服务，提供socket标注能力 │ └── a11y-webpack-loader // webpack构建loader，添加固定的a11y-id属性便于标注。（支持JSX源代码或产物代码） ├── script │ ├── build.js │ ├── clean.js │ ├── start.js │ ├── test.js │ └── utils.js └── yarn.lock

联系我们

如果有任何问题，可以通过提 issue 或评论的方式联系我们，我们会在三个工作日内回复。

License

无障碍云标签 使用 Apache License 2.0 。

Owner

  • Name: Bytedance Inc.
  • Login: bytedance
  • Kind: organization
  • Location: Singapore

GitHub Events

Total
  • Watch event: 2
  • Fork event: 1
Last Year
  • Watch event: 2
  • Fork event: 1

Issues and Pull Requests

Last synced: about 1 year ago

All Time
  • Total issues: 0
  • Total pull requests: 1
  • Average time to close issues: N/A
  • Average time to close pull requests: about 6 hours
  • Total issue authors: 0
  • Total pull request authors: 1
  • Average comments per issue: 0
  • Average comments per pull request: 0.0
  • Merged pull requests: 1
  • Bot issues: 0
  • Bot pull requests: 0
Past Year
  • Issues: 0
  • Pull requests: 1
  • Average time to close issues: N/A
  • Average time to close pull requests: about 6 hours
  • Issue authors: 0
  • Pull request authors: 1
  • Average comments per issue: 0
  • Average comments per pull request: 0.0
  • Merged pull requests: 1
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
Pull Request Authors
  • codetker (2)
Top Labels
Issue Labels
Pull Request Labels

Dependencies

.github/workflows/mr_publish_alpha.yml actions
  • actions/checkout v4 composite
  • actions/setup-node v4 composite
.github/workflows/mr_run_jest.yml actions
  • actions/checkout v4 composite
  • actions/setup-node v4 composite
.github/workflows/publish.yml actions
  • actions/checkout v3 composite
  • actions/setup-node v2 composite
examples/a11y-nodejs-server/package.json npm
  • jest ^29.7.0 development
  • supertest ^7.0.0 development
  • chalk ^4.1.2
  • dotenv ^16.4.5
  • koa ^2.15.3
  • koa-bodyparser ^4.4.1
  • koa-router ^12.0.1
  • koa-static ^5.0.0
  • open 6.0.0
  • uuid ^10.0.0
examples/a11y-webpack-loader-react/package.json npm
  • @babel/plugin-proposal-private-property-in-object ^7.21.11 development
  • @testing-library/jest-dom ^5.17.0 development
  • @testing-library/react ^13.4.0 development
  • @testing-library/user-event ^13.5.0 development
  • a11y-webpack-loader ^0.0.1 development
  • customize-cra ^1.0.0 development
  • react-app-rewired ^2.2.1 development
  • react-scripts 5.0.1 development
  • i18next ^23.11.5
  • react ^18.3.1
  • react-dom ^18.3.1
  • web-vitals ^2.1.4
package.json npm
  • @commitlint/cli ^19.3.0 development
  • @commitlint/config-conventional ^19.2.2 development
  • babel-eslint ^10.0.3 development
  • dotenv ^16.4.5 development
  • eslint ^7.7.0 development
  • eslint-config-prettier ^6.9.0 development
  • eslint-plugin-babel ^5.3.0 development
  • eslint-plugin-eslint-plugin ^3.5.3 development
  • eslint-plugin-jest 28.4.0 development
  • eslint-plugin-no-for-of-loops ^1.0.0 development
  • eslint-plugin-no-function-declare-after-return ^1.0.0 development
  • eslint-plugin-react ^7.20.0 development
  • husky ^9.0.11 development
  • inquirer ^8 development
  • inquirer-checkbox-plus-prompt ^1.4.2 development
  • lerna ^8.1.6 development
  • lint-staged ^15.2.7 development
  • prettier ^3.3.2 development
packages/a11y-web-client/package.json npm
  • @babel/cli ^7.24.7 development
  • @babel/core ^7.24.7 development
  • @babel/preset-env ^7.24.7 development
  • @babel/preset-react ^7.24.7 development
  • @babel/runtime-corejs2 ^7.24.7 development
  • @testing-library/jest-dom ^5.17.0 development
  • @testing-library/react ^13.4.0 development
  • @testing-library/user-event ^13.5.0 development
  • babel-loader ^9.1.2 development
  • babel-plugin-module-resolver ^5.0.2 development
  • clean-webpack-plugin ^4.0.0 development
  • cross-env ^7.0.3 development
  • css-loader ^7.1.1 development
  • file-loader ^6.2.0 development
  • html-webpack-plugin ^5.6.0 development
  • jest ^29.7.0 development
  • jest-environment-jsdom ^29.7.0 development
  • jest-less-loader ^0.2.0 development
  • less ^4.2.0 development
  • less-loader ^12.2.0 development
  • style-loader ^3.3.4 development
  • terser-webpack-plugin ^5.3.10 development
  • webpack ^5.91.0 development
  • webpack-cli ^5.1.4 development
  • webpack-dev-server ^5.0.4 development
  • webpack-merge ^5.10.0 development
  • webpackbar ^6.0.1 development
  • @arco-design/web-react ^2.62.1
  • i18next ^23.11.5
  • i18next-browser-languagedetector ^8.0.0
  • i18next-http-backend ^2.5.2
  • react ^18.3.1
  • react-dom ^18.3.1
  • react-i18next ^14.1.2
  • socket.io ^4.7.5
packages/a11y-web-sdk/package.json npm
  • @babel/preset-env ^7.24.7 development
  • @babel/preset-react ^7.7.4 development
  • @babel/runtime-corejs2 ^7.7.4 development
  • babel-loader ^9.1.2 development
  • babel-plugin-module-resolver ^5.0.2 development
  • clean-webpack-plugin ^4.0.0 development
  • css-loader ^7.1.1 development
  • file-loader ^6.2.0 development
  • jest ^29.7.0 development
  • jest-environment-jsdom ^29.7.0 development
  • jest-less-loader ^0.2.0 development
  • less ^4.2.0 development
  • less-loader ^12.2.0 development
  • style-loader ^3.3.4 development
  • terser-webpack-plugin ^5.3.10 development
  • webpack ^5.91.0 development
  • webpack-cli ^5.1.4 development
  • webpack-dev-server ^5.0.4 development
  • webpack-merge ^5.10.0 development
  • webpackbar ^6.0.1 development
  • socket.io-client ^4.7.5
packages/a11y-web-socket/package.json npm
  • jest ^29.7.0 development
  • socket.io-client ^4.7.5 development
  • chalk ^4.1.2
  • socket.io ^4.7.5
packages/a11y-webpack-loader/package.json npm
  • @babel/preset-env ^7.24.7 development
  • @babel/preset-react ^7.24.7 development
  • @babel/runtime-corejs2 ^7.24.7 development
  • babel-loader ^9.1.2 development
  • clean-webpack-plugin ^4.0.0 development
  • css-loader ^7.1.1 development
  • file-loader ^6.2.0 development
  • jest ^29.7.0 development
  • less ^4.2.0 development
  • less-loader ^12.2.0 development
  • node-libs-browser ^2.2.1 development
  • path-browserify ^1.0.1 development
  • stream-browserify ^3.0.0 development
  • style-loader ^3.3.4 development
  • terser-webpack-plugin ^5.3.10 development
  • vm-browserify ^1.1.2 development
  • webpack ^5.91.0 development
  • webpack-cli ^5.1.4 development
  • webpack-merge ^5.10.0 development
  • webpackbar ^6.0.1 development
  • @babel/core 7.24.7
  • @babel/generator 7.24.7
  • @babel/parser 7.24.7
  • @babel/traverse 7.24.7
  • loader-utils 2.0.2
  • md5 2.3.0
yarn.lock npm
  • 2019 dependencies