keyboard-focusable
Mobile validation
Some people use a hardware keyboard, or an assistive technology that sends keyboard events, on their mobile device. Every interactive element must be reachable with the keyboard and operable with it.
Most native controls are keyboard-focusable by default, such as Button and EditText on Android. Don't override the properties that make them focusable. Make sure custom interactive views can receive keyboard focus, and give them a visible focus indicator.
Keyboard focus on iOS
On iOS, native controls such as UIButton and SwiftUI's Button can receive keyboard focus by default when Full Keyboard Access is on. Custom interactive views need to opt in: in UIKit, by overriding canBecomeFocused, and in SwiftUI, with the focusable() modifier. Test custom views with a keyboard, as described in Try It Yourself.
Pass Patterns
Android
XML Views
The button keeps its default focusability, so keyboard focus can reach it.
<Button
android:id="@+id/saveButton"
android:layout_width="..."
android:layout_height="..."
android:text="Save" />The clickable image is also focusable, so keyboard users can reach and activate it.
<ImageView
android:id="@+id/shareImage"
android:layout_width="..."
android:layout_height="..."
android:src="@drawable/..."
android:contentDescription="Share"
android:clickable="true"
android:focusable="true" />Cross Platform
Flutter (Android)
The button keeps its default focusability, so keyboard focus can reach it.
ElevatedButton(
onPressed: save,
child: const Text('Save'),
),Fail Patterns
Android
XML Views
android:focusable="false" removes the button from keyboard focus, although it can still be tapped.
<Button
android:id="@+id/saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:text="Save" />The image can be tapped, but android:focusable="false" prevents keyboard focus from reaching it.
<ImageView
android:id="@+id/shareImage"
android:layout_width="..."
android:layout_height="..."
android:src="@drawable/..."
android:contentDescription="Share"
android:clickable="true"
android:focusable="false" />Cross Platform
Flutter (Android)
ExcludeFocus prevents the button from receiving keyboard focus.
ExcludeFocus(
child: ElevatedButton(
onPressed: save,
child: const Text('Save'),
),
),Try It Yourself
Using a keyboard
- Connect an external keyboard to the device. On iOS, also turn on Settings > Accessibility > Keyboards > Full Keyboard Access.
- Press Tab, or use the arrow keys, to move keyboard focus through the screen.
- Check whether every interactive element receives focus, and activate each one with the keyboard.
Expected results: Every interactive element receives a visible keyboard focus and can be activated with the keyboard.
Actual results: Some interactive elements are skipped and never receive keyboard focus.
FAQ
How does this issue relate to 2.1.1 Keyboard?
SC 2.1.1 requires all functionality to be operable through a keyboard interface. When an interactive element cannot receive keyboard focus, keyboard users cannot reach or activate it, so the criterion is not met.
Why is this issue marked as Critical?
People who rely on a hardware keyboard, or on an assistive technology that sends keyboard events, cannot use an element that keyboard focus cannot reach. They may be blocked from completing key tasks, so it is rated critical.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 2.1.1 Keyboard (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. |
| EN 301 549 | 11.2.1.1 Keyboard | Same as the WCAG text. |
| Section 508 | 1194.21(a) | When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually. |
Personas impacted by this issue
Learn More
- Understanding Success Criterion 2.1.1: Keyboard
- Android: Support keyboard navigation (Views)
- Android: Focus in Jetpack Compose
- Apple: Focus-based navigation (UIKit)
- Apple: Focus (SwiftUI)
- Flutter: Understanding focus