Warm tip: This article is reproduced from serverfault.com, please click

Accessibility

发布于 2020-11-24 19:13:40

We have a web-based app which uses a side-by-side experience for desktop users where the left side of the screen is a file browser and editor and the right side of the screen is an interactive preview. Users of our app will make constant and iterative changes on the left and and then interact with the preview on the right, switching back and forth many times in quick succession.

Is there a "best practice" for allowing quick and easy navigation between these two interactive areas? I know this might fall under the "opinion" category, but I feel that accessibility is such an overlooked topic that it helps to have as many resources as possible.

Questioner
Ryan Wheale
Viewed
0
Graham Ritchie 2020-12-03 18:46:14

You have a few tools at your disposal.

Headings

Headings are one of the easiest ways to bake in some super simple section switching. Screen reader users will use the keys 1 through 6 to navigate by heading levels so if both of your panels are <h2>s (for example) they can simply cycle location using headings.

Keyboard shortcut keys

You can set keyboard shortcut keys.

However you should never do this in isolation. By this I mean if you say that switching window is say Alt + 0 you must allow users to be able to change these key bindings to their preferences.

This is so your shortcut keys don't interfere with their screen reader keys (as they may have set custom keyboard shortcuts).

please note: as pointed out in the comments this is not a WCAG requirement for key combinations (which is only for single keys) but is a usability best practice and highly encouraged, especially as some screen reader users use a modifier key rather than a toggle key for screen reader navigation.

Then we get into an interesting area which I like to illustrate by saying "how would a one handed user use your page?".

This example makes you realise that some sort of sticky keys solution may also be considered where key combinations can be done with a sequence of keys, any time apart (as you may have someone with NO HANDS using eye gaze technology or a switch for example so you don't want to impose a time limit.)

Obviously the above are extreme examples but things you may want to consider (and in reality anyone using eye gaze would be able to visually switch panels etc.)

Voice commands

Being able to switch panels via voice (for example Dragon Naturally Speaking) is also essential.

Now you can do key combinations with voice software so that fixes most issues but they can be annoying and fiddly.

One thing that is quick to use on most voice software is clicking any button on a page with a unique name.

As such having a button above each panel that activates it would be beneficial to voice users.

Assuming these buttons have unique names I could simply say "click activate panel 2" (where "activate panel 2" is the button name) and switch immediately.

Do you need to manage focus?

Bear in mind that when you switch panels you will by default start at the top each time.

This may be exactly what you want but more than likely this would be a terrible user experience.

Instead you may want to remember the previous focus location. Then if I use the keyboard shortcut it would jump back to the same location in the panel. If I use the voice / button click to change location same again.

However if someone uses headings to navigate this obviously wouldn't work. You could then give them a button directly after the heading that says "resume from previous location" to fix this and use that to manage focus.

User settings

As you can see there are loads of things that different people with different requirements may or may not need.

As such adding all of the features by default would probably make the application worse to use for majority of users.

Instead have a settings screen that lets a user turn on features that benefit them, set their own shortcut keys, turn on or off sticky keys, decide if they want you to manage focus for them (or not) etc.