diff --git a/.changeset/a11y-wcag-fixes.md b/.changeset/a11y-wcag-fixes.md
new file mode 100644
index 000000000..e3a7fcea3
--- /dev/null
+++ b/.changeset/a11y-wcag-fixes.md
@@ -0,0 +1,7 @@
+---
+"@tabler/core": patch
+"@tabler/preview": patch
+"@tabler/docs": patch
+---
+
+Fixed accessibility issues for skip links, keyboard focus, `prefers-reduced-motion`, form labels, and action controls that incorrectly used links instead of `button` elements.
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index 0d8ad01a3..efeed4168 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -1006,7 +1006,7 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;
 $component-active-color: $white !default;
 $component-active-bg: $primary !default;
 
-// Focus
+// Focus (WCAG 2.2 SC 1.4.11)
 $focus-ring-width: 0.25rem !default;
 $focus-ring-opacity: 0.25 !default;
 $focus-ring-color: color-mix(in srgb, var(--primary) #{math.percentage($focus-ring-opacity)}, transparent) !default;
@@ -1355,7 +1355,7 @@ $carousel-indicators-vertical-margin-inline-end: 1rem !default;
 
 // Close
 $btn-close-width: 1em !default;
-$btn-close-padding-x: 0.25em !default;
+$btn-close-padding-x: 0.875em !default;
 $btn-close-padding-y: $btn-close-padding-x !default;
 $btn-close-color: $body-color !default;
 $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
diff --git a/core/scss/bootstrap/_placeholders.scss b/core/scss/bootstrap/_placeholders.scss
index d6121b5af..08b212469 100644
--- a/core/scss/bootstrap/_placeholders.scss
+++ b/core/scss/bootstrap/_placeholders.scss
@@ -31,6 +31,10 @@
 .placeholder-glow {
   .placeholder {
     animation: placeholder-glow 2s ease-in-out infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }
 
@@ -44,6 +48,10 @@
   mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
   mask-size: 200% 100%;
   animation: placeholder-wave 2s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 @keyframes placeholder-wave {
diff --git a/docs/pages/ui/forms/form-validation.mdx b/docs/pages/ui/forms/form-validation.mdx
index db677bd6a..772dc0456 100644
--- a/docs/pages/ui/forms/form-validation.mdx
+++ b/docs/pages/ui/forms/form-validation.mdx
@@ -12,18 +12,18 @@ import CodeDocs from '@components/CodeDocs.astro';
 
 To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
 
-To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes.
+To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes. For assistive tech, also set `aria-invalid="true"` on invalid controls.
 
 <Example>
-<input type="text" class="form-control is-valid" placeholder="Valid State..." /> <input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
+<input type="text" class="form-control is-valid" placeholder="Valid State..." aria-invalid="false" /> <input type="text" class="form-control is-invalid" placeholder="Invalid State..." aria-invalid="true" />
 </Example>
 
 ## Validation feedback
 
-To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes.
+To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes. Link the message with `aria-describedby` when you can.
 
 <Example>
-<div> <label class="form-label required">City</label> <input type="text" class="form-control is-invalid" required /> <div class="invalid-feedback">Please provide a valid city.</div> </div>
+<div> <label class="form-label required" for="city-invalid">City</label> <input type="text" class="form-control is-invalid" id="city-invalid" required aria-invalid="true" aria-describedby="city-invalid-feedback" /> <div class="invalid-feedback" id="city-invalid-feedback">Please provide a valid city.</div> </div>
 </Example>
 
 You can also use the `.valid-feedback` to provide users with positive feedback.
diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro
index e493679c5..2d55a0bdf 100644
--- a/preview/pages/all-elements.astro
+++ b/preview/pages/all-elements.astro
@@ -245,16 +245,16 @@ function greetUser(name) {
               <FormGroup label="Textarea" for="all-elements-textarea">
                 <textarea class="form-control" id="all-elements-textarea" rows="3" placeholder="Enter message"></textarea>
               </FormGroup>
-              <FormGroup label="Checkboxes">
+              <FormGroup label="Checkboxes" associate={false}>
                 <Check title="Option 1" type="checkbox" />
                 <Check title="Option 2" type="checkbox" checked />
               </FormGroup>
-              <FormGroup label="Radio Buttons">
+              <FormGroup label="Radio Buttons" associate={false}>
                 <Check title="Option 1" type="radio" name="radio-demo" />
                 <Check title="Option 2" type="radio" name="radio-demo" checked />
               </FormGroup>
               {/* Check.astro has no id prop to target with `for`; its own <label> already wraps the input, so it's self-labeled */}
-              <FormGroup label="Switch">
+              <FormGroup label="Switch" associate={false}>
                 <Check title="Enable notifications" switch />
               </FormGroup>
             </div>
diff --git a/preview/pages/form-layout.astro b/preview/pages/form-layout.astro
index 686eaea74..03db0e557 100644
--- a/preview/pages/form-layout.astro
+++ b/preview/pages/form-layout.astro
@@ -184,7 +184,7 @@ const countries = flags as { name: string }[]
                     </FormGroup>
                   </div>
                   <div>
-                    <FormGroup label="Membership" class="">
+                    <FormGroup label="Membership" class="" associate={false}>
                       <div class="d-flex flex-row gap-4">
                         <Check title="Free" type="radio" name="membership" checked />
                         <Check title="Paid" type="radio" name="membership" />
diff --git a/preview/pages/playground.astro b/preview/pages/playground.astro
index 9743611f9..97f63628c 100644
--- a/preview/pages/playground.astro
+++ b/preview/pages/playground.astro
@@ -143,10 +143,10 @@ import Trending from '@ui/Trending.astro'
             <div class="col-12">
               <h4 class="mb-3">Inline Datepicker</h4>
               {/* inline mode renders a calendar div with no backing text input — nothing to point `for` at */}
-              <FormGroup label="Inline calendar">
+              <FormGroup label="Inline calendar" associate={false}>
                 <Datepicker id="playground-inline" inline value="2024-01-15" />
               </FormGroup>
-              <FormGroup label="Inline with multiple selection">
+              <FormGroup label="Inline with multiple selection" associate={false}>
                 <Datepicker id="playground-inline-multiple" inline value="2024-01-15" />
               </FormGroup>
             </div>
diff --git a/preview/pages/screenshot.astro b/preview/pages/screenshot.astro
index f90873e76..81e5f6c6f 100644
--- a/preview/pages/screenshot.astro
+++ b/preview/pages/screenshot.astro
@@ -46,7 +46,7 @@ import { site } from '@shared/lib/site'
     }
   </style>
 
-  <div class="page page-center align-items-center">
+  <main id="content" class="page page-center align-items-center">
     <div class="screenshot d-flex flex-column justify-content-center align-items-center px-12">
       <div class="screenshot-logo">
         <Logo gray />
@@ -72,5 +72,5 @@ import { site } from '@shared/lib/site'
       <a href="?theme=dark" class="nav-link hide-theme-dark">Dark</a>
       <a href="?theme=dark" class="nav-link active hide-theme-light">Dark</a>
     </nav>
-  </div>
+  </main>
 </BaseLayout>
diff --git a/preview/pages/sign-in-cover.astro b/preview/pages/sign-in-cover.astro
index 7a0b4d715..2497ead9d 100644
--- a/preview/pages/sign-in-cover.astro
+++ b/preview/pages/sign-in-cover.astro
@@ -9,7 +9,7 @@ import { requireIndex } from '@shared/lib/array'
 ---
 
 <BaseLayout title="Sign in with cover" bodyClass="d-flex flex-column bg-white">
-  <div class="row g-0 flex-fill">
+  <main id="content" class="row g-0 flex-fill">
     <div class="col-12 col-lg-6 col-xl-4 border-top-wide border-primary d-flex flex-column justify-content-center">
       <div class="container container-tight my-5 px-lg-5">
         <div class="text-center mb-4">
@@ -28,5 +28,5 @@ import { requireIndex } from '@shared/lib/array'
     <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
       <Photo photo={requireIndex(photos, 11)} class="bg-cover h-100 min-vh-100" background />
     </div>
-  </div>
+  </main>
 </BaseLayout>
diff --git a/preview/pages/signatures.astro b/preview/pages/signatures.astro
index f897e36e7..a614b7f8c 100644
--- a/preview/pages/signatures.astro
+++ b/preview/pages/signatures.astro
@@ -71,7 +71,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
             <FormGroup label="Last name" required for="signature-last-name">
               <input type="text" class="form-control" id="signature-last-name" name="last_name" />
             </FormGroup>
-            <FormGroup label="Signature" required>
+            <FormGroup label="Signature" required associate={false}>
               <Signature clear extraJs={simpleJs} />
             </FormGroup>
           </form>
diff --git a/shared/components/cards/AuthLockCard.astro b/shared/components/cards/AuthLockCard.astro
index e2a136763..54e7b4913 100644
--- a/shared/components/cards/AuthLockCard.astro
+++ b/shared/components/cards/AuthLockCard.astro
@@ -21,7 +21,8 @@ const person = requireIndex(people, 0)
     </div>
 
     <div class="mb-4">
-      <input type="password" class="form-control" placeholder="Password…" aria-label="Password" autocomplete="current-password" />
+      <label class="visually-hidden" for="lock-password">Password</label>
+      <input type="password" class="form-control" placeholder="Password…" id="lock-password" autocomplete="current-password" required />
     </div>
 
     <div>
diff --git a/shared/components/cards/CreditCard.astro b/shared/components/cards/CreditCard.astro
index 9291b0399..572a2c9e0 100644
--- a/shared/components/cards/CreditCard.astro
+++ b/shared/components/cards/CreditCard.astro
@@ -20,7 +20,7 @@ const years = Array.from({ length: 11 }, (_, i) => 2020 + i)
 
     <div class="row">
       <div class="col-8">
-        <FormGroup label="Expiration date">
+        <FormGroup label="Expiration date" associate={false}>
           <div class="row g-2">
             <div class="col">
               <select class="form-select" aria-label="Expiration month" autocomplete="cc-exp-month">
diff --git a/shared/components/cards/ForgotPasswordCard.astro b/shared/components/cards/ForgotPasswordCard.astro
index 580932257..7b081b49b 100644
--- a/shared/components/cards/ForgotPasswordCard.astro
+++ b/shared/components/cards/ForgotPasswordCard.astro
@@ -10,8 +10,8 @@ import FormGroup from '@ui/FormGroup.astro'
 
     <p class="text-secondary mb-4">Enter your email address and your password will be reset and emailed to you.</p>
 
-    <FormGroup label="Email address" for="forgot-password-email">
-      <input type="email" id="forgot-password-email" class="form-control" placeholder="Enter email" autocomplete="email" />
+    <FormGroup label="Email address" for="forgot-email">
+      <input type="email" class="form-control" placeholder="Enter email" id="forgot-email" autocomplete="email" required />
     </FormGroup>
     <FormFooter>
       <Button text="Send me new password" block color="primary" icon="mail" />
diff --git a/shared/components/cards/SignInForm.astro b/shared/components/cards/SignInForm.astro
index 1ffa0aa76..7309e9685 100644
--- a/shared/components/cards/SignInForm.astro
+++ b/shared/components/cards/SignInForm.astro
@@ -6,7 +6,7 @@ import InputGroup from '@ui/InputGroup.astro'
 
 <form action="./" method="get" novalidate>
   <FormGroup label="Email address" for="signin-email">
-    <input type="email" id="signin-email" class="form-control" placeholder="your@email.com" autocomplete="email" />
+    <input type="email" class="form-control" placeholder="your@email.com" id="signin-email" autocomplete="email" required />
   </FormGroup>
   <div class="mb-2">
     <label class="form-label" for="signin-password">
@@ -15,7 +15,7 @@ import InputGroup from '@ui/InputGroup.astro'
         <a href="./forgot-password.html">I forgot password</a>
       </span>
     </label>
-    <InputGroup type="password" id="signin-password" placeholder="Your password" autocomplete="current-password" flat appendButton={[{ icon: 'eye', description: 'Show password' }]} />
+    <InputGroup type="password" placeholder="Your password" flat id="signin-password" autocomplete="current-password" required appendButton={[{ icon: 'eye', description: 'Show password' }]} />
   </div>
   <div class="mb-2">
     <label class="form-check">
diff --git a/shared/components/cards/SignUpCard.astro b/shared/components/cards/SignUpCard.astro
index 70b5fbc2a..f590ea0ec 100644
--- a/shared/components/cards/SignUpCard.astro
+++ b/shared/components/cards/SignUpCard.astro
@@ -9,13 +9,13 @@ import FormGroup from '@ui/FormGroup.astro'
     <h2 class="card-title text-center mb-4">Create new account</h2>
 
     <FormGroup label="Name" for="signup-name">
-      <input type="text" id="signup-name" class="form-control" placeholder="Enter name" autocomplete="name" />
+      <input type="text" class="form-control" placeholder="Enter name" id="signup-name" autocomplete="name" required />
     </FormGroup>
     <FormGroup label="Email address" for="signup-email">
-      <input type="email" id="signup-email" class="form-control" placeholder="Enter email" autocomplete="email" />
+      <input type="email" class="form-control" placeholder="Enter email" id="signup-email" autocomplete="email" required />
     </FormGroup>
     <FormGroup label="Password" for="signup-password">
-      <InputGroup type="password" id="signup-password" autocomplete="new-password" appendButton={[{ icon: 'eye', description: 'Show password' }]} flat placeholder="Password" />
+      <InputGroup type="password" appendButton={[{ icon: 'eye', description: 'Show password' }]} flat placeholder="Password" id="signup-password" autocomplete="new-password" required />
     </FormGroup>
     <div class="mb-3">
       <label class="form-check">
diff --git a/shared/components/forms/FormElements1.astro b/shared/components/forms/FormElements1.astro
index 0cc37469f..a921d3b3b 100644
--- a/shared/components/forms/FormElements1.astro
+++ b/shared/components/forms/FormElements1.astro
@@ -11,7 +11,7 @@ import CaptureScript from '../CaptureScript.astro'
 const states = (selects as { states: { options: Record<string, { name: string; selected?: boolean }> } }).states.options
 ---
 
-<FormGroup label="Static">
+<FormGroup label="Static" associate={false}>
   <div class="form-control-plaintext">Input value</div>
 </FormGroup>
 
@@ -67,7 +67,7 @@ const states = (selects as { states: { options: Record<string, { name: string; s
   </select>
 </div>
 
-<FormGroup label="Input group">
+<FormGroup label="Input group" associate={false}>
   <div class="input-group mb-2">
     <input type="text" class="form-control" placeholder="Search for…" />
     <button class="btn" type="button">Go!</button>
@@ -93,7 +93,7 @@ const states = (selects as { states: { options: Record<string, { name: string; s
   </div>
 </FormGroup>
 
-<FormGroup label="Icon input">
+<FormGroup label="Icon input" associate={false}>
   <div class="input-icon mb-3">
     <input type="text" value="" class="form-control" placeholder="Search…" />
     <span class="input-icon-addon">
@@ -108,7 +108,7 @@ const states = (selects as { states: { options: Record<string, { name: string; s
   </div>
 </FormGroup>
 
-<FormGroup label="Loader input">
+<FormGroup label="Loader input" associate={false}>
   <div class="input-icon mb-3">
     <input type="text" value="" class="form-control" placeholder="Loading…" />
     <span class="input-icon-addon">
diff --git a/shared/components/forms/FormElements2.astro b/shared/components/forms/FormElements2.astro
index 9f9cdbf2a..067f476e4 100644
--- a/shared/components/forms/FormElements2.astro
+++ b/shared/components/forms/FormElements2.astro
@@ -4,7 +4,7 @@ import FormGroup from '@ui/FormGroup.astro'
 import InputGroup from '@ui/InputGroup.astro'
 ---
 
-<FormGroup label="Form control rounded">
+<FormGroup label="Form control rounded" associate={false}>
   <input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text.." />
 
   <div class="input-icon">
@@ -19,7 +19,7 @@ import InputGroup from '@ui/InputGroup.astro'
   <input type="text" class="form-control form-control-flush" id="fe2-form-control-flush" name="Form control flush" placeholder="Text.." />
 </FormGroup>
 
-<FormGroup label="Input group">
+<FormGroup label="Input group" associate={false}>
   <div class="input-group mb-2">
     <span class="input-group-text">@</span>
     <input type="text" class="form-control" placeholder="username" autocomplete="off" />
@@ -37,7 +37,7 @@ import InputGroup from '@ui/InputGroup.astro'
   </div>
 </FormGroup>
 
-<FormGroup label="Input with checkbox or radios">
+<FormGroup label="Input with checkbox or radios" associate={false}>
   <div class="input-group mb-2">
     <span class="input-group-text">
       <input class="form-check-input m-0" type="checkbox" checked />
@@ -97,7 +97,7 @@ import InputGroup from '@ui/InputGroup.astro'
   </div>
 </FormGroup>
 
-<FormGroup label="Floating inputs">
+<FormGroup label="Floating inputs" associate={false}>
   <div class="form-floating mb-3">
     <input type="email" class="form-control" id="floating-input" value="name@example.com" autocomplete="off" />
     <label for="floating-input">Email address</label>
diff --git a/shared/components/forms/FormElements3.astro b/shared/components/forms/FormElements3.astro
index 6b2a9120a..f310a80d9 100644
--- a/shared/components/forms/FormElements3.astro
+++ b/shared/components/forms/FormElements3.astro
@@ -14,7 +14,7 @@ const imageRadios = horizontal.slice(10, 16)
 const blueHex = (site as { colors: { blue: { hex: string } } }).colors.blue.hex
 ---
 
-<FormGroup label="Image Check">
+<FormGroup label="Image Check" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Image Check</legend>
     <div class="row g-2">
@@ -37,7 +37,7 @@ const blueHex = (site as { colors: { blue: { hex: string } } }).colors.blue.hex
   </fieldset>
 </FormGroup>
 
-<FormGroup label="Image Check Radio">
+<FormGroup label="Image Check Radio" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Image Check Radio</legend>
     <div class="row g-2">
@@ -69,7 +69,7 @@ const blueHex = (site as { colors: { blue: { hex: string } } }).colors.blue.hex
 
 {
   [false, true].map((lite) => (
-    <FormGroup label={`Validation States${lite ? ' (lite)' : ''}`}>
+    <FormGroup label={`Validation States${lite ? ' (lite)' : ''}`} associate={false}>
       <input type="text" class:list={['form-control is-valid', lite && 'is-valid-lite', 'mb-2']} placeholder="Valid State.." aria-invalid="false" />
       <input type="text" class:list={['form-control is-invalid', lite && 'is-invalid-lite']} placeholder="Invalid State.." aria-invalid="true" aria-describedby={!lite ? 'validation-invalid-feedback' : undefined} />
       {!lite && (
diff --git a/shared/components/forms/FormElements4.astro b/shared/components/forms/FormElements4.astro
index 656085c6f..e0b85c6ec 100644
--- a/shared/components/forms/FormElements4.astro
+++ b/shared/components/forms/FormElements4.astro
@@ -5,7 +5,7 @@ import FormGroup from '@ui/FormGroup.astro'
 import Avatar from '@ui/Avatar.astro'
 ---
 
-<FormGroup label="Simple selectgroup">
+<FormGroup label="Simple selectgroup" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Simple selectgroup</legend>
     <div class="form-selectgroup">
@@ -29,7 +29,7 @@ import Avatar from '@ui/Avatar.astro'
   </fieldset>
 </FormGroup>
 
-<FormGroup label="Icon input">
+<FormGroup label="Icon input" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Icon input</legend>
     <div class="form-selectgroup">
@@ -57,7 +57,7 @@ import Avatar from '@ui/Avatar.astro'
   </fieldset>
 </FormGroup>
 
-<FormGroup label="Selectgroup with icons and text">
+<FormGroup label="Selectgroup with icons and text" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Selectgroup with icons and text</legend>
     <div class="form-selectgroup">
@@ -81,7 +81,7 @@ import Avatar from '@ui/Avatar.astro'
   </fieldset>
 </FormGroup>
 
-<FormGroup label="Different style">
+<FormGroup label="Different style" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Different style</legend>
     <div class="form-selectgroup form-selectgroup-pills">
@@ -105,7 +105,7 @@ import Avatar from '@ui/Avatar.astro'
   </fieldset>
 </FormGroup>
 
-<FormGroup label="Payment method">
+<FormGroup label="Payment method" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Payment method</legend>
     <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
@@ -148,7 +148,7 @@ import Avatar from '@ui/Avatar.astro'
   </fieldset>
 </FormGroup>
 
-<FormGroup label="Project Manager">
+<FormGroup label="Project Manager" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Project Manager</legend>
     <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
@@ -231,7 +231,7 @@ import Avatar from '@ui/Avatar.astro'
   </fieldset>
 </FormGroup>
 
-<FormGroup label="Buttons group">
+<FormGroup label="Buttons group" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Buttons group</legend>
     <ButtonGroup class="w-100">
@@ -247,7 +247,7 @@ import Avatar from '@ui/Avatar.astro'
   </fieldset>
 </FormGroup>
 
-<FormGroup label="Buttons group with dropdown">
+<FormGroup label="Buttons group with dropdown" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Buttons group with dropdown</legend>
     <ButtonGroup class="w-100">
@@ -274,7 +274,7 @@ import Avatar from '@ui/Avatar.astro'
 
 <div class="row">
   <div class="col">
-    <FormGroup label="Vertical buttons group">
+    <FormGroup label="Vertical buttons group" associate={false}>
       <fieldset>
         <legend class="visually-hidden">Vertical buttons group</legend>
         <ButtonGroup vertical={true} class="w-100">
@@ -293,7 +293,7 @@ import Avatar from '@ui/Avatar.astro'
     </FormGroup>
   </div>
   <div class="col">
-    <FormGroup label="Vertical with dropdown">
+    <FormGroup label="Vertical with dropdown" associate={false}>
       <fieldset>
         <legend class="visually-hidden">Vertical with dropdown</legend>
         <ButtonGroup vertical={true} class="w-100">
@@ -324,7 +324,7 @@ import Avatar from '@ui/Avatar.astro'
   </div>
 </div>
 
-<FormGroup label="Toolbar">
+<FormGroup label="Toolbar" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Toolbar</legend>
     <ButtonGroup class="w-100">
diff --git a/shared/components/forms/FormElements5.astro b/shared/components/forms/FormElements5.astro
index 628ca4223..92ba5cfb3 100644
--- a/shared/components/forms/FormElements5.astro
+++ b/shared/components/forms/FormElements5.astro
@@ -82,7 +82,7 @@ import FormGroup from '@ui/FormGroup.astro'
   </fieldset>
 </div>
 
-<FormGroup label="Checkboxes with description">
+<FormGroup label="Checkboxes with description" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Checkboxes with description</legend>
     <label class="form-check">
@@ -129,7 +129,7 @@ import FormGroup from '@ui/FormGroup.astro'
   </label>
 </div>
 
-<FormGroup label="Notification">
+<FormGroup label="Notification" associate={false}>
   <fieldset>
     <legend class="visually-hidden">Notification</legend>
     <div class="divide-y">
@@ -172,7 +172,7 @@ import FormGroup from '@ui/FormGroup.astro'
   <input type="file" class="form-control" />
 </div>
 
-<FormGroup label="Date of birth">
+<FormGroup label="Date of birth" associate={false}>
   <div class="row g-2">
     <div class="col-5">
       <select name="user[month]" class="form-select">
diff --git a/shared/components/forms/FormElements6.astro b/shared/components/forms/FormElements6.astro
index d64020ddb..3fa6d26de 100644
--- a/shared/components/forms/FormElements6.astro
+++ b/shared/components/forms/FormElements6.astro
@@ -18,30 +18,30 @@ const datalistCountries = (flags as { name: string }[]).slice(0, 10)
   </datalist>
 </FormGroup>
 
-<FormGroup label="Range input">
+<FormGroup label="Range input" associate={false}>
   <Range value={40} />
   <Range value="20" id="simple" connect />
   <Range value="60,90" id="connect" />
   <Range value="40" id="color" class="text-green" connect />
 </FormGroup>
 
-<FormGroup label="Datepicker">
+<FormGroup label="Datepicker" associate={false}>
   <Datepicker id="default" class="mb-2" />
   <Datepicker id="icon" layout="icon" class="mb-2" />
   <Datepicker id="icon-prepend" layout="icon-prepend" />
 </FormGroup>
 
 {/* Inline datepicker renders a calendar div (`datepicker-inline`), not a labelable input — `for` intentionally skipped, same as Range. */}
-<FormGroup label="Inline datepicker">
+<FormGroup label="Inline datepicker" associate={false}>
   <Datepicker id="inline" inline />
 </FormGroup>
 
-<FormGroup label="Progress">
+<FormGroup label="Progress" associate={false}>
   <Progress class="mb-2" />
   <Progress indeterminate color="green" />
 </FormGroup>
 
-<FormGroup label="Form buttons">
+<FormGroup label="Form buttons" associate={false}>
   <div class="row">
     <div class="col">
       <Button block icon="brand-github" iconColor="github" text="Login with Github" />
@@ -76,7 +76,7 @@ const datalistCountries = (flags as { name: string }[]).slice(0, 10)
   <Select id="fe6-select-labels" key="labels" indicator="label" />
 </FormGroup>
 
-<FormGroup label="Advanced select with validation state">
+<FormGroup label="Advanced select with validation state" associate={false}>
   <Select id="countries-valid" key="countries" state="valid" class="mb-3" />
   <Select id="countries-invalid" key="countries" state="invalid" />
 </FormGroup>
diff --git a/shared/components/modals/EditProfileModalContent.astro b/shared/components/modals/EditProfileModalContent.astro
index 34a22c1c7..b590a755e 100644
--- a/shared/components/modals/EditProfileModalContent.astro
+++ b/shared/components/modals/EditProfileModalContent.astro
@@ -63,7 +63,7 @@ import FormGroup from '@ui/FormGroup.astro'
       </div>
     </div>
 
-    <FormGroup label="Social links" class="mb-4">
+    <FormGroup label="Social links" class="mb-4" associate={false}>
       <div class="row g-2">
         <div class="col-12">
           <div class="input-group">
diff --git a/shared/components/modals/SignatureModalContent.astro b/shared/components/modals/SignatureModalContent.astro
index 645b1408c..21eee0b35 100644
--- a/shared/components/modals/SignatureModalContent.astro
+++ b/shared/components/modals/SignatureModalContent.astro
@@ -13,7 +13,7 @@ import Signature from '@ui/Signature.astro'
   <CardTitle id="modal-signature-title">Confirm transfer</CardTitle>
   <CardSubtitle>Please confirm the transfer of funds by signing below.</CardSubtitle>
   <form action="">
-    <FormGroup label="Signature" required>
+    <FormGroup label="Signature" required associate={false}>
       <div class="position-relative select-none">
         <Signature clear width={684} height={400} />
       </div>
diff --git a/shared/components/parts/form/InputColor.astro b/shared/components/parts/form/InputColor.astro
index 795e70daa..41ab92628 100644
--- a/shared/components/parts/form/InputColor.astro
+++ b/shared/components/parts/form/InputColor.astro
@@ -16,7 +16,7 @@ const siteColors = Object.keys((site as { colors: Record<string, unknown> }).col
 const colors = ['dark', 'white', ...siteColors]
 ---
 
-<FormGroup label={label}>
+<FormGroup label={label} associate={false}>
   <fieldset>
     <legend class="visually-hidden">{label}</legend>
     <div class="row g-2">
diff --git a/shared/ui/Button.astro b/shared/ui/Button.astro
index ddc70b0dc..b51ff9781 100644
--- a/shared/ui/Button.astro
+++ b/shared/ui/Button.astro
@@ -20,6 +20,7 @@ interface Props {
   ghost?: boolean
   size?: ButtonSize | undefined
   block?: boolean
+  disabled?: boolean
   class?: string
   icon?: string
   iconColor?: string
@@ -35,18 +36,21 @@ interface Props {
   dropdown?: boolean
 }
 
-const { text = 'Button', href, external, element, type, id, color, outline, ghost, size, block, class: className, icon, iconColor, iconEnd, iconOnly, modalId, toastId, dismiss, dropdown } = Astro.props
+const { text = 'Button', href, external, element, type, id, color, outline, ghost, size, block, disabled, class: className, icon, iconColor, iconEnd, iconOnly, modalId, toastId, dismiss, dropdown } = Astro.props
 
-// Without a real destination the control is an action, so render <button>; internal hrefs are prefixed with '/'.
-const Element = element ?? (href ? 'a' : 'button')
-const resolvedHref = href ? (external ? href : `/${href}`) : '#'
+// Actions (dropdown/modal/toast/dismiss) and bare buttons use <button>. Real URLs use <a>,
+// with internal hrefs prefixed with '/'.
+const isAction = Boolean(dropdown || modalId || toastId || dismiss)
+const Element = element ?? (href && !isAction ? 'a' : 'button')
+const resolvedHref = Element === 'a' ? (href ? (external ? href : `/${href}`) : undefined) : undefined
+const resolvedType = Element === 'button' ? (type ?? 'button') : undefined
 
 const classes = ['btn', color && `btn-${outline ? 'outline-' : ghost ? 'ghost-' : ''}${color}`, size && size !== 'md' && `btn-${size}`, className, block && 'w-100', iconOnly && 'btn-icon']
 ---
 
 <Element
-  href={Element === 'a' ? resolvedHref : undefined}
-  type={Element === 'button' ? (type ?? 'button') : undefined}
+  href={resolvedHref}
+  type={resolvedType}
   id={id}
   class:list={classes}
   target={external ? '_blank' : undefined}
@@ -55,6 +59,7 @@ const classes = ['btn', color && `btn-${outline ? 'outline-' : ghost ? 'ghost-'
   data-bs-target={!dropdown && modalId ? `#modal-${modalId}` : !dropdown && toastId ? `#toast-${toastId}` : undefined}
   aria-label={iconOnly ? text : undefined}
   data-bs-dismiss={dismiss ? 'modal' : undefined}
+  disabled={Element === 'button' && disabled ? true : undefined}
 >
   {icon && <Icon name={icon} color={iconColor} />}
   {!iconOnly && text}
diff --git a/shared/ui/DropdownMenuAll.astro b/shared/ui/DropdownMenuAll.astro
index 9a980cecd..2653ab46a 100644
--- a/shared/ui/DropdownMenuAll.astro
+++ b/shared/ui/DropdownMenuAll.astro
@@ -14,11 +14,11 @@ const peopleItems = (people as { id: number | string; full_name: string }[]).sli
 
 <div class={`dropdown-menu${show ? ' dropdown-menu-demo' : ''}`}>
   <h6 class="dropdown-header">Dropdown header</h6>
-  <a href="#" class="dropdown-item"><Icon name="activity" class="dropdown-item-icon" /> Item 1</a>
-  <a href="#" class="dropdown-item"><Icon name="edit" class="dropdown-item-icon" /> Item 2</a>
+  <button type="button" class="dropdown-item"><Icon name="activity" class="dropdown-item-icon" /> Item 1</button>
+  <button type="button" class="dropdown-item"><Icon name="edit" class="dropdown-item-icon" /> Item 2</button>
 
   <div class="dropdown-item">
-    <a href="#" class="text-reset">My profile</a>
+    <button type="button" class="text-reset border-0 bg-transparent p-0">My profile</button>
     <label class="form-check m-0 ms-auto">
       <input type="checkbox" class="form-check-input" />
       Public
@@ -30,22 +30,22 @@ const peopleItems = (people as { id: number | string; full_name: string }[]).sli
 
   <div class="dropdown-divider"></div>
 
-  <a href="#" class="dropdown-item">Dropdown item 1</a>
-  <a href="#" class="dropdown-item">Dropdown item 2</a>
-  <a href="#" class="dropdown-item disabled">Dropdown disabled</a>
-  <a href="#" class="dropdown-item active">Dropdown active</a>
+  <button type="button" class="dropdown-item">Dropdown item 1</button>
+  <button type="button" class="dropdown-item">Dropdown item 2</button>
+  <button type="button" class="dropdown-item disabled" disabled>Dropdown disabled</button>
+  <button type="button" class="dropdown-item active">Dropdown active</button>
 
   <div class="dropdown-divider"></div>
 
   {
     peopleItems.map((person) => (
-      <a href="#" class="dropdown-item">
+      <button type="button" class="dropdown-item">
         <Avatar personId={Number(person.id)} class="rounded me-2" size="xs" /> {person.full_name}
-      </a>
+      </button>
     ))
   }
 
   <div class="dropdown-divider"></div>
 
-  <a href="#" class="dropdown-item"><Icon name="logout" class="dropdown-item-icon" /> Logout</a>
+  <button type="button" class="dropdown-item"><Icon name="logout" class="dropdown-item-icon" /> Logout</button>
 </div>
diff --git a/shared/ui/FormGroup.astro b/shared/ui/FormGroup.astro
index b46c57233..c6150ae9f 100644
--- a/shared/ui/FormGroup.astro
+++ b/shared/ui/FormGroup.astro
@@ -1,10 +1,13 @@
 ---
 // Form group: label (.form-label) + control slot + optional hint (.form-hint).
+// When `for` is omitted and associate is true (default), the control is nested
+// inside the label for implicit association. Set associate={false} for groups
+// with multiple controls.
 import FormHint from './FormHint.astro'
 
 interface Props {
   label?: string
-  /** .required asterisk on the label */
+  /** .required asterisk on the label — also set required on the control */
   required?: boolean
   /** .form-label-description at the inline end of the label */
   description?: string
@@ -16,16 +19,25 @@ interface Props {
   labelClass?: string
   /** wrapper classes; replaces the default mb-3 */
   class?: string
+  /** marks the group invalid — pair with aria-invalid and .is-invalid on the control */
+  invalid?: boolean
+  /** error message shown under the control (.invalid-feedback) */
+  error?: string
+  /** nest the control in the label when `for` is omitted (default true) */
+  associate?: boolean
 }
 
-const { label, required, description, hint, for: htmlFor, labelClass, class: className = 'mb-3' } = Astro.props
+const { label, required, description, hint, for: htmlFor, labelClass, class: className = 'mb-3', invalid, error, associate = true } = Astro.props
 
-const hintId = hint && htmlFor ? `${htmlFor}-hint` : undefined
+const uid = htmlFor ?? `fg-${Math.random().toString(36).slice(2, 9)}`
+const hintId = hint ? `${uid}-hint` : undefined
+const errorId = error ? `${uid}-error` : undefined
+const wrapLabel = Boolean(label && !htmlFor && associate)
 ---
 
-<div class:list={[className]}>
+<div class:list={[className, invalid && 'has-validation']}>
   {
-    label && (
+    label && htmlFor && (
       <label class:list={['form-label', required && 'required', labelClass]} for={htmlFor}>
         {label}
         {required && <span class="visually-hidden"> (required)</span>}
@@ -33,6 +45,34 @@ const hintId = hint && htmlFor ? `${htmlFor}-hint` : undefined
       </label>
     )
   }
-  <slot />
+  {
+    label && !htmlFor && !associate && (
+      <div class:list={['form-label', required && 'required', labelClass]}>
+        {label}
+        {description && <span class="form-label-description">{description}</span>}
+      </div>
+    )
+  }
+  {
+    wrapLabel ? (
+      <label class="d-block">
+        <span class:list={['form-label', required && 'required', labelClass]}>
+          {label}
+          {required && <span class="visually-hidden"> (required)</span>}
+          {description && <span class="form-label-description">{description}</span>}
+        </span>
+        <slot />
+      </label>
+    ) : (
+      <slot />
+    )
+  }
+  {
+    error && (
+      <div class="invalid-feedback d-block" id={errorId} role="alert">
+        {error}
+      </div>
+    )
+  }
   {hint && <FormHint id={hintId}>{hint}</FormHint>}
 </div>
diff --git a/shared/ui/InputGroup.astro b/shared/ui/InputGroup.astro
index 9238afafc..b876335fd 100644
--- a/shared/ui/InputGroup.astro
+++ b/shared/ui/InputGroup.astro
@@ -13,10 +13,14 @@ interface Props {
   prepend?: string
   append?: string
   appendButton?: { icon: string; description: string; pressed?: boolean }[]
+  /** HTML autocomplete token; omit unless needed (e.g. email, tel, off) */
   autocomplete?: string
+  /** mark control invalid for assistive tech */
+  invalid?: boolean
+  required?: boolean
 }
 
-const { type = 'text', placeholder, value, flat, class: className, inputClass, id, prepend, append, appendButton, autocomplete } = Astro.props
+const { type = 'text', placeholder, value, flat, class: className, inputClass, id, prepend, append, appendButton, autocomplete, invalid, required } = Astro.props
 
 const appendButtons = appendButton ?? []
 // A password field's "eye" button gets a working show/hide toggle instead of a static icon —
@@ -52,7 +56,7 @@ const toggleScript = `<!-- BEGIN INPUT GROUP PASSWORD TOGGLE -->
 
 <div class:list={['input-group', flat && 'input-group-flat', className]}>
   {prepend && <span class="input-group-text">{prepend}</span>}
-  <input type={type} class:list={['form-control', inputClass]} placeholder={placeholder} value={value} autocomplete={autocomplete} id={id} />
+  <input type={type} class:list={['form-control', invalid && 'is-invalid', inputClass]} placeholder={placeholder} value={value} autocomplete={autocomplete} id={id} aria-invalid={invalid ? 'true' : undefined} required={required} />
   {append && <span class="input-group-text">{append}</span>}
   {
     appendButtons.length > 0 && (