About The Creator

Aaron is Deque’s Principal UX Designer. Along with main each strategic and tactical UX efforts, Aaron works on creating accessibility centric requirements …
Extra about Aaron

How can we enhance our keyboard-only (KO) and Assistive Know-how (AT) person experiences with out affecting the expertise for anybody else? On this article, we’ll dig into some particular, sensible examples together with skip hyperlinks, navigation menus, modal focusing, and person training parts.

(It is a sponsored article.) One of many cool issues about accessibility is that it forces you to see and take into consideration your software past the standard sighted, mouse-based person expertise. Customers who navigate through keyboard solely (KO) and/or assistive know-how (AT) are closely dependent not solely in your software’s data structure being considerate, however the affordances your software makes for maintaining the expertise as easy as doable for every type of customers.

On this article, we’re going to go over a couple of of these affordances that may make your KO/AT person experiences higher with out actually altering the expertise for anybody else.

Additions To Your Utility’s UX

These are options that you would be able to add to your software to enhance the UX for KO/AT customers.

A skip hyperlink is a navigation function that invisibly sits on the high of internet sites or purposes. When it’s current, it’s evoked and turns into seen in your software’s first tab cease.

A skip hyperlink permits your person to “skip” to numerous sections of curiosity throughout the software with out having to tab-cycle to it. The skip hyperlink can have a number of hyperlinks to it in case your software has a number of areas of curiosity you’re feeling your customers ought to have fast entry to your software’s level of entry.

For KO/AT customers, it is a useful instrument to each permit them to quickly traverse your app and can assist orient them to your software’s data structure. For all different customers, they doubtless won’t ever even know this function exists.

Right here’s an instance with how we deal with skip hyperlinks. After you click on the hyperlink, hit Tab ⇥ and look within the upper-left nook. The skip hyperlink has two hyperlinks: Major Content material and Code Samples. You should utilize Tab ⇥ to maneuver between them, hit Enter to navigate to the hyperlink.

It is a function that I believe everyone seems to be conversant in: shortcuts and hotkeys. You’ve doubtless used them every so often, they’re very talked-about amongst energy customers of an software, and are available in a wide range of incarnations.

For KO/AT customers, shortcuts/hotkeys are invaluable. They permit them to make use of the purposes, as meant, with out having to visually goal something or tab via the applying to get to a component or content material. Whereas frequent actions and content material are all the time appreciated when represented in a shortcut/hotkey menu, you might also need to contemplate some barely much less frequent actions which may be buried in your UI (for good purpose) however are nonetheless one thing person would need to have the ability to entry.

Making shortcuts for these capabilities will probably be extraordinarily useful to KO/AT customers. You may make the command a bit extra concerned, comparable to utilizing (three) keystrokes to evoke it, to indicate it’s a much less steadily used piece of performance. You probably have a shortcut/hotkey menu be sure to discover a technique to market it in your purposes so your customers, particularly your KO/AT customers, can discover it and use it successfully.

Consumer Schooling

Consumer training refers to a bit of performance that directs the customers on what to do, the place to go, or what to anticipate. Tooltips, level outs, information bubbles, and many others. are all examples of person training.

One factor you must ask your self when designing, inserting, and/or writing copy to your person training is:

“If I could not see this, would it not nonetheless be beneficial to know ______?”

Many instances it’s simply reorienting the person training via that lens that may result in a a lot better expertise for everybody. For instance, moderately than saying “Subsequent, click on on the button beneath,” it’s possible you’ll need to write, “To get began, click on the START button.” The second technique removes the visible orientation and as an alternative deal with the frequent data each a sighted and KO/AT person would have at their disposal.

Notice: I ought to point out it’s completely OK to make use of person training options, like level outs, to visually level out issues on the applying simply be sure the companion textual content lets your KO/AT customers perceive the identical issues that are referred to visually.

See the Pen ftpo demo by Harris Schneiderman.

See the Pen ftpo demo by Harris Schneiderman.

Augmentations To Your Utility’s UX

There are adjustments or tweaks you may make to frequent parts/options to enhance the UX for KO/AT customers.

Now we’re moving into the nitty-gritty. One of many nice issues about accessibility is the way it opens the doorway to novel methods to resolve issues you will have not thought of earlier than. You may make one thing totally WCAG 2.zero AA accessible and clear up the issue with very completely different approaches. For modals, we at Deque got here up with an attention-grabbing strategy that might be completely invisible to most sighted-users however can be seen by KO/AT customers nearly instantly.

For a modal to be accessible it must announce itself when evoked. Two frequent methods to do that are: focus the modal’s physique after the modal is open or focus the modal’s header (if it has one) after the modal is open. You do that so the person’s AT can learn out the modal’s intent like “Edit profile” or “Create new subscription”.

After you focus the physique or header, hitting Tab ⇥ will ship focus to the subsequent focusable factor within the modal — generally a discipline or, if it’s within the header, typically it’s the shut button (X). Persevering with to tab will transfer you thru all of the focusable components within the modal, sometimes ending with terminal buttons like SAVE and/or CANCEL.

Now we get to the attention-grabbing half. After you focus the ultimate factor within the modal, hitting Tab ⇥ once more will “cycle” you again to the primary tab cease, which within the case of the modal will probably be both the physique or the header as a result of that’s the place we began. Nonetheless, in our modals we “skip” that preliminary tab cease and take you to the second cease (which in our modals is the shut (X) within the higher nook. We do that as a result of the modal doesn’t have to preserve saying itself again and again every cycle. It solely must do it on the preliminary evocation not on any subsequent journeys via, so we’ve a particular programmatic cease which skips itself after the primary time.

It is a small (however appreciated) usability enchancment we got here up with solely for KO/AT customers which might be utterly unknown to everybody else.

See the Pen modal demo by Harris Schneiderman.

See the Pen modal demo by Harris Schneiderman.

Navigation menus are difficult. They are often structured in a large number of the way, tiered, nested, and have numerous mechanisms of evocation, disclosure, and traversing. This makes it vital to think about how they’re interacted with and represented for KO/AT customers in the course of the design section. Good menus ought to be “entered” and “exited”, which means you tab right into a menu to make use of it and tab out of it to exit it (when you don’t use it).

This concept is finest illustrated with a literal instance, so let’s check out our 2-tier, vertical navigation from Cauldron.

  1. Go to https://pattern-library.dequelabs.com/;
  2. Hit Tab ⇥ thrice. The primary tab cease is the skip hyperlink (which we went over beforehand), the second is the brand which acts as “return to house” hyperlink, and the third tab enters the menu;
  3. Now that you’re within the menu, use the arrow keys ( and ) to maneuver and open sections of the menu;
  4. Hitting Tab ⇥ at any level will exit you from the menu and ship you to the content material of the web page.

Navigation menus may also work at the side of a few of the earlier matters comparable to shortcut/hotkey menus to make utilizing the menu much more environment friendly.

Logical Focus Retention (I.E. Deleting Row, Returning Again To A Web page)

Focus retention is essential. Most individuals are acquainted, a minimum of in idea, with focusing components of their logical meant order on the web page; nonetheless, it could get murky when a component or content material adjustments/seems/disappears.

  • The place does focus go when then discipline you’re on is deleted?
  • What about if you’re despatched to a different tab the place the applying has a brand new context?
  • What about after a modal is closed because of a terminal motion like SAVE?

For a sighted person there are visible cues which might inform them of what occurred.

Right here’s an instance: You could have an Edit Recipe modal which lets your person add and take away any components. There may be one ingredient discipline with an “Add one other ingredient” button beneath it. (Sure, it’s styled as a hyperlink however that’s a subject for an additional day.) Your focus is on the button. You click on the button and a brand new discipline seems between the button and the primary discipline. The place ought to the main target go? Most definitely your person added one other ingredient to have interaction with it so the main target ought to shift from the button into the newly added discipline.

See the Pen focus retention by Harris Schneiderman.

See the Pen focus retention by Harris Schneiderman.

The massive takeaway from all this isn’t a lot the precise examples however the mentality which helps them — contemplate the UX to your software via the lens of the KO/AT person as nicely sighted, mouse-only person. A few of the finest and most intelligent concepts come from probably the most attention-grabbing and vital challenges.

For those who need assistance guaranteeing that your options are accessible, all the examples above plus numerous extra could be examined utilizing Deque’s free internet accessibility testing software: axe professional. It’s free and you possibly can join right here.

(ra, il)