From 020a9e11fe96779dfe453355446b07fa0c6e7917 Mon Sep 17 00:00:00 2001
From: Rick Staa <rick.staa@outlook.com>
Date: Wed, 25 Mar 2026 09:31:11 +0100
Subject: [PATCH] fix: add alt tags, aria-labels, and aria-hidden for
 accessibility

Add descriptive alt text to all avatar and migration diagram images.
Add aria-labels to logo, social media, and contract address links.
Add aria-hidden to decorative icons and rel="noopener noreferrer"
to external links.

Extracted from #509.

Co-Authored-By: Sebastian <115311276+Roaring30s@users.noreply.github.com>
---
 components/AccountCell/index.tsx       |  3 +++
 components/DelegatingWidget/Header.tsx |  5 +++++
 components/IdentityAvatar/index.tsx    |  1 +
 components/Logo/index.tsx              |  2 +-
 components/Profile/index.tsx           | 12 +++++++++---
 layouts/main.tsx                       | 14 +++++++++++++-
 pages/migrate/broadcaster.tsx          |  2 +-
 pages/migrate/delegator/index.tsx      |  2 +-
 pages/migrate/orchestrator.tsx         |  2 +-
 9 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/components/AccountCell/index.tsx b/components/AccountCell/index.tsx
index 43f86c15..7b725a16 100644
--- a/components/AccountCell/index.tsx
+++ b/components/AccountCell/index.tsx
@@ -49,6 +49,9 @@ const Index = ({ active, address }) => {
               borderColor: "$neutral5",
             }}
             src={identity.avatar}
+            alt={
+              identity?.name ? `${identity.name} avatar` : `${address} avatar`
+            }
           />
         ) : (
           <QRCodeCanvas
diff --git a/components/DelegatingWidget/Header.tsx b/components/DelegatingWidget/Header.tsx
index b808c216..4b272b81 100644
--- a/components/DelegatingWidget/Header.tsx
+++ b/components/DelegatingWidget/Header.tsx
@@ -42,6 +42,11 @@ const Header = ({
               height: 40,
             }}
             src={delegateProfile.avatar}
+            alt={
+              delegateProfile?.name
+                ? `${delegateProfile.name} avatar`
+                : `${delegateProfile?.id || "delegate"} avatar`
+            }
           />
         ) : (
           <QRCodeCanvas
diff --git a/components/IdentityAvatar/index.tsx b/components/IdentityAvatar/index.tsx
index 312909c0..9b1c8961 100644
--- a/components/IdentityAvatar/index.tsx
+++ b/components/IdentityAvatar/index.tsx
@@ -82,6 +82,7 @@ const IdentityAvatar = ({ identity, address, size = 24, css = {} }: Props) => {
           transition: "opacity 150ms ease",
         }}
         src={avatarSrc}
+        alt={`${address} avatar`}
         onLoad={() => setImageLoaded(true)}
         onError={() => setHasAvatarError(true)}
       />
diff --git a/components/Logo/index.tsx b/components/Logo/index.tsx
index 67e8d53e..b1165dd8 100644
--- a/components/Logo/index.tsx
+++ b/components/Logo/index.tsx
@@ -57,7 +57,7 @@ const LivepeerLogo = ({ isDark, isLink = true }: Props) => {
   if (!isLink) return markup;
   return (
     <Link href="/" passHref>
-      {markup}
+      <a aria-label="Livepeer Explorer home">{markup}</a>
     </Link>
   );
 };
diff --git a/components/Profile/index.tsx b/components/Profile/index.tsx
index be84d78f..650e45c2 100644
--- a/components/Profile/index.tsx
+++ b/components/Profile/index.tsx
@@ -78,6 +78,9 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => {
                 height: "100%",
               }}
               src={identity.avatar}
+              alt={
+                identity?.name ? `${identity.name} avatar` : `${account} avatar`
+              }
             />
           ) : (
             <Box
@@ -224,12 +227,13 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => {
                 href={identity.url}
                 target="__blank"
                 rel="noopener noreferrer"
+                aria-label={`Visit ${identity.url.replace(/(^\w+:|^)\/\//, "")}`}
               >
                 <Flex
                   align="center"
                   css={{ marginTop: "$2", marginRight: "$3" }}
                 >
-                  <Box as={GlobeIcon} css={{ marginRight: "$1" }} />
+                  <Box as={GlobeIcon} css={{ marginRight: "$1" }} aria-hidden="true" />
                   {identity.url.replace(/(^\w+:|^)\/\//, "")}
                 </Flex>
               </A>
@@ -242,12 +246,13 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => {
                 href={`https://twitter.com/${identity.twitter}`}
                 target="__blank"
                 rel="noopener noreferrer"
+                aria-label={`View ${identity.twitter} on Twitter`}
               >
                 <Flex
                   align="center"
                   css={{ marginTop: "$2", marginRight: "$3" }}
                 >
-                  <Box as={TwitterLogoIcon} css={{ marginRight: "$1" }} />
+                  <Box as={TwitterLogoIcon} css={{ marginRight: "$1" }} aria-hidden="true" />
                   <Box
                     css={{
                       "@media (max-width: 400px)": {
@@ -268,12 +273,13 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => {
                 href={`https://github.com/${identity.github}`}
                 target="__blank"
                 rel="noopener noreferrer"
+                aria-label={`View ${identity.github} on GitHub`}
               >
                 <Flex
                   align="center"
                   css={{ marginTop: "$2", marginRight: "$3" }}
                 >
-                  <Box as={GitHubLogoIcon} css={{ marginRight: "$1" }} />
+                  <Box as={GitHubLogoIcon} css={{ marginRight: "$1" }} aria-hidden="true" />
                   <Box
                     css={{
                       "@media (max-width: 400px)": {
diff --git a/layouts/main.tsx b/layouts/main.tsx
index a02fee05..cf123f59 100644
--- a/layouts/main.tsx
+++ b/layouts/main.tsx
@@ -620,6 +620,7 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
                                 <Box
                                   css={{ marginLeft: "$1" }}
                                   as={ChevronDownIcon}
+                                  aria-hidden="true"
                                 />
                               </Button>
                             </PopoverTrigger>
@@ -859,6 +860,12 @@ const ContractAddressesPopover = ({ activeChain }: { activeChain?: Chain }) => {
                           marginBottom: "$1",
                         }}
                         target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label={`View ${
+                          contractAddresses?.[
+                            key as keyof typeof contractAddresses
+                          ]?.name ?? "contract"
+                        } on block explorer`}
                         href={
                           contractAddresses?.[
                             key as keyof typeof contractAddresses
@@ -900,7 +907,11 @@ const ContractAddressesPopover = ({ activeChain }: { activeChain?: Chain }) => {
               passHref
               href="https://docs.livepeer.org/references/contract-addresses"
             >
-              <A>
+              <A
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Learn more about these contracts (opens in new tab)"
+              >
                 <Flex
                   css={{
                     marginTop: "$2",
@@ -922,6 +933,7 @@ const ContractAddressesPopover = ({ activeChain }: { activeChain?: Chain }) => {
                       height: 15,
                     }}
                     as={ArrowTopRightIcon}
+                    aria-hidden="true"
                   />
                 </Flex>
               </A>
diff --git a/pages/migrate/broadcaster.tsx b/pages/migrate/broadcaster.tsx
index 7f266a12..8324440e 100644
--- a/pages/migrate/broadcaster.tsx
+++ b/pages/migrate/broadcaster.tsx
@@ -740,7 +740,7 @@ const MigrateBroadcaster = () => {
 
             {state.image && (
               <Box css={{ textAlign: "center", marginBottom: "$5" }}>
-                <Box as="img" src={state.image} />
+                <Box as="img" src={state.image} alt="Migration diagram" />
               </Box>
             )}
 
diff --git a/pages/migrate/delegator/index.tsx b/pages/migrate/delegator/index.tsx
index a24817a9..24835713 100644
--- a/pages/migrate/delegator/index.tsx
+++ b/pages/migrate/delegator/index.tsx
@@ -734,7 +734,7 @@ const MigrateUndelegatedStake = () => {
 
             {state.image && (
               <Box css={{ textAlign: "center", marginBottom: "$5" }}>
-                <Box as="img" src={state.image} />
+                <Box as="img" src={state.image} alt="Migration diagram" />
               </Box>
             )}
 
diff --git a/pages/migrate/orchestrator.tsx b/pages/migrate/orchestrator.tsx
index 629c8d6d..f3a8de03 100644
--- a/pages/migrate/orchestrator.tsx
+++ b/pages/migrate/orchestrator.tsx
@@ -711,7 +711,7 @@ const MigrateOrchestrator = () => {
 
             {state.image && (
               <Box css={{ textAlign: "center", marginBottom: "$5" }}>
-                <Box as="img" src={state.image} />
+                <Box as="img" src={state.image} alt="Migration diagram" />
               </Box>
             )}