How does keyboard navigation and accessibility work in React Guitar?

React Guitar supports keyboard-only operation: once a string has focus, you move between strings and frets with the arrow keys and play the focused string by pressing p. That means the component can be played without a mouse or touch input, which is the core of its accessibility story. The rest of this page covers exactly what the keyboard controls do, what state the component exposes while you play, and where the limits of that accessibility support are.

The keyboard controls

The interaction model is a two-step focus-then-play pattern:

1. Focus a string. You first need focus on a string element. The component is described as "a beautiful and accessible guitar component," and its documented keyboard behavior begins "once you focus on a string."
2. Navigate with the arrow keys. With a string focused, the arrow keys move you across strings and frets. This lets you reach any of the 6 strings and 22 frets without a pointer.
3. Play with p. When a specific string is focused, pressing p plays it.

So the minimum keyboard loop is: focus a string → arrow to the string and fret you want → press p to sound it.

What the component reports while you play

The component exposes its state as you navigate, which is what makes keyboard use practical rather than blind:

• Current fretting — shown as a six-value list, e.g. 0, 0, 0, 0, 0, 0 for all open strings.
• Focused string — the interface names the string you are on, e.g. "String 1."
• Fret position and note — each fret is labeled with its number and pitch, e.g. String 1 Fret 0 = E4, Fret 1 = F4, Fret 2 = F♯4, and so on up to Fret 22 = D6.
• Mute state — Fret -1 is labeled "(Mute)," so a muted string is a distinct, reportable state rather than an absence of information.

Because the note names are attached to fret positions (String 6 Fret 0 = E2, String 2 Fret 0 = B3, String 3 Fret 0 = G3, String 4 Fret 0 = D3, String 5 Fret 0 = A2), a keyboard user can confirm what they are about to play from the labels rather than from sound alone.

Standard tuning and range

The component's default tuning is E A D G B E, with 6 strings and 22 frets, "starting from 0." Fret -1 is the mute position. This matters for keyboard navigation because the arrow-key path spans 23 positions per string (mute plus frets 0–22), and the labels change per string — for example, String 1 Fret 12 is E5 while String 6 Fret 12 is E3.

Other input and display options

Beyond the keyboard, the component exposes several toggles that affect how it behaves and looks:

• Play on hover — an alternative to pressing p, useful for pointer users but not a keyboard substitute.
• Left handed — flips the layout.
• Themes — spanish, dark, and coco; the spanish theme is described as "a typical Spanish guitar with a brown fretboard and golden details."
• Chord — the interface references a chord such as Em7add11, and a Strum action and Copy Link control are present.

Where the accessibility support stops

The page evidence documents keyboard navigation and playing, focus behavior, and state reporting (current fretting, focused string, fret/note labels, mute). It does not document screen-reader announcements, ARIA roles, focus-trap behavior, or a published accessibility conformance level. So the safe claim is: React Guitar is designed to be operable by keyboard, and it exposes enough state to make that operation meaningful — not that it has been verified against a specific accessibility standard.

If your requirement is "can a user play and navigate the guitar without a mouse," the documented controls answer that. If your requirement is "does this meet WCAG at a specific level," that is not established by the available material and would need to be tested directly.