Positioning

The Widget is a floating tab that opens into a panel. You choose where the tab first appears using the initialPosition prop. Users can then drag the tab to a different spot; that position is kept for the rest of the session. This page explains the position options and how to configure them.

Position options

initialPosition accepts one of six values that combine vertical placement (top, center, or bottom) with side (left or right):

• bottom-right — Tab at the bottom on the right (default in many layouts).
• center-right — Tab vertically centered on the right (default).
• top-right — Tab at the top on the right.
• bottom-left — Tab at the bottom on the left.
• center-left — Tab vertically centered on the left.
• top-left — Tab at the top on the left.

The default is center-right. Pass a different value when you mount the Widget if you want it to start elsewhere (e.g. to avoid overlapping a fixed header or to match your layout).

Setting the initial position

Pass initialPosition to AccessibilityWidget when you render it. The tab is placed at the chosen corner or edge with a small offset so it doesn’t sit flush against the viewport. The panel opens next to the tab and stays on screen; vertical position is constrained so the open panel doesn’t go off the top or bottom.

import { AccessibilityWidget } from "@accesskit/react";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <AccessibilityWidget initialPosition="bottom-right" />
    </>
  );
}

User repositioning

Users can drag the tab to move it. The new position is kept while they stay on the page. If you need the tab to always start in the same place, set initialPosition; the drag only affects the current session and does not change the default for the next load.

For the full list of Widget props, including initialPosition, see Configuration. For the TypeScript type used for position values, see the TypeScript page (AccessKitPosition).