2021-01-13 15:29:11

Graph visualizations consisting of nodes and edges are ubiquitous throughout academia and industry. Such as molecule diagrams in chemistry, circuit diagrams in electronics, and various computer science diagrams such as network maps and entity relationship diagrams. Flowcharts are common throughout offices and mind maps are often used in brainstorming sessions. However their inaccessibility puts up a barrier to inclusion for blind people.

As part of my masters project, I have been developing a prototype for making graphs screen reader accessible on web pages and I am ready to share my work so far and hopefully get some feedback on its usability. I’ve written a short guide that gives a very brief background on what graphs are and then explains how to use the accessible graph viewer to make sense of a graph. The graph viewer is embedded as part of the web page, so all you need to try out the graph viewer is contained in the short guide.

No special knowledge is required. You just need to know how to use a keyboard and ascreen reader. Tested to work with NVDA on windows 10 on chrome, firefox, and edge, but probably also works fine with JAWS.

Hopefully you find this interesting. If you check it out, I would be really happy to get some feedback on the usability of the viewer. Feel free to post any questions or feedback here or alternatively you can email me at [email protected]

[url= try out accessible graph viewer here

2021-01-13 17:16:59

I've been looking for something like this! I'm certainly interested in receiving updates or learning more about this project.
I thought of working on an application such as this. I sometimes think, why doesn't a simple graph viewer exist? Would've been really helpful in my engineering classes.
I noticed graph theory terminology, such as directed and undirected, is used. Maybe simpler language might be useful? Anyway, hope this continues.

2021-01-13 18:00:20

Relatively intuitive once you get started. I love it! Are the graphs themselves relatively easy to make up? I could definitely see using these instead of excel for D&D maps.

thanks,
Michael

2021-01-13 18:53:54

Yeah. how do you make the graph?
Just wondering.
Would a sighted person be able to point me to a URL that contains a graph, and then I could read it?
Sounds cool by the way.

best regards
never give up on what ever you are doing.

2021-01-13 19:02:37

It doesn't really do anything for me. I can't really get much out of it. That could be just a me thing, like I'm generally not good at this type of thing anyway.

Facts with Tom MacDonald, Adam Calhoun, and Dax
End racism
End division
Become united

2021-01-13 21:36:47

Some lists you might want to try in order to hopefully find more experienced testers.


National Association of Blind Students
https://www.nfbnet.org/mailman/listinfo … nfbnet.org
NFB Science
https://www.nfbnet.org/mailman/listinfo … nfbnet.org
Blind Math
https://www.nfbnet.org/mailman/listinfo … nfbnet.org

2021-01-14 06:32:11

Hi.


I tried it and it seams to work fine, i'm not someone who'd use this though so I can't give you good feedback.

I'm gone for real :)

2021-01-14 07:56:51

I gotta ask the same question... How do you actually create the graphs?

"On two occasions I have been asked [by members of Parliament!]: 'Pray, Mr. Babbage, if you put into the machine wrong figures, will the right answers come out ?' I am not able rightly to apprehend the kind of confusion of ideas that could provoke such a question."    — Charles Babbage.
My Github

2021-01-14 11:18:05

@2 glad you can see the value in something like this as well! you can shoot me an email at [email protected] and I will email you when there are any major developments

@3 thanks! glad you like it. DnD maps are definitely a great use case for this sort of thing

@4 so as for a sighted person sending you an url with a graph you can look at. take a look at the demo/guide I link in #1. thr graphs are just embedded as part of the page and you press a button to enter one of them. I will explain how you create graphs in next post

@5 would you mind expanding on why you couldn't get any use out of it? maybe if you could tell me at what point you stopped understanding things or just got stuck? helps me to understand the cases where the viewer doesn't work well

@6 wow thats perfect! I was looking for exactly those sort of lists

2021-01-14 11:38:32

to understand how to author one of these graphs, you just need to understand the basics of HTML, which is really just the basic prerequisite for making any web page.
as to how to create one of these graphs, the title of the project kind of gives it away. It's called MermaidAccess because it takes graphs written in Mermaid and makes them accessible. mermaid is a very simple language for creating graphs written in plain text. kind of like a programming language for graphs, except it is about as absolutely as simple as a programming language can get (even my mom can use it!)

for those curious it is worth looking at the HTML source of the page. it is really as simple as it gets. it is just necessary to include three scripts at the end of the body and then to put a graph on the page you just put in a <div class="mermaid-access"> containing the mermaid graph description.

as an example, here is the div for the example manager hierarchy graph :
<div class="mermaid-access">
graph TD
    Julia --> Mark
    Mark --> Tom
    Julia --> Rebecca
</div>

here is the full reference for mermaid graph syntax. note that edges are reffered to as link/arrows. thinking just now, I might rename edges in the accessible viewer to links for undirected edges and arrows for directed edges, since that might actually be more intuitive.
https://github.com/mermaid-js/mermaid/b … owchart.md

2021-01-15 19:16:02

Absolutely brilliant idea. A couple of things: seems a little verbose, which maybe good for learning how it works, but it would be nice to not feel like you're being flooded with information with each node. All I really need to hear is the name of the next node and its direction. I don't really need to hear that I can press F1 all the time. Second, maybe it would be nice to not wrap, or make wrapping a setting you can toggle. It's confusing to me when you reach the last node and it wraps back to the first node.

***
You can follow me on twitter @s_luttrell and an almost never used Facebook account at skluttrell.

2021-01-15 23:17:28

@11, that can be turned off with shift f1.

"On two occasions I have been asked [by members of Parliament!]: 'Pray, Mr. Babbage, if you put into the machine wrong figures, will the right answers come out ?' I am not able rightly to apprehend the kind of confusion of ideas that could provoke such a question."    — Charles Babbage.
My Github

2021-01-15 23:43:53

This is interesting and comprehensible for at least small examples.  I will have to play with the larger graph at some point to see how well it scales up.  Two things:

Having to press enter in order to expand what you're calling subgraphs is annoying and it seems that the table is always two columns.  Why not let right arrow expand indefinitely?  Right arrow on a node moves to the edges, right arrow on an edge moves to the target of the edge, left arrow takes you "back".

The left "column" which is always only one node seems superfluous.  It feels like down arrow should do something there.  I imagine that if right arrow always expanded then that would go away because left arrow always takes you back to where you were.  Maybe I missed something and that's not always one column.

It feels sort of  like a treeview but with a bunch of extra levels for no particular reason, if that makes sense.

My Blog
Twitter: @ajhicks1992

2021-01-16 17:17:08

@11 glad you like it and thanks for the feedback! It definitely is a bit verbose. for now I wanted to err on the side of making it too verbose rather than hard to learn, but ideally experienced users would be able to toggle a setting to make it more terse. since I only just released it, I haven't implemented settings for long term users, since there aren't any smile also as #12 pointed out, pressing shift+F1 toggles the hints, which greatly cuts down the information being thrown at you.

I will also consider having it not wrap by default, especially if others also express they don't like it. one thing that can help you find out that you have just wrapped around in a list is by listening for "1 of 6" to figure out how many more items in the list there are. I know this isn't the case for navigating between columns, so maybe I will make navigating between columns not wrap but navigating between list items wrap. either way I will mention the wrapping in the guide and keyboard reference, since I forgot to do that.

2021-01-16 17:42:59

@13 really appreciate the feedback. I think I get what you are getting at. tree views are a really neat design pattern, which I was initially considering to use, but then was inspired to model the UI more like a table because I wanted to be able to seperate different categories of information into different columns, where each column might be made up of multiple items.

I think you missed that if you navigate to a node's table, like if you are on kitchen in the parts column and press enter, the table in that instance has 3 columns: summary, undirected edges, and parent. to your point, the parent column does also like the summary column, just contain a single item, which is a link to its parent. in that way it is also kind of superfluous, since there could instead just be some "navigate to parent" keyboard command, but the value of having this tabular layout with columns I think comes in once you are dealing with a graph with directed edges or even a mixture of directed and undirected edges.

that's because when inspecting a node, it will have a seperate colunn for each edge type. so one column for its undirected edges, one for its outgoing edges, and one for its ingoing edges. I hypothesize (basing on some research as well) that seperating out that info will make accessing some information more efficient. using the manager hierarchy example from towards the bottom of the guide, if you want to figure out who someone is managing, then you just want to look at that node's outgoing edges and its other edges would just get in the way of answering that particular question.

but your tree view idea is totally valid. as I mentioned before, I was very much considering a similar idea to what you proposed, but I am hoping that this multi-column layout shows to have benefits, at least for directed graphs.

2021-01-16 18:15:40

it might.  I just don't find it particularly intuitive or ergonomic to have to go switch contexts, if that makes sense?  It's not necessarily impossible to adjust to.

Have you considered a little bit of WebAudio?  Could easily play a tone when you wrap.  I'm not sure where else that might be applicable but it's easy enough to use, and would at least solve that problem.  There might be other applications for WebAudio here, for example indicating position in the list with pitch or something, but I'm not sure if they'd add anything.  That said, there was a reason Unspoken was so popular, even though it was a terrible hack that couldn't work properly because of NVDA limitations.

My Blog
Twitter: @ajhicks1992

2021-01-17 18:29:11

Just added another feature. Essentially made the history commands better. Now you can go both forward and backwards in history as far back or forward as you like, using Ctrl+Left/Right, analogous to going back or forward in web browser history. I think this can be useful for retracing your steps or just reviewing the path you have taken while going through the graph.

Note: before you could only go back in history one step and couldn't go forward in history at all. Also pressing backspace doesn't go back in history anymore, since ctrl+Left takes care of that now.

2021-01-18 03:34:22

I tried it and the problem is that it reads the graph in French instead of in English.

So I use JAWS, my JAWS install is in French, but I use an English voice profile. I set the detect language unchecked in the JAWS+V menu of most apps, including the browser I was testing this in. Usually it prevents JAWS switching language when reading stuff online so that everything is read with the English voice.

I use manual forms mode. For some reason, when I press Enter on the graph viewer, JAWS goes into application mode and reads in French. To be clear, it reads the English text with a French voice, so it is impossible for me to understand it and I cannot tell if the feature is fun or not because of that issue.

Reading is one form of escape. Running for your life is another. ― Lemony Snicket