ARIA states are attributes that define the current condition of an element. On this page, I list some of the more common ones and how they are used.
The aria-current attribute indicates which element represents the current item within a container or set of related elements. It is used when an element within a set of related elements is visually styled to indicate it is the current item. Some examples of these:
In widgets where the aria-selected has the same meaning, it should be used instead of aria-current. An example of this would be a tablist where aria-selected should be used to indicate the currently displayed tab.
There is no semantic HTML equivalent for aria-current.
With aria-hidden you can hide an element from assistive technologies. Use this for content that provides no useful information for assistive technology users. For example, if you have some icons that are present as visual cues only, you should remove them from assistive technologies.
It is recommended to hide content only if it is decorative or redundant or there is a text equivalent nearby. Otherwise, it might get confusing for your sighted users who use screen readers.
Don't use aria-hidden on a visible and focusable element.
<div aria-hidden="true">This element will be hidden from screen readers</div>
Aria-hidden can also be set to false, but that is unnecessary, you can just remove the aria-hidden attribute. Also, some screen readers might not recognize the false value for aria-hidden.
With aria-invalid you can indicate that the entered value doesn't conform to the format expected by the application.