| <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</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="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Animation</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/en/how-to/animation/transition" class="nav-link"><span class="title">Data Transition</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="web-accessibility" tabindex="-1">Web Accessibility</h1> <p><a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities.</p> <p>ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows people with visual disabilities to understand the content of the chart with the help of reading devices, to make the chart accessible to more people. Apache ECharts 5 supports decal patterns that allow chart data to be distinguished by applique patterns in addition to color, providing a better accessibility experience.</p> <p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> as <code>true</code>.</p> <h2 id="chart-labels" tabindex="-1">Chart Labels</h2> <p>After setting <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> to be <code>true</code>, ECharts will automatically generate a description of the chart according to the title, chart, data, etc. Users can also change the description through the configuration item.</p> <p>About the configuration item:</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>The default language will be used based on the language pack (default Chinese), or you can customize the template using the configuration item.</p> <h3 id="overall-description-modification" tabindex="-1">Overall Description Modification</h3> <p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p> <p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> configuration item.</p> <h3 id="customize-template-description" tabindex="-1">Customize Template Description</h3> <p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p> <p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use <code>aria.description</code> to cover the default if needed.</p> <p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> as the overall description. Configuration item <code>aria.general.withTitle</code> and <code>'{title}'</code> will be replaced by the chart title. In another word, if <code>aria.general.withTitle</code> was defined as <code>This is a chart about "{title}"</code>, and the title is <code>'Prize Distribution Chart'</code>, the description of this part will be <code>'This is a chart about "Prize Distribution Chart"'</code>.</p> <p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p> <p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria.label">ARIA Document</a>.</p> <h2 id="decal-patterns" tabindex="-1">Decal Patterns</h2> <p>In addition, Apache ECharts 5 adds support for decal patterns as a secondary representation of color to further differentiate data. With <code>aria.enabled</code> set to <code>true</code> and <code>aria.decal.show</code> set to <code>true</code>, the default decal style will be applied.</p> <p><iframe width="100%" height="350" src=""></iframe></p> <p>If you need to customize the decal pattern, you can use <a href="https://echarts.apache.org/option.html#aria.decal.decals">aria.decal.decals</a> to configure a flexible decal pattern.</p> <p>Please refer to <a href="https://echarts.apache.org/option.html#aria.decal">ARIA option</a> for more detail.</p></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">Contributors</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/best-practices/aria.md" title="Edit this Document" 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">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</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,e,i,a,r,d,l,o,n,h,s,c,p,g,f,u,m,b,I,w,C,A,y,v,W,x,B,T,E,D,R,S,k,P,Z,H,V,z,F,J,L,U,G,M,K,X,O,Y,q,N,_,j,Q,$,tt,et,it,at,rt){return{layout:"default",data:[{html:'<h1 id="web-accessibility" tabindex="-1">Web Accessibility</h1>\n<p><a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities.</p>\n<p>ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows people with visual disabilities to understand the content of the chart with the help of reading devices, to make the chart accessible to more people. Apache ECharts 5 supports decal patterns that allow chart data to be distinguished by applique patterns in addition to color, providing a better accessibility experience.</p>\n<p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> as <code>true</code>.</p>\n<h2 id="chart-labels" tabindex="-1">Chart Labels</h2>\n<p>After setting <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> to be <code>true</code>, ECharts will automatically generate a description of the chart according to the title, chart, data, etc. Users can also change the description through the configuration item.</p>\n<p>About the configuration item:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGFyaWE6IHsKICAgIHNob3c6IHRydWUKICB9LAogIHRpdGxlOiB7CiAgICB0ZXh0OiAnUmVmZXJyZXIgb2YgYSBVc2VyJywKICAgIHg6ICdjZW50ZXInCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1JlZmVycmVyJywKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdEaXJlY3QgVmlzaXQnIH0sCiAgICAgICAgeyB2YWx1ZTogMzEwLCBuYW1lOiAnRW1haWwgTWFya2V0aW5nJyB9LAogICAgICAgIHsgdmFsdWU6IDIzNCwgbmFtZTogJ1VuaW9uIEFkJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ1ZpZGVvIEFkJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICdTZWFyY2ggRW5naW5lJyB9CiAgICAgIF0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/aria-pie"></md-example></p>\n<p>There will be an <code>area-label</code> attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:</p>\n<pre><code>This is a chart about "Referrer of a User" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.\n</code></pre>\n<p>The default language will be used based on the language pack (default Chinese), or you can customize the template using the configuration item.</p>\n<h3 id="overall-description-modification" tabindex="-1">Overall Description Modification</h3>\n<p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p>\n<p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> configuration item.</p>\n<h3 id="customize-template-description" tabindex="-1">Customize Template Description</h3>\n<p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p>\n<p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use <code>aria.description</code> to cover the default if needed.</p>\n<p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> as the overall description. Configuration item <code>aria.general.withTitle</code> and <code>\'{title}\'</code> will be replaced by the chart title. In another word, if <code>aria.general.withTitle</code> was defined as <code>This is a chart about "{title}"</code>, and the title is <code>\'Prize Distribution Chart\'</code>, the description of this part will be <code>\'This is a chart about "Prize Distribution Chart"\'</code>.</p>\n<p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p>\n<p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria.label">ARIA Document</a>.</p>\n<h2 id="decal-patterns" tabindex="-1">Decal Patterns</h2>\n<p>In addition, Apache ECharts 5 adds support for decal patterns as a secondary representation of color to further differentiate data. With <code>aria.enabled</code> set to <code>true</code> and <code>aria.decal.show</code> set to <code>true</code>, the default decal style will be applied.</p>\n<p><md-example src="doc-example/aria-decal-simple"></md-example></p>\n<p>If you need to customize the decal pattern, you can use <a href="https://echarts.apache.org/option.html#aria.decal.decals">aria.decal.decals</a> to configure a flexible decal pattern.</p>\n<p>Please refer to <a href="https://echarts.apache.org/option.html#aria.decal">ARIA option</a> for more detail.</p>\n',postPath:"en/best-practices/aria"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"v4 升级 v5 指南",dir:p},{title:5.2,dir:g},{title:5.3,dir:f}]}]},{title:"概念篇",dir:u,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:b,draft:t},{title:"系列",dir:I,draft:t},{title:"样式",dir:w},{title:"数据集",dir:C},{title:"数据转换",dir:A},{title:"坐标系",dir:y,draft:t},{title:"坐标轴",dir:v},{title:"视觉映射",dir:i},{title:"图例",dir:W},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:T,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:E},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:S,draft:t},{title:"阶梯瀑布图",dir:k},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:P,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:J},{title:"圆环图",dir:L},{title:"南丁格尔图（玫瑰图）",dir:U}]},{title:"散点图",dir:G,children:[{title:"基础散点图",dir:M}]}]},{title:K,dir:e,draft:t},{title:"跨平台方案",dir:X,children:[{title:"服务端渲染",dir:O},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:N,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"动画",dir:j,children:[{title:"数据过渡动画",dir:Q}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:tt,draft:t}]}]},{title:"最佳实践",dir:et,children:[{title:K,dir:e,draft:t},{title:it,dir:at},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:rt}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:c},{title:"Migration from v4 to v5",dir:p},{title:5.2,dir:g},{title:5.3,dir:f}]}]},{title:"Concepts",dir:u,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:I,draft:t},{title:"Style",dir:w},{title:"Dataset",dir:C},{title:"Data Transform",dir:A},{title:"Coordinate",dir:y,draft:t},{title:"Axis",dir:v},{title:"Visual Mapping",dir:i},{title:"Legend",dir:W},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:B,children:[{title:"Common Charts",dir:T,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:E},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:S,draft:t},{title:"Waterfall",dir:k}]},{title:"Line",dir:P,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:J},{title:"Ring Style",dir:L},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:G,children:[{title:"Basic Scatter",dir:M}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:O}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:N,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Animation",dir:j,children:[{title:"Data Transition",dir:Q}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:tt,draft:t}]}]},{title:"Best Practices",dir:et,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:it,dir:at},{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:"/en/best-practices/aria",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-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","server","data","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/5870c6f.js" defer></script><script src="/handbook/_nuxt/js/d63042719a059a581645.js" defer></script><script src="/handbook/_nuxt/js/4f3ab71f990e271ccbe4.js" defer></script><script src="/handbook/_nuxt/js/f74f8c0f406ea2522d04.js" defer></script><script src="/handbook/_nuxt/js/e96421e0f27cc5a35348.js" defer></script><script src="/handbook/_nuxt/js/d6226697ecb43e03cd0d.js" defer></script> |
