Accessibility - rahulpandita/react-term GitHub Wiki

react-term includes a built-in accessibility layer that maintains a parallel DOM alongside the canvas, allowing screen readers and assistive technologies to navigate terminal content.

AccessibilityManager is instantiated by WebTerminal and updated on every terminal flush. It operates entirely outside the visual rendering path.

A visually hidden role="grid" element mirrors the full terminal viewport:

(div
  role="grid"
  aria-label="Terminal"
  style="position:absolute; clip:rect(0 0 0 0); opacity:0; pointer-events:none;"
)
  (div role="row")
    <span role="gridcell">ls -la</span>
    <span role="gridcell"> </span>
    
  (/div)
  
(/div)

The element is positioned absolutely with a zero-size clipping rect and opacity: 0 so it does not affect visual layout but remains traversable in the accessibility tree.

A separate role="log" / aria-live="polite" live region announces newly printed terminal output to screen readers without requiring keyboard focus on individual cells:

(div role="log" aria-live="polite" aria-atomic="false")
  
(/div)

Updates are throttled to 10 Hz (minimum 100 ms between flushes) via schedule() / flush(). This prevents flooding assistive technologies during high-frequency terminal output (progress bars, streaming logs) while keeping the accessibility tree reasonably current.

extractRowText(grid, row) converts a row of cell codepoints to a plain string for insertion into the parallel DOM.