Focus order
- When the screen reader is on or an accessibility device is connected, a focus mark should be shown to make it clear what element is selected.
- Make sure that the focus flows logically from one element to the next.
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-01.png)
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-01-m.png)
①If there is no item on the right, the focus is moved to the first item in next line.
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-02.png)
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-02-m.png)
②If there is no item on the left, the focus is moved to the last item in previous line.
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-03.png)
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-03-m.png)
③Looping is not supported. No actions by the left key on the leftmost side and by the right key on the rightmost side.
- There's no need to focus on decorative elements, auxiliary images, or empty spaces.
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-04-2.png)
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-04-m.png)
- Related elements can be grouped as a single focused element.
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-05.png)
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-05-m.png)
Naturally grouping nearby UI Elements for better readability.
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-06.png)
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-06-m.png)
Every individual item within the same group is separated.
- The focus should be on the location where the action can be done. If an action can be continuously done in that location, keep the focus there.
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-07-2.png)
![](https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/accessibility_order_img-07-m.png)