diff --git a/packages/scratch-gui/src/components/asset-panel/asset-panel.jsx b/packages/scratch-gui/src/components/asset-panel/asset-panel.jsx
index a33c8d209c..5f42934daf 100644
--- a/packages/scratch-gui/src/components/asset-panel/asset-panel.jsx
+++ b/packages/scratch-gui/src/components/asset-panel/asset-panel.jsx
@@ -3,20 +3,29 @@ import React from 'react';
 import Box from '../box/box.jsx';
 import Selector from './selector.jsx';
 import styles from './asset-panel.css';
+import PropTypes from 'prop-types';
 
-const AssetPanel = props => (
-    <Box className={styles.wrapper}>
+const AssetPanel = props => {
+    const {ariaLabel, ariaRole, ...restProps} = props;
+
+    return (<Box
+        aria-label={ariaLabel}
+        role={ariaRole}
+        className={styles.wrapper}
+    >
         <Selector
             className={styles.selector}
-            {...props}
+            {...restProps}
         />
         <Box className={styles.detailArea}>
             {props.children}
         </Box>
-    </Box>
-);
+    </Box>);
+};
 
 AssetPanel.propTypes = {
+    ariaLabel: PropTypes.string,
+    ariaRole: PropTypes.string,
     ...Selector.propTypes
 };
 
diff --git a/packages/scratch-gui/src/components/backpack/backpack.jsx b/packages/scratch-gui/src/components/backpack/backpack.jsx
index 8ff9817f5f..c2489f61de 100644
--- a/packages/scratch-gui/src/components/backpack/backpack.jsx
+++ b/packages/scratch-gui/src/components/backpack/backpack.jsx
@@ -41,6 +41,8 @@ const labelMap = defineMessages({
 });
 
 const Backpack = ({
+    ariaLabel,
+    ariaRole,
     blockDragOver,
     containerRef,
     contents,
@@ -57,7 +59,11 @@ const Backpack = ({
 }) => {
     const intl = useIntl();
     return (
-        <div className={styles.backpackContainer}>
+        <div
+            className={styles.backpackContainer}
+            role={ariaRole}
+            aria-label={ariaLabel}
+        >
             <div
                 className={styles.backpackHeader}
                 onClick={onToggle}
@@ -156,6 +162,8 @@ const Backpack = ({
 };
 
 Backpack.propTypes = {
+    ariaLabel: PropTypes.string,
+    ariaRole: PropTypes.string,
     blockDragOver: PropTypes.bool,
     containerRef: PropTypes.func,
     contents: PropTypes.arrayOf(PropTypes.shape({
diff --git a/packages/scratch-gui/src/components/gui/gui.css b/packages/scratch-gui/src/components/gui/gui.css
index 92161fe905..1d9614a484 100644
--- a/packages/scratch-gui/src/components/gui/gui.css
+++ b/packages/scratch-gui/src/components/gui/gui.css
@@ -28,7 +28,6 @@
         b) for combined stage menu + stage + sprite/stage selectors
     */
     flex-direction: row;
-    height: 100%;
 
     /*
         Stop scrollbar popping in and out from scratch-blocks border issue
diff --git a/packages/scratch-gui/src/components/gui/gui.jsx b/packages/scratch-gui/src/components/gui/gui.jsx
index 1fa06119e2..a8687a2030 100644
--- a/packages/scratch-gui/src/components/gui/gui.jsx
+++ b/packages/scratch-gui/src/components/gui/gui.jsx
@@ -253,6 +253,8 @@ const GUIComponent = props => {
                     />
                 ) : null}
                 {!menuBarHidden && <MenuBar
+                    ariaRole="banner"
+                    ariaLabel="Menu topbar"
                     accountNavOpen={accountNavOpen}
                     authorId={authorId}
                     authorThumbnailUrl={authorThumbnailUrl}
@@ -288,27 +290,34 @@ const GUIComponent = props => {
                     username={username}
                     accountMenuOptions={accountMenuOptions}
                 />}
-                <Box className={boxStyles}>
-                    <Box className={styles.flexWrapper}>
-                        <Box className={styles.editorWrapper}>
-                            <Tabs
-                                forceRenderTabPanel
-                                className={tabClassNames.tabs}
-                                selectedIndex={activeTabIndex}
-                                selectedTabClassName={tabClassNames.tabSelected}
-                                selectedTabPanelClassName={tabClassNames.tabPanelSelected}
-                                onSelect={onActivateTab}
+                <Box className={classNames(boxStyles, styles.flexWrapper)}>
+                    <Box
+                        role="main"
+                        aria-label="Editor"
+                        className={styles.editorWrapper}
+                    >
+                        <Tabs
+                            forceRenderTabPanel
+                            className={tabClassNames.tabs}
+                            selectedIndex={activeTabIndex}
+                            selectedTabClassName={tabClassNames.tabSelected}
+                            selectedTabPanelClassName={tabClassNames.tabPanelSelected}
+                            onSelect={onActivateTab}
 
-                                // TODO: focusTabOnClick should be true for accessibility, but currently conflicts
-                                // with nudge operations in the paint editor. We'll likely need to manage focus
-                                // differently within the paint editor before we can turn this back on.
-                                // Repro steps:
-                                // 1. Click the Costumes tab
-                                // 2. Select something in the paint editor (say, the cat's face)
-                                // 3. Press the left or right arrow key
-                                // Desired behavior: the face should nudge left or right
-                                // Actual behavior: the Code or Sounds tab is now focused
-                                focusTabOnClick={false}
+                            // TODO: focusTabOnClick should be true for accessibility, but currently conflicts
+                            // with nudge operations in the paint editor. We'll likely need to manage focus
+                            // differently within the paint editor before we can turn this back on.
+                            // Repro steps:
+                            // 1. Click the Costumes tab
+                            // 2. Select something in the paint editor (say, the cat's face)
+                            // 3. Press the left or right arrow key
+                            // Desired behavior: the face should nudge left or right
+                            // Actual behavior: the Code or Sounds tab is now focused
+                            focusTabOnClick={false}
+                        >
+                            <Box
+                                role="region"
+                                aria-label="Tab List"
                             >
                                 <TabList className={tabClassNames.tabList}>
                                     <Tab className={tabClassNames.tab}>
@@ -359,66 +368,94 @@ const GUIComponent = props => {
                                         />
                                     </Tab>
                                 </TabList>
-                                <TabPanel className={tabClassNames.tabPanel}>
-                                    <Box className={styles.blocksWrapper}>
-                                        <Blocks
-                                            key={`${blocksId}/${theme}`}
-                                            canUseCloud={canUseCloud}
-                                            grow={1}
-                                            isVisible={blocksTabVisible}
-                                            options={{
-                                                media: `${basePath}static/${themeMap[theme].blocksMediaFolder}/`
-                                            }}
-                                            stageSize={stageSize}
-                                            theme={theme}
-                                            vm={vm}
-                                            showNewFeatureCallouts={showNewFeatureCallouts}
-                                            username={username}
-                                        />
-                                    </Box>
-                                    <ExtensionsButton
-                                        activeTabIndex={activeTabIndex}
-                                        intl={intl}
+                            </Box>
+                            <TabPanel
+                                className={tabClassNames.tabPanel}
+                                aria-label="Code Editor Panel"
+                            >
+                                <Box
+                                    className={styles.blocksWrapper}
+                                    role="region"
+                                    aria-label="Code Editor Panel"
+                                >
+                                    <Blocks
+                                        key={`${blocksId}/${theme}`}
+                                        canUseCloud={canUseCloud}
+                                        grow={1}
+                                        isVisible={blocksTabVisible}
+                                        options={{
+                                            media: `${basePath}static/${themeMap[theme].blocksMediaFolder}/`
+                                        }}
+                                        stageSize={stageSize}
+                                        theme={theme}
+                                        vm={vm}
                                         showNewFeatureCallouts={showNewFeatureCallouts}
-                                        onExtensionButtonClick={onExtensionButtonClick}
                                         username={username}
                                     />
-                                    <Box className={styles.watermark}>
-                                        <Watermark />
-                                    </Box>
-                                </TabPanel>
-                                <TabPanel className={tabClassNames.tabPanel}>
-                                    {costumesTabVisible ? <CostumeTab
+                                </Box>
+                                <ExtensionsButton
+                                    activeTabIndex={activeTabIndex}
+                                    intl={intl}
+                                    showNewFeatureCallouts={showNewFeatureCallouts}
+                                    onExtensionButtonClick={onExtensionButtonClick}
+                                    username={username}
+                                />
+                                <Box className={styles.watermark}>
+                                    <Watermark />
+                                </Box>
+                            </TabPanel>
+                            <TabPanel className={tabClassNames.tabPanel}>
+                                {costumesTabVisible ? <CostumeTab
+                                    ariaLabel={targetIsStage ? 'Backdrops Editor Panel' : 'Costumes Editor Panel'}
+                                    ariaRole="region"
+                                    vm={vm}
+                                    onNewLibraryBackdropClick={onNewLibraryBackdropClick}
+                                    onNewLibraryCostumeClick={onNewLibraryCostumeClick}
+                                /> : null}
+                            </TabPanel>
+                            <TabPanel className={tabClassNames.tabPanel}>
+                                {soundsTabVisible ?
+                                    <SoundTab
+                                        ariaLabel="Sounds Editor Panel"
+                                        ariaRole="region"
                                         vm={vm}
-                                        onNewLibraryBackdropClick={onNewLibraryBackdropClick}
-                                        onNewLibraryCostumeClick={onNewLibraryCostumeClick}
                                     /> : null}
-                                </TabPanel>
-                                <TabPanel className={tabClassNames.tabPanel}>
-                                    {soundsTabVisible ? <SoundTab vm={vm} /> : null}
-                                </TabPanel>
-                            </Tabs>
-                            {backpackVisible ? (
-                                <Backpack host={backpackHost} />
-                            ) : null}
-                        </Box>
+                            </TabPanel>
+                        </Tabs>
+                        {backpackVisible ? (
+                            <Backpack
+                                host={backpackHost}
+                                ariaRole="region"
+                                ariaLabel="Backpack"
+                            />
+                        ) : null}
+                    </Box>
 
-                        <Box className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}>
-                            <StageWrapper
-                                isFullScreen={isFullScreen}
-                                isRendererSupported={isRendererSupported}
-                                isRtl={isRtl}
+                    <Box
+                        role="complementary"
+                        aria-label="Stage and Target"
+                        className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}
+                    >
+                        <StageWrapper
+                            isFullScreen={isFullScreen}
+                            isRendererSupported={isRendererSupported}
+                            isRtl={isRtl}
+                            stageSize={stageSize}
+                            vm={vm}
+                            ariaRole="region"
+                            ariaLabel="Stage"
+                        />
+                        <Box
+                            className={styles.targetWrapper}
+                            role="region"
+                            aria-label="Target Pane"
+                        >
+                            <TargetPane
                                 stageSize={stageSize}
                                 vm={vm}
+                                onNewSpriteClick={onNewSpriteClick}
+                                onNewBackdropClick={onNewLibraryBackdropClick}
                             />
-                            <Box className={styles.targetWrapper}>
-                                <TargetPane
-                                    stageSize={stageSize}
-                                    vm={vm}
-                                    onNewSpriteClick={onNewSpriteClick}
-                                    onNewBackdropClick={onNewLibraryBackdropClick}
-                                />
-                            </Box>
                         </Box>
                     </Box>
                 </Box>
diff --git a/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx b/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
index 58f955a1bb..6d129a05d4 100644
--- a/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
@@ -437,6 +437,8 @@ class MenuBar extends React.Component {
                     this.props.className,
                     styles.menuBar
                 )}
+                aria-label={this.props.ariaLabel}
+                role={this.props.ariaRole}
             >
                 <div className={styles.mainMenu}>
                     <div className={styles.fileGroup}>
@@ -896,6 +898,8 @@ class MenuBar extends React.Component {
 MenuBar.propTypes = {
     aboutMenuOpen: PropTypes.bool,
     accountMenuOpen: PropTypes.bool,
+    ariaLabel: PropTypes.string,
+    ariaRole: PropTypes.string,
     authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     authorThumbnailUrl: PropTypes.string,
     authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
diff --git a/packages/scratch-gui/src/components/stage-wrapper/stage-wrapper.jsx b/packages/scratch-gui/src/components/stage-wrapper/stage-wrapper.jsx
index 109f0981a2..e9717519c3 100644
--- a/packages/scratch-gui/src/components/stage-wrapper/stage-wrapper.jsx
+++ b/packages/scratch-gui/src/components/stage-wrapper/stage-wrapper.jsx
@@ -13,6 +13,8 @@ import styles from './stage-wrapper.css';
 
 const StageWrapperComponent = function (props) {
     const {
+        ariaLabel,
+        ariaRole,
         isFullScreen,
         isRtl,
         isRendererSupported,
@@ -30,6 +32,8 @@ const StageWrapperComponent = function (props) {
                 {[styles.fullScreen]: isFullScreen}
             )}
             dir={isRtl ? 'rtl' : 'ltr'}
+            role={ariaRole}
+            aria-label={ariaLabel}
         >
             <Box className={styles.stageMenuWrapper}>
                 <StageHeader
@@ -57,6 +61,8 @@ const StageWrapperComponent = function (props) {
 };
 
 StageWrapperComponent.propTypes = {
+    ariaLabel: PropTypes.string,
+    ariaRole: PropTypes.string,
     isFullScreen: PropTypes.bool,
     isRendererSupported: PropTypes.bool.isRequired,
     isRtl: PropTypes.bool.isRequired,
diff --git a/packages/scratch-gui/src/containers/backpack.jsx b/packages/scratch-gui/src/containers/backpack.jsx
index bc37a2ab83..aef0afe163 100644
--- a/packages/scratch-gui/src/containers/backpack.jsx
+++ b/packages/scratch-gui/src/containers/backpack.jsx
@@ -223,6 +223,8 @@ class Backpack extends React.Component {
                 onMouseEnter={this.handleMouseEnter}
                 onMouseLeave={this.handleMouseLeave}
                 onToggle={this.props.host ? this.handleToggle : null}
+                ariaRole={this.props.ariaRole}
+                ariaLabel={this.props.ariaLabel}
             />
         );
     }
@@ -233,7 +235,9 @@ Backpack.propTypes = {
     host: PropTypes.string,
     token: PropTypes.string,
     username: PropTypes.string,
-    vm: PropTypes.instanceOf(VM)
+    vm: PropTypes.instanceOf(VM),
+    ariaRole: PropTypes.string,
+    ariaLabel: PropTypes.string
 };
 
 const getTokenAndUsername = state => {
diff --git a/packages/scratch-gui/src/containers/costume-tab.jsx b/packages/scratch-gui/src/containers/costume-tab.jsx
index 561e16c30d..24e0396f4e 100644
--- a/packages/scratch-gui/src/containers/costume-tab.jsx
+++ b/packages/scratch-gui/src/containers/costume-tab.jsx
@@ -260,6 +260,8 @@ class CostumeTab extends React.Component {
     }
     render () {
         const {
+            ariaLabel,
+            ariaRole,
             dispatchUpdateRestore,
             intl,
             isRtl,
@@ -287,6 +289,8 @@ class CostumeTab extends React.Component {
         })) : [];
         return (
             <AssetPanel
+                ariaLabel={ariaLabel}
+                ariaRole={ariaRole}
                 buttons={[
                     {
                         title: intl.formatMessage(addLibraryMessage),
@@ -341,6 +345,8 @@ class CostumeTab extends React.Component {
 }
 
 CostumeTab.propTypes = {
+    ariaLabel: PropTypes.string,
+    ariaRole: PropTypes.string,
     dispatchUpdateRestore: PropTypes.func,
     editingTarget: PropTypes.string,
     intl: intlShape,
diff --git a/packages/scratch-gui/src/containers/sound-tab.jsx b/packages/scratch-gui/src/containers/sound-tab.jsx
index 851189f516..17dc81dde1 100644
--- a/packages/scratch-gui/src/containers/sound-tab.jsx
+++ b/packages/scratch-gui/src/containers/sound-tab.jsx
@@ -174,6 +174,8 @@ class SoundTab extends React.Component {
 
     render () {
         const {
+            ariaLabel,
+            ariaRole,
             dispatchUpdateRestore,
             intl,
             isRtl,
@@ -222,6 +224,8 @@ class SoundTab extends React.Component {
 
         return (
             <AssetPanel
+                ariaLabel={ariaLabel}
+                ariaRole={ariaRole}
                 buttons={[{
                     title: intl.formatMessage(messages.addSound),
                     img: addSoundFromLibraryIcon,
@@ -278,6 +282,8 @@ class SoundTab extends React.Component {
 }
 
 SoundTab.propTypes = {
+    ariaLabel: PropTypes.string,
+    ariaRole: PropTypes.string,
     dispatchUpdateRestore: PropTypes.func,
     editingTarget: PropTypes.string,
     intl: intlShape,
diff --git a/packages/scratch-gui/src/containers/stage-wrapper.jsx b/packages/scratch-gui/src/containers/stage-wrapper.jsx
index 104e39c0f9..66fc62b881 100644
--- a/packages/scratch-gui/src/containers/stage-wrapper.jsx
+++ b/packages/scratch-gui/src/containers/stage-wrapper.jsx
@@ -7,6 +7,8 @@ import StageWrapperComponent from '../components/stage-wrapper/stage-wrapper.jsx
 const StageWrapper = props => <StageWrapperComponent {...props} />;
 
 StageWrapper.propTypes = {
+    ariaLabel: PropTypes.string,
+    ariaRole: PropTypes.string,
     isRendererSupported: PropTypes.bool.isRequired,
     stageSize: PropTypes.oneOf(Object.keys(STAGE_DISPLAY_SIZES)).isRequired,
     vm: PropTypes.instanceOf(VM).isRequired