[incubator-weex-site] branch master updated: add docs for accessibility (#421)

[kyork]

This is an automated email from the ASF dual-hosted git repository.

kyork pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git


The following commit(s) were added to refs/heads/master by this push:
     new 849cd99  add docs for accessibility (#421)
849cd99 is described below

commit 849cd9910ac7628684030792fdeea86b2e6db2b3
Author: chen <lucky-c...@users.noreply.github.com>
AuthorDate: Wed Jun 12 20:33:32 2019 +0800

    add docs for accessibility (#421)
---
 docs/docs/styles/common-styles.md    | 27 +++++++++++++++++++++++++++
 docs/zh/docs/styles/common-styles.md | 28 ++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/docs/docs/styles/common-styles.md 
b/docs/docs/styles/common-styles.md
index a4234fb..abb2688 100644
--- a/docs/docs/styles/common-styles.md
+++ b/docs/docs/styles/common-styles.md
@@ -562,6 +562,33 @@ box-shadow takes no effect on Android
 ```
 
 
+## Accessibility
+
+
+- role: show compoent‘s role [web 
define](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties)
+       - button 
+       - input `input`compoent default role is input
+       - img `image` compoent default role is image
+       - link
+       - search
+       - tab
+       - text `text`compoent default role is text
+- aria-hidden :hide compoent which is unnecessary for user
+- aria-label  : configure the msg after the current element is focused
+
+### Example
+
+```
+<text class='txt' role='text' aria-label='I am a text'>text</text>
+
+<a class='a' role='link' href='http://xxx.xxx.xxx' aria-label='I am a 
link'></a>
+
+
+<image class='img' aria-hidden='true' role='img' src="http://xxx.png"; 
aria-label='I am a image，but you can not see me'></image>
+
+```
+
+
 ## Other Common Style
 * `opacity {number}`:Set the transparency of an element or the degree to which 
content behind an element is visible. The {number} range is **0** to **1**, 
**0** for fully transparent and **1** for fully opaque.
 * `background-color {color}`: Set the background color of an element. The 
following color format is supported.
diff --git a/docs/zh/docs/styles/common-styles.md 
b/docs/zh/docs/styles/common-styles.md
index 9d524b1..25a6838 100644
--- a/docs/zh/docs/styles/common-styles.md
+++ b/docs/zh/docs/styles/common-styles.md
@@ -383,6 +383,34 @@ Weex 目前只支持两种颜色的渐变，渐变方向如下：
 
 [示例](http://dotwe.org/vue/5ca46fdb8520e5a1255533d390d41f63)
 
+## 无障碍
+
+- role 指定组件角色,告诉用户当前元素是何种类型组件 
参考[web定义](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties)
+       - button 
+       - input `input`组件的 的默认值是 input
+       - img `image`组件的的默认值是 img
+       - link
+       - search
+       - tab
+       - text `text`组件的 role 的默认值是 text
+- aria-hidden 对有用户影藏掉一些没必要的元素
+- aria-label  配置当前元素被聚焦后的文案提示
+
+### Demo:
+
+```
+<text class='txt' role='text' aria-label='I am a text'>text</text>
+
+<a class='a' role='link' href='http://xxx.xxx.xxx' aria-label='I am a 
link'></a>
+
+
+<image class='img' aria-hidden='true' role='img' src="http://xxx.png"; 
aria-label='I am a image，but you can not see me'></image>
+
+```
+
+
+
+
 ## 阴影(box-shadow) <Badge text="0.11+" type="warn" vertical="middle"/>
 
 Weex 支持 `box-shadow` 属性用于设置元素阴影。