otakustay · Shipy4kaRU · Feb 21, 2026
diff --git a/site/components/DiffView/index.tsx b/site/components/DiffView/index.tsx
@@ -227,6 +227,7 @@ export default function DiffView(props: Props) {
 
     return (
         <Diff
+            accessibility="screen-reader"
             optimizeSelection
             viewType={viewType}
             diffType={type}

diff --git a/src/Diff/index.tsx b/src/Diff/index.tsx
@@ -6,6 +6,7 @@ import {
     GutterType,
     Provider,
     ViewType,
+    AccessibilityType,
     RenderToken,
     RenderGutter,
     DEFAULT_CONTEXT_VALUE,
@@ -19,6 +20,8 @@ export type DiffType = 'add' | 'delete' | 'modify' | 'rename' | 'copy';
 export interface DiffProps {
     diffType: DiffType;
     hunks: HunkData[];
+    tableAriaLabel?: string;
+    accessibility?: AccessibilityType;
     viewType?: ViewType;
     gutterType?: GutterType;
     generateAnchorID?: (change: ChangeData) => string | undefined;
@@ -67,6 +70,8 @@ function Diff(props: DiffProps) {
     const {
         diffType,
         hunks,
+        tableAriaLabel,
+        accessibility,
         optimizeSelection,
         className,
         hunkClassName = DEFAULT_CONTEXT_VALUE.hunkClassName,
@@ -158,6 +163,7 @@ function Diff(props: DiffProps) {
     const settingsContextValue = useMemo(
         (): ContextProps => {
             return {
+                accessibility,
                 hunkClassName,
                 lineClassName,
                 generateLineClassName,
@@ -178,6 +184,7 @@ function Diff(props: DiffProps) {
             };
         },
         [
+            accessibility,
             codeClassName,
             codeEvents,
             generateAnchorID,
@@ -204,6 +211,7 @@ function Diff(props: DiffProps) {
                 ref={root}
                 className={classNames('diff', `diff-${viewType}`, className)}
                 onMouseDown={onTableMouseDown}
+                aria-label={tableAriaLabel}
             >
                 {cols}
                 {children(hunks)}

diff --git a/src/Hunk/CodeCell.tsx b/src/Hunk/CodeCell.tsx
@@ -48,16 +48,23 @@ export interface CodeCellProps extends HTMLAttributes<HTMLTableCellElement> {
     text: string;
     tokens: TokenNode[] | null;
     renderToken: RenderToken | undefined;
+    screenReaderLabel?: string;
 }
 
 function CodeCell(props: CodeCellProps) {
-    const {changeKey, text, tokens, renderToken, ...attributes} = props;
+    const {changeKey, text, tokens, renderToken, screenReaderLabel, ...attributes} = props;
     const actualRenderToken: DefaultRenderToken = renderToken
         ? (token, i) => renderToken(token, defaultRenderToken, i)
         : defaultRenderToken;
+    const srId = screenReaderLabel ? `diff-sr-${changeKey}` : undefined;
 
     return (
-        <td {...attributes} data-change-key={changeKey}>
+        <td {...attributes} data-change-key={changeKey} {...(srId && {'aria-labelledby': srId})}>
+            {screenReaderLabel && (
+                <span id={srId} className="diff-sr-only">
+                    {screenReaderLabel}
+                </span>
+            )}
             {
                 tokens
                     ? (isEmptyToken(tokens) ? ' ' : tokens.map(actualRenderToken))

diff --git a/src/Hunk/SplitHunk/SplitChange.tsx b/src/Hunk/SplitHunk/SplitChange.tsx
@@ -4,10 +4,11 @@ import {mapValues} from 'lodash';
 import {ChangeData, getChangeKey} from '../../utils';
 import {TokenNode} from '../../tokenize';
 import {Side} from '../../interface';
-import {RenderToken, RenderGutter, GutterOptions, EventMap, NativeEventMap} from '../../context';
+import {RenderToken, RenderGutter, GutterOptions, EventMap, NativeEventMap, AccessibilityType} from '../../context';
 import {ChangeSharedProps} from '../interface';
 import CodeCell from '../CodeCell';
 import {composeCallback, renderDefaultBy, wrapInAnchorBy} from '../utils';
+import {getGutterAriaLabel, getCodeCellAriaLabel} from '../accessibility';
 
 const SIDE_OLD = 0;
 const SIDE_NEW = 1;
@@ -33,24 +34,53 @@ function useCallbackOnSide(side: Side, setHover: SetHover, change: ChangeData |
 }
 
 interface RenderCellArgs {
-    change: ChangeData | null;
-    side: typeof SIDE_OLD | typeof SIDE_NEW;
-    selected: boolean;
-    tokens: TokenNode[] | null;
-    gutterClassName: string;
-    codeClassName: string;
-    gutterEvents: NativeEventMap;
-    codeEvents: NativeEventMap;
-    anchorID: string | null | undefined;
-    gutterAnchor: boolean;
-    gutterAnchorTarget: string | null | undefined;
-    hideGutter: boolean;
-    hover: boolean;
-    renderToken: RenderToken | undefined;
-    renderGutter: RenderGutter;
+  change: ChangeData | null;
+  side: typeof SIDE_OLD | typeof SIDE_NEW;
+  selected: boolean;
+  tokens: TokenNode[] | null;
+  gutterClassName: string;
+  codeClassName: string;
+  gutterEvents: NativeEventMap;
+  codeEvents: NativeEventMap;
+  anchorID: string | null | undefined;
+  gutterAnchor: boolean;
+  gutterAnchorTarget: string | null | undefined;
+  hideGutter: boolean;
+  hover: boolean;
+  renderToken: RenderToken | undefined;
+  renderGutter: RenderGutter;
+  accessibility?: AccessibilityType;
 }
 
-function renderCells(args: RenderCellArgs) {
+type SideName = 'old' | 'new';
+
+function getSideName(side: typeof SIDE_OLD | typeof SIDE_NEW): SideName {
+    return side === SIDE_OLD ? 'old' : 'new';
+}
+
+function getOmitCodeAriaLabel(
+    accessibility: RenderCellArgs['accessibility'],
+    sideName: SideName
+): string | undefined {
+    if (accessibility !== 'screen-reader') {
+        return undefined;
+    }
+    return sideName === 'old' ? 'Not in old version' : 'Not in new version';
+}
+
+function renderOmitCells(args: RenderCellArgs): Array<JSX.Element | false> {
+    const {hideGutter, gutterClassName, codeClassName, accessibility, side} = args;
+    const gutterClassNameValue = classNames('diff-gutter', 'diff-gutter-omit', gutterClassName);
+    const codeClassNameValue = classNames('diff-code', 'diff-code-omit', codeClassName);
+    const codeAriaLabel = getOmitCodeAriaLabel(accessibility, getSideName(side));
+
+    return [
+        !hideGutter && <td key="gutter" className={gutterClassNameValue} />,
+        <td key="code" className={codeClassNameValue} aria-label={codeAriaLabel} />,
+    ];
+}
+
+function renderChangeCells(args: RenderCellArgs & {change: ChangeData}): Array<JSX.Element | false> {
     const {
         change,
         side,
@@ -67,21 +97,12 @@ function renderCells(args: RenderCellArgs) {
         hover,
         renderToken,
         renderGutter,
+        accessibility,
     } = args;
 
-    if (!change) {
-        const gutterClassNameValue = classNames('diff-gutter', 'diff-gutter-omit', gutterClassName);
-        const codeClassNameValue = classNames('diff-code', 'diff-code-omit', codeClassName);
-
-        return [
-            !hideGutter && <td key="gutter" className={gutterClassNameValue} />,
-            <td key="code" className={codeClassNameValue} />,
-        ];
-    }
-
+    const sideName = getSideName(side);
     const {type, content} = change;
     const changeKey = getChangeKey(change);
-    const sideName = side === SIDE_OLD ? 'old' : 'new';
     const gutterClassNameValue = classNames(
         'diff-gutter',
         `diff-gutter-${type}`,
@@ -98,12 +119,16 @@ function renderCells(args: RenderCellArgs) {
         renderDefault: renderDefaultBy(change, sideName),
         wrapInAnchor: wrapInAnchorBy(gutterAnchor, gutterAnchorTarget),
     };
+    const gutterAriaLabel
+        = accessibility === 'screen-reader' ? getGutterAriaLabel(change, sideName) : undefined;
     const gutterProps = {
         id: anchorID || undefined,
         className: gutterClassNameValue,
         children: renderGutter(gutterOptions),
         ...gutterEvents,
+        ...(gutterAriaLabel && {'aria-label': gutterAriaLabel}),
     };
+
     const codeClassNameValue = classNames(
         'diff-code',
         `diff-code-${type}`,
@@ -113,6 +138,8 @@ function renderCells(args: RenderCellArgs) {
         },
         codeClassName
     );
+    const codeAriaLabel
+        = accessibility === 'screen-reader' ? getCodeCellAriaLabel(change) : undefined;
 
     return [
         !hideGutter && <td key="gutter" {...gutterProps} data-change-key={changeKey} />,
@@ -123,20 +150,28 @@ function renderCells(args: RenderCellArgs) {
             text={content}
             tokens={tokens}
             renderToken={renderToken}
+            screenReaderLabel={codeAriaLabel}
             {...codeEvents}
         />,
     ];
 }
 
+function renderCells(args: RenderCellArgs): Array<JSX.Element | false> {
+    if (!args.change) {
+        return renderOmitCells(args);
+    }
+    return renderChangeCells(args as RenderCellArgs & {change: ChangeData});
+}
+
 interface SplitChangeProps extends ChangeSharedProps {
-    className: string;
-    oldChange: ChangeData | null;
-    newChange: ChangeData | null;
-    oldSelected: boolean;
-    newSelected: boolean;
-    oldTokens: TokenNode[] | null;
-    newTokens: TokenNode[] | null;
-    monotonous: boolean;
+  className: string;
+  oldChange: ChangeData | null;
+  newChange: ChangeData | null;
+  oldSelected: boolean;
+  newSelected: boolean;
+  oldTokens: TokenNode[] | null;
+  newTokens: TokenNode[] | null;
+  monotonous: boolean;
 }
 
 function SplitChange(props: SplitChangeProps) {
@@ -159,6 +194,7 @@ function SplitChange(props: SplitChangeProps) {
         gutterAnchor,
         renderToken,
         renderGutter,
+        accessibility,
     } = props;
 
     const [hover, setHover] = useState('');
@@ -183,6 +219,7 @@ function SplitChange(props: SplitChangeProps) {
         codeEvents,
         renderToken,
         renderGutter,
+        accessibility,
     };
     const oldArgs: RenderCellArgs = {
         ...commons,

diff --git a/src/Hunk/UnifiedHunk/UnifiedChange.tsx b/src/Hunk/UnifiedHunk/UnifiedChange.tsx
@@ -8,6 +8,7 @@ import {ChangeEventArgs, EventMap, GutterOptions, NativeEventMap, RenderGutter}
 import {ChangeSharedProps} from '../interface';
 import CodeCell from '../CodeCell';
 import {composeCallback, renderDefaultBy, wrapInAnchorBy} from '../utils';
+import {getGutterAriaLabel, getCodeCellAriaLabel} from '../accessibility';
 
 interface UnifiedChangeProps extends ChangeSharedProps {
     change: ChangeData;
@@ -44,7 +45,8 @@ function renderGutterCell(
     anchorTarget: string | undefined,
     events: NativeEventMap,
     inHoverState: boolean,
-    renderGutter: RenderGutter
+    renderGutter: RenderGutter,
+    gutterAriaLabel?: string
 ) {
     const gutterOptions: GutterOptions = {
         change,
@@ -55,7 +57,12 @@ function renderGutterCell(
     };
 
     return (
-        <td className={className} {...events} data-change-key={changeKey}>
+        <td
+            className={className}
+            {...events}
+            data-change-key={changeKey}
+            {...(gutterAriaLabel && {'aria-label': gutterAriaLabel})}
+        >
             {renderGutter(gutterOptions)}
         </td>
     );
@@ -77,6 +84,7 @@ function UnifiedChange(props: UnifiedChangeProps) {
         generateAnchorID,
         renderToken,
         renderGutter,
+        accessibility,
     } = props;
     const {type, content} = change;
     const changeKey = getChangeKey(change);
@@ -117,7 +125,8 @@ function UnifiedChange(props: UnifiedChangeProps) {
                     anchorID,
                     boundGutterEvents,
                     hover,
-                    renderGutter
+                    renderGutter,
+                    accessibility === 'screen-reader' ? getGutterAriaLabel(change, 'old') : undefined
                 )
             }
             {
@@ -130,7 +139,8 @@ function UnifiedChange(props: UnifiedChangeProps) {
                     anchorID,
                     boundGutterEvents,
                     hover,
-                    renderGutter
+                    renderGutter,
+                    accessibility === 'screen-reader' ? getGutterAriaLabel(change, 'new') : undefined
                 )
             }
             <CodeCell
@@ -139,6 +149,7 @@ function UnifiedChange(props: UnifiedChangeProps) {
                 text={content}
                 tokens={tokens}
                 renderToken={renderToken}
+                screenReaderLabel={accessibility === 'screen-reader' ? getCodeCellAriaLabel(change) : undefined}
                 {...boundCodeEvents}
             />
         </tr>

diff --git a/src/Hunk/accessibility.ts b/src/Hunk/accessibility.ts
@@ -0,0 +1,44 @@
+import {
+    computeOldLineNumber,
+    computeNewLineNumber,
+    isDelete,
+    isInsert,
+} from '../utils';
+import type {ChangeData} from '../utils';
+import type {Side} from '../interface';
+
+export function getGutterAriaLabel(change: ChangeData, side: Side): string {
+    const oldNum = computeOldLineNumber(change);
+    const newNum = computeNewLineNumber(change);
+
+    if (side === 'old') {
+        if (oldNum === -1) {
+            return 'Not in old version';
+        }
+        if (isDelete(change)) {
+            return `Deleted line ${oldNum}`;
+        }
+        return `Old line ${oldNum}`;
+    }
+
+    if (newNum === -1) {
+        return 'Not in new version';
+    }
+    if (isInsert(change)) {
+        return `Added line ${newNum}`;
+    }
+    return `New line ${newNum}`;
+}
+
+export function getCodeCellAriaLabel(change: ChangeData): string {
+    const oldNum = computeOldLineNumber(change);
+    const newNum = computeNewLineNumber(change);
+
+    if (isInsert(change)) {
+        return `Added line ${newNum}`;
+    }
+    if (isDelete(change)) {
+        return `Deleted line ${oldNum}`;
+    }
+    return `Line ${newNum} unchanged`;
+}