# Bad value X for attribute “tabindex” on element “Y”: Expected a minus sign or a digit but saw “$” instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-tabindex-on-element-y-expected-a-minus-sign-or-a-digit-but-saw-dollar-sign-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `tabindex` value that starts with `$` is a template variable, such as `$velocityCount` or `${index}`, that reached the page without being replaced by a number.

`tabindex` takes a valid integer: an optional `-` followed by digits, like `0`, `-1` or `2`. The validator reads the value from the first character, and a `$` there fails the check straight away.

The `$` usually comes from a template. Apache Velocity prints any reference it can't resolve exactly as written, so a misspelled variable ends up in the HTML as plain text. So does `$velocityCount`, the old loop counter that Velocity 2.0 dropped in favor of `$foreach.count` and `$foreach.index`. Velocity doesn't do arithmetic inside a plain reference either, which means `$velocityCount-1` never becomes a number; do the subtraction in a `#set` directive. In JavaScript, `${index}` only gets filled in inside a template literal (backticks), so markup built from a single- or double-quoted string keeps it as text.

Browsers ignore a `tabindex` they can't parse and treat the element as if the attribute were missing. A `<div>` meant to take keyboard focus stays out of the tab order, so keyboard users can't reach it.

Fix the template so it outputs a number, or drop the variable. Tab panels rarely need a counter anyway. The ARIA tabs pattern puts `tabindex="0"` on a panel with no focusable content, and a counter would give later panels positive values like `1` and `2`, which move them ahead of the rest of the page in the tab order.

## Invalid example

```html
<div role="tabpanel" id="panel-books" tabindex="$velocityCount-1">
  <p>Browse the book catalog.</p>
</div>
```

## Valid example

```html
<div role="tabpanel" id="panel-books" tabindex="0">
  <p>Browse the book catalog.</p>
</div>
```