HTML Guides for template

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>