diff --git a/.changeset/fix-a11y-markup-bugs.md b/.changeset/fix-a11y-markup-bugs.md
new file mode 100644
index 000000000..571b22c55
--- /dev/null
+++ b/.changeset/fix-a11y-markup-bugs.md
@@ -0,0 +1,6 @@
+---
+"@tabler/preview": patch
+"@tabler/docs": patch
+---
+
+Fixed keyboard access and accessible names across preview pages, `Alert`, `Avatar`, `Rating`, `Tag` and `Wysiwyg` components.
diff --git a/docs/content/ui/components/alert.mdx b/docs/content/ui/components/alert.mdx
index 2a03639c3..65054684d 100644
--- a/docs/content/ui/components/alert.mdx
+++ b/docs/content/ui/components/alert.mdx
@@ -89,7 +89,7 @@ Add `alert-minor` for a quieter alert. It drops the tinted background and keeps
 <div class="alert alert-minor alert-info alert-dismissible" role="alert">
   <div class="alert-heading">Did you know?</div>
   <div class="text-secondary">Here is something that you might like to know.</div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 <div class="alert alert-minor alert-success" role="alert">
   <div class="alert-heading">Everything worked</div>
@@ -102,7 +102,7 @@ Add `alert-minor` for a quieter alert. It drops the tinted background and keeps
 Add a close button to let the user dismiss the alert. It stays on the page until they do.
 
 ```html
-<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 ```
 
 <Example>
@@ -222,7 +222,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y
     <a href="#" class="btn btn-success">Okay</a>
     <a href="#" class="btn">Cancel</a>
   </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 <div class="alert alert-info alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
@@ -231,7 +231,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y
     <a href="#" class="btn btn-info">Okay</a>
     <a href="#" class="btn">Cancel</a>
   </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 <div class="alert alert-warning alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
@@ -240,7 +240,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y
     <a href="#" class="btn btn-warning">Okay</a>
     <a href="#" class="btn">Cancel</a>
   </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 <div class="alert alert-danger alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
@@ -249,7 +249,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y
     <a href="#" class="btn btn-danger">Okay</a>
     <a href="#" class="btn">Cancel</a>
   </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 </Example>
 
@@ -271,7 +271,7 @@ You can also use other elements, like icons and dismissible buttons, with this t
     </div>
     <div>Wow! Everything worked!</div>
   </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 <div class="alert alert-important alert-danger alert-dismissible" role="alert">
   <div class="d-flex">
@@ -280,7 +280,7 @@ You can also use other elements, like icons and dismissible buttons, with this t
     </div>
     <div>Your account has been deleted and can't be restored.</div>
   </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 </Example>
 
@@ -318,7 +318,7 @@ You're not limited to the 4 default alert colors. You can use any [base color](/
       <div>Be the first to see it!</div>
     </div>
   </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 </Example>
 
diff --git a/docs/content/ui/components/button.mdx b/docs/content/ui/components/button.mdx
index b3ddf8a97..5033777aa 100644
--- a/docs/content/ui/components/button.mdx
+++ b/docs/content/ui/components/button.mdx
@@ -467,15 +467,15 @@ Add `.btn-animate-icon` to move the icon on hover. The `-rotate`, `-shake`, `-pu
 
 <Example>
 <div class="btn-list">
-  <a class="btn btn-animate-icon"> Save <Icon name="arrow-right" class="icon-end" /> </a>
-  <a class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="plus" /> Add </a>
-  <a class="btn btn-animate-icon btn-animate-icon-shake"> <Icon name="bell" /> Notifications </a>
-  <a class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="settings" /> Settings </a>
-  <a class="btn btn-animate-icon btn-animate-icon-pulse"> <Icon name="heart" /> Love </a>
-  <a class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="x" /> Close </a>
-  <a class="btn btn-animate-icon btn-animate-icon-tada"> <Icon name="check" /> Confirm </a>
-  <a class="btn btn-animate-icon"> Next <Icon name="chevron-right" class="icon-end" /> </a>
-  <a class="btn btn-animate-icon btn-animate-icon-move-start"> <Icon name="chevron-left" /> Previous </a>
+  <button type="button" class="btn btn-animate-icon"> Save <Icon name="arrow-right" class="icon-end" /> </button>
+  <button type="button" class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="plus" /> Add </button>
+  <button type="button" class="btn btn-animate-icon btn-animate-icon-shake"> <Icon name="bell" /> Notifications </button>
+  <button type="button" class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="settings" /> Settings </button>
+  <button type="button" class="btn btn-animate-icon btn-animate-icon-pulse"> <Icon name="heart" /> Love </button>
+  <button type="button" class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="x" /> Close </button>
+  <button type="button" class="btn btn-animate-icon btn-animate-icon-tada"> <Icon name="check" /> Confirm </button>
+  <button type="button" class="btn btn-animate-icon"> Next <Icon name="chevron-right" class="icon-end" /> </button>
+  <button type="button" class="btn btn-animate-icon btn-animate-icon-move-start"> <Icon name="chevron-left" /> Previous </button>
 </div>
 </Example>
 
diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro
index 6eef14e1c..0314b0160 100644
--- a/preview/pages/all-elements.astro
+++ b/preview/pages/all-elements.astro
@@ -158,8 +158,8 @@ function greetUser(name) {
         </CardBody>
         <CardFooter>
           <div class="d-flex">
-            <a class="btn btn-link">Cancel</a>
-            <a class="btn btn-primary ms-auto">Save</a>
+            <button type="button" class="btn btn-link">Cancel</button>
+            <button type="button" class="btn btn-primary ms-auto">Save</button>
           </div>
         </CardFooter>
       </Card>
diff --git a/preview/pages/billing.astro b/preview/pages/billing.astro
index 301c3879e..a291aedf2 100644
--- a/preview/pages/billing.astro
+++ b/preview/pages/billing.astro
@@ -140,18 +140,20 @@ const invoiceStatus = {
               <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
                 {
                   paymentMethods.map((method) => (
-                    <label class="form-selectgroup-item flex-fill">
-                      <input type="radio" name="payment-method" value={method.provider} class="form-selectgroup-input" checked={method.isDefault} />
+                    <div class="form-selectgroup-item flex-fill">
+                      <input type="radio" id={`payment-method-${method.provider}`} name="payment-method" value={method.provider} class="form-selectgroup-input" checked={method.isDefault} />
                       <div class="form-selectgroup-label d-flex align-items-center p-3">
-                        <div class="me-3">
-                          <span class="form-selectgroup-check" />
-                        </div>
-                        <Payment payment={method.provider} size="sm" class="me-3" />
-                        <div class="me-auto">
-                          <div class="fw-medium">{method.title}</div>
-                          <div class="text-secondary">{method.description}</div>
-                        </div>
-                        {method.isDefault && <Badge text="Default" color="primary" light class="me-2" />}
+                        <label for={`payment-method-${method.provider}`} class="d-flex align-items-center flex-fill mb-0">
+                          <div class="me-3">
+                            <span class="form-selectgroup-check" />
+                          </div>
+                          <Payment payment={method.provider} size="sm" class="me-3" />
+                          <div class="me-auto">
+                            <div class="fw-medium">{method.title}</div>
+                            <div class="text-secondary">{method.description}</div>
+                          </div>
+                          {method.isDefault && <Badge text="Default" color="primary" light class="me-2" />}
+                        </label>
                         <div class="dropdown">
                           <button type="button" class="btn btn-action btn-sm" data-bs-toggle="dropdown" aria-expanded="false" aria-label={`Actions for ${method.title}`}>
                             <Icon name="dots-vertical" />
@@ -174,7 +176,7 @@ const invoiceStatus = {
                           </div>
                         </div>
                       </div>
-                    </label>
+                    </div>
                   ))
                 }
               </div>
diff --git a/preview/pages/buttons.astro b/preview/pages/buttons.astro
index 94f8b7525..d2ab01263 100644
--- a/preview/pages/buttons.astro
+++ b/preview/pages/buttons.astro
@@ -46,18 +46,18 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
           <CardTitle>Shapes</CardTitle>
           <CardSubtitle>Round the corners with <code>.btn-pill</code>, or square them off with <code>.btn-square</code>.</CardSubtitle>
           <ButtonList>
-            <a class="btn">Default</a>
-            <a class="btn btn-pill">Pill</a>
-            <a class="btn btn-square">Square</a>
-            <a class="btn btn-icon">
+            <button type="button" class="btn">Default</button>
+            <button type="button" class="btn btn-pill">Pill</button>
+            <button type="button" class="btn btn-square">Square</button>
+            <button type="button" class="btn btn-icon">
               <Icon name="star" />
-            </a>
-            <a class="btn btn-pill btn-icon">
+            </button>
+            <button type="button" class="btn btn-pill btn-icon">
               <Icon name="star" />
-            </a>
-            <a class="btn btn-square btn-icon">
+            </button>
+            <button type="button" class="btn btn-square btn-icon">
               <Icon name="star" />
-            </a>
+            </button>
           </ButtonList>
         </CardBody>
       </Card>
@@ -105,33 +105,33 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
           <CardTitle>Animated icon</CardTitle>
           <CardSubtitle>Small hover animations draw attention to the icon.</CardSubtitle>
           <ButtonList>
-            <a class="btn btn-animate-icon">
+            <button type="button" class="btn btn-animate-icon">
               Save <Icon name="arrow-right" class="icon-end" />
-            </a>
-            <a class="btn btn-animate-icon btn-animate-icon-rotate">
+            </button>
+            <button type="button" class="btn btn-animate-icon btn-animate-icon-rotate">
               <Icon name="plus" /> Add
-            </a>
-            <a class="btn btn-animate-icon btn-animate-icon-shake">
+            </button>
+            <button type="button" class="btn btn-animate-icon btn-animate-icon-shake">
               <Icon name="bell" /> Notifications
-            </a>
-            <a class="btn btn-animate-icon btn-animate-icon-rotate">
+            </button>
+            <button type="button" class="btn btn-animate-icon btn-animate-icon-rotate">
               <Icon name="settings" /> Settings
-            </a>
-            <a class="btn btn-animate-icon btn-animate-icon-pulse">
+            </button>
+            <button type="button" class="btn btn-animate-icon btn-animate-icon-pulse">
               <Icon name="heart" /> Love
-            </a>
-            <a class="btn btn-animate-icon btn-animate-icon-rotate">
+            </button>
+            <button type="button" class="btn btn-animate-icon btn-animate-icon-rotate">
               <Icon name="x" /> Close
-            </a>
-            <a class="btn btn-animate-icon btn-animate-icon-tada">
+            </button>
+            <button type="button" class="btn btn-animate-icon btn-animate-icon-tada">
               <Icon name="check" /> Confirm
-            </a>
-            <a class="btn btn-animate-icon">
+            </button>
+            <button type="button" class="btn btn-animate-icon">
               Next <Icon name="chevron-right" class="icon-end" />
-            </a>
-            <a class="btn btn-animate-icon btn-animate-icon-move-start">
+            </button>
+            <button type="button" class="btn btn-animate-icon btn-animate-icon-move-start">
               <Icon name="chevron-left" /> Previous
-            </a>
+            </button>
           </ButtonList>
         </CardBody>
       </Card>
@@ -144,9 +144,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
           <ButtonList>
             {
               themeColors.map(([name, color]) => (
-                <a class={`btn btn-${name}`}>
+                <button type="button" class={`btn btn-${name}`}>
                   {color.icon && <Icon name={color.icon} />} {color.title}
-                </a>
+                </button>
               ))
             }
           </ButtonList>
@@ -161,9 +161,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
           <ButtonList>
             {
               themeColors.map(([name, color]) => (
-                <a class={`btn btn-outline btn-${name}`}>
+                <button type="button" class={`btn btn-outline btn-${name}`}>
                   {color.icon && <Icon name={color.icon} />} {color.title}
-                </a>
+                </button>
               ))
             }
           </ButtonList>
@@ -178,9 +178,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
           <ButtonList>
             {
               themeColors.map(([name, color]) => (
-                <a class={`btn btn-ghost btn-${name}`}>
+                <button type="button" class={`btn btn-ghost btn-${name}`}>
                   {color.icon && <Icon name={color.icon} />} {color.title}
-                </a>
+                </button>
               ))
             }
           </ButtonList>
@@ -195,9 +195,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
           <ButtonList>
             {
               themeColors.map(([name, color]) => (
-                <a class={`btn btn-pill btn-${name}`}>
+                <button type="button" class={`btn btn-pill btn-${name}`}>
                   {color.icon && <Icon name={color.icon} />} {color.title}
-                </a>
+                </button>
               ))
             }
           </ButtonList>
@@ -212,9 +212,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
           <ButtonList>
             {
               themeColors.map(([name, color]) => (
-                <a class={`btn btn-square btn-${name}`}>
+                <button type="button" class={`btn btn-square btn-${name}`}>
                   {color.icon && <Icon name={color.icon} />} {color.title}
-                </a>
+                </button>
               ))
             }
           </ButtonList>
@@ -229,9 +229,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
           <ButtonList>
             {
               colors.map(([name, color]) => (
-                <a class={`btn btn-${name}`}>
+                <button type="button" class={`btn btn-${name}`}>
                   {color.icon && <Icon name={color.icon} />} {color.title}
-                </a>
+                </button>
               ))
             }
           </ButtonList>
@@ -246,9 +246,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
           <ButtonList>
             {
               socialColors.map(([name, app]) => (
-                <a class={`btn btn-${name}`}>
+                <button type="button" class={`btn btn-${name}`}>
                   {app.icon && <Icon name={app.icon} />} {app.title}
-                </a>
+                </button>
               ))
             }
           </ButtonList>
@@ -260,7 +260,15 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
         <CardBody>
           <CardTitle>Icon buttons</CardTitle>
           <CardSubtitle>Social brand colors without a label, for compact toolbars.</CardSubtitle>
-          <ButtonList>{socialColors.map(([name, app]) => <a class={`btn btn-icon btn-${name}`}>{app.icon && <Icon name={app.icon} />}</a>)}</ButtonList>
+          <ButtonList
+            >{
+              socialColors.map(([name, app]) => (
+                <button type="button" class={`btn btn-icon btn-${name}`}>
+                  {app.icon && <Icon name={app.icon} />}
+                </button>
+              ))
+            }</ButtonList
+          >
         </CardBody>
       </Card>
     </div>
diff --git a/preview/pages/dashboard-crypto.astro b/preview/pages/dashboard-crypto.astro
index baf802c70..f99ca0a36 100644
--- a/preview/pages/dashboard-crypto.astro
+++ b/preview/pages/dashboard-crypto.astro
@@ -232,8 +232,8 @@ const operationCurrencies = currencies.slice(0, 20)
               <p>Place new order:</p>
 
               <div class="input-group mb-3">
-                <label class="input-group-text">Amount</label>
-                <select class="form-select">
+                <label class="input-group-text" for="crypto-amount-value">Amount</label>
+                <select class="form-select" aria-label="Currency">
                   {
                     operationCurrencies.map((currency, i) => (
                       <option value={currency.symbol} selected={i === 0}>
@@ -242,19 +242,19 @@ const operationCurrencies = currencies.slice(0, 20)
                     ))
                   }
                 </select>
-                <input type="text" class="form-control" value="0.25" />
+                <input type="text" id="crypto-amount-value" class="form-control" value="0.25" />
               </div>
 
               <div class="input-group mb-3">
-                <label class="input-group-text">Price</label>
-                <input type="text" class="form-control" readonly="" value="23,077.05" />
-                <label class="input-group-text">$</label>
+                <label class="input-group-text" for="crypto-order-price">Price</label>
+                <input type="text" id="crypto-order-price" class="form-control" readonly="" value="23,077.05" />
+                <label class="input-group-text" for="crypto-order-price">$</label>
               </div>
 
               <div class="input-group mb-3">
-                <label class="input-group-text">Total</label>
-                <input type="text" class="form-control" readonly="" value="5,769.27" />
-                <label class="input-group-text">$</label>
+                <label class="input-group-text" for="crypto-order-total">Total</label>
+                <input type="text" id="crypto-order-total" class="form-control" readonly="" value="5,769.27" />
+                <label class="input-group-text" for="crypto-order-total">$</label>
               </div>
 
               <div class="d-grid">
diff --git a/preview/pages/emails.astro b/preview/pages/emails.astro
index 6ab7488a8..eb6964742 100644
--- a/preview/pages/emails.astro
+++ b/preview/pages/emails.astro
@@ -57,7 +57,7 @@ const emailEntries = Object.entries(emails)
           <div class="row g-0">
             <div class="col-6">
               <div class="p-6 bg-surface-secondary rounded-start">
-                <img src="" class="img-fluid rounded-start" data-email-image />
+                <img class="img-fluid rounded-start" alt="" data-email-image />
               </div>
             </div>
             <div class="col-6">
diff --git a/preview/pages/form-elements.astro b/preview/pages/form-elements.astro
index bb7d819ff..c4e9a1af4 100644
--- a/preview/pages/form-elements.astro
+++ b/preview/pages/form-elements.astro
@@ -239,7 +239,7 @@ const rows = [
                       rows.map((row) => (
                         <tr>
                           <td>
-                            <select class="form-select">
+                            <select class="form-select" aria-label="Source">
                               {sources.map(([v, l]) => (
                                 <option value={v} selected={v === row.source || undefined}>
                                   {l}
@@ -248,10 +248,10 @@ const rows = [
                             </select>
                           </td>
                           <td>
-                            <input type="text" class="form-control" value={row.prop || undefined} />
+                            <input type="text" class="form-control" aria-label="Property" value={row.prop || undefined} />
                           </td>
                           <td>
-                            <select class="form-select">
+                            <select class="form-select" aria-label="Comparison">
                               {comparisons.map(([v, l]) => (
                                 <option value={v} selected={v === row.comparison || undefined}>
                                   {l}
@@ -260,7 +260,7 @@ const rows = [
                             </select>
                           </td>
                           <td>
-                            <input type="text" class="form-control" value={row.target} />
+                            <input type="text" class="form-control" aria-label="Target" value={row.target} />
                           </td>
                         </tr>
                       ))
diff --git a/preview/pages/terms-of-service.astro b/preview/pages/terms-of-service.astro
index 10f9a32cc..4a0a54dce 100644
--- a/preview/pages/terms-of-service.astro
+++ b/preview/pages/terms-of-service.astro
@@ -2,14 +2,12 @@
 import SingleLayout from '@shared/layouts/SingleLayout.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import Prose from '@ui/Prose.astro'
-
-// Card title is empty on purpose.
 ---
 
 <SingleLayout title="Terms of service" containerSize="narrow">
   <div class="card card-md">
     <div class="card-body">
-      <CardTitle />
+      <CardTitle>Terms of service</CardTitle>
       <Prose>
         <p>
           We (the folks at Tabler) run a website hosting platform called <a href="https://tabler.io">tabler.io</a> and would love for you to use it. Tabler.io's basic service is free, and we offer paid upgrades for advanced features. Our service is designed to give you as much control and ownership over what goes on your
diff --git a/shared/components/cards/Card.astro b/shared/components/cards/Card.astro
index 2d58464b0..150824cdc 100644
--- a/shared/components/cards/Card.astro
+++ b/shared/components/cards/Card.astro
@@ -142,11 +142,11 @@ const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[],
 										<div class={`col-auto${elRight ? ' ms-auto' : ''}`}>
 											{el === 'switch' ? (
 												<label class="form-check form-switch m-0">
-													<input class="form-check-input position-static" type="checkbox" checked />
+													<input class="form-check-input position-static" type="checkbox" checked aria-label="Enable" />
 												</label>
 											) : el === 'check' ? (
 												<label class="form-check m-0">
-													<input class="form-check-input position-static" type="checkbox" checked />
+													<input class="form-check-input position-static" type="checkbox" checked aria-label="Select" />
 												</label>
 											) : el === 'avatars' ? (
 												<PeopleAvatarList stacked={true} size="sm" text="+3" />
diff --git a/shared/components/cards/TabsCard.astro b/shared/components/cards/TabsCard.astro
index 1114067db..e9c7657a0 100644
--- a/shared/components/cards/TabsCard.astro
+++ b/shared/components/cards/TabsCard.astro
@@ -55,7 +55,7 @@ const paneClass = `tab-pane${animation ? ' fade' : ''}`
       {
         dropdown && (
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
               Dropdown
             </a>
             <DropdownMenu />
diff --git a/shared/components/cards/UsersList.astro b/shared/components/cards/UsersList.astro
index 5ff4141b1..dc536ca68 100644
--- a/shared/components/cards/UsersList.astro
+++ b/shared/components/cards/UsersList.astro
@@ -59,7 +59,7 @@ const rows = people.slice(offset, offset + limit).map((person, idx) => {
               </div>
             )}
             <div class="col-auto">
-              <a href="#">
+              <a href="#" tabindex="-1" aria-hidden="true">
                 <Avatar person={row.person} />
               </a>
             </div>
diff --git a/shared/components/cards/UsersListHeaders.astro b/shared/components/cards/UsersListHeaders.astro
index a4a58ca8e..204cf7aeb 100644
--- a/shared/components/cards/UsersListHeaders.astro
+++ b/shared/components/cards/UsersListHeaders.astro
@@ -41,7 +41,7 @@ const rows = sorted.map((person, idx) => {
           <ListGroupItem>
             <div class="row">
               <div class="col-auto">
-                <a href="#">
+                <a href="#" tabindex="-1" aria-hidden="true">
                   <Avatar person={row.person} />
                 </a>
               </div>
diff --git a/shared/components/cards/Welcome.astro b/shared/components/cards/Welcome.astro
index 7d9dc4ff4..ed1af1d6e 100644
--- a/shared/components/cards/Welcome.astro
+++ b/shared/components/cards/Welcome.astro
@@ -36,7 +36,7 @@ import Progress from '@ui/Progress.astro'
         </div>
       </div>
       <div class="col-12 col-sm-6 d-flex justify-content-center">
-        <a href="./illustrations.html">
+        <a href="./illustrations.html" aria-label="Illustrations">
           <svg xmlns="http://www.w3.org/2000/svg" height="200" fill="none" viewBox="0 0 800 600">
             <style is:inline>
               :where(.theme-dark, [data-theme='dark']) .tblr-illustrations-good-info-a {
diff --git a/shared/components/demo/Nav.astro b/shared/components/demo/Nav.astro
index 58fccd1eb..e161ffa60 100644
--- a/shared/components/demo/Nav.astro
+++ b/shared/components/demo/Nav.astro
@@ -28,7 +28,7 @@ const classes = ['nav', pills ? 'nav-pills' : tabs ? 'nav-tabs' : undefined, cla
     <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"> Disabled </a>
   </li>
   <li class="nav-item ms-auto">
-    <a class="nav-link" href="#">
+    <a class="nav-link" href="#" aria-label="Settings">
       <Icon name="settings" />
     </a>
   </li>
diff --git a/shared/components/forms/FormElements4.astro b/shared/components/forms/FormElements4.astro
index e0b85c6ec..b570c563d 100644
--- a/shared/components/forms/FormElements4.astro
+++ b/shared/components/forms/FormElements4.astro
@@ -256,13 +256,11 @@ import Avatar from '@ui/Avatar.astro'
       <input type="radio" class="btn-check" name="btn-radio-dropdown" id="btn-radio-dropdown-2" autocomplete="off" />
       <label for="btn-radio-dropdown-2" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Option 2</label>
       <ButtonGroup>
-        <input type="radio" class="btn-check" name="btn-radio-dropdown" id="btn-radio-dropdown-dropdown" autocomplete="off" />
-        <label for="btn-radio-dropdown-dropdown" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other </label>
+        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other </button>
         <div class="dropdown-menu">
           <a class="dropdown-item" href="#"> Action </a>
           <a class="dropdown-item" href="#"> Another action </a>
-        </div>
-        <div class="dropdown-menu dropdown-menu-end">
+          <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="#"> Option 4 </a>
           <a class="dropdown-item" href="#"> Option 5 </a>
           <a class="dropdown-item" href="#"> Option 6 </a>
@@ -306,13 +304,11 @@ import Avatar from '@ui/Avatar.astro'
           <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-4" autocomplete="off" />
           <label for="btn-radio-vertical-dropdown-4" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 4</label>
           <ButtonGroup>
-            <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-dropdown" autocomplete="off" />
-            <label for="btn-radio-vertical-dropdown-dropdown" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other </label>
+            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other </button>
             <div class="dropdown-menu">
               <a class="dropdown-item" href="#"> Action </a>
               <a class="dropdown-item" href="#"> Another action </a>
-            </div>
-            <div class="dropdown-menu dropdown-menu-end">
+              <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#"> Option 4 </a>
               <a class="dropdown-item" href="#"> Option 5 </a>
               <a class="dropdown-item" href="#"> Option 6 </a>
diff --git a/shared/components/layout/HeaderActionsPhotos.astro b/shared/components/layout/HeaderActionsPhotos.astro
index e5d4bb0f1..2ec270bcb 100644
--- a/shared/components/layout/HeaderActionsPhotos.astro
+++ b/shared/components/layout/HeaderActionsPhotos.astro
@@ -7,7 +7,7 @@ import Button from '@ui/Button.astro'
 <div class="d-flex">
   <div class="me-3">
     <div class="input-icon">
-      <input type="text" value="" class="form-control" placeholder="Search…" />
+      <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search" />
 
       <span class="input-icon-addon">
         <Icon name="search" />
diff --git a/shared/components/layout/HeaderActionsUsers.astro b/shared/components/layout/HeaderActionsUsers.astro
index e2d427f02..92f521798 100644
--- a/shared/components/layout/HeaderActionsUsers.astro
+++ b/shared/components/layout/HeaderActionsUsers.astro
@@ -4,7 +4,7 @@ import Button from '@ui/Button.astro'
 
 <!-- BEGIN HEADER ACTIONS -->
 <div class="d-flex">
-  <input type="search" class="form-control d-inline-block w-9 me-3" placeholder="Search user…" />
+  <input type="search" class="form-control d-inline-block w-9 me-3" placeholder="Search user…" aria-label="Search user" />
   <Button text="New user" color="primary" icon="plus" />
 </div>
 <!-- END HEADER ACTIONS -->
diff --git a/shared/components/marketing/sections/Companies.astro b/shared/components/marketing/sections/Companies.astro
index ded75e9d1..0beb65539 100644
--- a/shared/components/marketing/sections/Companies.astro
+++ b/shared/components/marketing/sections/Companies.astro
@@ -26,13 +26,13 @@ const sectionClass = ['section', background && `section-${background}`, classNam
       <h2 class="section-title text-secondary">Trusted by over 3,000 companies</h2>
     </div>
     <div class="row g-lg-8 align-items-center justify-content-center">
-      <div class="col-auto"><a href="#" class="link-secondary"><Baremetrics /></a></div>
-      <div class="col-auto"><a href="#" class="link-secondary"><Cgi /></a></div>
-      <div class="col-auto"><a href="#" class="link-secondary"><Docplanner /></a></div>
-      <div class="col-auto"><a href="#" class="link-secondary"><Flow /></a></div>
-      <div class="col-auto"><a href="#" class="link-secondary"><Fubotv /></a></div>
-      <div class="col-auto"><a href="#" class="link-secondary"><SixFlags /></a></div>
-      <div class="col-auto"><a href="#" class="link-secondary"><Vocus /></a></div>
+      <div class="col-auto"><a href="#" class="link-secondary" aria-label="Baremetrics"><Baremetrics /></a></div>
+      <div class="col-auto"><a href="#" class="link-secondary" aria-label="CGI"><Cgi /></a></div>
+      <div class="col-auto"><a href="#" class="link-secondary" aria-label="Docplanner"><Docplanner /></a></div>
+      <div class="col-auto"><a href="#" class="link-secondary" aria-label="Flow"><Flow /></a></div>
+      <div class="col-auto"><a href="#" class="link-secondary" aria-label="fuboTV"><Fubotv /></a></div>
+      <div class="col-auto"><a href="#" class="link-secondary" aria-label="Six Flags"><SixFlags /></a></div>
+      <div class="col-auto"><a href="#" class="link-secondary" aria-label="Vocus"><Vocus /></a></div>
     </div>
   </div>
 </section>
diff --git a/shared/components/marketing/sections/Subscribe.astro b/shared/components/marketing/sections/Subscribe.astro
index 80bee823a..512fcea7e 100644
--- a/shared/components/marketing/sections/Subscribe.astro
+++ b/shared/components/marketing/sections/Subscribe.astro
@@ -19,13 +19,13 @@ const sectionClass = ['section', className]
   </div>
 
   <div class="container-tight">
-    <div class="row">
+    <form class="row" action="./" method="get" novalidate>
       <div class="col">
-        <input class="w-100 form-control" placeholder="Your Email" type="email" />
+        <input class="w-100 form-control" name="email" placeholder="Your Email" type="email" />
       </div>
       <div class="col-auto">
         <button type="submit" class="btn btn-primary"><Icon name="mail" /> Subscribe</button>
       </div>
-    </div>
+    </form>
   </div>
 </section>
diff --git a/shared/components/modals/TeamModalContent.astro b/shared/components/modals/TeamModalContent.astro
index 4157ac2d5..be4d4fadb 100644
--- a/shared/components/modals/TeamModalContent.astro
+++ b/shared/components/modals/TeamModalContent.astro
@@ -12,8 +12,8 @@ import InputColor from '../parts/form/InputColor.astro'
       <AvatarUpload class="rounded" size="xl" />
     </div>
     <div class="col">
-      <label class="form-label">Name</label>
-      <input type="text" class="form-control" />
+      <label class="form-label" for="team-name">Name</label>
+      <input type="text" id="team-name" class="form-control" />
     </div>
   </div>
 
diff --git a/shared/data/emails.json b/shared/data/emails.json
index 36e39ab02..c51bc4e44 100644
--- a/shared/data/emails.json
+++ b/shared/data/emails.json
@@ -8,16 +8,16 @@
     "heightFull": 2370
   },
   "access-token": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template about generating an access token",
+    "descriptionLong": "Allows to inform the user that a new access token has been created for their account. Shows when the token was generated and from which device or location. Sends directly to the security settings by the button to revoke it if not recognized.",
     "width": 1248,
     "height": 1032,
     "widthFull": 1440,
     "heightFull": 1786
   },
   "account-deleted": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template confirming an account deletion",
+    "descriptionLong": "Allows to confirm that a user's account and its data have been permanently deleted. Shows the date the account was removed and a short summary of what happens next. Gives a contact link in case the deletion was not requested.",
     "width": 1248,
     "height": 1152,
     "widthFull": 1440,
@@ -40,16 +40,16 @@
     "heightFull": 3260
   },
   "calendar": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with a calendar of events",
+    "descriptionLong": "Allows to show a list of upcoming events over the month, each with its date and short description. Highlights the closest event separately. Refers to the full calendar on the website by the button.",
     "width": 1248,
     "height": 2744,
     "widthFull": 1440,
     "heightFull": 3498
   },
   "changelog": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with a product changelog",
+    "descriptionLong": "Allows to list the latest changes, fixes and new features added to the product. Groups items by category and shows the release date. Sends to the full changelog page by the button.",
     "width": 1248,
     "height": 1956,
     "widthFull": 1440,
@@ -64,8 +64,8 @@
     "heightFull": 3528
   },
   "company-email": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template for internal company communication",
+    "descriptionLong": "Allows to share company news and announcements with employees. Shows the sender's name and department along with the message content. Includes a button to read the full announcement on the intranet.",
     "width": 1248,
     "height": 1604,
     "widthFull": 1440,
@@ -80,8 +80,8 @@
     "heightFull": 4440
   },
   "confirm-email": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template to confirm a new email address",
+    "descriptionLong": "Allows to verify that a newly added email address belongs to the user. Shows the address to be confirmed and explains why confirmation is needed. Sends directly to the confirmation page by the button.",
     "width": 1248,
     "height": 1484,
     "widthFull": 1440,
@@ -96,16 +96,16 @@
     "heightFull": 5204
   },
   "deployment-failed": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template about a failed deployment",
+    "descriptionLong": "Allows to notify the team that a deployment did not complete successfully. Shows the project name, the failed step and the time it happened. Sends to the build logs by the button to investigate the cause.",
     "width": 1248,
     "height": 1906,
     "widthFull": 1440,
     "heightFull": 2660
   },
   "domain-configuration": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template about domain configuration",
+    "descriptionLong": "Allows to guide the user through connecting a custom domain. Shows the required DNS records and their current verification status. Sends to the domain settings by the button to finish the setup.",
     "width": 1248,
     "height": 1474,
     "widthFull": 1440,
@@ -168,40 +168,40 @@
     "heightFull": 3406
   },
   "features-3": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template presenting product features",
+    "descriptionLong": "Allows to showcase a set of product features with an icon and short description for each. Groups the features so they are easy to scan. Sends to the features page by the button for more details.",
     "width": 1248,
     "height": 1340,
     "widthFull": 1440,
     "heightFull": 2094
   },
   "footer-1": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email footer template with social links",
+    "descriptionLong": "Shows a simple footer block with the company logo, social media icons and an unsubscribe link. Fits at the bottom of any email template. Keeps the layout compact and consistent with the rest of the message.",
     "width": 1248,
     "height": 244,
     "widthFull": 1440,
     "heightFull": 998
   },
   "footer-2": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email footer template with contact details",
+    "descriptionLong": "Shows a footer block with the company address, phone number and support email. Includes links to the privacy policy and unsubscribe page. Fits at the bottom of any email template.",
     "width": 1248,
     "height": 244,
     "widthFull": 1440,
     "heightFull": 964
   },
   "footer-3": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email footer template with navigation links",
+    "descriptionLong": "Shows a footer block with links to the main sections of the website. Includes the company logo and copyright notice. Fits at the bottom of any email template.",
     "width": 1248,
     "height": 244,
     "widthFull": 1440,
     "heightFull": 1222
   },
   "footer-4": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email footer template with app download links",
+    "descriptionLong": "Shows a footer block promoting the mobile app with App Store and Google Play buttons. Includes the company logo and an unsubscribe link. Fits at the bottom of any email template.",
     "width": 1248,
     "height": 244,
     "widthFull": 1440,
@@ -240,8 +240,8 @@
     "heightFull": 2048
   },
   "invitation-2": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with an invitation to collaborate",
+    "descriptionLong": "Shows who invites the user and to which project or team. Explains what access will be granted once the invitation is accepted. Accepts or declines the invitation by the button at any time.",
     "width": 1248,
     "height": 1652,
     "widthFull": 1440,
@@ -272,8 +272,8 @@
     "heightFull": 2484
   },
   "magic-link": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with a magic link to sign in",
+    "descriptionLong": "Allows to sign in without a password by sending a one-time link to the user's email. Shows how long the link stays valid before it expires. Sends directly to the account by the button.",
     "width": 1248,
     "height": 1180,
     "widthFull": 1440,
@@ -296,16 +296,16 @@
     "heightFull": 2530
   },
   "new-app": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template announcing a new app",
+    "descriptionLong": "Allows to introduce a newly released application to users. Shows a short description of what the app does along with a preview image. Sends to the download page by the button.",
     "width": 1248,
     "height": 1270,
     "widthFull": 1440,
     "heightFull": 2024
   },
   "new-photos": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template about new photos added",
+    "descriptionLong": "Allows to notify the user that new photos have been added to an album or gallery. Shows a preview of the latest photos along with who added them. Sends to the full gallery by the button.",
     "width": 1248,
     "height": 1768,
     "widthFull": 1440,
@@ -320,8 +320,8 @@
     "heightFull": 6044
   },
   "off-deals": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with discounted deals",
+    "descriptionLong": "Allows to present a list of products currently on sale with their discounted price. Shows the discount percentage and how long the deal lasts. Sends directly to the store by the button.",
     "width": 1248,
     "height": 2508,
     "widthFull": 1440,
@@ -344,8 +344,8 @@
     "heightFull": 4442
   },
   "otp-code": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with a one-time password code",
+    "descriptionLong": "Allows to send a one-time code used to verify the user's identity. Shows how long the code stays valid before it expires. Reminds the user not to share the code with anyone.",
     "width": 1248,
     "height": 1908,
     "widthFull": 1440,
@@ -376,8 +376,8 @@
     "heightFull": 3950
   },
   "post": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template about a new post",
+    "descriptionLong": "Allows to notify followers when a new post is published. Shows the title, a short excerpt and the cover image of the post. Sends to the full post by the button.",
     "width": 1248,
     "height": 1504,
     "widthFull": 1440,
@@ -424,16 +424,16 @@
     "heightFull": 2096
   },
   "promotions": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with a list of promotions",
+    "descriptionLong": "Allows to present several ongoing promotions in a single email. Shows each offer with its own image, description and expiry date. Sends directly to the store by the button for each offer.",
     "width": 1248,
     "height": 3058,
     "widthFull": 1440,
     "heightFull": 3812
   },
   "promotions-2": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with a featured promotion",
+    "descriptionLong": "Allows to highlight one main promotion with a large image and short description. Shows the discount and the expiry date of the offer. Sends directly to the store by the button.",
     "width": 1248,
     "height": 1626,
     "widthFull": 1440,
@@ -464,8 +464,8 @@
     "heightFull": 3358
   },
   "review": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template asking for a review",
+    "descriptionLong": "Allows to ask the user to leave a review after a purchase or an interaction. Shows the product or service along with a star rating widget. Sends to the review form by the button.",
     "width": 1248,
     "height": 1340,
     "widthFull": 1440,
@@ -488,8 +488,8 @@
     "heightFull": 2522
   },
   "security-alert": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with a security alert",
+    "descriptionLong": "Allows to warn the user about a suspicious sign-in attempt or account activity. Shows the device, location and time of the activity. Sends directly to the security settings by the button to secure the account.",
     "width": 1248,
     "height": 1272,
     "widthFull": 1440,
@@ -544,8 +544,8 @@
     "heightFull": 2750
   },
   "survey-emoji": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with an emoji survey",
+    "descriptionLong": "Allows to collect quick feedback using a row of emoji ratings. Shows a short question above the emoji options. Sends the response directly by clicking on an emoji.",
     "width": 1248,
     "height": 1834,
     "widthFull": 1440,
@@ -592,8 +592,8 @@
     "heightFull": 3114
   },
   "uptime-report": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template with an uptime report",
+    "descriptionLong": "Allows to summarize the uptime and incidents of a monitored service over a period. Shows the uptime percentage along with a short list of incidents. Sends to the full report by the button.",
     "width": 1248,
     "height": 1750,
     "widthFull": 1440,
@@ -624,8 +624,8 @@
     "heightFull": 3680
   },
   "welcome": {
-    "descriptionShort": "",
-    "descriptionLong": "",
+    "descriptionShort": "Email template welcoming a new user",
+    "descriptionLong": "Allows to greet a new user right after they sign up. Shows a short introduction to the product along with the first steps to get started. Sends to the dashboard by the button.",
     "width": 1248,
     "height": 1484,
     "widthFull": 1440,
diff --git a/shared/layouts/MarketingLayout.astro b/shared/layouts/MarketingLayout.astro
index 3c5fe7adc..be193e83d 100644
--- a/shared/layouts/MarketingLayout.astro
+++ b/shared/layouts/MarketingLayout.astro
@@ -130,7 +130,7 @@ const base = '..'
               <div class="col-auto">
                 <ul class="list-inline list-inline-dots">
                   <li class="list-inline-item">
-                    <a class="link-secondary" href="/terms-of-service">Terms of service</a>
+                    <a class="link-secondary" href="/terms-of-service.html">Terms of service</a>
                   </li>
                   <li class="list-inline-item">
                     <a class="link-secondary" href="#">Privacy policy</a>
diff --git a/shared/ui/Alert.astro b/shared/ui/Alert.astro
index f1a7c3b37..4ffb2fbb9 100644
--- a/shared/ui/Alert.astro
+++ b/shared/ui/Alert.astro
@@ -66,5 +66,5 @@ const classes = ['alert', variant && `alert-${variant}`, `alert-${color}`, showC
       </Fragment>
     )
   }
-  {showClose && <a class="btn-close" data-bs-dismiss="alert" aria-label="close" />}
+  {showClose && <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close" />}
 </div>
diff --git a/shared/ui/Avatar.astro b/shared/ui/Avatar.astro
index a03552891..e99268338 100644
--- a/shared/ui/Avatar.astro
+++ b/shared/ui/Avatar.astro
@@ -15,6 +15,8 @@ interface Props {
   /** person object (photo → src, initials → placeholder); resolve demo ids with personById() from @shared/lib/people */
   person?: Person | undefined
   link?: boolean
+  /** href for the linked avatar (link); defaults to "#" when omitted */
+  href?: string
   size?: AvatarSize | undefined
   class?: string
   /** avatar-{shape} (core/scss/ui/_avatars.scss) */
@@ -30,7 +32,7 @@ interface Props {
   [key: string]: unknown
 }
 
-const { src: srcProp, placeholder: placeholderProp, person, link: linkProp = false, size, class: className, shape, color, status, statusLabel, brand, icon, base = assetRoot, ...rest } = Astro.props
+const { src: srcProp, placeholder: placeholderProp, person, link: linkProp = false, href: hrefProp, size, class: className, shape, color, status, statusLabel, brand, icon, base = assetRoot, ...rest } = Astro.props
 
 let src = srcProp
 let placeholder = placeholderProp
@@ -43,10 +45,11 @@ if (person) {
 }
 
 const El = linkProp ? 'a' : 'span'
+const linkAttrs = linkProp ? { href: hrefProp ?? '#' } : {}
 
 const classes = ['avatar', size && `avatar-${size}`, className, shape && `avatar-${shape}`, color && `bg-${color}-lt`]
 ---
 
-<El class:list={classes} style={src ? `background-image: url(${base}/${src})` : undefined} {...rest}
+<El {...linkAttrs} class:list={classes} style={src ? `background-image: url(${base}/${src})` : undefined} {...rest}
   >{status && <span class={`badge bg-${status}`} aria-label={statusLabel ?? status} />}{brand && <span class="avatar-brand" style={`background-image: url(${base}/static/brands/${brand}.svg);`} />}{src ? null : placeholder ? placeholder : icon ? <Icon name={icon} /> : <Icon name="user" />}</El
 >
diff --git a/shared/ui/Rating.astro b/shared/ui/Rating.astro
index 16b63f757..7db1153d2 100644
--- a/shared/ui/Rating.astro
+++ b/shared/ui/Rating.astro
@@ -9,9 +9,11 @@ interface Props {
   color?: string
   size?: IconSize | undefined
   value?: number
+  /** accessible name for the underlying select; defaults to "Rating" */
+  label?: string
 }
 
-const { id, icon = 'star', color, size, value } = Astro.props
+const { id, icon = 'star', color, size, value, label = 'Rating' } = Astro.props
 
 const starClasses = ['icon', 'gl-star-full', color && `text-${color}`, size && `icon-${size}`].filter(Boolean).join(' ')
 
@@ -21,7 +23,7 @@ const ratingSelector = `#rating-${id}`
 const ratingKey = `rating-${id}`
 ---
 
-<select id={`rating-${id}`}>
+<select id={`rating-${id}`} aria-label={label}>
   <option value="">Select a rating</option>
   <option value="5" selected={value === 5}>Excellent</option>
   <option value="4" selected={value === 4}>Very Good</option>
diff --git a/shared/ui/Tag.astro b/shared/ui/Tag.astro
index e3c7477e2..eabaeb528 100644
--- a/shared/ui/Tag.astro
+++ b/shared/ui/Tag.astro
@@ -37,7 +37,7 @@ const { text, flag, icon, person, status, legend, checkbox, checked, badge, clas
     ) : legend ? (
       <span class={`legend-dot bg-${legend}`} />
     ) : checkbox ? (
-      <input type="checkbox" class="form-check-input tag-check" checked={checked} />
+      <input type="checkbox" class="form-check-input tag-check" checked={checked} aria-label={text} />
     ) : null
   }
   {text}
diff --git a/shared/ui/Wysiwyg.astro b/shared/ui/Wysiwyg.astro
index 3715c5e7a..bc6a980ca 100644
--- a/shared/ui/Wysiwyg.astro
+++ b/shared/ui/Wysiwyg.astro
@@ -8,9 +8,7 @@ const { id } = Astro.props
 const selector = `#hugerte-${id}`
 ---
 
-<form method="post">
-  <textarea id={`hugerte-${id}`} set:html={'Hello, <b>Tabler</b>!'} />
-</form>
+<textarea id={`hugerte-${id}`} set:html={'Hello, <b>Tabler</b>!'} />
 <CaptureScript>
   <!-- BEGIN WYSIWYG -->
   <script is:inline define:vars={{ selector }}>