Topic outline

  • Introduction to Keyboard Accessibility

    Collapse all Expand all

    • tiny lightbulb with gears insideSTART HERE ↓

    • Page
      Keyboard Accessibility Course Overview Page

      Keyboard Accessibility floating over a picture of a QWERTY keyboard

      Basic information about this course and how to get the most out of it.


    • Ask Questions Here

    • Forum
      Announcements and Community Forum

    • Key Terms and Concepts

    • Glossary
      Keyboard Accessibility Glossary

      Definitions for some of the key terms and concepts related to Keyboard Accessibility. These definitions will also make up some of the activities and quiz questions in the course.

    • Measuring Keyboard Accessibility with WCAG

      Wooden ruler with WCAG 2.1 Web Accessibility Standards printed on it

      The W3C created Web Content Accessibility Guidelines (WCAG) to assist in the creation of accessible web Content.

      While there are many different Success Criteria for assessing web accessibility in the WCAG, we are focusing on a small subset in regards to keyboard accessibility:

      2.1.1 Keyboard

      2.1.2 No Keyboard Trap

      2.1.3 Keyboard (No Exception)

      2.1.4 Character Key Shortcuts

      2.4.7 Focus Visible

      These Success Criteria are explained in the following book.
    • Book
      WCAG 2.1 and Keyboard Accessibility Book
      View

      Learn about the WCAG Success Criteria that address keyboard accessibility.

    • Quiz
      Practice Quiz - Keyboard WCAG
    • Study Tip!

      WCAG Refresher: Success Criteria 2.1.1 (A)

      All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

      This Success Criteria is the bare minimum level of accessibility for keyboard access.

    • You've Reached the End of Introduction Unit...

      😄

    • IDWERKZ logo - lightbulb with gears inside.

      #top

  • These Keys to Rule Them All

    • Page
      Essential Keys for Accessibility Explained Page
      View

      QWERTY keyboard with red keys for the TAB, SHIFT, SPACEBAR, ENTER, ESCAPE, and ARROW KEYS.

      These are the keys you're looking for...

    • The Essential Keys for Accessibility

      Essential Keys for Accessibility
      Keyboard Key Function and Purpose.
      TAB Moves focus between interactive elements.
      SHIFT Used with TAB key to move focus backwards through interactive elements.
      ARROW KEYS Navigate through menus and form fields.
      SPACEBAR Select options within groups and controls.
      ENTER Activate forms and interactive prompts.
       ESCAPE  Close windows, exit form fields, cancel the current context or operation.



    • VIDEO: Navigating with the Keyboard in 60 Seconds

        

        

    • Key Quiz

      Do you know which keys are used for essential interactions across the operating system and applications?
      If not, this Essential Keys for Accessibility quiz will help you figure it out.

    • H5P
      Essential Keys for Accessibility H5P
      View Receive a grade Receive a passing grade
    • Study Tip!

      WCAG Refresher: Success Criteria 2.1.3 NO EXCEPTIONS! (AAA)

      All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

      This is the highest level of accessibility for keyboard access. The difficulty of meeting this standard lies entirely within the range of content types you include. For certain types of interactive content, this level of conformance may be impossible.

    • You Have Reached the End of this Unit.

      😄

    • IDWERKZ logo - lightbulb with gears inside.

      #top

  • Finding Your Focus

    • Focus with a crosshair over the o.

    • The Basics of Focus Explained

    • Book
      FOCUS - It's Where the Action Is! Book

      Before we can use the Essential Keys for accessibility testing, we need to address the issue of focus.


    • Study Tip!

      Essence of Focus

      Focus deals with the three aspects of interaction: 

                • Review 
                • Selection
                • Activation.

    • Enhance Your Focus

    • Page
      Focus in the Browser Page

      Instructions for adjusting the default focus indicators within your browser.

    • Where to Find Focus

    • Content Which Receives Focus
      Content Receives Focus From
      Links TAB and ENTER
      Buttons TAB and ENTER
      Form Fields and Controls TAB, ARROW KEYS, SPACEBAR, and ENTER
      Menu Items TAB, ARROW KEYS, and ENTER
      Hover-induced content such as tooltipsTAB
      Widgets such as calendar and color pickers TAB. ARROW KEYS, and ENTER


    • CONCEPT REVIEW

      Let's make sure you're picking up what I've laying down...

    • Quiz
      Concept Review: Finding Your Focus Quiz
      Not available unless: The activity FOCUS - It's Where the Action Is! is marked complete

    • You Have Reached the End of this Unit.

      😄


    • IDWERKZ logo - lightbulb with gears inside.

      #top

  • Everything a Mouse Can Do

    • A keyboard with cartoon eyes flexes cartoon arms and smiles condescendingly at a mouse who is rolling its cartoon eyes.

    • Consider What Your Mouse Does for You

    • Book
      Considering What a Mouse Does Book

      In order to fully understand what we want from a keyboard, first consider what you give up when you give up the mouse.

    • Your Mouse: The Great Enabler
      The computer mouse allows a user to efficiently and easily interact with computer content. With a mouse, you can easily:

              • Select content, like menu options, text, and interactive elements.
              • Activate content like links, forms, and media controls.
              • Move and Resize content such as text input areas, drag and drop content, scrollbars, graphic layout software, etc.
              • Invoke a context menu (Right Mouse Button), or any number of shortcuts and power commands.

    • Study Tip!

      WCAG Refresher: Success Criteria 2.1.2 No Keyboard Trap (A)

      If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

    • IDWERKZ logo - lightbulb with gears inside.

      #top

    • You Have Reached the End of this Unit.

      😄


  • Access Keys & Practice

    • A Collection of Content Awaiting Your Focus

    • Book
      Interactive Content and Keyboard Accessibility Book
    • H5P
      Keyboard Navigation Crossword H5P
      View Receive a grade

      Find the words that correspond with the clues!

    • Study Tip!

      WCAG Refresher: Success Criteria 2.1.4 Character Key Shortcuts (A)

      If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

      Turn off - A mechanism is available to turn the shortcut off;
      Remap - A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt);
      Active only on focus user interface component is only active when that component has focus.
    • Page
      Checklist: Validating Keyboard Accessibility Page

      A brief list of criteria for determining if content is keyboard accessible or not.

    • File
      Navigating with the Keyboard File

    • Congratulations!

      You have reached the end of this Unit, and the end of the course!

      😄


    • IDWERKZ logo - lightbulb with gears inside.

      #top