Here are global keyboard interactions that are effective at the application level.

Everyone should be able to access all interactive elements in the application, regardless of their choice or input devices. This section introduces basic keyboard navigation elements that fulfill related SAP Accessibility Standards. Read details about related standards here: Foundations – Accessibility

Focus Order

The numbered circles defines the order navigation using TAB and Shift + TAB

Initial element

The dotted line with a star indicates where the focus will be when landing on the page.

Arrow keys scope

The dotted line indicate a second level of navigation:

Arrow keys to move the focus.

Home to move to the first item

End to move to the last item with

Image

Skip sequence

User can speed navigation by skipping groups.

F6 to move forward

Shift + F6 to move backward.

Image

The Figma library SAP Accessibility Assets allow you to annotate your mockups.

Keyboard Shortcuts

A handful of key combinations are reserved by Fiori and web browsers. Avoid using them unless you want to achieve the same action in a narrow scope (at a component level). Also, please refer to commonly-used shortcuts in Database, Data Management & Analytics products before defining shortcuts.

Fiori

The following key combinations are reserved for future usage in Fiori. For this reason, please do not use these shortcuts unless you assign them for the exact same purpose at the component level.

<div> <div>Key Combination</div> <div>Description</div> </div> <div> <div></div> <div>Reserved for future usage, to access online help facilities</div> </div> <div> <div></div> <div>Rename/switch to edit mode</div> </div> <div> <div></div> <div>Open/close drop down lists or collapsible areas or value help</div> </div> <div> <div></div> <div>Refresh</div> </div> <div> <div></div> <div>Group navigation – forward</div> </div> <div> <div></div> <div>Complex navigation – shortcut for switching levels</div> </div> <div> <div></div> <div>Reserved for future usage, typically main menu access, Shift + F10 to access context menus</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Triggers default button</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Moves focus to messaging components, such as a MessageToast</div> </div> <div> <div></div> <div>Moves focus to global search</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Used to close a window or a child window</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Used to close all app windows and to quit the application</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>(Line Item) Detail navigation: navigate to the previous (line) item. (Corresponding to the arrow up/ down icons on the header)</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>(Line Item) Detail navigation: navigate to the next (line) item. (Corresponding to the arrow up/ down icons on the header)</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Toggling focus between master and detail</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Area navigation within read-only/display-only tables</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Area navigation within read-only/display-only tables</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Closing windows (for example, browser window)</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Reserved</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Reserved</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Reserved</div> </div> <div> <div></div> <div>Backward navigation</div> </div> <div> <div></div> <div>Reserved</div> </div> <div> <div></div> <div>Backward skip navigation</div> </div> <div> <div></div> <div>Open context menu</div> </div> <div> <div></div> <div>Text selection</div> </div> <div> <div></div> <div>Paste</div> </div>

Source: Fiori Keyboard Interaction (SAP Wiki)

Browsers

As Fiori applications run in web browsers, you should consider any conflicts in key combinations between your application and browsers. Some key combinations can hinder the functionality of the application and should not be overridden.

<div> <div>Key Combination</div> <div>Description</div> </div> <div> <div></div> <div>Most important keystroke of all Goto URL field in a browser. Method to get the focus into the web browser‘ chrome, where the browser‘s default Hotkeys will also work, such as Ctrl+D for bookmarking the current web page.</div> </div> <div> <div></div> <div>Captured by web browser to open a new window or new private window.</div> </div> <div> <div></div> <div>Captured by web browser to open a new tab or new private tab.</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div> <p>Close window on Windows, CMD+W on Mac with same function.</p> <p>Close active window (macOS)</p> </div> </div> <div> <div>(Windows)</div> <div>Close child window on Windows.</div> </div> <div> <div>(Windows)</div> <div>Close window (and quit application if its the last opened window), on Windows.</div> </div> <div> <div>(Mac)</div> <div>Quit application, on Apple OSX.</div> </div> <div> <div></div> <div>Navigates to the browser‘s home page.</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Back on previous web page.</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Forward on next web page.</div> </div>

Database, Data Management & Analytics Products

Having the same shortcut for the same action in different contexts can help users easily memorize the shortcuts and to quickly execute the action. Before you define shortcuts for similar actions in our products, refer to the key combinations below that are defined for common actions used in Database, Data Management & Analytics products.

<div> <div>Key Combination</div> <div>Action</div> </div> <div> <div></div> <div>Cancel.</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Select all objects in the page.</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Find.</div> </div> <div> <div> <p>(Windows)</p> <p>(Mac)</p> </div> <div>Save the current state of the page.</div> </div>

Source: Fiori Keyboard Interaction (SAP Wiki)

Resources

Accessibility – Keyboard Design (SAP Wiki)

Find a comprehensive guideline about keyboard design and its patterns.

Database, Data Management & Analytics Accessibility

Read details on accessibility standards for Database, Data Management & Analytics products.

Fiori Keyboard Interaction (SAP Wiki)

Look into detailed design guidelines for keyboard interaction design patterns in Fiori.

Read more details on the following sections.

Browser Application Hotkeys Wallpaper (SAP Wiki)

Overview on browser-based shortcuts in one page

Keyboard Handling for SAPUI5 Controls for Developers (SAPUI5 Explored)