Incorrect screenreader output for grid columns

[ahmadzaheer-dev]

Forum post

Hello,

We've recently encountered an issue with using a screen reader on a Bryntum grid with locked columns. Given you have a grid that has some 'n' number of locked columns; then when navigating around the grid cells with a screen reader turned on; then the output incorrectly reads out the name of a column different to the one you are focused on. Usually offset by the number of locked columns.

In the attached video this is shown in the 'Pin Columns start/end' example grid where the readout is offset by one. Plus it shows another grid we quickly made that has multiple locked columns and the readout is offset by 3. In these examples we are using MacOS VoiceOver in Chrome.

Please can you assist us and let us know if this seems like a Bryntum issue.
Thanks.

Regards, Suleman

Screen.Recording.2026-09-09.at.13.10.35.mov

[zenbanbryntum]

[Automated Video Transcription]

Video Analysis (automated)

Video Analysis: Incorrect screen-reader column readout with locked/pinned columns

Source: Issue body
Duration: 96.7s | Frames analyzed: 96 (1 fps) + targeted crops

The video shows two separate grids, each demonstrating the same underlying bug: when a cell is focused via keyboard while VoiceOver is on, the caption panel announces the name of a column that is offset from the actually-focused column by exactly the number of columns locked/pinned to the start of the grid.

Scenario 1 — "Pin columns start/end" Bryntum Grid example (offset = 1)

Columns, left to right: Product (locked/pinned start — shown in its own rounded, shadowed panel) | January | February | March | April | May | June (normal/scrollable) | Total units (locked/pinned end — own rounded, shadowed panel). So there is exactly 1 locked column at the start (Product) and 1 locked column at the end (Total units).

1. (~0–27s) Page loads on the "Pin columns start/end" demo. Mouse moves around; no VoiceOver yet.

2. (~33s) The macOS Accessibility shortcut menu is opened and VoiceOver is switched ON.

3. (~36–38s) Keyboard focus (visible focus ring) lands on the BMW / January cell (value "85", red down arrow) — the actually-focused column is January (2nd column overall). The VoiceOver caption panel reads:

   "Product column. SPACE for context menu, ENTER to sort 85, Product column. SPACE for context menu, ENTER to sort column 1 of 14"

   VoiceOver announces "Product" (column 1) and "column 1 of 14", while the actually-focused cell is in the January column (column 2). Offset = 1.

4. (~42s) Focus moves right one cell to BMW / February (value "430"). Caption reads:

   "January column. SPACE for context menu, ENTER to sort 430, January column. SPACE for context menu, ENTER to sort column 2 of 14"

   Announces "January" (column 2) while actual focus is February (column 3). Offset = 1.

5. (~50s) Focus moves right to BMW / May (value "460"). Caption reads:

   "April column. SPACE for context menu, ENTER to sort 460, April column. SPACE for context menu, ENTER to sort column 5 of 14"

   Announces "April" (column 5) while actual focus is May (column 6). Offset = 1.

6. (~55s) Focus returns to the BMW / January cell ("85"). Caption again reads "Product column ... column 1 of 14" — same offset-by-1 pattern reproduced a second time.

7. (~60s) VoiceOver is switched off ("VoiceOver off" caption); end of scenario 1.

Scenario 2 — Custom test grid with 3 locked start columns (offset = 3)

This is an ad-hoc grid the reporter built to demonstrate the pattern scales with the locked-column count. Columns, left to right: [unlabeled row-selection checkbox column] | Locked A | Locked B | Normal C | Normal D | Normal E | Right F. The checkbox column, Locked A, and Locked B all share the same shaded/gray header background as Right F (confirmed via cropped close-up), indicating 3 columns locked to the start (checkbox, Locked A, Locked B) and 1 column locked to the end (Right F); Normal C/D/E are the unlocked/scrollable columns.

8. (~78s) The macOS "Welcome to VoiceOver" dialog appears — VoiceOver is being turned on for this second grid.

9. (~80–82s) Keyboard focus (visible focus ring) lands on the row 1 / Normal C cell ("c1") — actually-focused column is Normal C, the 4th column overall. Caption reads:

   "Toggle selection of entire dataset c1, Toggle selection of entire dataset column 1 of 7"

   VoiceOver announces the row-selection checkbox header ("Toggle selection of entire dataset", column 1) while the actual focus is column 4 (Normal C). Offset = 3.

10. (~85s) Focus moves right to row 1 / Normal D ("d1") — actually-focused column is Normal D, the 5th column overall. Caption reads:

    "Locked A column. SPACE for context menu, ENTER to sort d1, Locked A column. SPACE for context menu, ENTER to sort column 2 of 7"

    Announces "Locked A" (column 2) while actual focus is column 5 (Normal D). Offset = 3.

11. (~88–90s) Focus moves right to row 1 / Normal E ("e1") — VoiceOver is switched off at this same moment ("VoiceOver off" caption), ending the demonstration before a third readout at this cell could be captured. The offset-by-3 pattern is already firmly established by steps 9–10.

12. (~92–96s) VoiceOver remains off; a row is briefly highlighted via mouse, then the video ends.

Observed Result

With N columns locked/pinned to the start of the grid, VoiceOver's announced column name (and its "column X of Y" position) is consistently N columns behind the column that visually has keyboard focus. Confirmed at N=1 (Pin Columns start/end demo) and N=3 (custom multi-locked-column grid), in both cases reproduced across multiple consecutive navigation steps.

Expected Result

VoiceOver should announce the name/position of the column that actually holds keyboard focus, regardless of how many columns are locked/pinned to the start of the grid.

Key Observations

• Product: Bryntum Grid
• Affects: keyboard navigation + ARIA/accessibility attributes for cells within the horizontally-locked/pinned-columns region (locked start region specifically — the video does not show a similar issue for the single end-locked column, "Total units"/"Right F", since navigation never landed there while VoiceOver was on)
• The offset exactly equals the number of columns locked to the start, suggesting the ARIA column-index attribute assigned to cells in the scrollable/normal region is not accounting for the locked-start columns' contribution to the overall column index.
• Reproduced identically in two independent grids (a stock demo and an ad-hoc test grid), confirming it is a systemic column-indexing issue rather being specific to one dataset/config.
• Environment: macOS VoiceOver, Chrome (per issue report).

[zenbanbryntum]

Automated video transcription (frames extracted from the attached video)

The attached screen recording (3768cfcf-47f4-42c7-8e84-20e248645fc0, QuickTime/H.264, 2970x1448, 96.7 s) was decoded frame-by-frame and the frames were inspected visually. Everything below is read directly off the pixels — the macOS VoiceOver caption panel is visible on screen for the whole VoiceOver part of the recording, so the announcements are quoted verbatim from it. Nothing is inferred from audio (audio was not transcribed).

---

Environment shown

• macOS, Google Chrome. Window title read out by VoiceOver at 01:17: Voice over issue repro - Google Chrome – Peter (Certinia).
• VoiceOver is enabled from System Settings → Accessibility → Vision → VoiceOver (visible at 00:34 and 01:14).
• VoiceOver's caption panel is on, which is why every announcement is legible on screen.
• No devtools / accessibility inspector is ever opened in the video. There is therefore no on-screen evidence of aria-colindex, aria-describedby or aria-labelledby values — only the resulting VoiceOver output.

---

Part 1 — Bryntum Grid demo "Pin columns start/end" (dark theme), 00:00 – 01:05

Layout as rendered:

#	Column	Section
1	Product	locked / pinned at start
2	January	normal (scrollable)
3	February	normal
4	March	normal
5	April	normal
6	May	normal
7	June	normal
…	(July…December, scrolled out of view)	normal
14	Total units	locked / pinned at end

VoiceOver reports the grid as having 14 columns (… column N of 14), which matches Product + 12 months + Total units. So the total is right; only the index → header mapping is wrong.
Locked columns at start: 1 (Product).

Numbered reproduction (all navigation happens on the first data row, BMW):

1. 00:00 – 00:33 — "Pin columns start/end" demo is open, no keyboard focus in the grid. Mouse moves over the Product and January headers (hover sort arrows appear). Nothing else happens.
2. 00:34 — macOS "Welcome to VoiceOver" dialog appears (VoiceOver has just been switched on); the user dismisses it with Use VoiceOver.
3. 00:36 — Focused cell: row BMW / column January (value 85). Caption: 85 ⍰, cell 2 items (the ⍰ is a missing-glyph box, i.e. the trend-arrow icon character). No column name yet.
4. 00:37.5 — Focus moves right to row BMW / column February (value 430).
   Caption (verbatim):
   January column. SPACE for context menu, ENTER to sort 430, January column. SPACE for context menu, ENTER to sort column 2 of 14
   → Expected February (column 3). Announced January, "column 2 of 14". Offset: −1 position.
5. 00:38 – 00:41 — Focus back on BMW / January (85), caption again 85 ⍰, cell 2 items.
6. 00:41.5 – 00:44 — Focus on BMW / February (430) again; same wrong announcement as step 4 (January column … column 2 of 14). → offset −1.
7. 00:44.5 — Focus on BMW / January (85).
   Caption: Product column. SPACE for context menu, ENTER to sort 85, Product column. SPACE for context menu, ENTER to sort column 1 of 14
   → Expected January (column 2). Announced Product, "column 1 of 14". Offset: −1.
8. 00:47 – 00:49.5 — Focus on BMW / March (440).
   Caption: February column. SPACE for context menu, ENTER to sort 440, February column. SPACE for context menu, ENTER to sort column 3 of 14
   → Expected March (column 4). Announced February, "column 3 of 14". Offset: −1.
9. 00:50 – 00:51 — Focus on BMW / May (460).
   Caption: April column. SPACE for context menu, ENTER to sort 460, April column. SPACE for context menu, ENTER to sort column 5 of 14
   → Expected May (column 6). Announced April, "column 5 of 14". Offset: −1.
   (The April cell itself was passed through between two sampled frames, so its announcement is not captured — the frames only show March then May.)
10. 00:51.5 – 00:52.5 — Focus on BMW / June (470).
    Caption: May column. SPACE for context menu, ENTER to sort 470, May column. SPACE for context menu, ENTER to sort column 6 of 14
    → Expected June (column 7). Announced May, "column 6 of 14". Offset: −1.
11. 00:53 — Focus back on BMW / February; caption again January column … column 2 of 14 (offset −1).
12. 00:53.5 – 00:62 — Focus back on BMW / January; caption again Product column … column 1 of 14 (offset −1).
13. 01:00 — Caption: VoiceOver off. Focus outline stays on January until it is dropped at ~01:02.5.
14. 01:05 — Chrome switches tab (a Chrome tab hover-card reading Memory usage: 100 MB is briefly visible); the second page appears.

Part 1 result: every announcement names the column exactly one position to the left of the focused one, i.e. shifted by the number of start-locked columns (1). The reported index is also short by 1, while the reported total (14) is correct.

---

Part 2 — reporter's own repro page "Voice over issue repro" (light theme), 01:05 – 01:36

Layout as rendered (single grid filling the window, two rows a1…f1 and a2…f2; row 1 is selected/checked; Normal D shows an ascending sort arrow):

#	Column (header text)	Section
1	(empty header — selection checkbox column; VoiceOver calls it Toggle selection of entire dataset)	locked / pinned at start
2	Locked A	locked at start
3	Locked B	locked at start
4	Normal C	normal (scrollable)
5	Normal D	normal
6	Normal E	normal
7	Right F	locked / pinned at end

Sub-grid dividers are clearly visible after Locked B and before Right F.
Locked columns at start: 3 (checkbox column + Locked A + Locked B). VoiceOver reports 7 columns total (… column N of 7), which is correct.

15. 01:12 – 01:14 — System Settings → Accessibility panel is opened and the VoiceOver checkbox is ticked.
16. 01:17 — Caption: VoiceOver on Chrome, Voice over issue repro - Google Chrome – Peter (Certinia), window c1, has keyboard focus. Focused cell: row 1 / column Normal C (c1).
17. 01:18.5 — Focus moves right to row 1 / column Normal D (d1).
    Caption (verbatim):
    Locked A column. SPACE for context menu, ENTER to sort d1, Locked A column. SPACE for context menu, ENTER to sort column 2 of 7
    → Expected Normal D (column 5). Announced Locked A, "column 2 of 7". Offset: −3 positions.
18. 01:19 – 01:24.7 — Focus back on row 1 / column Normal C (c1).
    Caption: Toggle selection of entire dataset c1, Toggle selection of entire dataset column 1 of 7
    → Expected Normal C (column 4). Announced the selection-checkbox column, "column 1 of 7". Offset: −3.
19. 01:25.2 – 01:25.7 — Focus on row 1 / column Normal D (d1) again; caption again Locked A column … column 2 of 7 (offset −3).
20. 01:26.2 – 01:28.3 — Focus moves right to row 1 / column Normal E (e1).
    Caption: Locked B column. SPACE for context menu, ENTER to sort e1, Locked B column. SPACE for context menu, ENTER to sort column 3 of 7
    → Expected Normal E (column 6). Announced Locked B, "column 3 of 7". Offset: −3.
    (At 01:26.2 the caption still shows the previous Locked A … d1 utterance while e1 is already focused; the Locked B caption appears at 01:27.3.)
21. 01:28.8 — Caption: VoiceOver off. Focus outline on e1 is dropped at ~01:31. Remaining frames to 01:36 show the idle grid with no focus and no caption.

Part 2 result: every announcement names the column exactly three positions to the left of the focused one — again exactly the number of start-locked columns (3).

---

Summary of the measured offset

Grid	Start-locked columns	Focused column (grid position)	Announced column (and index)	Offset
Pin columns start/end	1	January (2)	Product — "column 1 of 14"	−1
Pin columns start/end	1	February (3)	January — "column 2 of 14"	−1
Pin columns start/end	1	March (4)	February — "column 3 of 14"	−1
Pin columns start/end	1	May (6)	April — "column 5 of 14"	−1
Pin columns start/end	1	June (7)	May — "column 6 of 14"	−1
Repro page	3	Normal C (4)	checkbox column ("Toggle selection of entire dataset") — "column 1 of 7"	−3
Repro page	3	Normal D (5)	Locked A — "column 2 of 7"	−3
Repro page	3	Normal E (6)	Locked B — "column 3 of 7"	−3

In every observed case the announced index equals the cell's position inside its own sub-grid (1-based within the normal/scrollable region), while the announced total is the grid-wide column count. The screen reader then resolves the header name from the grid-wide column list at that (too small) index, which is why the announced header is the one N positions to the left, N = number of start-locked columns.

---

What could NOT be determined from the frames

• No devtools/inspector is opened in the video, so the actual DOM attribute values (aria-colindex, aria-describedby, aria-labelledby, role) are not visible anywhere and are not reported above.
• The April cell in Part 1 and any cells passed through faster than the frame sampling interval (0.5 s) may have produced announcements that are not captured here.
• Whether a cell in the end-locked section (Total units, Right F) is announced correctly was never demonstrated — focus never entered those columns in the video.
• No header-row (column-header) navigation was demonstrated; all announcements are for data cells on the first row.
• The exact Bryntum Grid version / build used on the repro page is not shown on screen.
• One caption glyph is an unrenderable box (85 ⍰, cell 2 items) — reported as-is rather than guessed.

(Transcript produced automatically by extracting and visually inspecting frames from the attached video; VoiceOver captions quoted from the on-screen caption panel.)