Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web Accessibility for Complex Images #102

Closed
mgifford opened this Issue Apr 13, 2017 · 8 comments

Comments

4 participants
@mgifford
Copy link

mgifford commented Apr 13, 2017

I'd like to see some movement to make the complex images and complex interactions available through d3 to be accessible.

https://www.w3.org/WAI/tutorials/images/complex/

@mbostock

This comment has been minimized.

Copy link
Member

mbostock commented Apr 13, 2017

What did you have in mind? It would be difficult to do this automatically with a low-level graphics API like d3-shape, and if it were possible, it would make more sense to generalize it to the Canvas or SVG APIs to automate image accessibility. On the other hand this may be possible with a higher-level visualization API that understands the semantics of the image construction, say Vega Lite.

@mgifford

This comment has been minimized.

Copy link
Author

mgifford commented Apr 13, 2017

This is just exploratory for me at this stage. Looking at things like:
https://apps2.neb-one.gc.ca/dvs/app_iframe.html?page=landingPage&language=en

Where I'm not sure which are problems with the library up-stream vs their implementation.

Still government should be able to use tools like d3 to effectively convey information.

Providing longdesc options are one thing https://www.w3.org/WAI/tutorials/images/complex/#providing-a-link-to-the-long-description-via-longdesc

Encouraging authors to write descriptive texts and include figure/figcaptions so that you aren't leaving the user to guess what the author intended the user to see.

Ensuring that the navigational elements are all properly accessible without a mouse.

There's lots that can be done, before looking at https://www.w3.org/TR/ATAG20/

Supporting good color contrasts...

@mbostock

This comment has been minimized.

Copy link
Member

mbostock commented Apr 14, 2017

These all sound like good ideas. As this discussion is neither a bug report nor a specific feature request for this library, I am closing this issue. If you have suggestions for API changes, please let me know and I will reopen. If you seek people to help with this task, or for a discussion on this topic, please consider the d3-js Google Group or joining the d3-js Slack. Thank you! 🤗

@mbostock mbostock closed this Apr 14, 2017

@mgifford

This comment has been minimized.

Copy link
Author

mgifford commented Apr 14, 2017

I do understand @mbostock sometimes hard to know where to jump into a new community. Thanks for pointing to some places to start.

As far as whether this is a bug, if you're excluding 10% of people from engaging with the graphs, I think most folks would consider that a bug.

@curran

This comment has been minimized.

Copy link

curran commented Apr 14, 2017

Just curious, where does the 10% figure come from?

@mgifford

This comment has been minimized.

Copy link
Author

mgifford commented Apr 14, 2017

Well, that's a very conservative number if you just go by the census:
https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html

That said, of the 19% listed there, many will have no problem accessing d3 because they use a mouse & have good vision. But I don't think that 19% includes people who are color blind (that hits 5% of men):
http://www.color-blindness.com/2006/04/28/colorblind-population/

There's also a fun list here of people who face barriers on the web which we often overlook:
https://the-pastry-box-project.net/anne-gibson/2014-july-31

The population of blind users is really small, but the population of people facing barriers on the web is definitely significant.

@PatrickKing

This comment has been minimized.

Copy link

PatrickKing commented Apr 24, 2017

Hi @mgifford and @mbostock

I'm one of the authors of the linked visualization at the NEB. I just wanted to chime in and say that accessibility is a definitely on our radar, and a requirement for pages on Government of Canada sites in particular. We'll be rolling out an update with some pretty significant accessibility improvements to the tool in the medium term.

Like @mbostock said, given D3 deals with low level concepts like shapes and lines, it isn't really possible to make the tool 'accessible by default'. But there are standards for making accessible sites and webapps, and I hope to find the time to write up how I've applied them to our D3 based visualizations.

@mgifford

This comment has been minimized.

Copy link
Author

mgifford commented May 6, 2017

Hi @PatrickKing - sorry for the delay. I was away at DrupalCon presenting about accessibility.

I'm happy to hear about the accessibility improvements. Hopefully some can be contributed back to the d3 community. One common problem is improper application of WAI-ARIA. It is usually better to try to see that semantic information is conveyed through HTML5.

It is worth looking at ATAG 2.0 guidelines. There are ways to allow for accessibility in many systems. Even just allowing the capacity to provide a title field in an SVG image. More importantly though it is probably providing space to give a textual description of what the image is attempting to convey. This can be semantically conveyed through figure/figcaption in HTML5.

I don't know d3 well enough to know how these ideas can be bought into this project so will defer to @mbostock and yourself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.