Sanna Kramsi - I would if I could a guide to web accessibility

ARIA states

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.

Aria-current

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:

  • Current page in the site menu or breadcrumb (value: page)
  • Current step in a step-based process (value: step)
  • Current date in a calendar (value: date)
  • Current time in a timetable (value: time)

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.

Aria-hidden

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.

Example of aria-hidden usage

<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.

Aria-invalid

With aria-invalid you can indicate that the entered value doesn't conform to the format expected by the application.

Source material