Add Accessibility Testing

[sdmcallister]

@sdmcallister review for accessibility (screen reader compatibility.

[randyzwitch]

Thanks Steve. What is a good way to test something like this? Currently, ECharts.jl only works in Juno and Jupyter Notebook. I'm thinking that I could enable accessibility for all of the plots in the documentation, which is probably a more thorough way to handle things:

http://randyzwitch.com/ECharts.jl/

[randyzwitch]

@sdmcallister I started a PR towards this functionality. Would you happen to have a chart example that I could look at to understand what this specification does? Given that a bunch of the spec seems to be adding in semantic tags to the HTML, I'd be fine defining those into my rendering (rather than have them opt-in).

This would also be a great place to contribute a pull request, if you are interested in contributing to the package.

[sdmcallister]

Using the following simple chart generated in IJulia:

x = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]
y = [11, 11, 15, 13, 12, 13, 10]
b = bar(x, y)
title!(a, text = "Bar Plot Title", subtext = "Secondary Title")

Here is what I am testing for using NVDA:

• [ ] Hover mouse over bar detects corresponding x/y values.
• [ ] Hover mouse over title detects text elements
• [ ] Hover mouse over axis detects corresponding text elements
• [ ] Hover mouse over legend detects corresponding text elements

If this functionality isn't possible, then an alternative may be to generate alt text that provides a summary of the data. It could be a generic output that reads the title, pairs and perhaps overs the ability to insert custom text. I imagine it might look like:

altText!(title=true,data=true,legend=true,axis=true,text = "You can see a trend that....")  

One of the basic premises of accessibility is that the material is understandable. In cases where the data pairs are > 30, sometimes a summary is actually more accessible.

[randyzwitch]

Thanks for getting back to me. Sorry I wasn't more clear...is there an example you can show me somewhere else that already has this functionality implemented? I'd like to see an example someone else already did (so I can view source) , so I can try and map what they did onto an ECharts example.

The minimal interface is implemented in #49 as follows:

function aria!(ec::EChart; show::Bool = true, description::String = "", general::Dict = Dict(), series::Dict = Dict(), data::Dict = Dict())

    ec.aria = Aria(show = show, description = description, general = general, series = series, data = data)
    return ec

end

Now I just need to figure out what each of these options provided by ECharts does, so that I can make a better set of keywords or additional functions.

[sdmcallister]

Maybe this example helps: Example

[randyzwitch]

@sdmcallister I just pushed the WAI-ARIA functionality to master and will tag a new version. I'm enabling WAI-ARIA by default, so that whatever echarts.js does by default will be on. The aria!() function needs some love, but right now it's not so obvious to me what the options should be beyond the struct fields; hopefully you or someone else will make a custom chart, then it will be more obvious what aria!() should accept as keyword arguments.