diff --git a/apps/web/src/components/ActivityCard.tsx b/apps/web/src/components/ActivityCard.tsx
index 409c45f..3d65587 100644
--- a/apps/web/src/components/ActivityCard.tsx
+++ b/apps/web/src/components/ActivityCard.tsx
@@ -33,9 +33,13 @@ function UpdateCard({ update }: { update: ProjectUpdateResponse }) {
             Update #{update.number}
           </Link>
         </div>
-        <span title={formatAbsoluteDate(update.createdAt)} className="text-xs text-muted-foreground">
+        <time
+          dateTime={update.createdAt}
+          title={formatAbsoluteDate(update.createdAt)}
+          className="text-xs text-muted-foreground"
+        >
           {formatRelativeTime(update.createdAt)}
-        </span>
+        </time>
       </div>
 
       {update.author && (
@@ -69,9 +73,9 @@ function BuzzCard({ buzz }: { buzz: ProjectBuzzResponse }) {
             {buzz.project.title}
           </Link>
           <span> · Buzz · </span>
-          <span title={formatAbsoluteDate(buzz.publishedAt)}>
+          <time dateTime={buzz.publishedAt} title={formatAbsoluteDate(buzz.publishedAt)}>
             {formatAbsoluteDate(buzz.publishedAt, { month: 'short', day: 'numeric', year: 'numeric' })}
-          </span>
+          </time>
         </span>
       </div>
 
@@ -89,6 +93,7 @@ function BuzzCard({ buzz }: { buzz: ProjectBuzzResponse }) {
           <h3 className="text-base font-semibold mb-0.5">
             <a href={buzz.url} target="_blank" rel="noopener noreferrer" className="hover:text-primary">
               {buzz.headline}
+              <span className="sr-only"> (opens in new tab)</span>
             </a>
           </h3>
           <p className="text-xs text-muted-foreground mb-2">{hostname}</p>
diff --git a/apps/web/src/components/AppFooter.tsx b/apps/web/src/components/AppFooter.tsx
index 11fbe62..b381912 100644
--- a/apps/web/src/components/AppFooter.tsx
+++ b/apps/web/src/components/AppFooter.tsx
@@ -182,7 +182,7 @@ export function AppFooter() {
                 <a
                   key={href}
                   href={href}
-                  aria-label={label}
+                  aria-label={`${label} (opens in new tab)`}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-muted-foreground hover:text-foreground transition-colors"
@@ -206,6 +206,7 @@ export function AppFooter() {
             className="hover:text-foreground transition-colors"
           >
             Open source &mdash; view this site on GitHub
+            <span className="sr-only"> (opens in new tab)</span>
           </a>
         </div>
       </div>
diff --git a/apps/web/src/components/AppHeader.tsx b/apps/web/src/components/AppHeader.tsx
index bdde238..2a303e3 100644
--- a/apps/web/src/components/AppHeader.tsx
+++ b/apps/web/src/components/AppHeader.tsx
@@ -182,8 +182,10 @@ function AboutDropdown() {
   );
 }
 
+// `block` so each link fills its row: inside the sheet's <li>s an inline
+// anchor would shrink the tap target to the width of its text.
 const navLinkClass = ({ isActive }: { isActive: boolean }) =>
-  `text-sm font-medium transition-colors hover:text-primary ${
+  `block text-sm font-medium transition-colors hover:text-primary ${
     isActive ? 'text-primary' : 'text-muted-foreground'
   }`;
 
@@ -197,7 +199,7 @@ function GitHubLink() {
         href={GITHUB_URL}
         target="_blank"
         rel="noopener noreferrer"
-        aria-label="Code for Philly on GitHub"
+        aria-label="Code for Philly on GitHub (opens in new tab)"
       >
         <GitHubIcon />
       </a>
@@ -235,20 +237,33 @@ export function AppHeader() {
 
         {/* Desktop content cluster. The parent gap is the only source of
             spacing between children — no per-child margins. */}
+        {/* A nav is a list of destinations — the <ul>/<li> is what tells a
+            screen reader how many there are and where you are in them. The
+            flex/gap spacing moves to the <ul>; the <li>s contribute none. */}
         <nav
           aria-label="Primary navigation"
-          className="hidden md:flex items-center gap-2 ml-4 flex-1"
+          className="hidden md:block ml-4 flex-1"
         >
-          <NavLink to="/projects" className={navLinkClass}>
-            Projects
-          </NavLink>
-          <NavLink to="/help-wanted" className={navLinkClass}>
-            Help Wanted
-          </NavLink>
-          <NavLink to="/members" className={navLinkClass}>
-            Members
-          </NavLink>
-          <AboutDropdown />
+          <ul className="flex items-center gap-2">
+            <li>
+              <NavLink to="/projects" className={navLinkClass}>
+                Projects
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/help-wanted" className={navLinkClass}>
+                Help Wanted
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/members" className={navLinkClass}>
+                Members
+              </NavLink>
+            </li>
+            <li>
+              <AboutDropdown />
+            </li>
+          </ul>
         </nav>
 
         {/* Desktop utility cluster: GitHub, search, auth, then the Volunteer
@@ -295,58 +310,93 @@ export function AppHeader() {
               </SheetHeader>
               {/* min-h-0 + overflow-y-auto so the list stays reachable on
                   short viewports instead of overflowing the panel. */}
+              {/* Three lists with the separators and the group heading
+                  between them, rather than one list interrupted by
+                  non-list children. The nav keeps the flex column so the
+                  gap-2 rhythm between groups is unchanged. */}
               <nav
                 aria-label="Mobile navigation"
                 className="flex flex-col gap-2 px-4 min-h-0 overflow-y-auto"
               >
-                <NavLink to="/projects" className={navLinkClass}>
-                  Projects
-                </NavLink>
-                <NavLink to="/help-wanted" className={navLinkClass}>
-                  Help Wanted
-                </NavLink>
-                <NavLink to="/members" className={navLinkClass}>
-                  Members
-                </NavLink>
+                <ul className="flex flex-col gap-2">
+                  <li>
+                    <NavLink to="/projects" className={navLinkClass}>
+                      Projects
+                    </NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="/help-wanted" className={navLinkClass}>
+                      Help Wanted
+                    </NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="/members" className={navLinkClass}>
+                      Members
+                    </NavLink>
+                  </li>
+                </ul>
                 <Separator />
-                <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
+                {/* SheetTitle ("Menu") renders a Radix DialogTitle, i.e. an
+                    h2 — so this group label is an h3, not a styled <p>. */}
+                <h3 className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
                   About
-                </p>
-                <NavLink to="/pages/mission" className={navLinkClass}>
-                  Mission
-                </NavLink>
-                <NavLink to="/pages/leadership" className={navLinkClass}>
-                  Leadership
-                </NavLink>
-                <NavLink to="/pages/code-of-conduct" className={navLinkClass}>
-                  Code of Conduct
-                </NavLink>
-                <NavLink to="/pages/hackathons" className={navLinkClass}>
-                  Hackathons
-                </NavLink>
-                <NavLink to="/sponsor" className={navLinkClass}>
-                  Sponsor
-                </NavLink>
-                <a
-                  href="mailto:hello@codeforphilly.org"
-                  className="text-sm font-medium text-muted-foreground hover:text-primary"
-                  onClick={() => setMobileOpen(false)}
-                >
-                  Contact
-                </a>
+                </h3>
+                <ul className="flex flex-col gap-2">
+                  <li>
+                    <NavLink to="/pages/mission" className={navLinkClass}>
+                      Mission
+                    </NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="/pages/leadership" className={navLinkClass}>
+                      Leadership
+                    </NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="/pages/code-of-conduct" className={navLinkClass}>
+                      Code of Conduct
+                    </NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="/pages/hackathons" className={navLinkClass}>
+                      Hackathons
+                    </NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="/sponsor" className={navLinkClass}>
+                      Sponsor
+                    </NavLink>
+                  </li>
+                  <li>
+                    <a
+                      href="mailto:hello@codeforphilly.org"
+                      className="block text-sm font-medium text-muted-foreground hover:text-primary"
+                      onClick={() => setMobileOpen(false)}
+                    >
+                      Contact
+                    </a>
+                  </li>
+                </ul>
                 <Separator />
-                <a
-                  href={GITHUB_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-sm font-medium text-muted-foreground hover:text-primary"
-                  onClick={() => setMobileOpen(false)}
-                >
-                  GitHub
-                </a>
-                <NavLink to="/volunteer" className={navLinkClass}>
-                  Volunteer
-                </NavLink>
+                <ul className="flex flex-col gap-2">
+                  <li>
+                    <a
+                      href={GITHUB_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block text-sm font-medium text-muted-foreground hover:text-primary"
+                      onClick={() => setMobileOpen(false)}
+                    >
+                      GitHub
+                      <span className="sr-only"> (opens in new tab)</span>
+                    </a>
+                  </li>
+                  <li>
+                    <NavLink to="/volunteer" className={navLinkClass}>
+                      Volunteer
+                    </NavLink>
+                  </li>
+                </ul>
               </nav>
               <Separator />
               <div className="px-4 pb-4">
diff --git a/apps/web/src/components/Breadcrumbs.tsx b/apps/web/src/components/Breadcrumbs.tsx
index 31e5468..fd575a5 100644
--- a/apps/web/src/components/Breadcrumbs.tsx
+++ b/apps/web/src/components/Breadcrumbs.tsx
@@ -21,7 +21,7 @@ export function Breadcrumbs({ items }: BreadcrumbsProps) {
         {items.map((item, index) => {
           const isLast = index === items.length - 1;
           return (
-            <li key={item.label} className="flex items-center gap-1">
+            <li key={`${index}-${item.label}`} className="flex items-center gap-1">
               {index > 0 && (
                 <span aria-hidden="true" className="text-muted-foreground/50">
                   &rsaquo;
diff --git a/apps/web/src/components/ConnectGitHubBanner.tsx b/apps/web/src/components/ConnectGitHubBanner.tsx
index e745295..e022448 100644
--- a/apps/web/src/components/ConnectGitHubBanner.tsx
+++ b/apps/web/src/components/ConnectGitHubBanner.tsx
@@ -30,6 +30,7 @@ export function ConnectGitHubBanner() {
   if (dismissed) return null;
 
   return (
+    <>
     <div
       role="region"
       aria-label="Connect GitHub"
@@ -58,5 +59,14 @@ export function ConnectGitHubBanner() {
         </Button>
       </div>
     </div>
+    {/* The banner mounts only once auth resolves, and a landmark arriving
+        after first paint is never announced on its own — so mirror the
+        headline in a live region (the Sponsor / ProfileEdit idiom). It stays
+        a region rather than becoming one: a late-mounted status container
+        is not read reliably either, and it would swallow the two buttons. */}
+    <span role="status" className="sr-only">
+      Connect your GitHub account
+    </span>
+    </>
   );
 }
diff --git a/apps/web/src/components/FacetSidebar.tsx b/apps/web/src/components/FacetSidebar.tsx
index 6542eaa..d53ef9f 100644
--- a/apps/web/src/components/FacetSidebar.tsx
+++ b/apps/web/src/components/FacetSidebar.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { TagChip } from '@/components/TagChip';
 import { Link } from 'react-router';
@@ -12,6 +12,8 @@ interface FacetSidebarProps {
   tabs?: Array<'topic' | 'tech' | 'event'>;
   limit?: number;
   className?: string;
+  /** Extra filter controls rendered inside the same `Filters` landmark. */
+  children?: ReactNode;
 }
 
 const NS_LABELS = {
@@ -40,6 +42,7 @@ export function FacetSidebar({
   tabs = ['topic', 'tech', 'event'],
   limit = 10,
   className,
+  children,
 }: FacetSidebarProps) {
   const [tab, setTab] = useState<string>(tabs[0] ?? 'topic');
   const activeTagSet = new Set(activeTags);
@@ -103,6 +106,7 @@ export function FacetSidebar({
           );
         })}
       </Tabs>
+      {children}
     </aside>
   );
 }
diff --git a/apps/web/src/components/HelpWantedCard.tsx b/apps/web/src/components/HelpWantedCard.tsx
index 75cf2d2..32c7f06 100644
--- a/apps/web/src/components/HelpWantedCard.tsx
+++ b/apps/web/src/components/HelpWantedCard.tsx
@@ -6,7 +6,7 @@ import { PersonAvatar } from '@/components/PersonAvatar';
 import { MarkdownView } from '@/components/MarkdownView';
 import { ExpressInterestModal } from '@/components/modals/ExpressInterestModal';
 import { useAuth } from '@/hooks/useAuth';
-import { formatRelativeTime } from '@/lib/time';
+import { formatAbsoluteDate, formatRelativeTime } from '@/lib/time';
 import type { HelpWantedRoleResponse } from '@/lib/api';
 
 interface HelpWantedCardProps {
@@ -64,7 +64,12 @@ export function HelpWantedCard({ role, showProjectLink = true }: HelpWantedCardP
               <span>·</span>
             </>
           )}
-          <span>posted {formatRelativeTime(role.createdAt)}</span>
+          <span>
+            posted{' '}
+            <time dateTime={role.createdAt} title={formatAbsoluteDate(role.createdAt)}>
+              {formatRelativeTime(role.createdAt)}
+            </time>
+          </span>
         </div>
 
         {isSignedIn ? (
diff --git a/apps/web/src/components/MarkdownEditor.tsx b/apps/web/src/components/MarkdownEditor.tsx
index a186b0f..abe94e3 100644
--- a/apps/web/src/components/MarkdownEditor.tsx
+++ b/apps/web/src/components/MarkdownEditor.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useId, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
@@ -20,17 +20,23 @@ interface MarkdownEditorProps {
 
 interface ToolbarButton {
   label: string;
+  /**
+   * Accessible name. Each one *contains* the visible label so that a
+   * speech-input user saying what they see still hits the control
+   * (WCAG 2.5.3 Label in Name).
+   */
+  name: string;
   insert: string;
   wrap?: { before: string; after: string };
 }
 
 const TOOLBAR: ToolbarButton[] = [
-  { label: 'B', insert: 'bold text', wrap: { before: '**', after: '**' } },
-  { label: 'I', insert: 'italic text', wrap: { before: '_', after: '_' } },
-  { label: 'Link', insert: 'link text', wrap: { before: '[', after: '](https://)' } },
-  { label: 'List', insert: '- item' },
-  { label: 'Code', insert: 'code', wrap: { before: '`', after: '`' } },
-  { label: 'Quote', insert: '> quote' },
+  { label: 'B', name: 'Bold', insert: 'bold text', wrap: { before: '**', after: '**' } },
+  { label: 'I', name: 'Italic', insert: 'italic text', wrap: { before: '_', after: '_' } },
+  { label: 'Link', name: 'Insert link', insert: 'link text', wrap: { before: '[', after: '](https://)' } },
+  { label: 'List', name: 'Bulleted list', insert: '- item' },
+  { label: 'Code', name: 'Code', insert: 'code', wrap: { before: '`', after: '`' } },
+  { label: 'Quote', name: 'Quote', insert: '> quote' },
 ];
 
 /**
@@ -55,6 +61,11 @@ export function MarkdownEditor({
   const id = useId();
   const errorId = `${id}-error`;
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const toolbarRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  // Roving tabindex: a toolbar is one tab stop, and the arrow keys move
+  // within it (ARIA APG Toolbar pattern). Without this the six formatting
+  // buttons sat between the label and the textarea as six separate tab stops.
+  const [activeButton, setActiveButton] = useState(0);
   const [previewHtml, setPreviewHtml] = useState<string>('');
   const [previewLoading, setPreviewLoading] = useState(false);
   const [previewError, setPreviewError] = useState<string | null>(null);
@@ -132,6 +143,33 @@ export function MarkdownEditor({
     });
   };
 
+  const focusToolbarButton = (index: number) => {
+    setActiveButton(index);
+    toolbarRefs.current[index]?.focus();
+  };
+
+  const handleToolbarKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    // Start from the button the key landed on, not from `activeButton`:
+    // that state is what the render reads for tabIndex, but it lags a
+    // focus change by a render cycle, so the event target is the truth.
+    const current = toolbarRefs.current.indexOf(e.target as HTMLButtonElement);
+    if (current === -1) return;
+    const last = TOOLBAR.length - 1;
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      focusToolbarButton(current === last ? 0 : current + 1);
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      focusToolbarButton(current === 0 ? last : current - 1);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      focusToolbarButton(0);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      focusToolbarButton(last);
+    }
+  };
+
   const count = value.length;
   const overSoftLimit = maxLength !== undefined && count > maxLength;
 
@@ -147,14 +185,25 @@ export function MarkdownEditor({
         <p className="text-xs text-muted-foreground">{description}</p>
       )}
       <div className="border border-border rounded-md overflow-hidden">
-        <div className="flex flex-wrap gap-1 bg-muted/50 border-b border-border px-2 py-1.5">
-          {TOOLBAR.map((btn) => (
+        <div
+          role="toolbar"
+          aria-label="Formatting"
+          onKeyDown={handleToolbarKeyDown}
+          className="flex flex-wrap gap-1 bg-muted/50 border-b border-border px-2 py-1.5"
+        >
+          {TOOLBAR.map((btn, i) => (
             <Button
               key={btn.label}
+              ref={(el: HTMLButtonElement | null) => {
+                toolbarRefs.current[i] = el;
+              }}
               type="button"
               size="sm"
               variant="ghost"
               className="h-7 px-2 text-xs"
+              aria-label={btn.name}
+              tabIndex={i === activeButton ? 0 : -1}
+              onFocus={() => setActiveButton(i)}
               onClick={() => applyToolbar(btn)}
             >
               {btn.label}
diff --git a/apps/web/src/components/PersonCard.tsx b/apps/web/src/components/PersonCard.tsx
index 29cb464..ed591ce 100644
--- a/apps/web/src/components/PersonCard.tsx
+++ b/apps/web/src/components/PersonCard.tsx
@@ -9,13 +9,23 @@ interface PersonCardProps {
 
 export function PersonCard({ person }: PersonCardProps) {
   return (
-    <Link
-      to={`/members/${person.slug}`}
-      className="block rounded-lg border border-border bg-card p-4 hover:shadow-md hover:-translate-y-0.5 transition-all"
-    >
+    // The whole card used to be one <a>, so its accessible name was the
+    // avatar's title plus the name plus the project count plus every tag
+    // chip, read as one run-on string. Follow the ProjectCard idiom instead:
+    // an <article> whose heading wraps the only link, named by the person.
+    // A stretched pseudo-element keeps the entire card clickable — safe here
+    // because the avatar and chips are deliberately non-interactive.
+    <article className="relative rounded-lg border border-border bg-card p-4 hover:shadow-md hover:-translate-y-0.5 transition-all">
       <div className="flex flex-col items-center text-center">
         <PersonAvatar person={{ slug: person.slug, fullName: person.fullName, avatarUrl: person.avatarUrl }} size={80} asLink={false} className="rounded-lg" />
-        <h3 className="mt-3 font-semibold text-foreground">{person.fullName}</h3>
+        <h3 className="mt-3 font-semibold text-foreground">
+          <Link
+            to={`/members/${person.slug}`}
+            className="after:absolute after:inset-0 after:rounded-lg hover:text-primary transition-colors"
+          >
+            {person.fullName}
+          </Link>
+        </h3>
         {person.memberOfCount > 0 && (
           <p className="text-xs text-muted-foreground mt-0.5">
             Member of {person.memberOfCount} project{person.memberOfCount === 1 ? '' : 's'}
@@ -29,6 +39,6 @@ export function PersonCard({ person }: PersonCardProps) {
           </div>
         )}
       </div>
-    </Link>
+    </article>
   );
 }
diff --git a/apps/web/src/components/ProjectCard.tsx b/apps/web/src/components/ProjectCard.tsx
index 3fd9b55..8c19e1a 100644
--- a/apps/web/src/components/ProjectCard.tsx
+++ b/apps/web/src/components/ProjectCard.tsx
@@ -34,7 +34,9 @@ export function ProjectCard({ project }: ProjectCardProps) {
           {project.members.slice(0, 8).map((m) => {
             const isMaintainer = m.slug === project.maintainer?.slug;
             return (
-              <div key={m.slug} className="ring-2 ring-card rounded-full" title={m.fullName}>
+              // No title here: PersonAvatar already emits the member's name,
+              // so this produced two identical tooltips stacked.
+              <div key={m.slug} className="ring-2 ring-card rounded-full">
                 <PersonAvatar person={m} size={isMaintainer ? 36 : 28} />
               </div>
             );
@@ -61,6 +63,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
           <Button asChild size="sm" variant="outline">
             <a href={project.links.usersUrl} target="_blank" rel="noopener noreferrer">
               Public Site
+              <span className="sr-only"> (opens in new tab)</span>
             </a>
           </Button>
         )}
@@ -68,6 +71,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
           <Button asChild size="sm" variant="outline">
             <a href={project.links.developersUrl} target="_blank" rel="noopener noreferrer">
               Developers
+              <span className="sr-only"> (opens in new tab)</span>
             </a>
           </Button>
         )}
diff --git a/apps/web/src/components/modals/ManageMembersModal.tsx b/apps/web/src/components/modals/ManageMembersModal.tsx
index 8ee24ed..2303b5b 100644
--- a/apps/web/src/components/modals/ManageMembersModal.tsx
+++ b/apps/web/src/components/modals/ManageMembersModal.tsx
@@ -158,10 +158,14 @@ export function ManageMembersModal({ open, onOpenChange, project }: ManageMember
                       </>
                     ) : (
                       <>
+                        {/* Every row's buttons read identically out of
+                            context, so each name carries its member. The
+                            visible text stays a substring (SC 2.5.3). */}
                         <Button
                           type="button"
                           size="sm"
                           variant="outline"
+                          aria-label={`Edit role for ${m.person.fullName}`}
                           onClick={() =>
                             setEditingRole((r) => ({ ...r, [rowKey]: m.role ?? '' }))
                           }
@@ -173,6 +177,7 @@ export function ManageMembersModal({ open, onOpenChange, project }: ManageMember
                             type="button"
                             size="sm"
                             variant="outline"
+                            aria-label={`Make maintainer: ${m.person.fullName}`}
                             onClick={() => personSlug && handleChangeMaintainer(personSlug, rowKey)}
                             disabled={busySlug === rowKey}
                           >
@@ -184,6 +189,7 @@ export function ManageMembersModal({ open, onOpenChange, project }: ManageMember
                             type="button"
                             size="sm"
                             variant="ghost"
+                            aria-label={`Remove ${m.person.fullName}`}
                             onClick={() => personSlug && handleRemove(personSlug, rowKey)}
                             disabled={busySlug === rowKey}
                             className="text-destructive hover:text-destructive"
diff --git a/apps/web/src/pages/AccountClaim.tsx b/apps/web/src/pages/AccountClaim.tsx
index 10eaf76..a939b04 100644
--- a/apps/web/src/pages/AccountClaim.tsx
+++ b/apps/web/src/pages/AccountClaim.tsx
@@ -176,11 +176,11 @@ export function AccountClaim() {
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-3 text-sm">
-              <div
-                className="text-xs text-muted-foreground"
-                title={formatAbsoluteDate(c.lastActiveAt)}
-              >
-                Last updated {formatRelativeTime(c.lastActiveAt)}
+              <div className="text-xs text-muted-foreground">
+                Last updated{' '}
+                <time dateTime={c.lastActiveAt} title={formatAbsoluteDate(c.lastActiveAt)}>
+                  {formatRelativeTime(c.lastActiveAt)}
+                </time>
               </div>
               {c.matchedEmail ? (
                 <div className="rounded-md bg-green-100 dark:bg-green-900/30 text-green-900 dark:text-green-100 px-3 py-2 text-xs">
diff --git a/apps/web/src/pages/LoginPlaceholder.tsx b/apps/web/src/pages/LoginPlaceholder.tsx
index 0b376b6..621c16d 100644
--- a/apps/web/src/pages/LoginPlaceholder.tsx
+++ b/apps/web/src/pages/LoginPlaceholder.tsx
@@ -41,6 +41,7 @@ const ERROR_MESSAGES: Record<ErrorCode, React.ReactNode> = {
         className="underline hover:no-underline"
       >
         verify a primary email on GitHub
+        <span className="sr-only"> (opens in new tab)</span>
       </a>{' '}
       and ensure email visibility is enabled for our app.
     </>
@@ -78,6 +79,7 @@ function WhyGitHub() {
             className="underline hover:no-underline"
           >
             create a GitHub account
+            <span className="sr-only"> (opens in new tab)</span>
           </a>{' '}
           in under a minute.
         </div>
diff --git a/apps/web/src/pages/StaffAccountClaimQueue.tsx b/apps/web/src/pages/StaffAccountClaimQueue.tsx
index e4410df..18ae752 100644
--- a/apps/web/src/pages/StaffAccountClaimQueue.tsx
+++ b/apps/web/src/pages/StaffAccountClaimQueue.tsx
@@ -119,12 +119,13 @@ export function StaffAccountClaimQueue() {
                 </>
               )}
               {' · '}
-              <span
+              <time
+                dateTime={item.submittedAt}
                 title={formatAbsoluteDate(item.submittedAt)}
                 className="text-muted-foreground"
               >
                 {formatRelativeTime(item.submittedAt)}
-              </span>
+              </time>
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-3">
@@ -148,7 +149,10 @@ export function StaffAccountClaimQueue() {
               />
             </div>
             <div className="flex gap-2">
+              {/* The queue renders one card per request, so a bare
+                  "Approve"/"Deny" repeats verbatim down the page. */}
               <Button
+                aria-label={`Approve claim from ${item.requesterGithubLogin}`}
                 onClick={() => void onApprove(item.requestId)}
                 disabled={pendingId !== null || !item.claimedPersonId}
               >
@@ -156,6 +160,7 @@ export function StaffAccountClaimQueue() {
               </Button>
               <Button
                 variant="outline"
+                aria-label={`Deny claim from ${item.requesterGithubLogin}`}
                 onClick={() => void onDeny(item.requestId)}
                 disabled={pendingId !== null}
               >
diff --git a/apps/web/src/screens/Account.tsx b/apps/web/src/screens/Account.tsx
index a9260ca..85cf981 100644
--- a/apps/web/src/screens/Account.tsx
+++ b/apps/web/src/screens/Account.tsx
@@ -5,6 +5,7 @@ import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Breadcrumbs } from '@/components/Breadcrumbs';
 import {
   Dialog,
   DialogContent,
@@ -154,6 +155,9 @@ export function Account() {
   const sessions = sessionsQ.data?.data ?? [];
 
   return (
+    <>
+    {/* specs/behaviors/app-shell.md → Breadcrumbs: Settings */}
+    <Breadcrumbs items={[{ label: 'Settings' }]} />
     <div className="container mx-auto px-4 py-8 max-w-3xl space-y-6">
       <h1 className="text-2xl font-bold">Account Settings</h1>
 
@@ -183,6 +187,7 @@ export function Account() {
                   rel="noopener noreferrer"
                 >
                   Manage on GitHub →
+                  <span className="sr-only"> (opens in new tab)</span>
                 </a>
               </Button>
             ) : (
@@ -266,8 +271,10 @@ export function Account() {
                   <tr key={s.jti}>
                     <td className="py-2">{parseUA(s.userAgent)}</td>
                     <td className="py-2 font-mono text-xs">{s.ipAddress}</td>
-                    <td className="py-2" title={formatAbsoluteDate(s.issuedAt)}>
-                      {formatRelativeTime(s.issuedAt)}
+                    <td className="py-2">
+                      <time dateTime={s.issuedAt} title={formatAbsoluteDate(s.issuedAt)}>
+                        {formatRelativeTime(s.issuedAt)}
+                      </time>
                     </td>
                     <td className="py-2 text-right">
                       {s.current ? (
@@ -279,6 +286,7 @@ export function Account() {
                           type="button"
                           size="sm"
                           variant="outline"
+                          aria-label={`Revoke session on ${parseUA(s.userAgent)}`}
                           onClick={() => revokeSession(s.jti)}
                         >
                           Revoke
@@ -373,5 +381,6 @@ export function Account() {
         </CardContent>
       </Card>
     </div>
+    </>
   );
 }
diff --git a/apps/web/src/screens/BlogDetail.tsx b/apps/web/src/screens/BlogDetail.tsx
index 8fcbb1c..c052af9 100644
--- a/apps/web/src/screens/BlogDetail.tsx
+++ b/apps/web/src/screens/BlogDetail.tsx
@@ -57,7 +57,9 @@ export function BlogDetail() {
           {showEdited && post.editedAt && (
             <>
               <span>·</span>
-              <span title={post.editedAt}>Edited</span>
+              <time dateTime={post.editedAt} title={post.editedAt}>
+                Edited
+              </time>
             </>
           )}
         </div>
diff --git a/apps/web/src/screens/HelpWantedIndex.tsx b/apps/web/src/screens/HelpWantedIndex.tsx
index ae916f7..968273a 100644
--- a/apps/web/src/screens/HelpWantedIndex.tsx
+++ b/apps/web/src/screens/HelpWantedIndex.tsx
@@ -90,12 +90,14 @@ export function HelpWantedIndex() {
     <div className="container mx-auto px-4 py-8">
       <header className="mb-6 flex items-start justify-between gap-3">
         <div>
-          <h1 className="text-3xl font-bold flex items-center gap-3">
-            Help Wanted
+          {/* The count is a sibling of the h1, not part of it: an accessible
+              name that mutates on every filter change is a moving target. */}
+          <div className="flex items-center gap-3">
+            <h1 className="text-3xl font-bold">Help Wanted</h1>
             <span className="inline-flex items-center rounded-full bg-muted text-muted-foreground px-2.5 py-0.5 text-sm">
               {totalItems}
             </span>
-          </h1>
+          </div>
           <p className="text-muted-foreground mt-2 max-w-3xl">
             Concrete, time-boxed ways to contribute to Code for Philly projects.
           </p>
@@ -107,18 +109,20 @@ export function HelpWantedIndex() {
       <PostRolePickerModal open={pickerOpen} onOpenChange={setPickerOpen} />
 
       <div className="grid grid-cols-1 md:grid-cols-[16rem_1fr] gap-6">
-        <aside>
-          <FacetSidebar
-            facets={facets}
-            activeTags={tags}
-            onToggleTag={handleToggleTag}
-            tabs={['tech', 'topic']}
-          />
-
+        {/* The Commitment radios ride inside FacetSidebar's own labelled
+            <aside> rather than a second wrapper: one `complementary`
+            landmark ("Filters") holds every filter control, and nothing is
+            orphaned outside it. */}
+        <FacetSidebar
+          facets={facets}
+          activeTags={tags}
+          onToggleTag={handleToggleTag}
+          tabs={['tech', 'topic']}
+        >
           <div className="mt-6">
-            <h3 className="text-xs font-semibold uppercase tracking-wide mb-2 text-muted-foreground">
+            <h2 className="text-xs font-semibold uppercase tracking-wide mb-2 text-muted-foreground">
               Commitment
-            </h3>
+            </h2>
             <fieldset className="flex flex-col gap-1">
               <legend className="sr-only">Maximum commitment hours per week</legend>
               {COMMITMENT_OPTIONS.map((o) => (
@@ -146,9 +150,13 @@ export function HelpWantedIndex() {
               ))}
             </fieldset>
           </div>
-        </aside>
+        </FacetSidebar>
 
         <div>
+          {/* HelpWantedCard renders an h3 (it also sits under section h2s on
+              Home, TagDetail and Volunteer), so the results list needs its own
+              h2 or the page skips h1 → h3. Visually redundant, hence sr-only. */}
+          <h2 className="sr-only">Results</h2>
           <div className="flex items-center gap-2 flex-wrap text-sm mb-4">
             {hasActiveFilters && (
               <>
diff --git a/apps/web/src/screens/PeopleIndex.tsx b/apps/web/src/screens/PeopleIndex.tsx
index 9930b1b..4de703c 100644
--- a/apps/web/src/screens/PeopleIndex.tsx
+++ b/apps/web/src/screens/PeopleIndex.tsx
@@ -103,12 +103,14 @@ export function PeopleIndex() {
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="flex items-center justify-between gap-4 mb-4">
-        <h1 className="text-3xl font-bold flex items-center gap-3">
-          Members
+        {/* The count is a sibling of the h1, not part of it: an accessible
+            name that mutates on every filter change is a moving target. */}
+        <div className="flex items-center gap-3">
+          <h1 className="text-3xl font-bold">Members</h1>
           <span className="inline-flex items-center rounded-full bg-muted text-muted-foreground px-2.5 py-0.5 text-sm">
             {totalItems}
           </span>
-        </h1>
+        </div>
       </div>
 
       <Input
@@ -129,6 +131,10 @@ export function PeopleIndex() {
         />
 
         <div>
+          {/* PersonCard renders an h3 (it also sits under section h2s on
+              TagDetail), so the results grid needs its own h2 or the page
+              skips h1 → h3. Visually redundant, hence sr-only. */}
+          <h2 className="sr-only">Results</h2>
           <div className="flex items-center justify-between flex-wrap gap-3 mb-4">
             <div className="flex items-center gap-2 flex-wrap text-sm">
               {hasActiveFilters && (
diff --git a/apps/web/src/screens/PersonDetail.tsx b/apps/web/src/screens/PersonDetail.tsx
index ebd8a68..d4271af 100644
--- a/apps/web/src/screens/PersonDetail.tsx
+++ b/apps/web/src/screens/PersonDetail.tsx
@@ -12,13 +12,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { MarkdownView } from '@/components/MarkdownView';
 import { StageBadge } from '@/components/StageBadge';
 import { TagChip } from '@/components/TagChip';
 import { PersonAvatar } from '@/components/PersonAvatar';
 import { useAuth } from '@/hooks/useAuth';
 import { api, ApiError } from '@/lib/api';
-import { formatMonthYear, formatRelativeTime } from '@/lib/time';
+import { formatAbsoluteDate, formatMonthYear, formatRelativeTime } from '@/lib/time';
 
 export function PersonDetail() {
   const params = useParams();
@@ -103,6 +104,9 @@ export function PersonDetail() {
   });
 
   return (
+    <>
+    {/* specs/behaviors/app-shell.md → Breadcrumbs: Members › <fullName> */}
+    <Breadcrumbs items={[{ label: 'Members', href: '/members' }, { label: person.fullName }]} />
     <div className="container mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
       <div className="lg:col-span-2 space-y-8">
         <header className="flex items-start gap-6">
@@ -177,7 +181,10 @@ export function PersonDetail() {
                     )}
                   </div>
                   <span className="text-xs text-muted-foreground shrink-0">
-                    joined {formatRelativeTime(m.joinedAt)}
+                    joined{' '}
+                    <time dateTime={m.joinedAt} title={formatAbsoluteDate(m.joinedAt)}>
+                      {formatRelativeTime(m.joinedAt)}
+                    </time>
                   </span>
                 </li>
               ))}
@@ -198,9 +205,13 @@ export function PersonDetail() {
                     >
                       {u.project.title} · Update #{u.number}
                     </Link>
-                    <span className="text-xs text-muted-foreground">
+                    <time
+                      dateTime={u.createdAt}
+                      title={formatAbsoluteDate(u.createdAt)}
+                      className="text-xs text-muted-foreground"
+                    >
                       {formatRelativeTime(u.createdAt)}
-                    </span>
+                    </time>
                   </div>
                   <div className="line-clamp-3 text-sm">
                     <MarkdownView html={u.bodyHtml} />
@@ -215,9 +226,9 @@ export function PersonDetail() {
       <aside className="space-y-4 text-sm">
         {(person.slackHandle || person.email) && (
           <section>
-            <h3 className="text-sm font-semibold mb-2 text-muted-foreground uppercase tracking-wide">
+            <h2 className="text-sm font-semibold mb-2 text-muted-foreground uppercase tracking-wide">
               Contact
-            </h3>
+            </h2>
             <ul className="space-y-1">
               {person.slackHandle && (
                 <li>
@@ -228,6 +239,7 @@ export function PersonDetail() {
                     className="text-primary underline hover:no-underline"
                   >
                     DM on Slack
+                    <span className="sr-only"> (opens in new tab)</span>
                   </a>
                 </li>
               )}
@@ -245,9 +257,9 @@ export function PersonDetail() {
           </section>
         )}
         <section>
-          <h3 className="text-sm font-semibold mb-2 text-muted-foreground uppercase tracking-wide">
+          <h2 className="text-sm font-semibold mb-2 text-muted-foreground uppercase tracking-wide">
             Member since
-          </h3>
+          </h2>
           <p>{formatMonthYear(person.createdAt)}</p>
         </section>
         {isSelf && (
@@ -338,5 +350,6 @@ export function PersonDetail() {
         )}
       </aside>
     </div>
+    </>
   );
 }
diff --git a/apps/web/src/screens/ProfileEdit.tsx b/apps/web/src/screens/ProfileEdit.tsx
index 465757c..ff5f950 100644
--- a/apps/web/src/screens/ProfileEdit.tsx
+++ b/apps/web/src/screens/ProfileEdit.tsx
@@ -210,9 +210,16 @@ export function ProfileEdit() {
                 disabled={avatarUploading}
                 className="block"
               />
-              {avatarUploading && (
-                <span className="block mt-1 text-xs text-muted-foreground">Uploading…</span>
-              )}
+              {/* role="status" so the upload's progress is announced rather
+                  than only appearing next to the file input. The span stays
+                  mounted so the live region exists before its text changes;
+                  the margin applies only while it has something to show. */}
+              <span
+                role="status"
+                className={avatarUploading ? 'block mt-1 text-xs text-muted-foreground' : 'block'}
+              >
+                {avatarUploading ? 'Uploading…' : ''}
+              </span>
             </div>
           </div>
         </div>
diff --git a/apps/web/src/screens/ProjectDetail.tsx b/apps/web/src/screens/ProjectDetail.tsx
index 35d592e..35f3087 100644
--- a/apps/web/src/screens/ProjectDetail.tsx
+++ b/apps/web/src/screens/ProjectDetail.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
+import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -17,6 +18,7 @@ import {
   DialogDescription,
   DialogFooter,
 } from '@/components/ui/dialog';
+import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { MarkdownView } from '@/components/MarkdownView';
 import { StageProgressBar, StageBadge } from '@/components/StageBadge';
 import { StageInfoDialog } from '@/components/StageInfoDialog';
@@ -33,6 +35,24 @@ import { useAuth } from '@/hooks/useAuth';
 import { api, ApiError, type HelpWantedRoleResponse } from '@/lib/api';
 import { formatRelativeTime, formatAbsoluteDate } from '@/lib/time';
 
+/**
+ * Clipboard write with a toast either way. `navigator.clipboard` is
+ * undefined outside secure contexts (plain-http dev hosts, some webviews),
+ * and reading `.writeText` off it throws synchronously — before any
+ * `.catch()` could see it — so the guard sits outside the promise chain.
+ */
+function copyWithToast(text: string, ok: string, fail: string) {
+  const clipboard: Clipboard | undefined = navigator.clipboard;
+  if (!clipboard) {
+    toast.error(fail);
+    return;
+  }
+  void clipboard
+    .writeText(text)
+    .then(() => toast.success(ok))
+    .catch(() => toast.error(fail));
+}
+
 interface ProjectDetailProps {
   anchor?: 'update' | 'buzz';
 }
@@ -187,6 +207,9 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
   const allTags = [...project.tags.tech, ...project.tags.topic, ...project.tags.event];
 
   return (
+    <>
+    {/* specs/behaviors/app-shell.md → Breadcrumbs: Projects › <title> */}
+    <Breadcrumbs items={[{ label: 'Projects', href: '/projects' }, { label: project.title }]} />
     <div className="container mx-auto px-4 py-8">
       {/* Soft-delete banner — staff only (project-detail.md) */}
       {showDeletedBanner && (
@@ -223,7 +246,11 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
               perms.canDelete) && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="outline">More ▾</Button>
+                  {/* "More ▾" says nothing about what it opens; the label
+                      keeps the visible word so speech input still works. */}
+                  <Button variant="outline" aria-label="More actions">
+                    More ▾
+                  </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
                   {perms.canManageMembers && (
@@ -310,10 +337,13 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
                         {role.tags.topic.map((t) => <TagChip key={`topic.${t.slug}`} tag={t} />)}
                       </div>
                       <div className="flex items-center justify-end gap-2">
+                        {/* One row per open role, so these names repeat
+                            verbatim unless they carry the role title. */}
                         {role.permissions.canFill && (
                           <Button
                             size="sm"
                             variant="outline"
+                            aria-label={`Mark filled: ${role.title}`}
                             onClick={() => setFillRole(role)}
                           >
                             Mark filled
@@ -323,6 +353,7 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
                           <Button
                             size="sm"
                             variant="ghost"
+                            aria-label={`Close ${role.title}`}
                             onClick={() => {
                               if (!window.confirm(`Close "${role.title}" without filling?`)) return;
                               api.helpWantedRole
@@ -432,14 +463,15 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
 
           {/* Project info */}
           <section>
-            <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
+            <h2 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
               Project Info
-            </h3>
+            </h2>
             <div className="flex flex-col gap-2">
               {project.links.usersUrl && (
                 <Button asChild>
                   <a href={project.links.usersUrl} target="_blank" rel="noopener noreferrer">
                     Users' Site
+                    <span className="sr-only"> (opens in new tab)</span>
                   </a>
                 </Button>
               )}
@@ -447,6 +479,7 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
                 <Button asChild variant="outline">
                   <a href={project.links.developersUrl} target="_blank" rel="noopener noreferrer">
                     Developers' Site
+                    <span className="sr-only"> (opens in new tab)</span>
                   </a>
                 </Button>
               )}
@@ -464,9 +497,9 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
           {project.memberships.length > 0 && (
             <section>
               <div className="flex items-center justify-between mb-3">
-                <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                   Members ({project.counts.members})
-                </h3>
+                </h2>
                 {perms.canManageMembers && (
                   <Button
                     size="sm"
@@ -495,9 +528,9 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
           {/* Tags */}
           {allTags.length > 0 && (
             <section>
-              <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
+              <h2 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
                 Tags
-              </h3>
+              </h2>
               <div className="space-y-2">
                 {project.tags.tech.length > 0 && (
                   <div>
@@ -535,15 +568,23 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
 
           {/* Share */}
           <section>
-            <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
+            <h2 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
               Share
-            </h3>
+            </h2>
             <div className="flex flex-col gap-2">
+              {/* Both buttons used to copy silently — nothing changed on
+                  screen, so nobody (sighted or not) could tell it worked.
+                  sonner is what this screen's own modals already use for
+                  action confirmations. */}
               <Button
                 variant="outline"
-                onClick={() => {
-                  void navigator.clipboard.writeText(`https://codeforphilly.org/projects/${slug}`);
-                }}
+                onClick={() =>
+                  copyWithToast(
+                    `https://codeforphilly.org/projects/${slug}`,
+                    'Link copied',
+                    "Couldn't copy the link",
+                  )
+                }
               >
                 Copy link
               </Button>
@@ -553,8 +594,10 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
                   // Copy a pre-formatted Slack message. Spec calls this
                   // out as either system-share or copy; copy works in every
                   // browser context without a Web Share API gate.
-                  void navigator.clipboard.writeText(
+                  copyWithToast(
                     `Check out ${project.title} on Code for Philly: https://codeforphilly.org/projects/${slug}`,
+                    'Slack message copied',
+                    "Couldn't copy the message",
                   );
                 }}
               >
@@ -567,15 +610,15 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
           <section className="text-sm text-muted-foreground space-y-1">
             <p>
               <span className="font-medium text-foreground">Created:</span>{' '}
-              <span title={formatAbsoluteDate(project.createdAt)}>
+              <time dateTime={project.createdAt} title={formatAbsoluteDate(project.createdAt)}>
                 {formatRelativeTime(project.createdAt)}
-              </span>
+              </time>
             </p>
             <p>
               <span className="font-medium text-foreground">Last updated:</span>{' '}
-              <span title={formatAbsoluteDate(project.updatedAt)}>
+              <time dateTime={project.updatedAt} title={formatAbsoluteDate(project.updatedAt)}>
                 {formatRelativeTime(project.updatedAt)}
-              </span>
+              </time>
             </p>
             <p className="flex items-center gap-2">
               <span className="font-medium text-foreground">Stage:</span>
@@ -584,6 +627,7 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
             <p>
               <button
                 type="button"
+                aria-haspopup="dialog"
                 onClick={() => setStageInfoOpen(true)}
                 className="text-primary underline hover:no-underline"
               >
@@ -602,6 +646,7 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
                 className="hover:text-foreground"
               >
                 Edit on GitHub →
+                <span className="sr-only"> (opens in new tab)</span>
               </a>
             </section>
           )}
@@ -678,5 +723,6 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
         </DialogContent>
       </Dialog>
     </div>
+    </>
   );
 }
diff --git a/apps/web/src/screens/ProjectEdit.tsx b/apps/web/src/screens/ProjectEdit.tsx
index 0330557..d75d05d 100644
--- a/apps/web/src/screens/ProjectEdit.tsx
+++ b/apps/web/src/screens/ProjectEdit.tsx
@@ -13,6 +13,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Checkbox } from '@/components/ui/checkbox';
+import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { MarkdownEditor } from '@/components/MarkdownEditor';
 import { TagPicker } from '@/components/TagPicker';
 import { STAGES, type Stage } from '@/components/StageBadge';
@@ -158,6 +159,13 @@ export function ProjectEdit({ mode }: ProjectEditProps) {
 
   const project = projectQ.data?.data;
 
+  // Settled with no record (the query can resolve empty before an error
+  // surfaces): hold the loading state rather than rendering a form and a
+  // blank crumb pointing at /projects/.
+  if (mode === 'edit' && !project) {
+    return <div className="container mx-auto px-4 py-12 text-muted-foreground">Loading project…</div>;
+  }
+
   if (mode === 'edit' && project && !project.permissions.canEdit) {
     return (
       <div className="container mx-auto px-4 py-16 text-center">
@@ -268,6 +276,22 @@ export function ProjectEdit({ mode }: ProjectEditProps) {
           : '';
 
   return (
+    <>
+    {/* specs/behaviors/app-shell.md → Breadcrumbs:
+        create → Projects › New project; edit → Projects › <title> › Edit.
+        `project` is only ever loaded in edit mode (the query is gated on
+        it), and the guard above has already returned when it is missing. */}
+    <Breadcrumbs
+      items={
+        project
+          ? [
+              { label: 'Projects', href: '/projects' },
+              { label: project.title, href: `/projects/${project.slug}` },
+              { label: 'Edit' },
+            ]
+          : [{ label: 'Projects', href: '/projects' }, { label: 'New project' }]
+      }
+    />
     <div className="container mx-auto px-4 py-8 max-w-3xl">
       <header className="flex items-center justify-between mb-6">
         <h1 className="text-2xl font-bold">
@@ -503,5 +527,6 @@ export function ProjectEdit({ mode }: ProjectEditProps) {
         )}
       </form>
     </div>
+    </>
   );
 }
diff --git a/apps/web/src/screens/ProjectsIndex.tsx b/apps/web/src/screens/ProjectsIndex.tsx
index 26cfcb2..8e6022e 100644
--- a/apps/web/src/screens/ProjectsIndex.tsx
+++ b/apps/web/src/screens/ProjectsIndex.tsx
@@ -133,13 +133,13 @@ export function ProjectsIndex() {
     <div className="container mx-auto px-4 py-8">
       {/* Header */}
       <div className="flex items-start justify-between gap-4 mb-2">
-        <div>
-          <h1 className="text-3xl font-bold flex items-center gap-3">
-            Civic Projects Directory
-            <span className="inline-flex items-center rounded-full bg-muted text-muted-foreground px-2.5 py-0.5 text-sm">
-              {totalItems}
-            </span>
-          </h1>
+        {/* The count is a sibling of the h1, not part of it: an accessible
+            name that mutates on every filter change is a moving target. */}
+        <div className="flex items-center gap-3">
+          <h1 className="text-3xl font-bold">Civic Projects Directory</h1>
+          <span className="inline-flex items-center rounded-full bg-muted text-muted-foreground px-2.5 py-0.5 text-sm">
+            {totalItems}
+          </span>
         </div>
         {person && (
           <Button asChild>
diff --git a/apps/web/src/screens/Sponsor.tsx b/apps/web/src/screens/Sponsor.tsx
index 49cd58c..c6f7557 100644
--- a/apps/web/src/screens/Sponsor.tsx
+++ b/apps/web/src/screens/Sponsor.tsx
@@ -106,6 +106,11 @@ export function Sponsor() {
             <Button variant="outline" size="sm" onClick={handleCopy}>
               {copied ? 'Copied ✓' : 'Copy email'}
             </Button>
+            {/* The label swap is the only success signal, and a control's own
+                name changing is not announced. Mirror it in a live region. */}
+            <span role="status" className="sr-only">
+              {copied ? `${email} copied to clipboard` : ''}
+            </span>
           </div>
         </div>
       </section>
diff --git a/apps/web/src/screens/TagDetail.tsx b/apps/web/src/screens/TagDetail.tsx
index a3902c1..8f2104c 100644
--- a/apps/web/src/screens/TagDetail.tsx
+++ b/apps/web/src/screens/TagDetail.tsx
@@ -3,10 +3,12 @@ import { Link, useNavigate, useParams } from 'react-router';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
+import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { ProjectCard } from '@/components/ProjectCard';
 import { PersonCard } from '@/components/PersonCard';
 import { HelpWantedCard } from '@/components/HelpWantedCard';
 import { TagEditModal } from '@/components/modals/TagEditModal';
+import { NS_LABELS } from '@/screens/TagsNamespace';
 import { useAuth } from '@/hooks/useAuth';
 import { api, ApiError } from '@/lib/api';
 
@@ -102,6 +104,17 @@ export function TagDetail() {
   };
 
   return (
+    <>
+    {/* specs/behaviors/app-shell.md → Breadcrumbs: Tags › <namespace> › <title>.
+        The namespace crumb carries the same display label as the page it
+        links to (TagsNamespace's h1), not the raw slug. */}
+    <Breadcrumbs
+      items={[
+        { label: 'Tags', href: '/tags' },
+        { label: NS_LABELS[tag.namespace] ?? tag.namespace, href: `/tags/${tag.namespace}` },
+        { label: tag.title },
+      ]}
+    />
     <div className="container mx-auto px-4 py-8 space-y-10">
       <header className="flex items-start justify-between gap-3">
         <div>
@@ -224,5 +237,6 @@ export function TagDetail() {
         </section>
       )}
     </div>
+    </>
   );
 }
diff --git a/apps/web/src/screens/TagsNamespace.tsx b/apps/web/src/screens/TagsNamespace.tsx
index 3f020e7..a4f3145 100644
--- a/apps/web/src/screens/TagsNamespace.tsx
+++ b/apps/web/src/screens/TagsNamespace.tsx
@@ -6,7 +6,7 @@ import { TagChip } from '@/components/TagChip';
 import { Pagination } from '@/components/Pagination';
 import { api } from '@/lib/api';
 
-const NS_LABELS: Record<string, string> = {
+export const NS_LABELS: Record<string, string> = {
   topic: 'Topics',
   tech: 'Tech',
   event: 'Events',
diff --git a/apps/web/src/screens/Volunteer.tsx b/apps/web/src/screens/Volunteer.tsx
index 458652f..7f81437 100644
--- a/apps/web/src/screens/Volunteer.tsx
+++ b/apps/web/src/screens/Volunteer.tsx
@@ -72,6 +72,7 @@ export function Volunteer() {
             <Button asChild variant="outline" size="sm">
               <a href={MEETUP_URL} target="_blank" rel="noopener noreferrer">
                 When we meet →
+                <span className="sr-only"> (opens in new tab)</span>
               </a>
             </Button>
           </div>
@@ -144,6 +145,7 @@ export function Volunteer() {
             <Button asChild>
               <a href={START_PROJECT_URL} target="_blank" rel="noopener noreferrer">
                 Read the guide →
+                <span className="sr-only"> (opens in new tab)</span>
               </a>
             </Button>
             <Button asChild variant="outline">
diff --git a/apps/web/tests/Account.test.tsx b/apps/web/tests/Account.test.tsx
index 774e8e5..be6d510 100644
--- a/apps/web/tests/Account.test.tsx
+++ b/apps/web/tests/Account.test.tsx
@@ -5,7 +5,7 @@
  * by AppShell on every page), and is covered by its own test file.
  */
 import { describe, expect, it, vi, afterEach } from 'vitest';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import { renderScreen, mockOk } from './test-utils.js';
 import { Account } from '../src/screens/Account.js';
 import { AuthProvider } from '../src/hooks/useAuth.js';
@@ -17,7 +17,24 @@ interface MeShape {
   lastLoginMethod: 'github' | 'legacy_password' | 'password_reset' | null;
 }
 
-function mockApi(me: MeShape): void {
+const SESSIONS = [
+  {
+    jti: 'sess-1',
+    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X) Chrome/120',
+    ipAddress: '203.0.113.1',
+    issuedAt: '2026-05-01T00:00:00Z',
+    current: false,
+  },
+  {
+    jti: 'sess-2',
+    userAgent: 'Mozilla/5.0 (Windows NT 10.0) Firefox/121',
+    ipAddress: '203.0.113.2',
+    issuedAt: '2026-05-02T00:00:00Z',
+    current: false,
+  },
+];
+
+function mockApi(me: MeShape, sessions: unknown[] = []): void {
   vi.spyOn(globalThis, 'fetch').mockImplementation(((input: string) => {
     if (input.startsWith('/api/auth/me')) {
       return Promise.resolve(
@@ -29,7 +46,7 @@ function mockApi(me: MeShape): void {
     }
     if (input.startsWith('/api/auth/sessions')) {
       return Promise.resolve(
-        new Response(JSON.stringify(mockOk([])), {
+        new Response(JSON.stringify(mockOk(sessions)), {
           status: 200,
           headers: { 'content-type': 'application/json' },
         }),
@@ -105,3 +122,38 @@ describe('Account — Identity card', () => {
     ).toBe(0);
   });
 });
+
+describe('Account — accessibility structure', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders the "Settings" breadcrumb trail from app-shell.md', async () => {
+    mockApi(githubPerson);
+    render();
+    const trail = await screen.findByRole('navigation', { name: 'Breadcrumb' });
+    expect(within(trail).getByText('Settings')).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('names each Revoke button after its own session', async () => {
+    mockApi(githubPerson, SESSIONS);
+    render();
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Revoke session on Chrome on macOS' }))
+        .toBeInTheDocument();
+    });
+    expect(
+      screen.getByRole('button', { name: 'Revoke session on Firefox on Windows' }),
+    ).toBeInTheDocument();
+    // The visible text is still "Revoke" on both (SC 2.5.3 keeps it a substring).
+    expect(screen.getAllByRole('button', { name: /^Revoke session on/ })).toHaveLength(2);
+  });
+
+  it('exposes session timestamps as machine-readable <time>', async () => {
+    mockApi(githubPerson, SESSIONS);
+    render();
+    await waitFor(() => {
+      expect(document.querySelector('time[datetime="2026-05-01T00:00:00Z"]')).not.toBeNull();
+    });
+  });
+});
diff --git a/apps/web/tests/AppHeader.test.tsx b/apps/web/tests/AppHeader.test.tsx
index 0140c75..2e14cd7 100644
--- a/apps/web/tests/AppHeader.test.tsx
+++ b/apps/web/tests/AppHeader.test.tsx
@@ -53,7 +53,9 @@ describe('AppHeader', () => {
 
   it('renders the GitHub link in the utility cluster', async () => {
     renderWithRouter(<Wrapped />);
-    const gh = screen.getByRole('link', { name: 'Code for Philly on GitHub' });
+    const gh = screen.getByRole('link', {
+      name: 'Code for Philly on GitHub (opens in new tab)',
+    });
     expect(gh).toHaveAttribute('href', 'https://github.com/CodeForPhilly');
     expect(gh).toHaveAttribute('target', '_blank');
     expect(gh).toHaveAttribute('rel', 'noopener noreferrer');
@@ -121,6 +123,24 @@ describe('AppHeader', () => {
     expect(dialog).toBeInTheDocument();
   });
 
+  it('marks up both navs as lists', async () => {
+    const user = userEvent.setup();
+    renderWithRouter(<Wrapped />);
+
+    const desktop = screen.getByRole('navigation', { name: /primary navigation/i });
+    expect(within(desktop).getByRole('list')).toBeInTheDocument();
+    // Projects, Help Wanted, Members, About
+    expect(within(desktop).getAllByRole('listitem')).toHaveLength(4);
+
+    await user.click(screen.getByRole('button', { name: /open navigation menu/i }));
+    const mobile = await screen.findByRole('navigation', { name: /mobile navigation/i });
+    // Three groups: primary, About, and the GitHub/Volunteer tail.
+    expect(within(mobile).getAllByRole('list')).toHaveLength(3);
+    expect(
+      within(mobile).getByRole('heading', { name: 'About', level: 3 }),
+    ).toBeInTheDocument();
+  });
+
   it('lists GitHub and Volunteer in the mobile sheet', async () => {
     const user = userEvent.setup();
     renderWithRouter(<Wrapped />);
@@ -128,10 +148,11 @@ describe('AppHeader', () => {
     await user.click(screen.getByRole('button', { name: /open navigation menu/i }));
 
     const nav = await screen.findByRole('navigation', { name: /mobile navigation/i });
-    expect(within(nav).getByRole('link', { name: 'GitHub' })).toHaveAttribute(
-      'href',
-      'https://github.com/CodeForPhilly',
-    );
+    // Regex, not an exact string: the sr-only cue is a separate text node and
+    // accname implementations differ on whether they insert a separator.
+    expect(
+      within(nav).getByRole('link', { name: /^GitHub\s*\(opens in new tab\)$/ }),
+    ).toHaveAttribute('href', 'https://github.com/CodeForPhilly');
     expect(within(nav).getByRole('link', { name: 'Volunteer' })).toHaveAttribute(
       'href',
       '/volunteer',
diff --git a/apps/web/tests/ConnectGitHubBanner.test.tsx b/apps/web/tests/ConnectGitHubBanner.test.tsx
index 6a21568..82b8a25 100644
--- a/apps/web/tests/ConnectGitHubBanner.test.tsx
+++ b/apps/web/tests/ConnectGitHubBanner.test.tsx
@@ -77,6 +77,9 @@ describe('ConnectGitHubBanner', () => {
     const region = screen.getByRole('region', { name: /connect github/i });
     expect(region.querySelector('form[action="/api/auth/link-github"]')).not.toBeNull();
     expect(screen.getByRole('button', { name: /dismiss/i })).toBeInTheDocument();
+    // The landmark mounts after first paint, so its arrival is announced
+    // through a sibling live region carrying the headline.
+    expect(screen.getByRole('status')).toHaveTextContent('Connect your GitHub account');
   });
 
   it('renders for a user whose session was minted via password reset', async () => {
diff --git a/apps/web/tests/HelpWantedIndex.test.tsx b/apps/web/tests/HelpWantedIndex.test.tsx
index 3df6de4..cfd9231 100644
--- a/apps/web/tests/HelpWantedIndex.test.tsx
+++ b/apps/web/tests/HelpWantedIndex.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import { renderScreen, mockPaginated } from './test-utils.js';
 import { HelpWantedIndex } from '../src/screens/HelpWantedIndex.js';
 import { AuthProvider } from '../src/hooks/useAuth.js';
@@ -78,4 +78,22 @@ describe('HelpWantedIndex', () => {
     expect(screen.getByLabelText('≤ 5 hrs/week')).toBeInTheDocument();
     expect(screen.getByLabelText('≤ 10 hrs/week')).toBeInTheDocument();
   });
+
+  it('keeps every filter control inside the one Filters landmark', async () => {
+    renderScreen(
+      <AuthProvider>
+        <HelpWantedIndex />
+      </AuthProvider>,
+      { initialEntries: ['/help-wanted'] },
+    );
+
+    const sidebars = await screen.findAllByRole('complementary');
+    expect(sidebars).toHaveLength(1);
+    const sidebar = sidebars[0]!;
+    expect(sidebar).toHaveAccessibleName('Filters');
+    // Commitment rides inside the same landmark as the tag facets rather
+    // than sitting orphaned beside it.
+    expect(within(sidebar).getByRole('heading', { name: 'Commitment', level: 2 })).toBeInTheDocument();
+    expect(within(sidebar).getByLabelText('≤ 2 hrs/week')).toBeInTheDocument();
+  });
 });
diff --git a/apps/web/tests/MarkdownEditor.test.tsx b/apps/web/tests/MarkdownEditor.test.tsx
new file mode 100644
index 0000000..93ef739
--- /dev/null
+++ b/apps/web/tests/MarkdownEditor.test.tsx
@@ -0,0 +1,72 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithRouter } from './test-utils.js';
+import { MarkdownEditor } from '../src/components/MarkdownEditor.js';
+
+function Harness() {
+  return <MarkdownEditor label="Overview" value="" onChange={() => {}} />;
+}
+
+describe('MarkdownEditor formatting toolbar', () => {
+  beforeEach(() => {
+    // The preview round-trip is skipped for empty content, but stub fetch
+    // anyway so a stray call can never reach the network.
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response(null, { status: 404 }));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('exposes a labelled toolbar whose buttons have real names', () => {
+    renderWithRouter(<Harness />);
+    const toolbar = screen.getByRole('toolbar', { name: 'Formatting' });
+    for (const name of ['Bold', 'Italic', 'Insert link', 'Bulleted list', 'Code', 'Quote']) {
+      expect(within(toolbar).getByRole('button', { name })).toBeInTheDocument();
+    }
+  });
+
+  it('keeps every accessible name a superset of the visible label (SC 2.5.3)', () => {
+    renderWithRouter(<Harness />);
+    const toolbar = screen.getByRole('toolbar', { name: 'Formatting' });
+    for (const [visible, name] of [
+      ['B', 'Bold'],
+      ['I', 'Italic'],
+      ['Link', 'Insert link'],
+      ['List', 'Bulleted list'],
+    ] as const) {
+      const btn = within(toolbar).getByRole('button', { name });
+      expect(btn.textContent).toBe(visible);
+      expect(btn.getAttribute('aria-label')?.toLowerCase()).toContain(visible.toLowerCase());
+    }
+  });
+
+  it('is a single tab stop with a roving tabindex', async () => {
+    const user = userEvent.setup();
+    renderWithRouter(<Harness />);
+    const toolbar = screen.getByRole('toolbar', { name: 'Formatting' });
+    const buttons = within(toolbar).getAllByRole('button');
+
+    // Only the active button is reachable by Tab.
+    expect(buttons.filter((b) => b.getAttribute('tabindex') === '0')).toHaveLength(1);
+    expect(buttons[0]).toHaveAttribute('tabindex', '0');
+
+    buttons[0]!.focus();
+    await user.keyboard('{ArrowRight}');
+    expect(buttons[1]).toHaveFocus();
+    expect(buttons[1]).toHaveAttribute('tabindex', '0');
+    expect(buttons[0]).toHaveAttribute('tabindex', '-1');
+
+    await user.keyboard('{End}');
+    expect(buttons[buttons.length - 1]).toHaveFocus();
+
+    // Wraps forward off the end, and Home returns to the first.
+    await user.keyboard('{ArrowRight}');
+    expect(buttons[0]).toHaveFocus();
+    await user.keyboard('{ArrowLeft}');
+    expect(buttons[buttons.length - 1]).toHaveFocus();
+    await user.keyboard('{Home}');
+    expect(buttons[0]).toHaveFocus();
+  });
+});
diff --git a/apps/web/tests/PersonDetail.test.tsx b/apps/web/tests/PersonDetail.test.tsx
index e5d2642..0c35fd3 100644
--- a/apps/web/tests/PersonDetail.test.tsx
+++ b/apps/web/tests/PersonDetail.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi, afterEach } from 'vitest';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import { Routes, Route } from 'react-router';
 import { renderScreen, mockOk } from './test-utils.js';
 import { PersonDetail } from '../src/screens/PersonDetail.js';
@@ -42,6 +42,31 @@ function makeFetchMock(person: typeof BASE_PERSON) {
   }) as typeof fetch;
 }
 
+describe('PersonDetail breadcrumbs', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders the "Members › <fullName>" trail from app-shell.md', async () => {
+    vi.spyOn(globalThis, 'fetch').mockImplementation(makeFetchMock(BASE_PERSON));
+    renderScreen(
+      <AuthProvider>
+        <Routes>
+          <Route path="/members/:slug" element={<PersonDetail />} />
+        </Routes>
+      </AuthProvider>,
+      { initialEntries: ['/members/jane-doe'] },
+    );
+
+    const trail = await screen.findByRole('navigation', { name: 'Breadcrumb' });
+    expect(within(trail).getByRole('link', { name: 'Members' })).toHaveAttribute(
+      'href',
+      '/members',
+    );
+    expect(within(trail).getByText('Jane Doe')).toHaveAttribute('aria-current', 'page');
+  });
+});
+
 describe('PersonDetail Contact sidebar', () => {
   afterEach(() => {
     vi.restoreAllMocks();
diff --git a/apps/web/tests/ProjectDetail.test.tsx b/apps/web/tests/ProjectDetail.test.tsx
index ff4c486..4c323a6 100644
--- a/apps/web/tests/ProjectDetail.test.tsx
+++ b/apps/web/tests/ProjectDetail.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import { Routes, Route } from 'react-router';
 import { renderScreen, mockOk, mockPaginated } from './test-utils.js';
 import { ProjectDetail } from '../src/screens/ProjectDetail.js';
@@ -59,6 +59,31 @@ describe('ProjectDetail', () => {
     vi.restoreAllMocks();
   });
 
+  it('renders the "Projects › <title>" breadcrumb trail from app-shell.md', async () => {
+    renderScreen(
+      <AuthProvider>
+        <Routes>
+          <Route path="/projects/:slug" element={<ProjectDetail />} />
+        </Routes>
+      </AuthProvider>,
+      { initialEntries: ['/projects/sample-project'] },
+    );
+
+    const trail = await screen.findByRole('navigation', { name: 'Breadcrumb' });
+    expect(within(trail).getByRole('link', { name: 'Projects' })).toHaveAttribute(
+      'href',
+      '/projects',
+    );
+    // The last crumb is the current page, so it is text, not a link.
+    expect(within(trail).getByText('Sample Project')).toHaveAttribute(
+      'aria-current',
+      'page',
+    );
+    expect(
+      within(trail).queryByRole('link', { name: 'Sample Project' }),
+    ).not.toBeInTheDocument();
+  });
+
   it('renders the title, overview, and Sign-in CTA for anonymous', async () => {
     renderScreen(
       <AuthProvider>
diff --git a/plans/a11y-mechanical.md b/plans/a11y-mechanical.md
new file mode 100644
index 0000000..def319c
--- /dev/null
+++ b/plans/a11y-mechanical.md
@@ -0,0 +1,261 @@
+---
+status: done
+depends: []
+specs:
+  - specs/behaviors/app-shell.md
+issues: []
+pr: 157
+---
+
+# Plan: mechanical accessibility fixes across the SPA
+
+## Scope
+
+The third and largest bucket of the `apps/web` accessibility audit: findings
+with **one obviously-correct fix each** and no design decision attached.
+Repeated button names in lists, heading-level skips, missing toolbar
+semantics, unannounced status changes, dates trapped in `title` attributes,
+missing new-tab cues, landmark nesting, and the `Breadcrumbs` component that
+`specs/behaviors/app-shell.md` prescribes but nothing renders.
+
+This branch **stacks on PR #154** (`fix/site-check-153` — header/nav rewrite)
+and **PR #155** (`fix/aria-correctness` — ARIA validity), because it edits
+many of the same files. It is cut from #154 with #155 merged in.
+
+It **complements issue #156**, which holds the audit's *design-decision*
+findings (colour contrast, `document.title`, motion/pause controls,
+`CardTitle` semantics, the `NetworkErrorBanner` "Retry" contradiction).
+Nothing from #156 is implemented here — those need decisions, not fixes.
+
+Only one item is spec-facing, and it is conformance **to** an existing spec:
+`specs/behaviors/app-shell.md` → Breadcrumbs already prescribes an exact
+table of trails. **No spec change is needed anywhere in this plan.**
+
+## Implements
+
+- [app-shell.md](../specs/behaviors/app-shell.md) — **Breadcrumbs**: the
+  prescribed trail table is brought to code on all six screens that declare
+  one. The existing `Breadcrumbs.tsx` component was already correct and
+  complete; it was simply never imported.
+
+## Approach
+
+### 1. Breadcrumbs wiring (the spec-conformance item)
+
+`apps/web/src/components/Breadcrumbs.tsx` renders `nav[aria-label="Breadcrumb"]
+> ol > li` with `aria-current="page"` on the last crumb — correct as written,
+imported by nothing. Wired into the six screens the spec's table names, each
+rendered as a fragment sibling immediately *above* the screen's content
+container (the spec's "row below the header"):
+
+| Route | Trail |
+|---|---|
+| `/projects/:slug` | Projects › `<title>` |
+| `/projects/:slug/edit` | Projects › `<title>` › Edit |
+| `/projects/create` | Projects › New project |
+| `/members/:slug` | Members › `<fullName>` |
+| `/tags/:namespace/:slug` | Tags › `<namespace>` › `<title>` |
+| `/account` | Settings |
+
+No `specs/screens/*.md` mentions breadcrumbs at all, so there is no
+contradiction to resolve — app-shell.md is the sole authority.
+
+### 2. Repeated identical button names in lists (SC 4.1.2 / 2.4.6)
+
+A screen-reader user tabbing a list of "Remove / Remove / Remove" has no way
+to tell the rows apart. Each gets an `aria-label` that **contains its visible
+text** (SC 2.5.3) plus the row's subject:
+
+| File | Buttons | Label shape |
+|---|---|---|
+| `modals/ManageMembersModal.tsx` | Edit role, Make maintainer, Remove | `Remove ${fullName}` |
+| `screens/Account.tsx` | Revoke (per session) | `Revoke session on ${device}` |
+| `pages/StaffAccountClaimQueue.tsx` | Approve, Deny | `Approve claim from ${login}` |
+| `screens/ProjectDetail.tsx` | Mark filled, Close | `Close ${role.title}` |
+
+### 3. Heading levels
+
+Three index screens jump `h1` → `h3` because their card components render
+`h3`. **The cards are not changed** — `PersonCard` and `HelpWantedCard` are
+each used in a second context (`TagDetail`, `Home`, `Volunteer`) where they
+sit correctly under a section `h2`. Instead each index screen gains an
+`sr-only <h2>` section heading above its results region, which is both the
+smaller change and the more honest markup: the grid *is* a section.
+
+`ProjectDetail` and `PersonDetail` aside headings go `h3` → `h2` directly —
+they sit under the screen `h1` with no intervening heading, are used nowhere
+else, and keep their existing classes so nothing moves visually. (Heading
+level and visual size are independent.)
+
+`ProjectsIndex` was checked for the same pattern and does **not** have it —
+`ProjectCard` already renders `h2`. No sr-only heading added there.
+
+### 4. `MarkdownEditor` toolbar
+
+The six formatting buttons were a bare `<div>` of buttons named "B", "I",
+"Link"… Now `role="toolbar"` + `aria-label="Formatting"`, each button
+`aria-label`'d with a full name that contains its visible label as a
+substring (B ⊂ Bold, I ⊂ Italic, Link ⊂ Insert link, List ⊂ Bulleted list),
+and a roving tabindex: only the active button is tabbable,
+ArrowLeft/ArrowRight move focus (wrapping), Home/End jump to the ends. The
+keydown handler derives its starting index from the event target rather
+than the `activeButton` state, which lags a focus change by one render.
+
+### 5. Status announcements
+
+Three places changed state visually with nothing announced:
+
+- `ProjectDetail` "Copy link" / "Share to Slack" gave **no feedback at all** —
+  now `toast.success(...)` via sonner, which this screen's own modals already
+  use for exactly this kind of confirmation.
+- `Sponsor`'s "Copy email" swaps its label to "Copied ✓" — visible text kept,
+  with an `sr-only role="status"` mirror added.
+- `ProfileEdit`'s "Uploading…" span becomes `role="status"`.
+- `ConnectGitHubBanner` is a `role="region"` that mounts only after auth
+  resolves, so its arrival is never announced. It *stays* a region (a
+  late-mounted `status` container is not read reliably either, and it would
+  wrap the two buttons) and gains a sibling sr-only `role="status"` span
+  carrying the headline — the same mirror idiom as `Sponsor`.
+
+### 6. `<time dateTime>` for machine-readable dates
+
+`title` is not exposed to most screen readers and never on touch. Every date
+rendered as relative text inside a `title`-only `<span>` becomes
+`<time dateTime={iso} title={absolute}>` — the `BlogIndex.tsx` idiom.
+Covers `ActivityCard` (×2), `ProjectDetail` (×2), `PersonDetail` (×2),
+`HelpWantedCard`, `BlogDetail`, `Account`, `StaffAccountClaimQueue`,
+`AccountClaim`. `ProjectCard`'s wrapper
+`title={m.fullName}` is deleted outright — `PersonAvatar` already emits it.
+
+### 7. Structure and one-liners
+
+- `PersonCard` was one giant `<Link>`, so its accessible name concatenated
+  avatar + name + project count + every tag chip. Restructured to the
+  `ProjectCard` idiom: `<article>` with the `h3` wrapping the link. The hover
+  lift (`hover:shadow-md hover:-translate-y-0.5`) stays on the article, so
+  the affordance is unchanged.
+- `AppHeader`'s two navs render bare links; wrapped in `<ul>/<li>` matching
+  `AppFooter`. Flex/gap classes move to the `ul`; `li` contributes nothing.
+  Sheet separators sit between the two lists rather than inside one.
+- The mobile sheet's "About" group label was a styled `<p>` → `<h3>` (one
+  level below the Radix `SheetTitle`, which renders `h2`), same classes.
+- `HelpWantedIndex`'s bare outer `<aside>` wrapped `FacetSidebar`, which
+  renders its own labelled `<aside>` — two nested `complementary` landmarks.
+  `FacetSidebar` now accepts `children` inside its aside, and the Commitment
+  heading + fieldset ride there: one landmark ("Filters") holds every filter
+  control instead of leaving Commitment orphaned beside it. (`PeopleIndex`/
+  `ProjectsIndex` render `FacetSidebar` directly and never had this.)
+- Result-count badges move **out** of the `h1` into a flex sibling on all
+  three index screens, so the heading's accessible name stops mutating as
+  filters change.
+- `target="_blank"` links get a new-tab cue: `<span className="sr-only"> (opens
+  in new tab)</span>` where visible text exists, appended to the `aria-label`
+  where it does not.
+- `ProjectDetail`'s "More ▾" menu trigger gets `aria-label="More actions"`;
+  the "What does this stage mean?" dialog trigger gets `aria-haspopup="dialog"`.
+
+## Validation
+
+- [x] Breadcrumbs render on all six screens the spec's table names, with the
+      exact trails prescribed, and each non-final crumb links to its parent.
+- [x] No two buttons in the audited lists share an accessible name; every
+      added `aria-label` contains the button's visible text (SC 2.5.3).
+- [x] `PeopleIndex` / `HelpWantedIndex` no longer skip `h1` → `h3`;
+      `ProjectDetail` / `PersonDetail` aside headings are `h2`.
+- [x] The `MarkdownEditor` toolbar exposes `role="toolbar"`, named buttons,
+      and a working roving tabindex (Arrow/Home/End).
+- [x] Copy actions on `ProjectDetail` and `Sponsor` announce (including a
+      failure toast where `navigator.clipboard` is absent); `ProfileEdit`'s
+      upload is a live region; `ConnectGitHubBanner`'s arrival is announced
+      by its sibling status span.
+- [x] Dates expose `datetime`; no date is `title`-only.
+- [x] Exactly one `complementary` landmark per index screen, and on
+      `HelpWantedIndex` it contains the Commitment controls
+      (`HelpWantedIndex.test.tsx`).
+- [x] Full gate from the repo root, all workspaces: `npm ci && npm run -w
+      packages/shared build && npm run type-check && npm run lint && npm
+      test` clean after the rebase onto `develop` and the review fix-ups
+      (api 434/434 across 35 files, web 124/124 across 28, shared 75/75
+      across 3). The root `npm test` invocation was OOM-killed once on the
+      closeout machine, so the api suite was re-run alone with
+      `--maxWorkers=2`; every workspace suite ran to completion. The
+      contributor's earlier pass ran web + shared only (web 116/116,
+      shared 75/75).
+- [x] Browser test (headed Chrome against the live dev stack — api booted on
+      a `setup-dev-data` repo with two seeded records): breadcrumb trails
+      verified on `/projects/qa-sandbox` ("Projects › QA Sandbox Project")
+      and `/members/ada-tester` ("Members › Ada Tester"); "Copy link" fires
+      the "Link copied" toast; the count badge sits outside the `h1` with
+      the visual unchanged; `PersonCard` whole-card click still navigates.
+      Toolbar keyboard nav verified in jsdom only (`MarkdownEditor.test.tsx`).
+
+## Risks / unknowns
+
+- **Low.** Almost every change is attribute-level or a wrapper element.
+- The two structural edits (`PersonCard`, `AppHeader` nav lists) touch files
+  PR #154 rewrote. Both keep every existing behavior — the sheet closing on
+  navigation (derived from `location.key` since #154, so the NavLinks carry
+  no per-item `onClick`), the separators, the NavLink active styling — and
+  are covered by the existing `AppHeader.test.tsx` suite plus updated name
+  matchers.
+- The `apps/api` suite was skipped on the contributor's Windows pass (known
+  fixture failure there, tracked in #162); it was run in full on Linux at
+  closeout — see Validation.
+
+## Notes
+
+- **`aria-label` supersets on visible-text buttons are deliberate.** "More ▾"
+  → `aria-label="More actions"`, "Mark filled" → `Mark filled: <role>`,
+  "Remove" → `Remove <name>`, and the toolbar's "B" → "Bold". In every case
+  the visible text is a prefix (or, for the toolbar, a substring) of the
+  accessible name, which is what SC 2.5.3 Label in Name asks for and what
+  the specs already assume for the per-row actions. Speech-input users
+  saying what they see still hit the control.
+- **jsdom's accname drops the leading space in sr-only cues** — it
+  computes `"GitHub(opens in new tab)"` where Chrome computes
+  `"GitHub (opens in new tab)"`. Tests match with `\s*` regexes rather than
+  encoding either engine's answer.
+- **Rebase.** The branch was cut from a local merge of #154 and #155; both
+  were patched during review before landing on `develop`, so the eight
+  commits here were rebased onto `develop` after #155 merged. The one
+  conflict was `AppHeader.tsx`: #154 replaced the per-NavLink `onClick`
+  closers with a sheet state derived from `location.key`, and this branch
+  wrapped the same links in `<ul>/<li>`. Resolved by keeping the list
+  structure without the closers (the two plain `<a>`s — Contact, GitHub —
+  keep theirs, since they don't navigate client-side).
+- **Review fix-ups applied on top of the six commits:** `block` on sheet
+  anchors so the `<li>` wrap doesn't shrink their tap targets; Commitment
+  moved inside `FacetSidebar`'s aside (via a new `children` slot) instead
+  of sitting outside every landmark; `ConnectGitHubBanner` kept as a region
+  with a sibling status announcer; `Breadcrumbs` keyed by index (the PR's
+  own "pre-existing, flagged" item); the namespace crumb labelled via
+  `TagsNamespace`'s `NS_LABELS` so it matches the destination `h1`;
+  `ProjectEdit` holds its loading state when the edit query settles empty
+  instead of rendering a blank crumb to `/projects/`; a `copyWithToast`
+  helper on `ProjectDetail` that guards `navigator.clipboard` (undefined in
+  insecure contexts, and reading `.writeText` off it throws synchronously,
+  so the old `.catch()` never fired); `ProfileEdit`'s status span only
+  reserves `mt-1` while it has text; three `<time>`s the first sweep missed
+  (`HelpWantedCard`, `PersonDetail` ×2); the toolbar keydown handler reads
+  its index from the event target rather than the `activeButton` closure.
+- `NS_LABELS` is now exported from `screens/TagsNamespace.tsx` and imported
+  by `screens/TagDetail.tsx` — a screen importing from a screen, chosen as
+  the smallest change. `FacetSidebar` carries its own copy of the same map;
+  a shared tags-label module could absorb both.
+
+## Follow-ups
+
+- Issue [#166](https://github.com/CodeForPhilly/codeforphilly-ng/issues/166)
+  — render breadcrumbs from the shell via route `handle`s (`useMatches`)
+  per app-shell.md, so skip-to-main lands past them rather than on them.
+- Issue [#167](https://github.com/CodeForPhilly/codeforphilly-ng/issues/167)
+  — `ExternalLink` component for the 16 hand-rolled "(opens in new tab)"
+  copies.
+- Issue [#168](https://github.com/CodeForPhilly/codeforphilly-ng/issues/168)
+  — `RelativeTime` component for the 13 `<time dateTime title>` sites.
+- Issue [#169](https://github.com/CodeForPhilly/codeforphilly-ng/issues/169)
+  — `MarkdownEditor` toolbar should use Radix `Toolbar` from the
+  already-installed `radix-ui` instead of the hand-rolled roving tabindex.
+- Issue [#170](https://github.com/CodeForPhilly/codeforphilly-ng/issues/170)
+  — card heading level should be a prop; `TagDetail` renders a section `h2`
+  followed by `ProjectCard` `h2`s.