| __NUXT_JSONP__("/zh/best-practice/aria", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F){return {data:[{article:{slug:"aria",toc:[{id:l,depth:u,text:l},{id:m,depth:u,text:m}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:v},children:[{type:b,tag:d,props:{href:"#%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE",ariaHidden:k,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,value:v}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"W3C 制定了无障碍富互联网应用规范集（"},{type:b,tag:d,props:{href:"https:\u002F\u002Fwww.w3.org\u002FWAI\u002Fintro\u002Faria",rel:[f,g,h],target:i},children:[{type:a,value:"WAI-ARIA"}]},{type:a,value:"，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"默认关闭，需要通过将 "},{type:b,tag:d,props:{href:w,rel:[f,g,h],target:i},children:[{type:a,value:x}]},{type:a,value:y},{type:b,tag:j,props:{},children:[{type:a,value:k}]},{type:a,value:" 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"对于配置项："}]},{type:a,value:c},{type:b,tag:z,props:{className:[A]},children:[{type:b,tag:B,props:{lang:"js","line-highlights":n,"file-name":n},children:[{type:a,value:"option = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n"}]}]},{type:a,value:c},{type:b,tag:"md-example",props:{src:"doc-example\u002Faria-pie"},children:[{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"生成的图表 DOM 上，会有一个 "},{type:b,tag:j,props:{},children:[{type:a,value:"aria-label"}]},{type:a,value:" 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为："}]},{type:a,value:c},{type:b,tag:z,props:{className:[A]},children:[{type:b,tag:B,props:{lang:"null","line-highlights":n,"file-name":n},children:[{type:a,value:"这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n"}]}]},{type:a,value:c},{type:b,tag:C,props:{id:l},children:[{type:b,tag:d,props:{href:"#%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0",ariaHidden:k,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,value:l}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"这时候，用户可以通过 "},{type:b,tag:d,props:{href:D,rel:[f,g,h],target:i},children:[{type:a,value:s}]},{type:a,value:" 配置项指定图表的整体描述。"}]},{type:a,value:c},{type:b,tag:C,props:{id:m},children:[{type:b,tag:d,props:{href:"#%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0",ariaHidden:k,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,value:m}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"生成描述的基本流程为，如果 "},{type:b,tag:d,props:{href:w,rel:[f,g,h],target:i},children:[{type:a,value:x}]},{type:a,value:y},{type:b,tag:j,props:{},children:[{type:a,value:k}]},{type:a,value:"，则生成无障碍访问描述，否则不生成。如果定义了 "},{type:b,tag:d,props:{href:D,rel:[f,g,h],target:i},children:[{type:a,value:s}]},{type:a,value:"，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 "},{type:b,tag:j,props:{},children:[{type:a,value:s}]},{type:a,value:" 完全覆盖。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"使用模板拼接时，先根据是否存在标题 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#title.text",rel:[f,g,h],target:i},children:[{type:a,value:"title.text"}]},{type:a,value:" 决定使用 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#aria.general.withTitle",rel:[f,g,h],target:i},children:[{type:a,value:t}]},{type:a,value:" 还是 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#aria.general.withoutTitle",rel:[f,g,h],target:i},children:[{type:a,value:"aria.general.withoutTitle"}]},{type:a,value:" 作为整体性描述。其中，"},{type:b,tag:j,props:{},children:[{type:a,value:t}]},{type:a,value:" 配置项包括模板变量 "},{type:b,tag:j,props:{},children:[{type:a,value:"'{title}'"}]},{type:a,value:"，将会被替换成图表标题。也就是说，如果 "},{type:b,tag:j,props:{},children:[{type:a,value:t}]},{type:a,value:" 被设置为 "},{type:b,tag:j,props:{},children:[{type:a,value:"'图表的标题是：{title}。'"}]},{type:a,value:"，则如果包含标题 "},{type:b,tag:j,props:{},children:[{type:a,value:"'价格分布图'"}]},{type:a,value:"，这部分的描述为 "},{type:b,tag:j,props:{},children:[{type:a,value:"'图表的标题是：价格分布图。'"}]},{type:a,value:E}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"拼接完标题之后，会依次拼接系列的描述（"},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#aria.series",rel:[f,g,h],target:i},children:[{type:a,value:"aria.series"}]},{type:a,value:"），和每个系列的数据的描述（"},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#aria.data",rel:[f,g,h],target:i},children:[{type:a,value:"aria.data"}]},{type:a,value:"）。同样，每个模板都有可能包括模板变量，用以替换实际的值。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"完整的描述生成流程请参见 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#aria",rel:[f,g,h],target:i},children:[{type:a,value:"ARIA 文档"}]},{type:a,value:E}]}]},dir:"\u002Fzh\u002Fbest-practice",path:"\u002Fzh\u002Fbest-practice\u002Faria",extension:".md",createdAt:F,updatedAt:F},postPath:"zh\u002Fbest-practice\u002Faria"}],fetch:{},mutations:[]}}("text","element","\n","a","p","nofollow","noopener","noreferrer","_blank","code","true","整体修改描述","定制模板描述","",-1,"span","icon","icon-link","aria.description","aria.general.withTitle",2,"无障碍访问","https:\u002F\u002Fecharts.apache.org\u002Foption.html#aria.show","aria.show"," 设置为 ","div","nuxt-content-highlight","md-code-block","h2","https:\u002F\u002Fecharts.apache.org\u002Foption.html#aria.description","。","2021-08-02T05:33:02.867Z"))); |