You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/12/07 09:58:51 UTC
[incubator-echarts-doc] branch next updated: doc: upate aria
tutorial
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/next by this push:
new 1b0cdbe doc: upate aria tutorial
1b0cdbe is described below
commit 1b0cdbee1ae97a860919d7a17152ca738f866cba
Author: Ovilia <zw...@gmail.com>
AuthorDate: Mon Dec 7 17:58:36 2020 +0800
doc: upate aria tutorial
---
en/option/component/aria.md | 14 +++++++-------
en/tutorial/aria.md | 41 +++++++++++++++++++++++++++++++++++++----
zh/option/component/aria.md | 14 +++++++-------
zh/tutorial/aria.md | 35 ++++++++++++++++++++++++++---------
4 files changed, 77 insertions(+), 27 deletions(-)
diff --git a/en/option/component/aria.md b/en/option/component/aria.md
index b1f28a5..fce7cc8 100644
--- a/en/option/component/aria.md
+++ b/en/option/component/aria.md
@@ -201,13 +201,7 @@ Note that usually the last series is followed by the series `separator.end`, so
## decal(Object)
-Decal patterns are added to series data as an additional hint other than colors to help differentiate the data. The following are some examples of decal options.
-
-~[700x300](${galleryViewPath}doc-example/aria-decal&edit=1&reset=1)
-
-### show(boolean) = false
-
-Whether or not to display the decal pattern is not shown by default. If you want to display the applique, you need to make sure [aria.enabled](~aria.enabled) and `aria.decal.show` are both `true`.
+Decal patterns are added to series data as an additional hint other than colors to help differentiate the data. It is easy to enabled the default decal patterns by enabling it:
```
aria: {
@@ -218,6 +212,12 @@ aria: {
}
```
+~[700x300](${galleryViewPath}doc-example/aria-decal-simple&edit=1&reset=1)
+
+### show(boolean) = false
+
+Whether or not to display the decal pattern is not shown by default. If you want to display the applique, you need to make sure [aria.enabled](~aria.enabled) and `aria.decal.show` are both `true`.
+
### decals(Object|Array)
The style of the decal pattern. If it is an `Object` type, it means all data will have the same style, if it is an array, then each item in the array will have one style and the data will be looped through the array in order.
diff --git a/en/tutorial/aria.md b/en/tutorial/aria.md
index f93e761..36d4190 100644
--- a/en/tutorial/aria.md
+++ b/en/tutorial/aria.md
@@ -2,9 +2,9 @@
# Supporting ARIA in Charts
-W3C defined the Accessible Rich Internet Applications Suite ([WAI-ARIA](https://www.w3.org/WAI/intro/aria)) to make Web content and Web applications more accessible to the disabled. From Apache ECharts (incubating)<sup>TM</sup> 4.0, we support ARIA by generating description for charts automatically.
+The W3C has developed the [WAI-ARIA](https://www.w3.org/WAI/intro/aria), the Accessible Rich Internet Applications Suite, which is dedicated to making web content and web applications accessible. Apache ECharts (incubating)<sup>TM</sup> 4 complies with this specification by supporting the automatic generation of intelligent descriptions based on chart configuration items, allowing blind people to understand the chart content with the help of a reading device, making the chart accessible [...]
-By default, ARIA is disabled. To enable it, you should set [aria.show](~aria.show) to be `true`. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.
+By default, ARIA is disabled. To enable it, you should set [aria.enabled](~aria.enabled) to be `true`. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.
**For example:**
@@ -43,7 +43,40 @@ There should be an `aria-label` attribute on the chart DOM, which can help the d
This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.
```
-The default language is in Chinese, but you can configure it with templates.
+The default language is in defined by the language package (Chinese by default), but you can configure it with templates.
-Please refer to [ARIA option](option.html#aria) for more detail.
+In addition, Apache ECharts 5 now supports applique textures as a secondary expression of color to further differentiate data. If `aria.enabled` is set to `true`, `aria.decal.show` is set to `true` to adopt the default applique style.
+
+~[700x300](${galleryViewPath}doc-example/aria-decal-simple&edit=1&reset=1)
+
+
+Next, let's describe more specifically how these two accessible designs can be configured.
+
+## Chart Labels
+
+### Apply Overall Modification Description
+
+For some charts, the default generated descriptions of the data points are not sufficient to represent the overall information. For example, in the scatter plot below, the default description can include the coordinates of the data points, but knowing the coordinates of hundreds or thousands of points does not help us to effectively understand the information presented in the chart.
+
+
+
+At this point, the user can specify the overall description of the chart via the [aria.label.description](option.html#aria.label.description) configuration item.
+
+### Customizing the Template Description
+
+In addition to modifying descriptions holistically, we also provide templates for generating descriptions that can be easily modified at a fine-grained level.
+
+The basic flow for generating descriptions is that if [aria.label.description](option.html#aria.label.show) is set to `true`, then the accessibility description is generated, otherwise it is not. If [aria.label.description](option.html#aria.label.description) is defined, it is used as the full description of the chart, otherwise the description is generated according to the template stitching. We provide a default algorithm for generating descriptions, and only if the generated descripti [...]
+
+When using the template, whether [title.text](~title.text) is used along with [aria.label.general.withTitle](option.html#aria.label.general.withTitle) while [aria.label.general.withoutTitle](option.html#aria.label.general.withoutTitle) is used if there is no title text. `aria.general.withTitle` supports a template `'{title}'`, which will be replaced with chart title. This means, if `aria.general.withTitle` is set to be `'The chart title is {title}.'` and the chart title is `Price Distrib [...]
+
+After generating the title, the description of the series ([aria.label.series](option.html#aria.label.series)) and the description of the data for each series ([aria.label.data](option.html#aria.label.data)) are generated in turn. The following is an example of a template. Likewise, each template may include template variables to replace actual values.
+
+## Decal Pattern
+
+The way to use the default applique pattern was described above. If you need to customize the decal pattern, you can use [aria.decal.decals](option.html#aria.decal.decals) to configure a flexible decal pattern.
+
+~[700x300](${galleryViewPath}doc-example/aria-decal&edit=1&reset=1)
+
+Please refer to [ARIA option](option.html#aria) for more detail.
diff --git a/zh/option/component/aria.md b/zh/option/component/aria.md
index 71e6e1e..efc0ebc 100644
--- a/zh/option/component/aria.md
+++ b/zh/option/component/aria.md
@@ -201,13 +201,7 @@ option = {
## decal(Object)
-为系列数据增加贴花纹理，作为颜色的辅助，帮助区分数据。下面是一些贴花图案的配置样例：
-
-~[700x300](${galleryViewPath}doc-example/aria-decal&edit=1&reset=1)
-
-### show(boolean) = false
-
-是否显示贴花图案，默认不显示。如果要显示贴花，需要保证 [aria.enabled](~aria.enabled) 与 `aria.decal.show` 都是 `true`。
+为系列数据增加贴花纹理，作为颜色的辅助，帮助区分数据。使用默认贴花图案的方式非常简单，只需要开启即可：
```
aria: {
@@ -218,6 +212,12 @@ aria: {
}
```
+~[700x300](${galleryViewPath}doc-example/aria-decal-simple&edit=1&reset=1)
+
+### show(boolean) = false
+
+是否显示贴花图案，默认不显示。如果要显示贴花，需要保证 [aria.enabled](~aria.enabled) 与 `aria.decal.show` 都是 `true`。
+
### decals(Object|Array)
贴花图案的样式。如果是 `Object` 类型，表示为所有数据采用同样的样式，如果是数组，则数组的每一项各为一种样式，数据将会依次循环取数组中的样式。
diff --git a/zh/tutorial/aria.md b/zh/tutorial/aria.md
index e085b1b..765f518 100644
--- a/zh/tutorial/aria.md
+++ b/zh/tutorial/aria.md
@@ -4,14 +4,14 @@
W3C 制定了无障碍富互联网应用规范集（[WAI-ARIA](https://www.w3.org/WAI/intro/aria)，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。Apache ECharts (incubating)<sup>TM</sup> 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。
-默认关闭，需要通过将 [aria.show](option.html#aria.show) 设置为 `true` 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。
+默认关闭，需要通过将 [aria.enabled](option.html#aria.enabled) 设置为 `true` 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。
对于配置项：
```js
option = {
aria: {
- show: true
+ enabled: true
},
title: {
text: '某站点用户访问来源',
@@ -41,22 +41,39 @@ option = {
这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。
```
-## 整体修改描述
+默认语言会根据语言包（默认中文）选择，也可以使用配置项自定义模板。
+
+除此之外，Apache ECharts 5 新增支持贴花纹理，作为颜色的辅助表达，进一步用以区分数据。在 `aria.enabled` 为 `true` 的前提下，将 `aria.decal.show` 设为 `true` 即可采用默认的贴花样式。
+
+~[700x300](${galleryViewPath}doc-example/aria-decal-simple&edit=1&reset=1)
+
+下面，我们更具体地介绍这两种无障碍设计的配置方式。
+
+## 图表描述
+
+### 采用整体描述
对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。
-这时候，用户可以通过 [aria.description](option.html#aria.description) 配置项指定图表的整体描述。
+这时候，用户可以通过 [aria.label.description](option.html#aria.label.description) 配置项指定图表的整体描述。
-## 定制模板描述
+### 定制模板描述
除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。
-生成描述的基本流程为，如果 [aria.show](option.html#aria.show) 设置为 `true`，则生成无障碍访问描述，否则不生成。如果定义了 [aria.description](option.html#aria.description)，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 `aria.description` 完全覆盖。
+生成描述的基本流程为，如果 [aria.label.show](option.html#aria.label.show) 设置为 `true`，则生成无障碍访问描述，否则不生成。如果定义了 [aria.label.description](option.html#aria.label.description)，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 `aria.description` 完全覆盖。
+
+使用模板拼接时，先根据是否存在标题 [title.text](~title.text) 决定使用 [aria.label.general.withTitle](option.html#aria.label.general.withTitle) 还是 [aria.label.general.withoutTitle](option.html#aria.label.general.withoutTitle) 作为整体性描述。其中，`aria.general.withTitle` 配置项包括模板变量 `'{title}'`，将会被替换成图表标题。也就是说，如果 `aria.general.withTitle` 被设置为 `'图表的标题是：{title}。'`，则如果包含标题 `'价格分布图'`，这部分的描述为 `'图表的标题是：价格分布图。'`。
+
+拼接完标题之后，会依次拼接系列的描述（[aria.label.series](option.html#aria.label.series)），和每个系列的数据的描述（[aria.label.data](option.html#aria.label.data)）。同样，每个模板都有可能包括模板变量，用以替换实际的值。
+
+
+## 贴花图案
-使用模板拼接时，先根据是否存在标题 [title.text](~title.text) 决定使用 [aria.general.withTitle](option.html#aria.general.withTitle) 还是 [aria.general.withoutTitle](option.html#aria.general.withoutTitle) 作为整体性描述。其中，`aria.general.withTitle` 配置项包括模板变量 `'{title}'`，将会被替换成图表标题。也就是说，如果 `aria.general.withTitle` 被设置为 `'图表的标题是：{title}。'`，则如果包含标题 `'价格分布图'`，这部分的描述为 `'图表的标题是：价格分布图。'`。
+上文介绍了使用默认的贴花图案的方式。如果需要自定义贴花图案，可以使用 [aria.decal.decals](option.html#aria.decal.decals) 配置出灵活多变的图案。
-拼接完标题之后，会依次拼接系列的描述（[aria.series](option.html#aria.series)），和每个系列的数据的描述（[aria.data](option.html#aria.data)）。同样，每个模板都有可能包括模板变量，用以替换实际的值。
+~[700x300](${galleryViewPath}doc-example/aria-decal&edit=1&reset=1)
-完整的描述生成流程请参见 [ARIA 文档](option.html#aria)。
+更具体的信息请参见 [ARIA 文档](option.html#aria)。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org