How does the aria-current works as we need to tell the screen reader where the page it is even after user does not made any movement on the laptop. Which Aria can be used ?
2 Answers
Aria-current works by informing the screen reader which element is current. For example, you can use aria-current="page"
on a list of navigation links where it shows by visual decoration (color or underline, etc) which page link is currently chosen. Aria-current="step"
could be used if there is a visual indication of checkout steps (for example) to show which step (2 of 3) the user is currently on. Aria-current="true"
could be used if there are a set of size links to show which size is currently selected.
aria-current
is one of the attributes defined in the WAI-ARIA specification, meant to help people with disabilities to perceive common UI widgets that are not part of the HTML specification.
It should be used to identify the current item in a set of items and it can take several values:
aria-current="page"
: indicates the current page within a set of pagination. It can be used, for example, within a main pagination widget (likely in the header).aria-current="location"
: indicates the current page within an hierarchy of navigation. In can be used, for example, within a breadcrumb widget.aria-current="date"
: indicates the current date. It can be used, for exemple, within a date picker.aria-current="step"
: indicates the current step within a set of steps. It can be used, for exemple, within multi-step wizard form.

- 595
- 1
- 5
- 12