keyboard – IDWerdz

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 Element	Keyboard Control
Auto-complete	Start typing to initiate the auto-complete suggestions.Use the ARROW Keys to navigate among the different options.Use ENTER to select an option.
Button	ENTER or SPACEBAR will both activate buttons.
Checkbox	SPACEBAR will toggle a checkbox between checked or not checked.
Dialog	ESCAPE 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.
Link	ENTER will activate a link.
Menu – Complex	UP 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 – Simple	TAB will navigate between menu items.ENTER will select a menu item.
Menu -Tree	UP 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 Button	ARROW 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.
Slider	ARROW KEYS increase or decrease the value.HOME or END take you to the beginning or ending value for the slider.
Tab Menu	TAB 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!

individual interacting with mobile device, surrounded by trails of blue light symbolizing digital information. — Photo by mahdis mousavi on Unsplash

Testing for accessibility can happen in many different ways, from quick and simple to in-depth and technically detailed. In the most general terms, I break accessibility testing into three categories: Automated, Manual, and Usability.

Automated vs. Manual Testing

As the name implies, automated testing is the least labor-intensive form of accessibility testing. Automated testing also typically discovers less than 40% of the issues that affect accessibility. A human brain is required to make several of the determinations that are required for an accessibility assessment.

Because of this limitation, most people who do accessibility testing will employ a combination of automated and manual testing.

Automated testing is a wonderful way to check for all of the programmatic issues that affect accessibility, and a great way to index all of the issues that need to be conformed with in order to satisfy a technical standard such as Section 508 or WCAG.

However, Manual testing is a required element for any thorough accessibility assessment.

Standards vs. Usability

Testing for conformance with accessibility standards is an easy task for automated tools. Testing for Usability is a more varied activity, often times it is best performed by an individual with a disability who regularly uses assistive technology.

For true accessibility you need to satisfy both the standards and the usability requirements that enable the content to be interacted with the same ease of use enjoyed by individuals without disabilities.

Quick and Cursory vs. In-depth and Detailed

For many situations, it is possible to do a quick and cursory test with your keyboard and reveal critical failures that prevent any need for more elaborate testing.

If an app or webpage is not keyboard accessible, it has already failed to conform with the standards and is demonstrably not usable.

AT and Usability Testing

When a student with a disability uses Assistive Technology, they are interacting with your content in different ways than you might expect. Sometimes content is structured in a way that will force students to work harder to engage with the content.

Different types of AT focus on a specific aspect of human communication, and it is not always obvious to people how approaching content from a different sensory perspective and with assistive technology can affect the meaning and understandability of the content.

For the best usability testing, it is recommended to find an individual with a disability who has a high degree of familiarity and comfort with assistive technology. An ideal candidate is someone who uses AT every day as a regular part of their life.

Browser Tools

Most modern browsers will allow you to inspect the code of the web pages you visit. If you are not put off by reading HTML code, the truth is out there and easy to uncover. Just right-click the content and select “Inspect” within the Chrome browser, or select “Inspect Element” within the Firefox browser.

However, for a lot of people, the idea of learning any amount of HTML and trying to read code is a complete deal breaker. That’s OK, you don’t need to get down and nerdy, there are a variety of tools that have been developed for Chrome and Firefox that make it a lot easier to inspect web pages for accessibility.

Here are a few popular options:

WAVE Extension: by WebAIM at Utah State University is a free tool for Chrome and Firefox that allows you to perform secure accessibility checks on content within your browser. WAVE applies a graphic overlay with different icons to identify the different types of issues with the content.
Color Contrast Analyzer: by North Carolina State University is an extension for Chrome that allows you to check the color contrast ratios of your content and make sure you are satisfying the WCAG 2.1 requirements for contrast.
Axe – Web Accessibility Testing from Deque: a free extension for Chrome and Firefox that is helpful in finding issues with content not conforming to the WCAG criteria.

There are many more extensions available in the Chrome Web Store and the Firefox Browser Add-Ons collection.

Try it Out! Keyboard Accessibility

Keyboard with blue and red lighting. — Photo by Jon Spectacle on Unsplash

There is one quick and easy way to do a very basic check of the accessibility of a web page – use the keyboard.

Most of us are so accustomed to using a mouse or trackpad that you might not be aware of how many keyboard commands are available for interacting with your computer. Following are just a handful of common keyboard commands you can start using to test accessibility.

Quick and Cursory

With the keyboard, you can quickly see if there is a basic ability to access interactive elements on a webpage. This is one of the most common accessibility requirements for digital content, and can be a red flag for additional more serious accessibility concerns.

Note: this technique only works if the webpage has interactive content.

Tab it Forward

Before you try this, click inside your internet browser to ensure the computer is focused on the browser.

Use the TAB key to move your computer focus from each interactive element on the web page to the next.
Try pressing TAB right now and see if you can identify the focus indicator. It is typically a dashed line, though the styling can be overwritten by the website you are visiting.
Once you have found the focus indicator, you can track the focus as you press TAB and move through the different interactive elements on the page.

Shift it Backwards

The SHIFT key can be used together with the TAB key to move backwards through the interactive elements on the page.

Interacting with Forms and Menus

If you get to an interactive element that allows you to choose an option, there are standard behaviors that respond to keyboard commands for interacting with the data.

If the content is accessible, you can use the following keys to interact with the options:

ARROW keys move between options.
SPACE: selects an option.
ENTER submits the option.

Considerations for Keyboard Testing

When you evaluate web content with the keyboard, consider the overall number of interactive elements.
Notice the sequence of interactive elements. Consider whether there are elements that seem like they should be presented sooner than they currently appear in the sequence.
Notice whether there is a “Skip to Content” link at the beginning of the page. This will typically take you past the menus for the website – which can take a lot of tabbing to get through.

Keyboard testing is not a conclusive or thorough way of testing accessibility. Also, it is not enough for web content to be keyboard accessible.

Keyboad accessibility is a good start, but there are many other additional considerations for ensuring access of digital content.

With the above information you can start practicing accessibility testing on the content you create and select for your online course.

Thanks for reading!