Dynamic Content and Accessible Interaction

hands on a keyboard with a mouse, yellow watch, and cellphone on the periphery.
Photo by Damian Zaleski on Unsplash

Dynamic content is content that can change based on the interaction of the user. The difference between information that is simply read, and the content that is “clickable” comes down to a small group of interactive controls.

Interactive digital content is what makes the Internet the most amazing thing to ever happen to human beings since the opposable thumb – it enables a new potential for communication and connectivity between humans that is inspiring and life altering. Interactive content on the Internet is facilitating social and political revolutions around the world.

Now the revolution will not only be televised, it will be accessible to people with disabilities…

By allowing people to interact with each other through remote technology, the Internet has broadened the potential of humanity. The Internet helps people to embrace and celebrate knowledge of each other. Interactive media enables people to participate more fully in all the different aspects of modern life.

When created properly, this is especially true for people with disabilities.

Amazing.

Here is one big takeaway: when you create opportunities for your audience to interact with you or your content, follow the standards for accessibility to ensure that your interactive content lives up to its potential and is not missed by those with differing abilities.

Another big takeaway: when you select digital content to use as instructional materials, you can use the keyboard commands at the bottom of this post to evaluate the accessibility of the interactive content.

Standard Interactive Elements

Despite all the different websites and applications in existence, there are just a small number of interactive elements that make them possible.

Following is a list of common interactive elements found in digital media:

  • Auto-complete
  • Button
  • Checkbox
  • Dialog
  • Link
  • Menu – Complex
  • Menu – Simple
  • Menu -Tree
  • Radio Button
  • Select Menu (Drop Down Menu)
  • Slider
  • Tab Menu

Interactive Elements across the Internet

The interactive elements listed above are like building blocks for digital designers who create content and applications. These elements are expected to function the same way in MS Word, PDF, HTML, and your LMS, just to name a few examples.

Designers who create interactive elements that resemble the above elements in appearance but do not include the keyboard controllability described below are not accessible.

Keyboard Interaction

The process for interacting with each of the different elements via the keyboard should be the same across browsers and applications.

You can navigate to and among interactive elements by using the TAB key, or SHIFT + TAB.

When you are selecting interactive content to use as instructional materials, ensure the different interactive elements can be controlled via the following keyboard commands:

Interactive ElementKeyboard Control
Auto-completeStart typing to initiate the auto-complete suggestions.Use the ARROW Keys to navigate among the different options.Use ENTER to select an option.
ButtonENTER or SPACEBAR will both activate buttons.
CheckboxSPACEBAR will toggle a checkbox between checked or not checked.
DialogESCAPE will close dialogs.Modal dialogs need to retain keyboard focus and return focus to the element in the document that initiated the dialog when closed.Non-modal dialogs should close automatically when they lose focus.
LinkENTER will activate a link.
Menu – ComplexUP and DOWN ARROWS move between menu options.ENTER can expand a menu to reveal its items.ENTER will select a menu item that is not expandable.LEFT and RIGHT ARROWS will expand or collapse menus.
Menu – SimpleTAB will navigate between menu items.ENTER will select a menu item.
Menu -TreeUP and DOWN ARROW keys navigate between options.LEFT and RIGHT ARROW keys expand or collapse submenus/move up or down a level in the hierarchy.
Radio ButtonARROW KEYS move between options.SPACEBAR selects/toggles options.
Select Menu (Drop Down Menu)UP and DOWN ARROW to navigate between options.SPACEBAR expands menu.ENTER selects an option.
SliderARROW KEYS increase or decrease the value.HOME or END take you to the beginning or ending value for the slider.
Tab MenuTAB to enter the menu. ARROW KEYS navigate between the different tabs.
The keyboard commands to interact with data.

Limited Keys Bring Great Potential

The entirety of the Internet should be available via just a handful of keys.

Using just TAB, SHIFT, SPACEBAR, ENTER, ESCAPE, and the ARROW KEYS will allow you to interact with most accessible content.

Now you know how to test interactive content for keyboard access, and you can more effectively select appropriate content to include as part of your instructional materials.

Thanks for reading!

Leave a Reply