Add skip link to offline message

web/components/ui/Content/Content.tsx

@@ -343,16 +343,18 @@ export const Content: FC = () => {
                 />
               )}
               {!online && !appState.appLoading && (
-                <OfflineBanner
+                <div id="offline-message">
-                  showsHeader={false}
+                  <OfflineBanner
-                  streamName={name}
+                    showsHeader={false}
-                  customText={offlineMessage}
+                    streamName={name}
-                  notificationsEnabled={browserNotificationsEnabled}
+                    customText={offlineMessage}
-                  fediverseAccount={fediverseAccount}
+                    notificationsEnabled={browserNotificationsEnabled}
-                  lastLive={lastDisconnectTime}
+                    fediverseAccount={fediverseAccount}
-                  onNotifyClick={() => setShowNotifyModal(true)}
+                    lastLive={lastDisconnectTime}
-                  onFollowClick={() => setShowFollowModal(true)}
+                    onNotifyClick={() => setShowNotifyModal(true)}
-                />
+                    onFollowClick={() => setShowFollowModal(true)}
+                  />
+                </div>
               )}
               {isStreamLive && (
                 <Statusbar

web/components/ui/Header/Header.tsx

@@ -29,10 +29,14 @@ export const Header: FC<HeaderComponentProps> = ({
   online,
 }) => (
   <header className={cn([`${styles.header}`], 'global-header')}>
-    {online && (
+    {online ? (
       <Link href="#player" className={styles.skipLink}>
         Skip to player
       </Link>
+    ) : (
+      <Link href="#offline-message" className={styles.skipLink}>
+        Skip to offline message
+      </Link>
     )}
     <Link href="#skip-to-content" className={styles.skipLink}>
       Skip to page content