docs: add Accessibility section to Split Layout

Document the keyboard and screen reader support for the split handle
added in vaadin/web-components#11964: slider semantics, keyboard
shortcuts, and the customizable separator label via the i18n property.
The Flow SplitLayoutI18n API (vaadin/flow-components#9694) is included
alongside the Lit and React examples.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: web-padawan

articles/components/split-layout/index.adoc

@@ -167,6 +167,71 @@ include::{root}/frontend/demo/component/splitlayout/react/split-layout-toggle.ts
 endif::[]
 --
 
+== [since:com.vaadin:vaadin@V25.3]#Accessibility#
+
+The split handle can be focused and operated with the keyboard, allowing users to resize the content areas without a pointing device. To assistive technologies, the handle is exposed as a slider (`role="slider"`). It announces the size of the primary content area as a percentage of the available space -- through `aria-valuenow` and `aria-valuetext` -- together with the layout's orientation, through `aria-orientation`.
+
+Clicking the handle moves focus to it, while dragging it leaves focus unchanged so as not to interrupt pointer interaction.
+
+When the handle has focus, it can be moved with the following keys:
+
+[cols="1,2"]
+|===
+|Shortcut |Function
+
+|kbd:[Right] / kbd:[Down]
+|Grows the primary content area by a small step.
+
+|kbd:[Left] / kbd:[Up]
+|Shrinks the primary content area by a small step.
+
+|kbd:[Page Down]
+|Grows the primary content area by a larger step.
+
+|kbd:[Page Up]
+|Shrinks the primary content area by a larger step.
+
+|kbd:[Home]
+|Collapses the primary content area.
+
+|kbd:[End]
+|Collapses the secondary content area.
+
+|===
+
+The arrow key directions are reversed automatically for right-to-left languages.
+
+The handle has a default accessible name, `Resize separator`, which can be customized:
+
+[.example]
+--
+ifdef::flow[]
+[source,java]
+----
+SplitLayout layout = new SplitLayout();
+
+SplitLayoutI18n i18n = new SplitLayoutI18n()
+        .setSeparator("Resize separator");
+layout.setI18n(i18n);
+----
+endif::[]
+
+ifdef::lit[]
+[source,html]
+----
+<vaadin-split-layout .i18n="${{ separator: 'Resize separator' }}"></vaadin-split-layout>
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+<SplitLayout i18n={{ separator: 'Resize separator' }} />
+----
+endif::[]
+--
+
+
 == Best Practices
 
 * Don't use Split Layout when either content area has, or should have, a fixed size.