2 files changed, 24 insertions, 4 deletions
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
index 7bf5b7c..0fd9f54 100644
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -80,13 +80,23 @@ const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
   const options: RadioGroupOption[] = [
     {
       id: 'code-blocks-light',
-      label: <Sun title={lightThemeLabel} />,
+      label: (
+        <>
+          <span className="screen-reader-text">{lightThemeLabel}</span>
+          <Sun />
+        </>
+      ),
       name: 'code-blocks',
       value: 'light',
     },
     {
       id: 'code-blocks-dark',
-      label: <Moon title={darkThemeLabel} />,
+      label: (
+        <>
+          <span className="screen-reader-text">{darkThemeLabel}</span>
+          <Moon />
+        </>
+      ),
       name: 'code-blocks',
       value: 'dark',
     },
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index b796b27..1c6481a 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -71,13 +71,23 @@ const ThemeToggle: FC<ThemeToggleProps> = (props) => {
   const options: RadioGroupOption[] = [
     {
       id: 'theme-light',
-      label: <Sun title={lightThemeLabel} />,
+      label: (
+        <>
+          <span className="screen-reader-text">{lightThemeLabel}</span>
+          <Sun />
+        </>
+      ),
       name: 'theme',
       value: 'light',
     },
     {
       id: 'theme-dark',
-      label: <Moon title={darkThemeLabel} />,
+      label: (
+        <>
+          <span className="screen-reader-text">{darkThemeLabel}</span>
+          <Moon />
+        </>
+      ),
       name: 'theme',
       value: 'dark',
     },