diff --git a/client/src/pages/SongBookViewer.jsx b/client/src/pages/SongBookViewer.jsx
index 0ccf07b208..fc88bc7ab9 100644
--- a/client/src/pages/SongBookViewer.jsx
+++ b/client/src/pages/SongBookViewer.jsx
@@ -944,7 +944,9 @@ export default function SongBookViewer() {
                   <Minus size={16} />
                 </button>
                 <span className="min-w-[3.5rem] text-center text-sm text-gray-300 font-mono" title="Transpose (semitones)" role="status" aria-live="polite" aria-atomic="true">
-                  Transpose {transpose > 0 ? `+${transpose}` : transpose} semitones
+                  <span className="sr-only">Transpose </span>
+                  <span>{transpose > 0 ? `+${transpose}` : transpose}</span>
+                  <span className="sr-only"> semitones</span>
                 </span>
                 <button type="button" onClick={() => setTranspose(transpose + 1)} className={ctrlBtnClass} aria-label={`Transpose up (currently ${transpose > 0 ? '+' : ''}${transpose} semitones)`} title="Transpose up (])">
                   <Plus size={16} />
diff --git a/client/src/pages/SongBookViewer.test.jsx b/client/src/pages/SongBookViewer.test.jsx
index b88133a9fb..622e2748da 100644
--- a/client/src/pages/SongBookViewer.test.jsx
+++ b/client/src/pages/SongBookViewer.test.jsx
@@ -377,6 +377,9 @@ E|--3-----|`;
       const statuses = screen.getAllByRole('status');
       expect(statuses.some((status) => status.textContent === 'Transpose 0 semitones')).toBe(true);
       expect(screen.getByRole('button', { name: /Transpose up \(currently 0 semitones\)/ })).toBeTruthy();
+      // Visible offset stays numeric-only so the control keeps its compact width (#5999).
+      const transposeStatus = statuses.find((status) => status.textContent === 'Transpose 0 semitones');
+      expect(transposeStatus.querySelector('span:not(.sr-only)').textContent).toBe('0');
 
       fireEvent.click(screen.getByRole('button', { name: /Transpose up \(currently 0/ }));
       expect(screen.getAllByRole('status').some((status) => status.textContent === 'Transpose +1 semitones')).toBe(true);