Accessibility and responsive design
Full lesson currently free to read · AI practice limits apply separately
Responsive layout is only one part of usable UI. Keyboard focus, accessible names, semantic structure, translated labels and validation announcements must remain coherent when controls move or dialogs open. Test the task flow, not just a screenshot at a narrow width.
Visual overview
Explanation
Tutorial outcome
Responsive layout is only one part of usable UI. Keyboard focus, accessible names, semantic structure, translated labels and validation announcements must remain coherent when controls move or dialogs open. Test the task flow, not just a screenshot at a narrow width.
Prerequisites
Complete chapters 1–8 in this module. Use synthetic fixtures or an authorized sandbox.
Worked case — fictional
A synthetic approval dialog looks correct on mobile but keyboard users cannot reach its confirmation button.
Step-by-step investigation
1. Keyboard
Complete the order task using Tab, Shift+Tab and the documented control keyboard behavior.
Expected evidence: Every actionable control is reachable without a pointer.
2. Name
Inspect accessible names for inputs and icon-only actions; connect validation text to the appropriate field.
Expected evidence: Approve order is announced instead of an unnamed button.
3. Resize
Check narrow and wide layouts without clipping amounts or hiding essential actions.
Expected evidence: At 360px the decision controls remain usable.
4. Focus
Open and close the dialog and verify logical focus restoration and readable error feedback.
Expected evidence: Focus returns to the initiating order action.
Try it yourself
Reproduce the synthetic input from the example below in a local fixture or authorized sandbox. Follow each step, record the observed result, and explain any mismatch before continuing. Do not treat the expected evidence as a result observed in your SAP tenant.
Acceptance check
The full synthetic task remains operable using keyboard and assistive technology at both viewports.
Common failure to avoid
Do not equate responsive breakpoints or an icon's visual meaning with accessibility.
Self-check
What makes an icon-only action accessible?
Expected reasoning: A meaningful accessible name and operable keyboard behavior.
Edition and release scope
Check the linked SAP documentation for your product, runtime, region and enabled service plan. The worked case is a simulation; these steps were not executed in a customer SAP tenant.
SAP references
References checked 2026-10-30. SAP material supports the named concepts; the case, fixture and acceptance checks are original ERPClimb teaching material. No SAP tenant execution or certification is claimed.
[SAP Learning — Advanced SAPUI5 Development](https://learning.sap.com/courses/advanced-sapui5-development) — Controls, QUnit, OPA5 and advanced application patterns
[SAP Help — UI5 developer best practices](https://help.sap.com/docs/SAPUI5/b2f662dd9d7a4ec680056733050b4d34/28fcd55b04654977b63dacbee0552712.html?version=1.143) — Asynchronous modules, components, views, fragments and dependencies; source version 1.143
Code example
{"viewport":360,"task":"approve mock order","checks":["keyboard","name","error","focus-return"]}Accessibility and responsive design: evidence walkthrough
Simulated training case. These observations are authored fixtures, not screenshots or results from a customer SAP system.
A synthetic approval dialog looks correct on mobile but keyboard users cannot reach its confirmation button.
Before you start
- Complete chapters 1–8 in this module. Use synthetic fixtures or an authorized sandbox.
Check the linked SAP documentation for your product, runtime, region and enabled service plan. The worked case is a simulation; these steps were not executed in a customer SAP tenant.
Keyboard
Complete the order task using Tab, Shift+Tab and the documented control keyboard behavior.
Expected evidence · simulated
Every actionable control is reachable without a pointer.
Automatic playback is disabled by your reduced-motion preference. All steps remain available.
Try it, then verify
The full synthetic task remains operable using keyboard and assistive technology at both viewports.
Watch for: Do not equate responsive breakpoints or an icon's visual meaning with accessibility.
Open the ERPClimb lesson diagram at full sizeSAP references and release scope
References checked 2026-10-30. The linked SAP material supports the named concepts; the scenario, fixtures and acceptance checks are original ERPClimb teaching material. This is not an SAP certification or a tenant-execution claim.
- SAP Learning — Advanced SAPUI5 Development
Controls, QUnit, OPA5 and advanced application patterns
- SAP Help — UI5 developer best practices
Asynchronous modules, components, views, fragments and dependencies; source version 1.143
Real project scenario
A synthetic approval dialog looks correct on mobile but keyboard users cannot reach its confirmation button.
Common mistakes
Do not equate responsive breakpoints or an icon's visual meaning with accessibility.
Best practices
The full synthetic task remains operable using keyboard and assistive technology at both viewports. Check the linked SAP documentation for your product, runtime, region and enabled service plan. The worked case is a simulation; these steps were not executed in a customer SAP tenant.
Interview angle
What makes an icon-only action accessible? A meaningful accessible name and operable keyboard behavior.
Practice this lesson
Original educational case studies for SAP consultants, not official SAP certification exam questions. Verify product edition and implementation details against the current SAP documentation.
Quick check
0 of 3 questions attempted
1. Which practice supports screen reader users in UI5?
2. Why use responsive controls and layouts like sap.m and FlexBox?
3. How should custom CSS be used in Fiori apps?
Interview questions
1. How do you ensure a freestyle UI5 app is accessible?
Answer it in your own words first, then compare.
2. A table looks broken on phones. How do you fix it?
Answer it in your own words first, then compare.
Check before use: lesson examples are educational, not a guarantee of correctness for your SAP edition or release. Sample code has not been executed on your SAP system. Confirm API availability, syntax, authorizations and business impact in an approved development or test environment.