Skip to main content

Keyboard navigation through MindTouch (MT4)

Written by Theresa Manzo
Lead UI/UX Designer at MindTouch

Keyboard only navigation is one of the most important accessibility features for a wide range of disabled people. It is also helpful to anyone who would like to save time combining key commands and mouse controls.

Why should I care about keyboard navigation?

Ensuring all content is accessible through keyboard only navigation allows for your knowledge to reach the largest audience possible. Keyboard accessibility improves usability for the visually impaired, mobility impaired, and power users alike by allowing access to all functionality without the use of a mouse.

Examples of keyboard navigation usage

The following examples will detail the different controls used in keyboard navigation.  The keys you will be using most are:

  • TAB: Used to move forward through functions.
  • SHIFT+TAB: Used to move backwards through functions.
  • ENTER: Activates a function such as a drop-down, a link or a button.
  • ARROW KEYS: Navigates through the values inside a radio button group in a form. Can also be used to scroll up and down a page.
  • SPACEBAR: Selects a checkbox value in a form.

Initially accessing the site

The initial starting point of your cursor, after any page load, will be in the address bar of your browser. For users who are not logged in on a public site, the first function that will be focused on is the "Sign in" link found in the user navigation. You can hit enter to activate the quick log-in functionality. Tabbing through the logged out user navigation will lead you through the "Forgot Password" and "Register" functionality. The presence of the "Registration" link will vary from site to site.


Private sites will take you to the user "Sign in" page when initially accessing the site.  The tab state will follow this order:

  1. Username field
  2. Authentication (if site has multiple authentication platforms)
  3. Password field
  4. Sign-in button
  5. Header elements
  6. Side tray elements
  7. Footer elements

Logged in users

For logged in pro-members, the initial point of focus will be in the pro-member navigation.  As always, initial access will start on the left and move towards the right.  Pro-member tab focus will be as follows:

  1. The close button in the MindTouch release bar.
  2. The link to the latest MindTouch release blog.
  3. "Edit Page" link
  4. "New Page" link
  5. "Page Options" drop-down menu (hitting enter will trigger the drop-down)
  6. "User Name"  drop-down menu(hitting enter will trigger the drop-down)
  7. "Site Tools" drop-down menu (hitting enter will trigger the drop-down)
  8. "Contact Support" link
  9. "Sign Out" link


For logged in community members, the initial point of focus will be in the user navigation. Community member focus will be as follows:

  1. "My Preferences" link
  2. "Site Tools" drop-down menu (hitting enter will trigger the drop-down)
  3. "Contact Support" link
  4. "Sign Out" link

Content navigation functionality

After running through your pro-member or user navigation your tab focus will run through your sites header functionality such as site logo or custom header links, which will vary based on your site.

Content navigation

The next section of keyboard access will be through the MindTouch content navigation (dynamic breadcrumbs) which allows you to navigate through all levels of the site hierarchy. The first focusable function will start on the home link. You can then tab through each of the following hierarchy levels and hit enter to trigger their sub-page drop-downs. When a drop-down has been opened, you can tab through each sub-page and then hit enter for the page you would like to navigate to. Once you have tabbed through all the sub-pages of a drop-down, your next tab focus will continue on to the next level of the site hierarchy. 



After the content navigation, your tab focus will enter the breadcrumb functionality, making it easier to transverse directly up through your current page's hierarchy structure.



Most tab focus styles will be the hover style of that element along with a light blue dotted outline.


Form elements

Radio button fields can be selected by using the up and down arrows. Checkboxes can be selected by pressing the spacebar.

radio-focus.png     checkbox-focus.png


When a dialog is triggered, tab focus will switch to the first functional element inside it, which is the "X" button that closes the dialog. 



When a tab is focused, it will change to red text and have a blue dotted line around


User guides

The expand/collapse functionality inside user guides can be triggered by tabbing to the icon and then hitting enter.




Navigation through an article's content will happen in the order that each functional element appears in the page.  After navigating through the content section, tab focus will shift to the right tray, starting with the global search field.



Tab focus will continue through the right tray and then into the footer. Elements that can be tabbed to include links, buttons, form elements, tabs


All MindTouch created links, buttons, form elements, dialogs, and tabs are keyboard accessible. Custom header and footer elements can not be guaranteed as accessible. If your site has custom styles that hide the outline of an element, then the default tab focus style will not apply correctly.


For more information about keyboard accessibility please read the article "Keyboard Accessibility" found at

  • Was this article helpful?