--- title: "Keyboard Accessibility" url: "https://insideuxdesign.com/en/glossar/keyboard-accessibility" language: "en" description: "What is keyboard accessibility? A plain-language guide to WCAG criteria, focus and skip links with an example. Learn how to test your site without a mouse." published: "2026-10-14T15:20:05+02:00" updated: "2026-10-14T15:20:05+02:00" --- # Keyboard Accessibility Keyboard accessibility means a website or app can be used entirely without a mouse. For many disabled people, it’s what makes a product usable in the first place. - **Buchstabe:** K - **Englischer Begriff:** Keyboard Accessibility UX glossary · engl. Keyboard Accessibility # Keyboard Accessibility Keyboard accessibility means a website or app can be used entirely without a mouse. For many disabled people, it’s what makes a product usable in the first place. Imagine you want to order something from an online shop, but your hand is in a cast after an injury. Using a mouse is out, so you press the Tab key. A frame jumps through the menu, then vanishes somewhere inside a banner. You can no longer see which button is active. The shopping cart stays out of reach. Keyboard accessibility is about preventing exactly that. ## Explained simply Keyboard accessibility means a website or app can be used entirely without a mouse or touchscreen. Think of a building with both stairs and a lift: everyone can get in. If there are only stairs, some people stay outside. For many digital products, the keyboard is that lift. The people who rely on it include those with motor impairments, people who use a [screen reader](https://insideuxdesign.com/en/glossar/screen-reader), and anyone working with adapted keyboards, switches or voice control. Plenty of power users simply prefer the keyboard because it’s faster. The key controls are quick to explain. Tab moves you to the next interactive element, Shift and Tab move you back. Enter activates links and buttons, the space bar activates buttons and checkboxes. The arrow keys move you within menus, radio buttons or tabs, and Escape closes dialogs. ## What WCAG requires The [WCAG](https://insideuxdesign.com/en/glossar/wcag) (Web Content Accessibility Guidelines) turn this into testable criteria. The most important ones: - **2.1.1 Keyboard (Level A):** Every function must work with a keyboard. The only exception is functionality where the path of movement matters, such as freehand drawing. - **2.1.2 No Keyboard Trap (Level A):** Focus must never get stuck. You have to be able to leave every element again. - **2.4.7 Focus Visible (Level AA):** It must be clear which element currently has focus, meaning which one will respond to your input. - **2.4.11 Focus Not Obscured (Minimum) (Level AA, new in WCAG 2.2):** The focused element must not be completely hidden by content such as sticky headers or cookie banners. On top of that, 2.4.1 Bypass Blocks (Level A) says repeated blocks like the navigation must be skippable. The most common solution is a skip link, a “Skip to content” link that appears on the first press of Tab and takes you straight to the main content. ## An example Here’s an example: a booking portal builds its date picker from clickable div elements. You can’t reach it with Tab at all, and the focus outline was removed in CSS with `outline: none` because it looked “ugly.” For anyone without a mouse, the booking ends right there. After the redesign, the days are real buttons, the arrow keys move between them, and a bold focus outline in the brand color shows where you are. The function is the same, but now everyone gets there. Why details like these matter is covered in [Why Accessibility Is More Than Contrast and Font Size](https://insideuxdesign.com/en/blog/why-accessibility-is-more-than-contrast-and-font-size). ## In practice - **Put the mouse away.** Run through your key flows using only Tab, Enter, the space bar and Escape. It takes minutes and uncovers a lot of problems. - **Use native elements.** Real buttons, links and form fields work with the keyboard out of the box. Custom components need extra keyboard handling and often [ARIA](https://insideuxdesign.com/en/glossar/aria). - **Style the focus instead of removing it.** A clearly visible focus outline belongs in your [design system](https://insideuxdesign.com/en/glossar/design-system). More testing methods are in [Accessibility Testing: Tools and Methods for UX Designers](https://insideuxdesign.com/en/blog/accessibility-testing-tools-and-methods-for-ux-designers). ## Related terms [Accessibility](https://insideuxdesign.com/en/glossar/accessibility), [WCAG](https://insideuxdesign.com/en/glossar/wcag), [Screen Reader](https://insideuxdesign.com/en/glossar/screen-reader), [ARIA](https://insideuxdesign.com/en/glossar/aria) ## Sources - [W3C: Understanding Success Criterion 2.1.1: Keyboard. W3C WAI, 2023](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) - [W3C: Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum). W3C WAI, 2023](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html) - [W3C: Understanding Success Criterion 2.4.1: Bypass Blocks. W3C WAI, 2023](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html) - [WebAIM: Keyboard Accessibility. WebAIM](https://webaim.org/techniques/keyboard/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://insideuxdesign.com/en/glossar/contrast-ratio)