diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index f441a74bd8c3..701dae709928 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -1,5 +1,7 @@
 import React, { Fragment, FunctionComponent, useMemo, useEffect, useState } from 'react';
-import { Global, CSSObject } from '@storybook/theming';
+import { Consumer, Combo } from '@storybook/api';
+import { Button } from '@storybook/components';
+import { Global, CSSObject, styled } from '@storybook/theming';
 import { IFrame } from './iframe';
 import { FramesRendererProps } from './utils/types';
 import { stringifyQueryParams } from './utils/stringifyQueryParams';
@@ -12,6 +14,29 @@ const getActive = (refId: FramesRendererProps['refId']) => {
   return 'storybook-preview-iframe';
 };
 
+const SkipToSidebarLink = styled(Button)(({ theme }) => ({
+  display: 'none',
+  '@media (min-width: 600px)': {
+    display: 'block',
+    position: 'absolute',
+    top: 10,
+    right: 15,
+    padding: '10px 15px',
+    fontSize: theme.typography.size.s1,
+    transform: 'translateY(-100px)',
+    '&:focus': {
+      transform: 'translateY(0)',
+      zIndex: 1,
+    },
+  },
+}));
+
+const whenSidebarIsVisible = ({ state }: Combo) => ({
+  isFullscreen: state.layout.isFullscreen,
+  showNav: state.layout.showNav,
+  selectedStoryId: state.storyId,
+});
+
 export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   refs,
   story,
@@ -72,6 +97,18 @@ export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   return (
     <Fragment>
       <Global styles={styles} />
+      <Consumer filter={whenSidebarIsVisible}>
+        {({ isFullscreen, showNav, selectedStoryId }) => {
+          if (!isFullscreen && !!showNav && selectedStoryId) {
+            return (
+              <SkipToSidebarLink secondary isLink tabIndex={0} href={`#${selectedStoryId}`}>
+                Skip to sidebar
+              </SkipToSidebarLink>
+            );
+          }
+          return null;
+        }}
+      </Consumer>
       {Object.entries(frames).map(([id, src]) => (
         <Fragment key={id}>
           <IFrame
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index a0f2f1243a07..a938fa4f2679 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -1,18 +1,22 @@
 import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ThemeProvider, useTheme, Theme } from '@storybook/theming';
 import { action } from '@storybook/addon-actions';
+import { screen } from '@testing-library/dom';
 
 import { Heading } from './Heading';
 
+type Story = ComponentStory<typeof Heading>;
+
 export default {
   component: Heading,
   title: 'UI/Sidebar/Heading',
   excludeStories: /.*Data$/,
   parameters: { layout: 'fullscreen' },
   decorators: [
-    (storyFn: any) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
+    (storyFn) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
-};
+} as ComponentMeta<typeof Heading>;
 
 const menuItems = [
   { title: 'Menu Item 1', onClick: action('onActivateMenuItem'), id: '1' },
@@ -20,11 +24,11 @@ const menuItems = [
   { title: 'Menu Item 3', onClick: action('onActivateMenuItem'), id: '3' },
 ];
 
-export const menuHighlighted = () => <Heading menuHighlighted menu={menuItems} />;
+export const menuHighlighted: Story = () => <Heading menuHighlighted menu={menuItems} />;
 
 export const standardData = { menu: menuItems };
 
-export const standard = () => {
+export const standard: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -42,7 +46,7 @@ export const standard = () => {
   );
 };
 
-export const standardNoLink = () => {
+export const standardNoLink: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -60,7 +64,7 @@ export const standardNoLink = () => {
   );
 };
 
-export const linkAndText = () => {
+export const linkAndText: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -78,7 +82,7 @@ export const linkAndText = () => {
   );
 };
 
-export const onlyText = () => {
+export const onlyText: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -96,7 +100,7 @@ export const onlyText = () => {
   );
 };
 
-export const longText = () => {
+export const longText: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -114,7 +118,7 @@ export const longText = () => {
   );
 };
 
-export const customBrandImage = () => {
+export const customBrandImage: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -132,7 +136,7 @@ export const customBrandImage = () => {
   );
 };
 
-export const customBrandImageTall = () => {
+export const customBrandImageTall: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -150,7 +154,7 @@ export const customBrandImageTall = () => {
   );
 };
 
-export const customBrandImageUnsizedSVG = () => {
+export const customBrandImageUnsizedSVG: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -168,7 +172,7 @@ export const customBrandImageUnsizedSVG = () => {
   );
 };
 
-export const noBrand = () => {
+export const noBrand: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -185,3 +189,12 @@ export const noBrand = () => {
     </ThemeProvider>
   );
 };
+
+export const skipToCanvasLinkFocused: Story = {
+  args: { menu: menuItems, skipLinkHref: '#storybook-preview-wrapper' },
+  parameters: { layout: 'padded', chromatic: { delay: 300 } },
+  play: () => {
+    // focus each instance for chromatic/storybook's stacked theme
+    screen.getAllByText('Skip to canvas').forEach((x) => x.focus());
+  },
+};
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index 4aeb4c1dc11e..d897e080d7f4 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, ComponentProps } from 'react';
 import { styled } from '@storybook/theming';
+import { Button } from '@storybook/components';
 
 import { Brand } from './Brand';
 import { SidebarMenu, MenuList } from './Menu';
@@ -7,6 +8,7 @@ import { SidebarMenu, MenuList } from './Menu';
 export interface HeadingProps {
   menuHighlighted?: boolean;
   menu: MenuList;
+  skipLinkHref?: string;
 }
 
 const BrandArea = styled.div(({ theme }) => ({
@@ -34,13 +36,36 @@ const HeadingWrapper = styled.div({
   position: 'relative',
 });
 
+const SkipToCanvasLink = styled(Button)(({ theme }) => ({
+  display: 'none',
+  '@media (min-width: 600px)': {
+    display: 'block',
+    position: 'absolute',
+    width: '100%',
+    padding: '10px 15px',
+    fontSize: theme.typography.size.s1,
+    zIndex: 1,
+    transform: 'translate(0,-100px)',
+    '&:focus': {
+      transform: 'translate(0)',
+    },
+  },
+}));
+
 export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof HeadingWrapper>> = ({
   menuHighlighted = false,
   menu,
+  skipLinkHref,
   ...props
 }) => {
   return (
     <HeadingWrapper {...props}>
+      {skipLinkHref && (
+        <SkipToCanvasLink secondary isLink tabIndex={0} href={skipLinkHref}>
+          Skip to canvas
+        </SkipToCanvasLink>
+      )}
+
       <BrandArea>
         <Brand />
       </BrandArea>
diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx
index 32ead4d69db0..518eeb50c1fe 100644
--- a/lib/ui/src/components/sidebar/Sidebar.tsx
+++ b/lib/ui/src/components/sidebar/Sidebar.tsx
@@ -113,7 +113,12 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
       <Container className="container sidebar-container">
         <CustomScrollArea vertical>
           <StyledSpaced row={1.6}>
-            <Heading className="sidebar-header" menuHighlighted={menuHighlighted} menu={menu} />
+            <Heading
+              className="sidebar-header"
+              menuHighlighted={menuHighlighted}
+              menu={menu}
+              skipLinkHref="#storybook-preview-wrapper"
+            />
 
             <Search
               dataset={dataset}
diff --git a/lib/ui/src/components/sidebar/Tree.stories.tsx b/lib/ui/src/components/sidebar/Tree.stories.tsx
index 40d7fa161c0a..bb511a4e1e8c 100644
--- a/lib/ui/src/components/sidebar/Tree.stories.tsx
+++ b/lib/ui/src/components/sidebar/Tree.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StoriesHash } from '@storybook/api';
+import { screen } from '@testing-library/dom';
 
 import { Tree } from './Tree';
 import { stories } from './mockdata.large';
@@ -95,3 +96,23 @@ export const SingleStoryComponents = () => {
     />
   );
 };
+
+// node must be selected, highlighted, and focused
+// in order to tab to 'Skip to canvas' link
+export const SkipToCanvasLinkFocused = {
+  args: {
+    isBrowsing: true,
+    isMain: true,
+    refId,
+    data: stories,
+    highlightedRef: { current: { itemId: 'tooltip-tooltipbuildlist--default', refId } },
+    setHighlightedItemId: log,
+    selectedStoryId: 'tooltip-tooltipbuildlist--default',
+    onSelectStoryId: () => {},
+  },
+  parameters: { chromatic: { delay: 300 } },
+  play: () => {
+    // focus each instance for chromatic/storybook's stacked theme
+    screen.getAllByText('Skip to canvas').forEach((x) => x.focus());
+  },
+};
diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index ec2b0c6b2c51..3d9984d8a241 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -1,7 +1,7 @@
 import type { Group, Story, StoriesHash } from '@storybook/api';
 import { isRoot, isStory } from '@storybook/api';
 import { styled } from '@storybook/theming';
-import { Icons } from '@storybook/components';
+import { Button, Icons } from '@storybook/components';
 import { transparentize } from 'polished';
 import React, { MutableRefObject, useCallback, useMemo, useRef } from 'react';
 
@@ -98,6 +98,28 @@ const CollapseButton = styled.button(({ theme }) => ({
   },
 }));
 
+const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
+  position: 'relative',
+}));
+
+const SkipToContentLink = styled(Button)(({ theme }) => ({
+  display: 'none',
+  '@media (min-width: 600px)': {
+    display: 'block',
+    zIndex: -1,
+    position: 'absolute',
+    top: 1,
+    right: 20,
+    height: '20px',
+    fontSize: '10px',
+    padding: '5px 10px',
+    '&:focus': {
+      background: 'white',
+      zIndex: 1,
+    },
+  },
+}));
+
 interface NodeProps {
   item: Item;
   refId: string;
@@ -130,25 +152,32 @@ const Node = React.memo<NodeProps>(
     if (isStory(item)) {
       const LeafNode = item.isComponent ? DocumentNode : StoryNode;
       return (
-        <LeafNode
-          key={id}
-          id={id}
-          className="sidebar-item"
-          data-ref-id={refId}
-          data-item-id={item.id}
-          data-parent-id={item.parent}
-          data-nodetype={item.isComponent ? 'document' : 'story'}
-          data-selected={isSelected}
-          data-highlightable={isDisplayed}
-          depth={isOrphan ? item.depth : item.depth - 1}
-          href={getLink(item.id, refId)}
-          onClick={(event) => {
-            event.preventDefault();
-            onSelectStoryId(item.id);
-          }}
-        >
-          {item.renderLabel?.(item) || item.name}
-        </LeafNode>
+        <LeafNodeStyleWrapper>
+          <LeafNode
+            key={id}
+            id={id}
+            className="sidebar-item"
+            data-ref-id={refId}
+            data-item-id={item.id}
+            data-parent-id={item.parent}
+            data-nodetype={item.isComponent ? 'document' : 'story'}
+            data-selected={isSelected}
+            data-highlightable={isDisplayed}
+            depth={isOrphan ? item.depth : item.depth - 1}
+            href={getLink(item.id, refId)}
+            onClick={(event) => {
+              event.preventDefault();
+              onSelectStoryId(item.id);
+            }}
+          >
+            {item.renderLabel?.(item) || item.name}
+          </LeafNode>
+          {isSelected && (
+            <SkipToContentLink secondary outline isLink href="#storybook-preview-wrapper">
+              Skip to canvas
+            </SkipToContentLink>
+          )}
+        </LeafNodeStyleWrapper>
       );
     }
 
diff --git a/lib/ui/src/components/sidebar/TreeNode.stories.tsx b/lib/ui/src/components/sidebar/TreeNode.stories.tsx
index 9ef79f3c4684..e4067e264734 100644
--- a/lib/ui/src/components/sidebar/TreeNode.stories.tsx
+++ b/lib/ui/src/components/sidebar/TreeNode.stories.tsx
@@ -6,6 +6,7 @@ import { ComponentNode, DocumentNode, GroupNode, StoryNode } from './TreeNode';
 export default {
   title: 'UI/Sidebar/TreeNode',
   parameters: { layout: 'fullscreen' },
+  component: StoryNode,
 };
 
 export const Types = () => (
diff --git a/lib/ui/src/components/sidebar/TreeNode.tsx b/lib/ui/src/components/sidebar/TreeNode.tsx
index ca295f3356af..109ca245f5e5 100644
--- a/lib/ui/src/components/sidebar/TreeNode.tsx
+++ b/lib/ui/src/components/sidebar/TreeNode.tsx
@@ -57,6 +57,7 @@ const BranchNode = styled.button<{
   isExpandable?: boolean;
   isExpanded?: boolean;
   isComponent?: boolean;
+  isSelected?: boolean;
 }>(({ theme, depth = 0, isExpandable = false }) => ({
   width: '100%',
   border: 'none',
@@ -151,7 +152,7 @@ export const GroupNode: FunctionComponent<
 ));
 
 export const ComponentNode: FunctionComponent<ComponentProps<typeof BranchNode>> = React.memo(
-  ({ theme, children, isExpanded, isExpandable, ...props }) => (
+  ({ theme, children, isExpanded, isExpandable, isSelected, ...props }) => (
     <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}>
       {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
       <TypeIcon symbol="component" color="secondary" />
diff --git a/lib/ui/src/components/sidebar/useExpanded.ts b/lib/ui/src/components/sidebar/useExpanded.ts
index a0098d7ecb79..cf97c8b03203 100644
--- a/lib/ui/src/components/sidebar/useExpanded.ts
+++ b/lib/ui/src/components/sidebar/useExpanded.ts
@@ -167,8 +167,6 @@ export const useExpanded = ({
         (target as HTMLButtonElement).blur();
       }
 
-      event.preventDefault();
-
       const type = highlightedElement.getAttribute('data-nodetype');
       if ((isEnter || isSpace) && ['component', 'story', 'document'].includes(type)) {
         onSelectStoryId(highlightedItemId);