[Question] Bar Chart Accessibility Question

[Jeong-tak]

Description

안녕하세요. 현 프로젝트에서 빌보드차트 JS를 사용하고 있는 개발자입니다. 유용한 빌보드JS 덕분에 쉽고 간편하게 그래프 구현할 수 있었습니다.

그런데 한가지 문제점이 발생하여 문의를 드리게 되었습니다. 접근성 관련 문제인데요, 제가 구현한 차트는 가로 Bar Chart이며, 5개의 카테고리에 각각 2개의 데이터(data1, data2)로 구성되었습니다. 그런데 iOS 기준 VoiceOver 사용 시, 포커스의 흐름이 바 > 해당 값 > 바 > 해당 값 > 바 > 해당 값이 아닌 바 > 바 > 바 > 바 > 바 > 값 > 값 > 값 > 값.. 의 흐름으로 진행되어 접근성이 제대로 지켜지지 않는 상황입니다.

혹시 해당 차트의 각 구성 이미지(데이터)들의 포커스 순서를 지정할 수 있는 방법이 있는지 문의드립니다.

그리고 차트이미지를 대체할 수 있는 표 등의 데이터를 자동으로 그려주는 기능이 있는지도 궁금합니다.

감사합니다.

[netil]

Hi @Awaken-Cq, you can check working example from:

• https://jsfiddle.net/netil/4na2emyq/

A18y

For a18y, you can set manually tabindex attribute in order according how the focus will flow. If want flow. as bar -> data label .... order, you can do as:

  onafterinit: function() {
    const {bar: {bars}, text: {texts}} = this.$;
    const textNodes = texts.nodes();
    let seq = 0;
    let idx = 1;

    bars.each(function(d, i) {
        this.setAttribute("tabindex", idx++);
        textNodes[seq++].setAttribute("tabindex", idx++);
    });

Table view

Table view plugin is already implemented(#2188), but not officially released yet. You can use @next tagged version for now.

$ npm install billboard.js@next

1) Load necessary files

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js@3.2.0-next.1/dist/billboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js@3.2.0-next.1/dist/plugin/billboardjs-plugin-tableview.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js@3.2.0-next.1/dist/billboard.min.css

2) Specify tableview plugin options

  plugins: [
    new bb.plugin.tableview({
     title: "My Yearly Data List",
     categoryTitle: "Year",
     style: true
    }),
  ]

[adamfagerstrom]

I have a follow-up question to the solution above. Is there any way to trigger tooltip.show when a bar is focused?

In other words, show tooltip when focusing a bar, circle or any other point that would trigger the tooltip on mouseover.

[netil]

@adamfagerstrom, checkout the example

• https://jsfiddle.net/netil/7q62o54s/

[adamfagerstrom]

That will do the trick, thank you @netil

Will these eventListners that's being created on each node be removed with the chart.destroy() aswell? Or do i manually need to remove them?