Accessibility at Application Level
Many requirements are already covered by the SAPUI5 framework. However, design aspects that are related to the individual purpose of the application still need to be implemented by the application design team. Here are some examples:
Keyboard Operation
-
Initial focus position: To enable users to work through a task efficiently, always set an initial focus. It should be set to either the first logical interaction element or the first element in the task.
-
Structure and fast navigation: Ensure that the keyboard navigation within your application is logical and follows the task structure for the intended purpose. When designing apps with a large set of functions or information blocks, always form logical groups to help users navigate efficiently. You can achieve this by using containers, toolbars, or other grouping elements. To enable faster navigation, SAPUI5 allows users to skip groups (with
F6
orShift + F6
). You should also, enable direct keyboard navigation to logical groups, such as working areas or navigation areas. -
Keyboard shortcuts (hot keys): While some keyboard shortcuts are supported at the framework level (such as
Ctrl + A
to select all items), others must be defined at the application level (a common one isCtrl + S
to save the current object). Support for keyboard shortcuts in SAPUI5 differs from the default browser behavior: all keyboard shortcut commands are captured by the application exceptCtrl + L
, which is used to jump to the browser address bar. From there, all browser keyboard shortcuts are available. Follow industry standards and best practices.
Screen Reader Support
Although screen reader support is technically implemented at the framework level, it is still the developer’s task to arrange the individual UI elements in relationships that are needed for the screen readers. This is done by using appropriate floorplans, layouts, and controls for the respective use cases.
-
Landmarks: Landmarks are used by assistive technologies (such as screen readers) to provide a meaningful overview of the content. Define landmarks when you use an object page, dynamic page, or panel, for example.
-
Labels, tooltips, and placeholders: Define meaningful labels. Use tooltips according to the guideline, and ensure that they are relevant. Define clear placeholders in input fields where appropriate. For more information on placeholders, see Mask Input and Input Field.
-
Alternative texts: Images need alternative texts and descriptions, unless they are purely decorative. Also, the default texts for icons, image placeholders, and other graphical elements may not be available or suitable for your application use case. Always review these texts, and replace or redefine them where necessary.
-
Status updates, messages, error handling: Although the shape and appearance of system messages is predefined, ensure that the message content is clear and easy to understand. For error messages, indicate the location of the error and how to fix it.