Elevation and depth define how elements are layered using shadows and z-index.
For accessibility, they ensure that layering does not hide, block, or confuse content and interactions.
Relevant WCAG Criteria
1.4.11 – Non-text Contrast (AA)
Visual boundaries (e.g. shadows, surfaces) must be distinguishable from their background.
2.4.7 – Focus Visible (AA)
Focused elements must remain visible, even when layered.
2.4.11 – Focus Not Obscured (Minimum) (AA)
Focused elements must not be hidden behind overlays or other UI layers.
1.4.13 – Content on Hover or Focus (AA)
Floating content (e.g. tooltips, menus) must:
- Remain visible while interacting
- Not disappear unexpectedly
- Not obscure essential content
How to Use Elevation Accessibly
Do not hide important content
- Overlays and elevated elements must not block critical information
- Users must still access underlying or related content when needed
Preserve focus visibility
- Focused elements must remain fully visible
- Avoid placing overlays above focused content
Use clear visual separation
- Elevation should create a clear distinction between layers
- Avoid subtle shadows that make layers indistinguishable
Manage floating content carefully
- Only one layer of floating UI should be active when possible
- Avoid stacking multiple overlays (e.g. menus, modals)
Common Issues
- Overlays covering focused elements
- Multiple stacked layers causing confusion
- Low-contrast shadows making layers unclear
- Tooltips or menus disappearing too quickly
- Content becoming inaccessible behind modals or panels
Quick Checklist
✅ Focused elements are never hidden behind layers
✅ Elevated elements do not block critical content
✅ Visual separation between layers is clear
✅ Floating content behaves predictably
✅ Multiple overlays are avoided