In The Apache ECharts 5 series (4) : The Development Experience, we looked at how Apache ECharts can improve the developer experience through data sets, internationalization, and TypeScript refactoring. In the final part of this series, we’ll cover ECharts’ accessibility efforts.
Apache ECharts has always taken accessibility design very seriously, and we want to make the information conveyed by diagrams equally accessible to the visually impaired. It is also hoped that chart developers can achieve this at a very low development cost, thus making developers more willing to support visually impaired people. In the last big release, we supported automatic one-click intelligent generation of chart descriptions based on different chart types and data, which made it very easy for developers to support DOM descriptions of charts.
In ECharts 5, accessibility was an important consideration when designing the default theme style, and we provided special high-contrast themes for developers who wanted to further enhance accessibility. In addition, ECharts 5 also provides decals to help people with color perception problems distinguish data by using patterns to aid color expression.
Barrier-free design
The theme color
In order to meet the needs of accessibility, we need to consider not only the color selection and color order when designing the theme color scheme. We also need to test the brightness and color value of the color repeatedly. This is the color blind test result of our light mode color matching. We try our best to help users with various chromatism and color blindness disorders to clearly identify chart data without hindrance.
In addition to the default two theme color schemes, we also provide a high contrast theme color scheme.
When you see the color matching of this theme, you may feel uncomfortable about your eyes. In fact, this theme is specially designed for some special scenes and groups with weak color and light sensitivity. Because they have weak ability to distinguish colors, they need to enhance the color contrast as much as possible to identify. On the right is an Echarts chart with high contrast, which makes it more readable by highlighting the main body of the chart with color-enhanced contrast.
How do we ensure that the contrast is qualified? First of all, we use the Test of Web AIM to ensure that the contrast of each color and black background is greater than 4.5. This standard has reached the WCAG 2.0 level, that is, it can clearly identify the contrast of ordinary text, which is also completely clear and identifiable on the chart.
In addition, the two adjacent colors are complementary colors of the previous color to make the biggest difference in hue. Then it is adjusted repeatedly to ensure that the color scheme is user-friendly to the color blind and has no color conflicts, so that the color scheme can be clearly identified by different groups of visually impaired users.
Developers can also provide a better age-appropriate experience by using a high-contrast theme with a larger font size to help older people with severe vision problems see the graphics clearly.
Applique design
Decals, originally a printing technique, are used in computer graphics to describe a texturing technique that maps a picture onto a surface. Apache ECharts borrows this concept again by adding a layer of pattern to the chart data in addition to the color of the data itself to increase the identification between the data.
Take the pie chart for example, where each sector has a different color by default to represent different data content. As ding-Ding explained, our default theme color has taken into account the need for accessibility compatibility, but decals are a great way to differentiate data if we want it to be more distinct than just color.
As an auxiliary expression of color, decal patterns can help people with color vision impairment distinguish data and provide a better barrier-free access experience. For developers, these default decals can be turned on with only one configuration item, which can specify different patterns for different data. Of course, you can also use our configuration item to customize patterns.
Decals can also be used in newspapers, books and other media with only one or fewer colors to distinguish data. In this example, we used only black and white to clearly distinguish the series, allowing us to use the range graphic content in newspapers and books.
Decals can also be used to help understand data more intuitively. For example, this example uses patterns of different fruits as decals for corresponding data, which enables people to quickly understand data at first sight. Here the pattern is passed to the SVG path, of course, you can also specify a custom image as the decal pattern.
Flexible configuration items allow us to create a variety of patterns, interested friends can read the relevant configuration items manual for specific information.
Community construction
In addition to the optimization and upgrading of the product itself, the vigorous development of the community is also an aspect we are very concerned about.
A healthy community can help a project launch more steadily and get developer issues fixed more quickly, which is very important for the long-term development of the project. In order to help more developers join the ranks of contributors, we have improved the documentation to guide developers on how to participate in community contributions step by step. Guide the developer who raised the issue to try to modify the source code to solve their problem more efficiently; In the pull Request, give developers guidance on how to improve their code… These efforts have also lowered the barriers to community contribution, making more developers willing and able to participate in project contributions and even project decisions. During the Apache incubation period, we added 10 committers and 3 members of the Incubation Management Committee, and we sincerely welcome more developers to join us.
Many people may find it difficult to contribute to a project that is used by so many people, but the Apache Software Foundation believes that all forms of contribution are to be encouraged. If you feel that the bar for pulling requests is high, You can also start by reporting bugs, answering questions in an issue, fixing typos in a document, and other things that have a lower threshold. Help in any form can be a contribution to the project. Over time, when the management committee members believe that you will contribute to the project over the long term, they will invite you to become a Committer.
conclusion
In this series of five articles, we’ve introduced 15 improvements to Apache ECharts across five modules. Of course, this is only a part of ECharts 5’s features. You can find out more about the full features and updates on the website.
Finally, to all the developers who have used ECharts and even contributed to the community, thank you for your support and affirmation along the way. We will devote ourselves to future development with greater enthusiasm, and Apache ECharts will meet you in 6 with greater sincerity!