diff --git a/next.config.ts b/next.config.ts
index 138669f..4e3abba 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -42,8 +42,6 @@ const nextConfig: NextConfig = {
     unoptimized: true,
   },
   ...(isStaticExport ? { output: "export" } : {}),
-  output: "export",
-  images: { unoptimized: true },
   devIndicators: false,
   ...(basePath ? { basePath, assetPrefix: basePath } : {}),
 };
diff --git a/playwright.config.ts b/playwright.config.ts
index a66a02d..962d51b 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -21,5 +21,13 @@ export default defineConfig({
     command: "npm run dev",
     url: "http://localhost:3000",
     reuseExistingServer: !process.env.CI,
+    env: {
+      // Routed to a same-origin path so table-accessibility.spec.ts can
+      // serve deterministic leaderboard data via page.route() instead of
+      // mocking the Soroban RPC/event-scan path the app falls back to
+      // when this is unset.
+      NEXT_PUBLIC_LEADERBOARD_API_URL:
+        "http://localhost:3000/__mock-leaderboard-api",
+    },
   },
 });
diff --git a/src/app/history/page.test.tsx b/src/app/history/page.test.tsx
new file mode 100644
index 0000000..451f9a8
--- /dev/null
+++ b/src/app/history/page.test.tsx
@@ -0,0 +1,131 @@
+import { render, screen, act } from "@testing-library/react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useStellarWallet } from "@/context/StellarWalletContext";
+import { ErrorProvider } from "@/context/ErrorContext";
+import HistoryPage from "./page";
+
+vi.mock("@/context/StellarWalletContext", () => ({
+  useStellarWallet: vi.fn(),
+}));
+
+vi.mock("@/config", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/config")>();
+  return { ...actual, poolContractId: "CPOOLCONTRACTID" };
+});
+
+vi.mock("@/lib/soroban", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/soroban")>();
+  return { ...actual, getUserTransactionHistory: vi.fn() };
+});
+
+const { getUserTransactionHistory } = await import("@/lib/soroban");
+const getUserTransactionHistoryMock = vi.mocked(getUserTransactionHistory);
+const useStellarWalletMock = vi.mocked(useStellarWallet);
+
+const connectedWallet = {
+  publicKey: "GA3CD2PYXOQCXW7ZVQW3MOA3JFZCE4F4IG2FD66I55TQASPCNKYYEFRN",
+  walletApi: null,
+  networkName: "TESTNET",
+  isNetworkMismatch: false,
+  isConnected: true,
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+};
+
+function historyEntry(i: number) {
+  return {
+    date: new Date(2024, 0, i + 1).toISOString(),
+    action: (i % 2 === 0 ? "lock" : "unlock") as "lock" | "unlock",
+    amount: "10000000",
+    symbol: "XLM",
+    poolId: "pool-1",
+    creditsEarned: "5",
+    txHash: `hash-${i}`,
+  };
+}
+
+function renderPage() {
+  return render(
+    <ChakraProvider>
+      <ErrorProvider>
+        <HistoryPage />
+      </ErrorProvider>
+    </ChakraProvider>,
+  );
+}
+
+function liveRegionText() {
+  return screen.getByRole("status").textContent;
+}
+
+beforeEach(() => {
+  getUserTransactionHistoryMock.mockReset();
+  useStellarWalletMock.mockReturnValue(connectedWallet);
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("HistoryPage accessible live-refresh announcements (#86)", () => {
+  it("does not announce anything while disconnected", async () => {
+    useStellarWalletMock.mockReturnValue({
+      ...connectedWallet,
+      publicKey: null,
+      isConnected: false,
+    });
+
+    await act(async () => {
+      renderPage();
+    });
+
+    expect(liveRegionText()).toBe("");
+  });
+
+  it("announces the loaded range once history resolves", async () => {
+    getUserTransactionHistoryMock.mockResolvedValue(
+      Array.from({ length: 5 }, (_, i) => historyEntry(i)),
+    );
+
+    await act(async () => {
+      renderPage();
+    });
+
+    expect(liveRegionText()).toBe(
+      "History updated, showing 1-5 of 5 transactions.",
+    );
+  });
+
+  it("announces 'No farming history found' rather than staying silent on zero entries", async () => {
+    getUserTransactionHistoryMock.mockResolvedValue([]);
+
+    await act(async () => {
+      renderPage();
+    });
+
+    expect(liveRegionText()).toBe("No farming history found.");
+  });
+
+  it("computes the correct upper bound on a partial final page", async () => {
+    // PAGE_SIZE is 20; 45 entries means the last page holds 5, not 20.
+    getUserTransactionHistoryMock.mockResolvedValue(
+      Array.from({ length: 45 }, (_, i) => historyEntry(i)),
+    );
+
+    await act(async () => {
+      renderPage();
+    });
+    expect(liveRegionText()).toBe(
+      "History updated, showing 1-20 of 45 transactions.",
+    );
+
+    await act(async () => {
+      screen.getByRole("button", { name: "3" }).click();
+    });
+
+    expect(liveRegionText()).toBe(
+      "History updated, showing 41-45 of 45 transactions.",
+    );
+  });
+});
diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx
index 1949359..4abb65c 100644
--- a/src/app/history/page.tsx
+++ b/src/app/history/page.tsx
@@ -20,6 +20,8 @@ import {
 } from "@chakra-ui/react";
 import { useStellarWallet } from "@/context/StellarWalletContext";
 import ConnectWalletButton from "@/components/ConnectWalletButton/ConnectWalletButton";
+import LiveRegion from "@/components/LiveRegion/LiveRegion";
+import { useLiveAnnouncer } from "@/hooks/useLiveAnnouncer";
 import {
   getUserTransactionHistory,
   stellarExpertTxUrl,
@@ -88,8 +90,19 @@ export default function HistoryPage() {
   const totalPages = Math.max(1, Math.ceil(entries.length / PAGE_SIZE));
   const paged = entries.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
 
+  const rangeStart = entries.length === 0 ? 0 : (page - 1) * PAGE_SIZE + 1;
+  const rangeEnd = Math.min(page * PAGE_SIZE, entries.length);
+  const announcementMessage =
+    !isConnected || isLoading
+      ? ""
+      : entries.length === 0
+        ? "No farming history found."
+        : `History updated, showing ${rangeStart}-${rangeEnd} of ${entries.length.toLocaleString()} transactions.`;
+  const announcement = useLiveAnnouncer(announcementMessage);
+
   return (
     <Flex direction="column" align="center" px={{ base: 6, md: 16 }} py={10} gap={2}>
+      <LiveRegion message={announcement} />
       <Box w="100%" maxW="1000px" mb={4}>
         <HStack spacing={2} mb={5}>
           <Box w="6px" h="6px" borderRadius="full" bg="app.accent" boxShadow="0 0 8px var(--chakra-colors-app-accent)" />
diff --git a/src/app/leaderboard/page.test.tsx b/src/app/leaderboard/page.test.tsx
new file mode 100644
index 0000000..0c5a013
--- /dev/null
+++ b/src/app/leaderboard/page.test.tsx
@@ -0,0 +1,188 @@
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useStellarWallet } from "@/context/StellarWalletContext";
+import LeaderboardPage from "./page";
+
+vi.mock("@/context/StellarWalletContext", () => ({
+  useStellarWallet: vi.fn(),
+}));
+
+vi.mock("@/lib/soroban", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/soroban")>();
+  return {
+    ...actual,
+    sorobanService: { ...actual.sorobanService, getLeaderboard: vi.fn() },
+  };
+});
+
+const { sorobanService } = await import("@/lib/soroban");
+const getLeaderboardMock = vi.mocked(sorobanService.getLeaderboard);
+const useStellarWalletMock = vi.mocked(useStellarWallet);
+
+function entry(i: number) {
+  return {
+    address: `GADDRESS${i}${"X".repeat(48)}`.slice(0, 56),
+    totalCredits: 1000 - i,
+    totalStake: 500 - i,
+    boostUtilization: 10,
+  };
+}
+
+function renderPage() {
+  return render(
+    <ChakraProvider>
+      <LeaderboardPage />
+    </ChakraProvider>,
+  );
+}
+
+function liveRegionText() {
+  return screen.getByRole("status").textContent;
+}
+
+beforeEach(() => {
+  getLeaderboardMock.mockReset();
+  useStellarWalletMock.mockReturnValue({
+    publicKey: null,
+    walletApi: null,
+    networkName: "TESTNET",
+    isNetworkMismatch: false,
+    isConnected: false,
+    connect: vi.fn(),
+    disconnect: vi.fn(),
+  });
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("LeaderboardPage accessible live-refresh announcements (#86)", () => {
+  it("announces the initial load with the correct rank range", async () => {
+    getLeaderboardMock.mockResolvedValue({
+      entries: Array.from({ length: 10 }, (_, i) => entry(i)),
+      total: 42,
+    });
+
+    await act(async () => {
+      renderPage();
+    });
+
+    expect(liveRegionText()).toBe(
+      "Leaderboard updated, sorted by Credits, showing rank 1-10 of 42.",
+    );
+  });
+
+  it("re-announces on the 30s auto-refresh when the data actually changes", async () => {
+    vi.useFakeTimers();
+    getLeaderboardMock
+      .mockResolvedValueOnce({
+        entries: Array.from({ length: 10 }, (_, i) => entry(i)),
+        total: 42,
+      })
+      .mockResolvedValueOnce({
+        entries: Array.from({ length: 10 }, (_, i) => entry(i)),
+        total: 57,
+      });
+
+    await act(async () => {
+      renderPage();
+    });
+    expect(liveRegionText()).toContain("of 42.");
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(30_000);
+    });
+
+    expect(liveRegionText()).toContain("of 57.");
+    expect(getLeaderboardMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("announces on a manual Refresh click, not only the auto-refresh timer", async () => {
+    getLeaderboardMock
+      .mockResolvedValueOnce({
+        entries: Array.from({ length: 10 }, (_, i) => entry(i)),
+        total: 42,
+      })
+      .mockResolvedValueOnce({
+        entries: Array.from({ length: 10 }, (_, i) => entry(i)),
+        total: 99,
+      });
+
+    await act(async () => {
+      renderPage();
+    });
+    expect(liveRegionText()).toContain("of 42.");
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: /refresh/i }));
+    });
+
+    expect(liveRegionText()).toContain("of 99.");
+  });
+
+  it("announces 'No results found' for a search with zero matches, not silence", async () => {
+    vi.useFakeTimers();
+    getLeaderboardMock.mockResolvedValue({
+      entries: [entry(0)],
+      total: 1,
+    });
+
+    await act(async () => {
+      renderPage();
+    });
+    expect(liveRegionText()).toContain("of 1.");
+
+    fireEvent.change(screen.getByPlaceholderText(/search address/i), {
+      target: { value: "no-such-address" },
+    });
+
+    // Search is debounced (SEARCH_DEBOUNCE_MS = 300ms) — the announcement
+    // must not flip until the debounce settles, not on every keystroke.
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(300);
+    });
+
+    expect(liveRegionText()).toBe("No results found.");
+  });
+
+  it("computes the correct upper bound on a partial final page", async () => {
+    getLeaderboardMock.mockResolvedValue({
+      entries: Array.from({ length: 3 }, (_, i) => entry(i)),
+      total: 3,
+    });
+
+    await act(async () => {
+      renderPage();
+    });
+
+    expect(liveRegionText()).toBe(
+      "Leaderboard updated, sorted by Credits, showing rank 1-3 of 3.",
+    );
+  });
+
+  it("keeps aria-sort in sync with the active sort column on both the Select and Th", async () => {
+    getLeaderboardMock.mockResolvedValue({
+      entries: Array.from({ length: 5 }, (_, i) => entry(i)),
+      total: 5,
+    });
+
+    await act(async () => {
+      renderPage();
+    });
+
+    const creditsHeader = screen.getByRole("columnheader", { name: /credits/i });
+    const stakeHeader = screen.getByRole("columnheader", { name: /stake/i });
+    expect(creditsHeader.getAttribute("aria-sort")).toBe("descending");
+    expect(stakeHeader.getAttribute("aria-sort")).toBe("none");
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: /stake/i }));
+    });
+
+    expect(creditsHeader.getAttribute("aria-sort")).toBe("none");
+    expect(stakeHeader.getAttribute("aria-sort")).toBe("descending");
+    expect(liveRegionText()).toContain("sorted by Stake");
+  });
+});
diff --git a/src/app/leaderboard/page.tsx b/src/app/leaderboard/page.tsx
index d4b3879..5497c47 100644
--- a/src/app/leaderboard/page.tsx
+++ b/src/app/leaderboard/page.tsx
@@ -19,6 +19,15 @@ import {
 } from "@chakra-ui/react";
 import { useStellarWallet } from "@/context/StellarWalletContext";
 import { useLeaderboard, PAGE_SIZE, type SortKey } from "@/hooks/useLeaderboard";
+import { useLiveAnnouncer } from "@/hooks/useLiveAnnouncer";
+import LiveRegion from "@/components/LiveRegion/LiveRegion";
+
+const LEADERBOARD_TABLE_ID = "leaderboard-table";
+
+const SORT_LABELS: Record<SortKey, string> = {
+  credits: "Credits",
+  stake: "Stake",
+};
 
 function truncate(addr: string): string {
   if (addr.length <= 12) return addr;
@@ -43,8 +52,21 @@ export default function LeaderboardPage() {
     refresh,
   } = useLeaderboard(publicKey);
 
+  // Matches the spinner-vs-table branch below: nothing to announce yet
+  // while the very first fetch is still in flight.
+  const isInitialLoad = isLoading && paged.length === 0;
+  const rangeStart = filteredCount === 0 ? 0 : (currentPage - 1) * PAGE_SIZE + 1;
+  const rangeEnd = Math.min(currentPage * PAGE_SIZE, filteredCount);
+  const announcementMessage = isInitialLoad
+    ? ""
+    : filteredCount === 0
+      ? "No results found."
+      : `Leaderboard updated, sorted by ${SORT_LABELS[sortKey]}, showing rank ${rangeStart}-${rangeEnd} of ${filteredCount.toLocaleString()}.`;
+  const announcement = useLiveAnnouncer(announcementMessage);
+
   return (
     <Flex direction="column" align="center" px={{ base: 6, md: 16 }} py={10}>
+      <LiveRegion message={announcement} />
       <Box w="100%" maxW="900px">
         <HStack spacing={2} mb={5}>
           <Box w="6px" h="6px" borderRadius="full" bg="app.accent" boxShadow="0 0 8px var(--chakra-colors-app-accent)" />
@@ -100,6 +122,8 @@ export default function LeaderboardPage() {
           <Select
             value={sortKey}
             onChange={(e) => setSortKey(e.target.value as SortKey)}
+            aria-controls={LEADERBOARD_TABLE_ID}
+            aria-label="Sort leaderboard by"
             borderRadius="2xl"
             borderColor="app.border"
             bg="app.surface"
@@ -156,13 +180,77 @@ export default function LeaderboardPage() {
             bg="app.surface"
             boxShadow="card"
           >
-            <Table variant="unstyled" size="sm">
+            <Table id={LEADERBOARD_TABLE_ID} variant="unstyled" size="sm">
               <Thead>
                 <Tr borderBottom="1px solid" borderColor="app.border">
                   <Th color="app.muted" fontWeight="medium" py={4} pl={5}>#</Th>
                   <Th color="app.muted" fontWeight="medium" py={4}>Address</Th>
-                  <Th color="app.muted" fontWeight="medium" py={4} isNumeric>Credits</Th>
-                  <Th color="app.muted" fontWeight="medium" py={4} isNumeric>Stake</Th>
+                  <Th
+                    color="app.muted"
+                    fontWeight="medium"
+                    py={4}
+                    px={0}
+                    isNumeric
+                    aria-sort={sortKey === "credits" ? "descending" : "none"}
+                  >
+                    <Button
+                      variant="unstyled"
+                      onClick={() => setSortKey("credits")}
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="flex-end"
+                      gap={1}
+                      ml="auto"
+                      minW="auto"
+                      h="auto"
+                      color="inherit"
+                      fontWeight="inherit"
+                      fontSize="inherit"
+                      textTransform="inherit"
+                      _hover={{ color: "app.accent" }}
+                      _focusVisible={{
+                        outline: "2px solid",
+                        outlineColor: "app.accent",
+                        outlineOffset: "2px",
+                      }}
+                    >
+                      Credits
+                      {sortKey === "credits" && <Text as="span" fontSize="10px">▼</Text>}
+                    </Button>
+                  </Th>
+                  <Th
+                    color="app.muted"
+                    fontWeight="medium"
+                    py={4}
+                    px={0}
+                    isNumeric
+                    aria-sort={sortKey === "stake" ? "descending" : "none"}
+                  >
+                    <Button
+                      variant="unstyled"
+                      onClick={() => setSortKey("stake")}
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="flex-end"
+                      gap={1}
+                      ml="auto"
+                      minW="auto"
+                      h="auto"
+                      color="inherit"
+                      fontWeight="inherit"
+                      fontSize="inherit"
+                      textTransform="inherit"
+                      _hover={{ color: "app.accent" }}
+                      _focusVisible={{
+                        outline: "2px solid",
+                        outlineColor: "app.accent",
+                        outlineOffset: "2px",
+                      }}
+                    >
+                      Stake
+                      {sortKey === "stake" && <Text as="span" fontSize="10px">▼</Text>}
+                    </Button>
+                  </Th>
                   <Th color="app.muted" fontWeight="medium" py={4} pr={5} isNumeric>Boost %</Th>
                 </Tr>
               </Thead>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 515808d..c5a05e5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,120 +1,4 @@
 "use client";
-import { Flex, Text, Skeleton, Badge, Tooltip } from "@chakra-ui/react";
-import { useStellarWallet } from "@/context/StellarWalletContext";
-import { useStats } from "@/hooks/useStats";
-import { Sparkline } from "@/components/Sparkline/Sparkline";
-
-/** Format a number like 30738 → "30,738". */
-function formatCount(n: number): string {
-  return new Intl.NumberFormat().format(n);
-}
-
-/** Relative "last updated" label: "just now", "2 min ago", etc. */
-function relativeTime(isoString: string): string {
-  const diffMs = Date.now() - new Date(isoString).getTime();
-  const secs = Math.floor(diffMs / 1000);
-  if (secs < 10) return "just now";
-  if (secs < 60) return `${secs}s ago`;
-  return `${Math.floor(secs / 60)}m ago`;
-}
-
-export default function Home() {
-  const { isConnected } = useStellarWallet();
-  const { data: stats, isLoading } = useStats();
-
-  return isConnected ? (
-    <Flex direction="column" px={16} py={8} align="center">
-      <Flex direction="column" w="100%">
-        <Text fontSize="6xl" fontWeight="bold" align="left">
-          YOU
-        </Text>
-        <Text fontSize="6xl" fontWeight="bold">
-          CURRENTLY
-        </Text>
-        <Flex justify="space-between" w="100%">
-          <Text fontSize="6xl" fontWeight="bold">
-            HAVE EARNED:
-          </Text>
-          <Text fontSize="6xl" fontWeight="bold">
-            202 CREDITS
-          </Text>
-        </Flex>
-      </Flex>
-
-      <Flex direction="row" w="100%" py={8}>
-        {/* Total Users */}
-        <Flex
-          w="33%"
-          border="1px solid #454545"
-          justify="center"
-          direction="column"
-        >
-          <Flex direction="column" p={2}>
-            <Text color="#D1D1D1">Total Users</Text>
-            {isLoading ? (
-              <Skeleton height="28px" w="80px" mt={1} startColor="#2a2a2a" endColor="#3a3a3a" />
-            ) : (
-              <Text color="#4AE292" fontWeight="bold" fontSize="xl">
-                {stats ? formatCount(stats.totalUsers) : "—"}
-              </Text>
-            )}
-          </Flex>
-        </Flex>
-
-        {/* TVL + sparkline */}
-        <Flex
-          w="33%"
-          border="1px solid #454545"
-          justify="center"
-          direction="column"
-        >
-          <Flex direction="column" p={2}>
-            <Flex align="center" gap={2}>
-              <Text color="#D1D1D1">Total Value Locked</Text>
-              {stats?.source === "demo" && (
-                <Tooltip label="Live data available once pool contracts are deployed" hasArrow bg="#222" color="#fff">
-                  <Badge
-                    fontSize="2xs"
-                    colorScheme="yellow"
-                    variant="subtle"
-                    cursor="help"
-                  >
-                    Demo
-                  </Badge>
-                </Tooltip>
-              )}
-            </Flex>
-            {isLoading ? (
-              <Skeleton height="28px" w="80px" mt={1} startColor="#2a2a2a" endColor="#3a3a3a" />
-            ) : (
-              <Flex align="center" justify="space-between">
-                <Text color="#4AE292" fontWeight="bold" fontSize="xl">
-                  {stats?.tvl ?? "—"}
-                </Text>
-                {stats && stats.sparkline.length >= 2 && (
-                  <Sparkline data={stats.sparkline} width={100} height={28} />
-                )}
-              </Flex>
-            )}
-          </Flex>
-        </Flex>
-
-        {/* Last Updated */}
-        <Flex
-          w="33%"
-          border="1px solid #454545"
-          justify="center"
-          direction="column"
-        >
-          <Flex direction="column" p={2}>
-            <Text color="#D1D1D1">Last Updated</Text>
-            {isLoading ? (
-              <Skeleton height="28px" w="72px" mt={1} startColor="#2a2a2a" endColor="#3a3a3a" />
-            ) : (
-              <Text color="#4AE292" fontWeight="bold" fontSize="xl">
-                {stats ? relativeTime(stats.lastUpdated) : "—"}
-              </Text>
-            )}
 import { useEffect } from "react";
 import {
   Flex,
diff --git a/src/components/LiveRegion/LiveRegion.test.tsx b/src/components/LiveRegion/LiveRegion.test.tsx
new file mode 100644
index 0000000..cff4826
--- /dev/null
+++ b/src/components/LiveRegion/LiveRegion.test.tsx
@@ -0,0 +1,48 @@
+import { render, screen } from "@testing-library/react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { describe, expect, it } from "vitest";
+import LiveRegion from "./LiveRegion";
+
+describe("LiveRegion", () => {
+  it("renders the message inside a role=status element with aria-live=polite by default", () => {
+    render(
+      <ChakraProvider>
+        <LiveRegion message="Leaderboard updated" />
+      </ChakraProvider>,
+    );
+
+    const region = screen.getByRole("status");
+    expect(region.textContent).toBe("Leaderboard updated");
+    expect(region.getAttribute("aria-live")).toBe("polite");
+    expect(region.getAttribute("aria-atomic")).toBe("true");
+  });
+
+  it("supports an assertive politeness level for urgent announcements", () => {
+    render(
+      <ChakraProvider>
+        <LiveRegion message="Error occurred" politeness="assertive" />
+      </ChakraProvider>,
+    );
+
+    expect(screen.getByRole("status").getAttribute("aria-live")).toBe(
+      "assertive",
+    );
+  });
+
+  it("is visually hidden but still present in the accessibility tree", () => {
+    render(
+      <ChakraProvider>
+        <LiveRegion message="hidden text" />
+      </ChakraProvider>,
+    );
+
+    const region = screen.getByRole("status");
+    const style = window.getComputedStyle(region);
+    // Chakra's VisuallyHidden clips content off-screen rather than using
+    // display:none/visibility:hidden, which would remove it from the a11y
+    // tree entirely and defeat the point of an aria-live region.
+    expect(style.position).toBe("absolute");
+    expect(style.display).not.toBe("none");
+    expect(style.visibility).not.toBe("hidden");
+  });
+});
diff --git a/src/components/LiveRegion/LiveRegion.tsx b/src/components/LiveRegion/LiveRegion.tsx
new file mode 100644
index 0000000..12ae679
--- /dev/null
+++ b/src/components/LiveRegion/LiveRegion.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { VisuallyHidden } from "@chakra-ui/react";
+
+type LiveRegionProps = {
+  message: string;
+  politeness?: "polite" | "assertive";
+};
+
+/**
+ * Visually-hidden aria-live region for announcing dynamic content changes
+ * (table refresh, sort, pagination, search results) to assistive tech.
+ * `role="status"` gives older screen readers a fallback announcement path
+ * on top of aria-live for browsers/AT that don't watch it directly.
+ */
+export default function LiveRegion({
+  message,
+  politeness = "polite",
+}: LiveRegionProps) {
+  return (
+    <VisuallyHidden aria-live={politeness} aria-atomic="true" role="status">
+      {message}
+    </VisuallyHidden>
+  );
+}
diff --git a/src/hooks/useLiveAnnouncer.test.ts b/src/hooks/useLiveAnnouncer.test.ts
new file mode 100644
index 0000000..5e0cf63
--- /dev/null
+++ b/src/hooks/useLiveAnnouncer.test.ts
@@ -0,0 +1,37 @@
+import { renderHook } from "@/test/renderHook";
+import { describe, expect, it } from "vitest";
+import { useLiveAnnouncer } from "./useLiveAnnouncer";
+
+describe("useLiveAnnouncer", () => {
+  it("Test 1 — returns the initial message on first render", () => {
+    const { result } = renderHook(() => useLiveAnnouncer("hello"));
+    expect(result.current).toBe("hello");
+  });
+
+  it("Test 2 — updates once the message value actually changes", () => {
+    let message = "first";
+    const { result, rerender } = renderHook(() => useLiveAnnouncer(message));
+    expect(result.current).toBe("first");
+
+    message = "second";
+    rerender();
+
+    expect(result.current).toBe("second");
+  });
+
+  it("Test 3 — re-rendering with the same message value is a no-op (still returns that value)", () => {
+    const message = "stable";
+    const { result, rerender } = renderHook(() => useLiveAnnouncer(message));
+    expect(result.current).toBe("stable");
+
+    rerender();
+    rerender();
+
+    expect(result.current).toBe("stable");
+  });
+
+  it("Test 4 — an empty string is a valid message (used to represent 'nothing to announce yet')", () => {
+    const { result } = renderHook(() => useLiveAnnouncer(""));
+    expect(result.current).toBe("");
+  });
+});
diff --git a/src/hooks/useLiveAnnouncer.ts b/src/hooks/useLiveAnnouncer.ts
new file mode 100644
index 0000000..018b79f
--- /dev/null
+++ b/src/hooks/useLiveAnnouncer.ts
@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * Holds the text for an aria-live region, only updating when the message
+ * value itself changes. A parent can recompute the same announcement on
+ * every render (e.g. a keystroke before search-debounce settles, or an
+ * unrelated poll tick) without that re-deriving a new state update or
+ * risking a redundant announcement — the effect's dependency comparison
+ * is a plain string-value check, so same-text renders are no-ops.
+ */
+export function useLiveAnnouncer(message: string): string {
+  const [announcement, setAnnouncement] = useState(message);
+
+  useEffect(() => {
+    setAnnouncement(message);
+  }, [message]);
+
+  return announcement;
+}
diff --git a/src/test/renderHook.tsx b/src/test/renderHook.tsx
index a2baab7..b84ecf8 100644
--- a/src/test/renderHook.tsx
+++ b/src/test/renderHook.tsx
@@ -25,12 +25,19 @@ export function renderHook<T>(
   }
 
   const root = createRoot(container);
-  act(() => {
-    root.render(createElement(Wrapper, null, createElement(HookHarness)));
-  });
+  // `callback` is a closure — a caller that captures an outer `let` and
+  // mutates it before calling `rerender()` will see the hook re-invoked
+  // with the new value, the same way @testing-library/react-hooks works.
+  function renderOnce() {
+    act(() => {
+      root.render(createElement(Wrapper, null, createElement(HookHarness)));
+    });
+  }
+  renderOnce();
 
   return {
     result,
+    rerender: renderOnce,
     unmount: () => {
       act(() => {
         root.unmount();
diff --git a/tests/table-accessibility.spec.ts b/tests/table-accessibility.spec.ts
new file mode 100644
index 0000000..029c456
--- /dev/null
+++ b/tests/table-accessibility.spec.ts
@@ -0,0 +1,133 @@
+import { test, expect, type Page } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+// Extends the pattern in contrast-audit.spec.ts to cover #86: aria-sort
+// semantics and aria-live announcements on the Leaderboard/History tables.
+
+function leaderboardEntry(i: number) {
+  return {
+    address: `GLEADER${String(i).padStart(3, "0")}${"A".repeat(45)}`.slice(0, 56),
+    totalCredits: 1000 - i,
+    totalStake: 500 - i,
+    boostUtilization: 10,
+  };
+}
+
+async function mockLeaderboardApi(page: Page, total: number): Promise<void> {
+  await page.route("**/__mock-leaderboard-api**", async (route) => {
+    const url = new URL(route.request().url());
+    const offset = Number(url.searchParams.get("offset") ?? 0);
+    const limit = Number(url.searchParams.get("limit") ?? 10);
+    const sort = url.searchParams.get("sort") ?? "credits";
+
+    const all = Array.from({ length: total }, (_, i) => leaderboardEntry(i));
+    all.sort((a, b) =>
+      sort === "credits"
+        ? b.totalCredits - a.totalCredits
+        : b.totalStake - a.totalStake,
+    );
+
+    await route.fulfill({
+      contentType: "application/json",
+      body: JSON.stringify({
+        entries: all.slice(offset, offset + limit),
+        total,
+      }),
+    });
+  });
+}
+
+test.describe("Leaderboard aria-sort semantics (#86)", () => {
+  test("aria-sort on Credits/Stake headers matches the active sort column, for both sort options", async ({
+    page,
+  }) => {
+    await mockLeaderboardApi(page, 25);
+    await page.goto("/leaderboard");
+
+    const creditsHeader = page.getByRole("columnheader", { name: /credits/i });
+    const stakeHeader = page.getByRole("columnheader", { name: /stake/i });
+
+    await expect(creditsHeader).toHaveAttribute("aria-sort", "descending");
+    await expect(stakeHeader).toHaveAttribute("aria-sort", "none");
+
+    await page.getByRole("button", { name: "Stake" }).click();
+
+    await expect(creditsHeader).toHaveAttribute("aria-sort", "none");
+    await expect(stakeHeader).toHaveAttribute("aria-sort", "descending");
+  });
+
+  test("the sort Select is programmatically associated with the table via aria-controls", async ({
+    page,
+  }) => {
+    await mockLeaderboardApi(page, 25);
+    await page.goto("/leaderboard");
+
+    const select = page.getByRole("combobox");
+    const controlsId = await select.getAttribute("aria-controls");
+    expect(controlsId).toBeTruthy();
+
+    const table = page.locator(`#${controlsId}`);
+    await expect(table).toHaveCount(1);
+    await expect(table).toHaveJSProperty("tagName", "TABLE");
+  });
+
+  test("changing the Select keeps aria-sort in sync (both controls drive the same state)", async ({
+    page,
+  }) => {
+    await mockLeaderboardApi(page, 25);
+    await page.goto("/leaderboard");
+
+    await page.getByRole("combobox").selectOption("stake");
+
+    await expect(
+      page.getByRole("columnheader", { name: /stake/i }),
+    ).toHaveAttribute("aria-sort", "descending");
+  });
+
+  test("has no axe-core violations with a populated, sorted table", async ({
+    page,
+  }) => {
+    await mockLeaderboardApi(page, 25);
+    await page.goto("/leaderboard");
+    await page.getByRole("button", { name: "Stake" }).click();
+    await expect(
+      page.getByRole("columnheader", { name: /stake/i }),
+    ).toHaveAttribute("aria-sort", "descending");
+
+    // Scoped to WCAG conformance rules, matching contrast-audit.spec.ts's
+    // own approach of targeting a specific concern rather than asserting
+    // zero violations against axe's full best-practice ruleset (which
+    // includes pre-existing, unrelated gaps like page-has-heading-one —
+    // out of scope for this table-sort/live-region issue).
+    const results = await new AxeBuilder({ page })
+      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+      .analyze();
+    expect(results.violations).toEqual([]);
+  });
+});
+
+test.describe("Leaderboard/History live-region announcements (#86)", () => {
+  test("leaderboard exposes a polite, atomic live region announcing the loaded range", async ({
+    page,
+  }) => {
+    await mockLeaderboardApi(page, 25);
+    await page.goto("/leaderboard");
+
+    const status = page.getByRole("status");
+    await expect(status).toHaveAttribute("aria-live", "polite");
+    await expect(status).toHaveAttribute("aria-atomic", "true");
+    await expect(status).toHaveText(/showing rank 1-10 of 25/i);
+  });
+
+  test("history exposes a live region (present even with no sort UI, per issue scope)", async ({
+    page,
+  }) => {
+    await page.goto("/history");
+
+    // Not connected: nothing to announce yet, but the region must still
+    // exist in the accessibility tree so a screen reader is primed for
+    // it once the wallet connects and history loads.
+    const status = page.getByRole("status");
+    await expect(status).toHaveAttribute("aria-live", "polite");
+  });
+});