# Bad value X for attribute “aria-current” on element Y.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-aria-current-on-element-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-current` attribute indicates that an element represents the **current item** within a container or set of related elements. It is designed to convey to assistive technology users what sighted users already perceive through visual styling — for example, a highlighted link in a navigation bar or the active step in a multi-step wizard.

Because assistive technologies rely on a known set of token values to communicate meaning, using an invalid value means the attribute is effectively meaningless to screen readers and other tools. This undermines accessibility for the users who need it most. Browsers and assistive technologies will not interpret an unrecognized value as `true`; they may ignore the attribute or treat it as `false`, leading to a confusing experience.

Common mistakes that trigger this error include:

- Using an empty string: `aria-current=""`
- Using a custom or misspelled value: `aria-current="active"`, `aria-current="yes"`, `aria-current="pgae"`
- Dynamically setting the attribute to `undefined` or `null` as a string

## Accepted values

Each accepted value carries a specific semantic meaning. Use the most descriptive one that matches your context:

- **`page`** — The current page within a set of pages (e.g., the active link in a breadcrumb or navigation menu).
- **`step`** — The current step within a process (e.g., the active step in a checkout flow).
- **`location`** — The current location within an environment or context (e.g., the highlighted node in a flow chart).
- **`date`** — The current date within a collection of dates (e.g., today's date in a calendar).
- **`time`** — The current time within a set of times (e.g., the current time slot in a timetable).
- **`true`** — A generic indication that the element is the current item, when none of the more specific values apply.
- **`false`** — Explicitly indicates the element is *not* the current item. This is equivalent to omitting the attribute entirely.

## Examples

### ❌ Invalid: empty string

An empty string is not a valid value for `aria-current`:

```html
<nav>
  <ol>
    <li><a href="/step-1" aria-current="">Step 1</a></li>
    <li><a href="/step-2">Step 2</a></li>
  </ol>
</nav>
```

### ❌ Invalid: custom keyword

Values like `"active"` or `"yes"` are not recognized:

```html
<nav>
  <ul>
    <li><a href="/" aria-current="active">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
```

### ✅ Fixed: using `page` for navigation

When marking the current page in a navigation menu, `page` is the most appropriate value:

```html
<nav>
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
```

### ✅ Fixed: using `step` for a multi-step process

```html
<ol>
  <li><a href="/checkout/cart">Cart</a></li>
  <li><a href="/checkout/shipping" aria-current="step">Shipping</a></li>
  <li><a href="/checkout/payment">Payment</a></li>
</ol>
```

### ✅ Fixed: using `true` as a generic fallback

When none of the specific token values fit, use `true`:

```html
<ul>
  <li><a href="/item-1" aria-current="true">Item 1</a></li>
  <li><a href="/item-2">Item 2</a></li>
  <li><a href="/item-3">Item 3</a></li>
</ul>
```

### ✅ Fixed: removing the attribute instead of setting `false`

If an element is not the current item, simply omit `aria-current` rather than setting it to `false` or an empty string. Both of the following are valid, but omitting the attribute is cleaner:

```html
<!-- Valid but unnecessary -->
<a href="/about" aria-current="false">About</a>

<!-- Preferred: just omit it -->
<a href="/about">About</a>
```

## Tips for dynamic frameworks

If you're using a JavaScript framework that conditionally sets `aria-current`, make sure the attribute is either set to a valid value or removed from the DOM entirely. Avoid patterns that render `aria-current=""` or `aria-current="undefined"` when the element is not current. In React, for instance, you can pass `undefined` (not the string `"undefined"`) to omit the attribute:

```html
<!-- What your framework should render for the current page -->
<a href="/" aria-current="page">Home</a>

<!-- What it should render for non-current pages (no attribute at all) -->
<a href="/about">About</a>
```
