diff --git a/src/components/flows/bc-connect.ts b/src/components/flows/bc-connect.ts
index 56ca538..5947a85 100644
--- a/src/components/flows/bc-connect.ts
+++ b/src/components/flows/bc-connect.ts
@@ -29,8 +29,19 @@ export class ConnectFlow extends withTwind()(BitcoinConnectElement) {
   closable?: boolean;
 
   override render() {
-    return html`<div class="w-full flex-col justify-center items-center">
-      <bc-modal-header class="flex w-full" show-help ?closable=${this.closable}>
+    return html`<div
+      class="w-full flex-col justify-center items-center"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="connect-modal-header"
+      aria-describedby="${this._error ? 'connect-error-message' : ''}"
+    >
+      <bc-modal-header
+        id="connect-modal-header"
+        class="flex w-full"
+        show-help
+        ?closable=${this.closable}
+      >
         <div class="${classes['text-brand-mixed']} mr-[2px]">
           ${bcCircleIcon}
         </div>
@@ -39,10 +50,14 @@ export class ConnectFlow extends withTwind()(BitcoinConnectElement) {
       <div class="flex w-full pt-8">
         ${this._connecting
           ? html`<bci-connecting class="flex w-full"></bci-connecting>`
-          : html` <bc-router-outlet class="flex w-full"></bc-router-outlet>`}
+          : html`<bc-router-outlet class="flex w-full"></bc-router-outlet>`}
       </div>
       ${this._error
-        ? html`<p class="mt-4 text-center font-sans text-red-500">
+        ? html`<p
+            id="connect-error-message"
+            class="mt-4 text-center font-sans text-red-500"
+            aria-live="assertive"
+          >
             ${this._error}
           </p>`
         : null}
diff --git a/src/components/flows/bc-payment.ts b/src/components/flows/bc-payment.ts
index 0be8dc7..e93c0c3 100644
--- a/src/components/flows/bc-payment.ts
+++ b/src/components/flows/bc-payment.ts
@@ -66,15 +66,36 @@ export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
 
   override render() {
     return this._showConnect && !this.paid
-      ? html` <bc-connect closable=${true}></bc-connect>`
-      : html`<div class="w-full flex-col justify-center items-center">
-          <bc-modal-header class="flex w-full" ?closable=${this.closable}>
+      ? html`
+          <!-- Render the connect component -->
+          <bc-connect
+            closable=${true}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="payment-connect-modal-header"
+          ></bc-connect>
+        `
+      : html`<div
+          class="w-full flex-col justify-center items-center"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="payment-modal-header"
+          aria-describedby="${this._error ? 'payment-error-message' : ''}"
+        >
+          <!-- Modal header -->
+          <bc-modal-header
+            id="payment-modal-header"
+            class="flex w-full"
+            ?closable=${this.closable}
+          >
             <p
               class="font-sans font-medium ${classes['text-neutral-secondary']}"
             >
               Payment Request
             </p>
           </bc-modal-header>
+
+          <!-- Payment Section -->
           <div class="flex flex-col justify-center items-center w-full pt-8">
             <bc-send-payment
               .invoice=${this.invoice}
@@ -83,8 +104,14 @@ export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
               @onclickconnectwallet=${this._onClickConnectWallet}
             ></bc-send-payment>
           </div>
+
+          <!-- Error message -->
           ${this._error
-            ? html`<p class="mt-4 text-center font-sans text-red-500">
+            ? html`<p
+                id="payment-error-message"
+                class="mt-4 text-center font-sans text-red-500"
+                aria-live="assertive"
+              >
                 ${this._error}
               </p>`
             : null}
diff --git a/src/components/pages/bc-send-payment.ts b/src/components/pages/bc-send-payment.ts
index e69d479..f98d5f9 100644
--- a/src/components/pages/bc-send-payment.ts
+++ b/src/components/pages/bc-send-payment.ts
@@ -63,15 +63,19 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
   private renderHeading(decodedInvoice: Invoice) {
     return html`
-      <h2 class="text-2xl mb-6 ${classes['text-neutral-secondary']}">
+      <h2
+        class="text-2xl mb-6 ${classes['text-neutral-secondary']}"
+        role="heading"
+        aria-level="1"
+      >
         <span
-          class="font-bold font-mono text-4xl align-bottom ${classes[
-            'text-brand-mixed'
-          ]}"
-          >${decodedInvoice.satoshi.toLocaleString(undefined, {
+          class="font-bold font-mono text-4xl align-bottom ${classes['text-brand-mixed']}"
+        >
+          ${decodedInvoice.satoshi.toLocaleString(undefined, {
             useGrouping: true,
-          })}</span
-        >&nbsp;sats
+          })}
+        </span>
+        &nbsp;sats
       </h2>
     `;
   }
@@ -79,9 +83,9 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
   private renderPaidState() {
     return html`
       <div
-        class="flex flex-col justify-center items-center ${classes[
-          'text-brand-mixed'
-        ]}"
+        class="flex flex-col justify-center items-center ${classes['text-brand-mixed']}"
+        role="alert"
+        aria-live="assertive"
       >
         <p class="font-bold">Paid!</p>
         ${successAnimation}
@@ -91,7 +95,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
   private renderPayingState() {
     return html`
-      <div class="flex flex-col justify-center items-center">
+      <div class="flex flex-col justify-center items-center" role="alert" aria-live="assertive">
         <p class="${classes['text-neutral-secondary']} mb-5">Paying...</p>
         ${waitingIcon(`w-48 h-48 ${classes['text-brand-mixed']}`)}
       </div>
@@ -100,7 +104,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
   private renderPaymentConfirmation() {
     return html`
-      <bci-button variant="primary" @click=${this._payInvoice}>
+      <bci-button variant="primary" @click=${this._payInvoice} aria-label="Confirm payment">
         <span class="-ml-0.5">${bcIcon}</span>
         Confirm Payment
       </bci-button>
@@ -110,7 +114,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
   private renderWaitingForPayment() {
     return html`
-      <div class="flex justify-center items-center">
+      <div class="flex justify-center items-center" aria-live="polite" role="alert">
         ${waitingIcon(`w-7 h-7 ${classes['text-brand-mixed']}`)}
         <p class="${classes['text-neutral-secondary']}">Waiting for payment</p>
       </div>
@@ -124,7 +128,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
     if (this.paymentMethods === 'all' || this.paymentMethods === 'internal') {
       internalMethods = html`
-        <bci-button block @click=${this._onClickConnectWallet}>
+        <bci-button block @click=${this._onClickConnectWallet} aria-label="Connect wallet to pay">
           <span class="-ml-0.5">${bcIcon}</span>Connect Wallet
         </bci-button>
       `;
@@ -132,7 +136,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
     if (this.paymentMethods === 'all' || this.paymentMethods === 'external') {
       externalMethods = html`
-        <bci-button block @click=${this._copyAndDisplayInvoice}>
+        <bci-button block @click=${this._copyAndDisplayInvoice} aria-label="Copy and display invoice">
           ${qrIcon} Copy & Display Invoice
         </bci-button>
       `;
@@ -145,7 +149,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
     return html`
       <div class="mt-8 w-full flex flex-col gap-4">
         ${this.paymentMethods === 'all' || this.paymentMethods === 'external'
-          ? html`<a href="lightning:${this.invoice}">
+          ? html`<a href="lightning:${this.invoice}" aria-label="Open in a Bitcoin wallet">
               <bci-button variant="primary" block>
                 ${walletIcon} Open in a Bitcoin Wallet
               </bci-button>
@@ -160,9 +164,9 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
   private renderConnectWalletDesktop() {
     let internalMethods = null;
     if (this.paymentMethods === 'all' || this.paymentMethods === 'internal') {
-      internalMethods = html`
+		internalMethods = html`
         <div class="${this.paymentMethods !== 'internal' ? 'mt-8' : ''}">
-          <bci-button variant="primary" @click=${this._onClickConnectWallet}>
+          <bci-button variant="primary" @click=${this._onClickConnectWallet} aria-label="Connect wallet to pay">
             <span class="-ml-0.5">${bcIcon}</span>
             Connect Wallet to Pay
           </bci-button>
@@ -177,7 +181,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
     let externalMethods = null;
     if (this.paymentMethods === 'all' || this.paymentMethods === 'external') {
-      externalMethods = html`
+		externalMethods = html`
         <div
           class="flex flex-col items-center ${this.paymentMethods === 'external'
             ? 'mt-8'
@@ -226,17 +230,13 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
     return html`
       <!-- add margin only on dark mode because on dark mode the qr has a white border -->
-      <a href="lightning:${this.invoice}" class="dark:mt-2">
+      <a href="lightning:${this.invoice}" class="dark:mt-2" aria-label="Pay invoice via QR">
         <canvas id="qr" class="rounded-lg"></canvas>
       </a>
       <a
         @click=${this._copyInvoice}
-        class="
-        flex gap-1
-        mt-4
-        ${classes[
-          'text-brand-mixed'
-        ]} ${classes.interactive} font-semibold text-xs"
+        class="flex gap-1 mt-4 ${classes['text-brand-mixed']} ${classes.interactive} font-semibold text-xs"
+        aria-label="Copy invoice to clipboard"
       >
         ${this._hasCopiedInvoice ? copiedIcon : copyIcon}
         ${this._hasCopiedInvoice ? 'Copied!' : 'Copy Invoice'}