Make the graphtool screen reader friendly.

[drgrice1]

This sets the aria option from the JSXGraph library for all graphed objects. Thus objects are described as they are graphed.

I am sure this will still need some work, but this makes the graphtool at least basically accessible.

There is also a need to specifically set the tabindex for objects (usually to the empty string which is the closest thing to unsetting it that the JSXGraph library allows). Otherwise JSXGraph now sets that to -1 for everything and tries to focus those things with javascript and that is interfering with the graphtools own focus behavior. This is more of what was done in #1357.

Note that the aria labels are not translated. Although nothing for the graphtool is. The usual data attribute approach really would be a mess for this. There are a lot of strings. Translating the graphtool would take a lot of effort with the current methods for javascript translation.

[pstaabp]

Didn't test this, but looking at the code, looks like an improvement.

[Alex-Jordan]

What is generating the text strings for math content? Some mathjax 4 setting? I wonder if we could tweak that for this part:

[Alex-Jordan]

As I tab through the graph, the tab sequence is a bit weird:

• x, y
• coordinate pair hint from lower right
• x-axis ticks: 2, 4, 6, 8, 10
• x-axis ticks: -2, -4, -6, -8, -10
• y-axis ticks: 2, 4, 6, 8, 10
• y-axis ticks: -2, -4, -6, -8, -10
• tool buttons: Line, Circle, Vertical Parabola, Horizontal Parabola, Fill (these are the tools my problem uses, and it goes through them in order, good)
• Next, at this time I have no item plotted, so nothing is selected. Tab moves focus to the dashed line tool skipping over the solid line tool. Maybe it should skip over both when nothing is selected? If I create a dashed line and it is selected, then tabbing can land on the solid line tool, and skips over the dashed. So that seems good.
• Then focus goes to the remaining buttons. And it appropriately skips Delete and Clear if there is nothing selected or nothing on the graph. Good!

This is really impressive. As you noted, this is good as a starting point. If you are taking observations now (perhaps for later work):

1. When you have tabbed to an object on the graph, could the delete or backspace key be used to delete that object?
2. Say I have a line graphed, then I graph a circle. Then I tab to the buttons. The circle is the second object, and is still selected. I can use the Delete button to delete it. But I can't figure out how to delete the line. Item 1 would help get around that.
3. It would be good to have a shortcut key to jump focus to
   • the user-graphed elements
   • the elements like axis labels, tick labels, or static graphed elements
   • the buttons
     Right now you have to tab through all the tick labels to get from graphed objects to buttons, or vice versa. This could also help with item 2, since you could focus on a graphed object, then jump to the buttons and get to the delete button.
4. There is a similar issue if I ahd those two solid objects (the line and the circle) and I wanted to change the line to be dashed.
5. If there were shortcut keys like described in 3, there would probably need to be an accessibility key to let the user know how to navigate.

[Alex-Jordan]

I didn't clarify that I found the sequence of traversing the tick marks to be weird. But thinking about it more, maybe it's just as good as anything else.

[drgrice1]

What is generating the text strings for math content? Some mathjax 4 setting? I wonder if we could tweak that for this part:

That is MathJax that generates the string you are looking at. I don't know how to change that. Perhaps @dpvc could suggest something. Yeah, that should be read as an ordered pair, not an interval.

[drgrice1]

I just noticed that something isn't working right. I am not on this branch, but it probably is the same with this branch. As the help states "Shift-N" can be used to graph another object when something you have already graphed is focused. What that really does (or is supposed to but isn't) is moves focus directly to the buttons, but leaves the object that was focused active. Then you can select the "Delete" button and delete the currently focused object.

You can use the "Delete" button on the keyboard when an object is focused also. That will delete the focused object. That is already implemented.

[drgrice1]

Wait, Shift-N is working. I don't know what was going wrong when I tested it a moment ago.

[Alex-Jordan]

It seems I have to use fn-delete to delete a selected item with a Mac keyboard. And I have to use control-fn-delete to Clear.

By the way, I recently when into MacOS System Settings and restored all keyboard bindings to defaults. A few had migrated away from default settings, although not in ways that I think would affect anything.

Shift-N is working for me, thanks for the heads up.

[drgrice1]

It seems I have to use fn-delete to delete a selected item with a Mac keyboard. And I have to use control-fn-delete to Clear.

Are you sure that is not just a laptop thing? Often laptops require using a fn key to use what on desktop computer keyboards is standard since they have a more compact layout.

[Alex-Jordan]

I'm not sure. I don't have easy access to a Mac OS desktop, but I'll try next time I am at campus.

Off topic some, but for a while now, the ctrl-enter trick in the editor to render the problem code has not worked. It used to. Now in Firefox, that opens a menu. And in Chrome, it does nothing at all. And then just now based on the fn discussion, I tried combinations of fn, control, option, command, with return and nothing is working to render the problem.

@pstaabp, does that feature still work for you on your Mac? What version of Mac OS and web browser do you have?

[drgrice1]

I made the Backspace key also delete a focused graphed object, and Ctrl-Backspace also clear the board, although these are not documented in the help. This may fix the issue with the fn key being needed. I suspect those keyboards incorrectly label the Backspace key as the Delete key, and make fn-Delete be what is really Delete.

[drgrice1]

@Alex-Jordan: The tab order of the graphtool you describe is the natural tab order of the browser. I really don't want to mess with that, and it is nearly impossible to do so and get it right. It is also strongly discouraged to do so. As I mentioned Shift-N is intended to do several of the things you mentioned and it is stated as such in the help. In addition to being able to use Shift-N to change a graphed object from solid to dashed or back, you can use the s or d keys on the keyboard (also stated in the help).

In short, I think that everything you suggested is already implemented, and is stated in the help. Do you have the help disabled?

[Alex-Jordan]

Not disabled. Just rendering below the iframe boundary in the PG editor, so I wasn't seeing it. I agree, everything has a way to get the job done accessibly now.

There is one small thing, in that the dashed object tool is tab focusable even when there are no objects yet in the graph to make dashed. Hardly worth mentioning, but it is something I noticed.

[drgrice1]

There is one small thing, in that the dashed object tool is tab focusable even when there are no objects yet in the graph to make dashed. Hardly worth mentioning, but it is something I noticed.

That is how it should be. That controls the state of what will be graphed. So you can click on the dashed object tool button before graphing anything, and then when you graph anything after that it will be dashed to begin with.