Forum Discussion
Navigate a grid by keyboard
I am working to make a game accessible. I am using battleship game as the basis. I can navigate by tab key but only from left to right and down. When I go away from the slide and come back, it always starts at the beginning.
I think the NVDA speech reader will allow the person to navigate with arrow keys. What can be done for the sighted person who lacks mobility so they have to use a keyboard?
I cannot find any trigger commands to allow the player to move in any direction with a keyboard only.
Any ideas?
10 Replies
As I've learned accessibility in Storyline, where the Tab key highlights next is determined by the Focus Order. That will also always be a sequential order, in that users can press Tab to advance down the list of Focusable objects as well as Shift-Tab to go back up. If by accessibility you mean users could navigate an on-screen indicator around a grid using WASD or the arrow keys, that's going to require a custom solution of triggers and/or JavaScript.
The ways in which I see solving that actually overlap greatly with the first part of your post. When you say the slide starts at the beginning, what happens in that beginning? I've imagined a grid so far, and you mention battleship, but is there a movie that plays or is the player's location just resetting?
Thanks for the reply. I agree about the Tab Key and Focus Order. I have been working on that and the ability to move in any direction is not there. I want this to work for people who cannot use a mouse and for people using a screen reader. The screen reader can use Browse Mode but the keyboard only cannot.
The beginning is the first square in the upper-left corner and proceeds left to right then down etc. No movie but when the player finds a square with a question, a light box opens and they must answer it correctly to get the point. When the player returns to the grid, it starts in the upper-left again.
I may need to use javascript to solve this. I don't see how I can use triggers to go from point to point in the slide and return to that point.
I can see the upper-left restart could annoy people by putting them back at the start. Is that slide's properties set to Resume saved state when revisiting? That tends to leave slides as I found them, but if the When revisiting parameter is set to Reset, it will do just that every time--clean slate. It's easy to miss tucked in the bottom-right corner.
I expect this is only marginally close to yours, but I spun up something here: Arrow highlights | Review 360 I've enabled download, so feel free to take the project file.
To me, Nate's design pattern frames the Battleship board as a table, which is why I numbered the nine shapes with coordinates. On screen of course, a column header can show A or F or whatever to the learner, but the arrow keys (eight triggers) just increment and decrement two variables: currentX and currentY.
The remaining triggers, two per button, control the highlight in response to the values of currentX and currentY.
Navigating using the Next Slide and Return buttons will circle you back to the grid slide where your position has been retained.
As the size of your grid/field expands, naturally the number of triggers will scale too, and the risk of errors increases. JavaScript could condense the getVar/calculate/setVar/updateState loop significantly.
I imagine event listeners on keys could all call the same move function, passing their cardinal direction as an argument, and then a simple case system updates the currentX, currentY, and state. Some of the greatest effort might be collecting the object IDs of all the squares so the script can highlight the right one, but this assumes your project mirrors what I've shared. Lemme know
Andrew,
Sorry I missed your message 5 days ago. Working on another project as well. I can try your suggestions this week and get back to you with my results. Thanks again for your reply.
There is the When User Presses a Key trigger, which includes the arrows. To simplify navigation, rather than using keys to move to an exact square on your grid, have you considered just targeting squares using a Battleship-like coordinate system? Rows and Columns demarcated as A-J and 1-10. Use the left/right key to choose 1-10 and the up/down key for A-J.
I don't see anything in the list of When User Presses a Key that only moves within the slide. The rows and columns are designated as A1, A 2, A 3 etc. Part of the issue is a particular square activates a light box so the player answers a question. Tha determines if they get a point or not.
I appreciate your response. If I find an answer, I will definitely let everyone know.
I did try using arrow keys once while running NVDA, but I found the left and right arrow keys read out each individual letter. I'm unsure of this is standard practice or just a basic default setting that users often turn off.
I've seen a few games user arrow buttons for accessibility. Not sure if this is common, but it could be connected.
Yes, NVDA does announce the name of the object or an alt text. I have used arrow keys to move around but it is by motion paths.
I may need to use javascript to solve this. I don't see how I can use triggers to go from point to point in the slide and return to that point.
I appreciate the reply. I will need to keep trying things to see how I can solve it.
Hi Jeffrey,
Not sure if you have found a solution, I played around with this and ended up using Javascript to allow the keyboard to move around the screen but its fiddly to use. This is a prototype of it and its a be janky but by all means if you can refine it down and get it to work smoother have at it.
Cheers,
Robyn
I have not had time to try these ideas. I hope to after Thanksgiving at this point. The good news is this is not a client project so there is no deadline. I am just trying to get this to work. Thanks for your ideas.
