Depth & Shadow Guidelines
Depth is used for micro interactions to show context or relationship between UI elements. It indicates/reinforces the priority of elements on the screen by taking advantage of the 3rd dimension to create distance between items. This creates hierarchy and helps the user know what can be touched, moved, or altered.
Accessibility
Effects such a depth and light should be used to enhance the user interface — but the UI should be accessible and easy-to-use for people who can’t see them. For example, when using depth to arrange UI elements into a visual hierarchy, consider whether that hierarchy is obvious when you’re using a screen reader.
How to use z-index
Z-index needs to be used very strategically in a website. It should only be used when it is necessary for one item to sit on top of another visually. Z-index by default is 0. In most cases it is best for it to remain 0.
The Digital Design System incorporates z-index into its components to make development easier for you.
It is important to plan out the layers of your interface to avoid problems down the road.
Best practices
- It is best to use z-indexes of 1, 2, 3, etc…
- Avoid using very large z-indexes like 9999 as this will cause problems with overriding down the road and is not necessary.