alterno logo 2021-02

Accessibility in SAPUI5 – best practice

General recommendations – provide as much information as possible within the application, including field descriptions, labels, tooltips & group / list titles. It will help screen readers to interpret the meaning behind each field / form.

  1. Set focus on most used element (for example first field in a form / first input field users are expected to interact with). Please note that on mobile devices focus on an input field will open the keyboard.
  2. Do not override keyboard handlers (for example with jQuery).
  3. Provide meaningful tooltips and placeholders for non-text elements. Don’t set tooltips for containers / layouts.
  4. All images should have an ‘alt’ attribute that explains the image meaning.
  5. Make sure all elements have a label / tooltip, which are meaningful and accurate.
  6. Don’t set fixed height / width for elements (as people might zoom in and it will break the ratio). 
  7. Make sure that zooming to 200% doesn’t make elements overlap one another and magnified proportionally.
  8. Use REM/EM instead of PX as a unit.
  9. Use the flexible layout.
  10. Use SAP embedded colors instead of custom ones.
  11. Don’t change / define elements flow direction (it is handled by layouts).
  12. Make sure all active elements (buttons / fields and other interactive elements)  are accessible by keyboard (you can test your application by putting away your mouse).
  13. Maintain logical reading order for all elements. 
  14. Large groups and elements must be marked with fast navigation).
  1. Use titles for complex components so screen readers can interpret group headings.
  2. Make sure fields have labels, additionally you can use “Description” to provide additional information such as unit of measurement.
  3. In lists / tables, add a toolbar with labels so it can be interpreted by screen reader. Each list / table must have a title.
  4. Make sure you understand how different controls (and it’s properties) are read by screen readers.
  5. If there is audio / video please make sure that they will be accompanied with captions.
  6. Maintain clear text for links that reflect their purpose 
  7. Keep the best contrast possible.

Any questions?

Just write us a message!

Fill out the form and we will be in touch as soon as possible!