| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide">v5 升级指南</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">v4 升级 v5 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图（玫瑰图）</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">动画</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/animation/transition" class="nav-link"><span class="title">数据过渡动画</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">智能指针吸附</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE" tabindex="-1">无障碍访问</h1> <p>W3C 制定了无障碍富互联网应用规范集（<a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。</p> <p>Apache ECharts 4 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。Apache ECharts 5 新增了贴花功能，让图表数据除了可以用颜色区分之外，还能用贴花图案区分，提供了更好的无障碍访问体验。</p> <p>无障碍访问功能默认关闭，需要通过将 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code> 开启。</p> <h2 id="%E5%9B%BE%E8%A1%A8%E6%8F%8F%E8%BF%B0" tabindex="-1">图表描述</h2> <p>开启 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p> <p>对于配置项：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| </code></pre> <p>默认语言会根据语言包（默认中文）选择，也可以使用配置项自定义模板。</p> <h3 id="%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" tabindex="-1">整体修改描述</h3> <p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p> <p>这时候，用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> 配置项指定图表的整体描述。</p> <h3 id="%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" tabindex="-1">定制模板描述</h3> <p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p> <p>生成描述的基本流程为，如果 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code>aria.description</code> 完全覆盖。</p> <p>使用模板拼接时，先根据是否存在标题 <a href="https://echarts.apache.org/option.html#title.text">title.text</a> 决定使用 <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> 还是 <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> 作为整体性描述。其中，<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>，将会被替换成图表标题。也就是说，如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是：{title}。'</code>，则如果包含标题 <code>'价格分布图'</code>，这部分的描述为 <code>'图表的标题是：价格分布图。'</code>。</p> <p>拼接完标题之后，会依次拼接系列的描述（<a href="https://echarts.apache.org/option.html#aria.series">aria.series</a>），和每个系列的数据的描述（<a href="https://echarts.apache.org/option.html#aria.data">aria.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p> <p>完整的描述生成流程请参见 <a href="https://echarts.apache.org/option.html#aria.label">ARIA 文档</a>。</p> <h2 id="%E8%B4%B4%E8%8A%B1%E5%9B%BE%E6%A1%88" tabindex="-1">贴花图案</h2> <p>除此之外，Apache ECharts 5 新增支持贴花纹理，作为颜色的辅助表达，进一步用以区分数据。在 <code>aria.enabled</code> 为 <code>true</code> 的前提下，将 <code>aria.decal.show</code> 设为 <code>true</code> 即可采用默认的贴花样式。</p> <p><iframe width="100%" height="350" src=""></iframe></p> <p>如果需要自定义贴花图案，可以使用 <a href="https://echarts.apache.org/option.html#aria.decal.decals">aria.decal.decals</a> 配置出灵活多变的图案。</p> <p>更具体的信息请参见 <a href="https://echarts.apache.org/option.html#aria.decal">ARIA 文档</a>。</p></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/best-practices/aria.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60" loading="lazy"> <span>Ovilia</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,o,h,n,c,s,p,g,m,A,C,I,f,b,B,E,u,w,x,v,S,F,R,T,W,k,D,y,H,K,P,L,Z,M,G,_,U,z,O,X,J,Q,V,Y,N,j,$,q,tt,it,et,rt){return{layout:"default",data:[{html:'<h1 id="%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE" tabindex="-1">无障碍访问</h1>\n<p>W3C 制定了无障碍富互联网应用规范集（<a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。</p>\n<p>Apache ECharts 4 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。Apache ECharts 5 新增了贴花功能，让图表数据除了可以用颜色区分之外，还能用贴花图案区分，提供了更好的无障碍访问体验。</p>\n<p>无障碍访问功能默认关闭，需要通过将 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code> 开启。</p>\n<h2 id="%E5%9B%BE%E8%A1%A8%E6%8F%8F%E8%BF%B0" tabindex="-1">图表描述</h2>\n<p>开启 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p>\n<p>对于配置项：</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGFyaWE6IHsKICAgIHNob3c6IHRydWUKICB9LAogIHRpdGxlOiB7CiAgICB0ZXh0OiAn5p-Q56uZ54K555So5oi36K6_6Zeu5p2l5rqQJywKICAgIHg6ICdjZW50ZXInCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-iuv-mXruadpea6kCcsCiAgICAgIHR5cGU6ICdwaWUnLAogICAgICBkYXRhOiBbCiAgICAgICAgeyB2YWx1ZTogMzM1LCBuYW1lOiAn55u05o6l6K6_6ZeuJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ-mCruS7tuiQpemUgCcgfSwKICAgICAgICB7IHZhbHVlOiAyMzQsIG5hbWU6ICfogZTnm5_lub_lkYonIH0sCiAgICAgICAgeyB2YWx1ZTogMTM1LCBuYW1lOiAn6KeG6aKR5bm_5ZGKJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICfmkJzntKLlvJXmk44nIH0KICAgICAgXQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/aria-pie"></md-example></p>\n<p>生成的图表 DOM 上，会有一个 <code>aria-label</code> 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n</code></pre>\n<p>默认语言会根据语言包（默认中文）选择，也可以使用配置项自定义模板。</p>\n<h3 id="%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" tabindex="-1">整体修改描述</h3>\n<p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p>这时候，用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> 配置项指定图表的整体描述。</p>\n<h3 id="%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" tabindex="-1">定制模板描述</h3>\n<p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为，如果 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时，先根据是否存在标题 <a href="https://echarts.apache.org/option.html#title.text">title.text</a> 决定使用 <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> 还是 <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> 作为整体性描述。其中，<code>aria.general.withTitle</code> 配置项包括模板变量 <code>\'{title}\'</code>，将会被替换成图表标题。也就是说，如果 <code>aria.general.withTitle</code> 被设置为 <code>\'图表的标题是：{title}。\'</code>，则如果包含标题 <code>\'价格分布图\'</code>，这部分的描述为 <code>\'图表的标题是：价格分布图。\'</code>。</p>\n<p>拼接完标题之后，会依次拼接系列的描述（<a href="https://echarts.apache.org/option.html#aria.series">aria.series</a>），和每个系列的数据的描述（<a href="https://echarts.apache.org/option.html#aria.data">aria.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href="https://echarts.apache.org/option.html#aria.label">ARIA 文档</a>。</p>\n<h2 id="%E8%B4%B4%E8%8A%B1%E5%9B%BE%E6%A1%88" tabindex="-1">贴花图案</h2>\n<p>除此之外，Apache ECharts 5 新增支持贴花纹理，作为颜色的辅助表达，进一步用以区分数据。在 <code>aria.enabled</code> 为 <code>true</code> 的前提下，将 <code>aria.decal.show</code> 设为 <code>true</code> 即可采用默认的贴花样式。</p>\n<p><md-example src="doc-example/aria-decal-simple"></md-example></p>\n<p>如果需要自定义贴花图案，可以使用 <a href="https://echarts.apache.org/option.html#aria.decal.decals">aria.decal.decals</a> 配置出灵活多变的图案。</p>\n<p>更具体的信息请参见 <a href="https://echarts.apache.org/option.html#aria.decal">ARIA 文档</a>。</p>\n',postPath:"zh/best-practices/aria",title:"无障碍访问 - 最佳实践"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:o,draft:t},{title:"寻求帮助",dir:h},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"v4 升级 v5 指南",dir:s},{title:5.2,dir:p},{title:5.3,dir:g},{title:5.4,dir:m}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:C},{title:"配置项",dir:I,draft:t},{title:"系列",dir:f,draft:t},{title:"样式",dir:b},{title:"数据集",dir:B},{title:"数据转换",dir:E},{title:"坐标系",dir:u,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:x},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:F,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:T},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:k,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:y,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:K},{title:"区域面积图",dir:P},{title:"平滑曲线图",dir:L},{title:"阶梯线图",dir:Z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:G},{title:"南丁格尔图（玫瑰图）",dir:_}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:z}]}]},{title:O,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:V}]},{title:"动画",dir:Y,children:[{title:"数据过渡动画",dir:N}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t},{title:"智能指针吸附",dir:q}]}]},{title:"最佳实践",dir:tt,children:[{title:O,dir:i,draft:t},{title:it,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:rt}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:l},{title:"Resources",dir:o,draft:t},{title:"Get Help",dir:h},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:c},{title:"Migration from v4 to v5",dir:s},{title:5.2,dir:p},{title:5.3,dir:g},{title:5.4,dir:m}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:C},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:f,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:B},{title:"Data Transform",dir:E},{title:"Coordinate",dir:u,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:x},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:F,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:T},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:k,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:y,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:K},{title:"Area Chart",dir:P},{title:"Smoothed Line",dir:L},{title:"Step Line",dir:Z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:G},{title:"Rose Style",dir:_}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:z}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:V}]},{title:"Animation",dir:Y,children:[{title:"Data Transition",dir:N}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t},{title:"Intelligent Pointer Snapping",dir:q}]}]},{title:"Best Practices",dir:tt,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:it,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:rt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/best-practices/aria",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/4d2a12b.js" defer></script><script src="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" defer></script><script src="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" defer></script> |
