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

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

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

Valid example

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

Learn more:

MDN Reference

MDN Web Docs: tabindex

→

WHATWG Spec

HTML Standard: User interaction

→

W3C Reference

ARIA Authoring Practices Guide: Tabs pattern

→