diff --git a/NEWS.md b/NEWS.md
index d05d11a5..97ed53c7 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -24,6 +24,8 @@
 
 * Certain graphical properties, e.g `lty` & `lwd`, now work correctly in the webR `canvas()` graphics device. (#289, #304).
 
+* Various updates for the webR Demo App to improve accessibility. (#267, #269, #270, #271, #272, #273, #274).
+
 # webR 0.2.1
 
 ## New features
diff --git a/src/repl/App.css b/src/repl/App.css
index 6d1e5098..91d24379 100644
--- a/src/repl/App.css
+++ b/src/repl/App.css
@@ -28,6 +28,7 @@ body {
   border-style: solid;
   border-color: var(--bg-secondary);
   border-width: 0px 2px 2px 0px;
+  padding-top: 5px;
 }
 
 .term {
@@ -53,7 +54,7 @@ body {
   border-color: var(--bg-secondary);
   border-width: 0px 0px 2px 2px;
   overflow: auto;
-  padding: 4px 0;
+  padding: 5px 0;
 }
 
 .plot {
diff --git a/src/repl/App.tsx b/src/repl/App.tsx
index e2c7039f..06c2c630 100644
--- a/src/repl/App.tsx
+++ b/src/repl/App.tsx
@@ -78,8 +78,8 @@ function App() {
         terminalInterface={terminalInterface}
         filesInterface={filesInterface}
       />
-      <Terminal webR={webR} terminalInterface={terminalInterface}/>
       <Files webR={webR} filesInterface={filesInterface}/>
+      <Terminal webR={webR} terminalInterface={terminalInterface}/>
       <Plot plotInterface={plotInterface}/>
     </div>
   );
diff --git a/src/repl/components/Editor.css b/src/repl/components/Editor.css
index f737a52c..fb37b623 100644
--- a/src/repl/components/Editor.css
+++ b/src/repl/components/Editor.css
@@ -1,4 +1,5 @@
 .editor {
+  position: relative;
   display: grid;
   grid-template-rows: auto 1fr;
 }
@@ -8,7 +9,13 @@
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid var(--bg-dark);
-  padding: 5px 5px 0 5px;
+  padding: 0 5px;
+}
+
+.editor-actions {
+  position: absolute;
+  top: 5px;
+  right: 0;
 }
 
 .editor-actions > button {
@@ -16,33 +23,44 @@
   border: none;
   color: var(--secondary);
   font-size: 14px;
+  padding: 5px;
 }
 
 .editor-actions > button:hover {
   color: var(--primary);
 }
 
-.editor-files > button {
-  font-size: 14px;
-  height: 26px;
+.editor-files {
+  display: flex;
+}
+
+.editor-file {
+  position: relative;
+  display: flex;
+  padding: 0 5px;
+  gap: 5px;
   background-color: var(--bg-secondary);
   color: var(--secondary);
   border: 1px solid var(--bg-dark);
   border-bottom: none;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
-  padding: 0 5px;
 }
 
-.editor-files > button.active {
+.editor-file > .editor-filename {
+  font-size: 14px;
+  height: 26px;
+  line-height: 26px;
+}
+
+.editor-file.active {
   color: var(--primary);
   background-color: var(--bg-primary);
   border-color: var(--bg-dark);
   border-bottom-color: transparent;
-  position: relative;
 }
 
-.editor-files > button.active::after {
+.editor-file.active::after {
   content: "";
   position: absolute;
   width: 100%;
@@ -52,14 +70,27 @@
   background-color: var(--bg-primary);
 }
 
-.editor-files .editor-closebutton {
-  padding-left: 5px;
-  display: inline-block;
+.editor-file > button {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.editor-file > button.editor-switch {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.editor-file > button.editor-close {
   color: var(--secondary);
   font-weight: bold;
+  z-index: 1;
 }
 
-.editor-files .editor-closebutton:hover {
+.editor-file > button.editor-close:hover {
   color: var(--primary);
 }
 
diff --git a/src/repl/components/Editor.tsx b/src/repl/components/Editor.tsx
index 3e4f00bd..3bdcfdd2 100644
--- a/src/repl/components/Editor.tsx
+++ b/src/repl/components/Editor.tsx
@@ -37,17 +37,34 @@ export function FileTabs({
   closeFile: (e: React.SyntheticEvent, index: number) => void;
 }) {
   return (
-    <div className="editor-files">
+    <div
+      role="tablist"
+      aria-label="Currently Open Files"
+      className="editor-files"
+    >
       {files.map((f, index) =>
-        <button
+        <div
           key={index}
-          className={activeFileIdx === index ? 'active' : undefined}
-          onClick={() => setActiveFileIdx(index)}
+          className={'editor-file' + (activeFileIdx === index ? ' active' : '')}
+          role="tab"
+          id={`filetab-${index}`}
+          aria-label={f.name}
         >
-          {f.name}
-          <span
-            className="editor-closebutton"
-            aria-label="Close file"
+          <button
+            className="editor-switch"
+            aria-label={`Switch to ${f.name}`}
+            onClick={() => setActiveFileIdx(index)}
+          >
+          </button>
+          <div
+            className="editor-filename"
+            aria-hidden="true"
+          >
+            {f.name}
+          </div>
+          <button
+            className="editor-close"
+            aria-label={`Close ${f.name}`}
             onClick={(e) => {
               if (!f.ref.editorState.readOnly && !confirm('Close ' + f.name + '?')) {
                 e.stopPropagation();
@@ -56,9 +73,9 @@ export function FileTabs({
               closeFile(e, index);
             }}
           >
-            &times;
-          </span>
-        </button>
+            <div aria-hidden="true">&times;</div>
+          </button>
+        </div>
       )}
     </div>
   );
@@ -292,7 +309,11 @@ export function Editor({
         return editorView.domAtPos(0).node;
       }
     });
-    editorView.focus();
+
+    // Update accessibility labelling
+    const container = editorView.contentDOM.parentElement;
+    container?.setAttribute('role', 'tabpanel');
+    container?.setAttribute('aria-labelledby', `filetab-${activeFileIdx}`);
 
     // Before switching to a new file, save the state and scroll position
     return function cleanup() {
@@ -303,7 +324,11 @@ export function Editor({
   const displayStyle = files.length === 0 ? { display: 'none' } : undefined;
 
   return (
-    <div className="editor" style={displayStyle}>
+    <div role="region"
+      aria-label="Editor Pane"
+      className="editor"
+      style={displayStyle}
+    >
       <div className="editor-header">
         <FileTabs
           files={files}
@@ -311,14 +336,32 @@ export function Editor({
           setActiveFileIdx={setActiveFileIdx}
           closeFile={closeFile}
         />
-        <div className="editor-actions">
+      </div>
+      <div
+        aria-label="Editor"
+        aria-describedby="editor-desc"
+        className="editor-container"
+        ref={editorRef}
+      >
+      </div>
+      <p style={{ display: 'none' }} id="editor-desc">
+        This component is an instance of the <a href="https://codemirror.net/">CodeMirror</a> interactive text editor.
+        The editor has been configured so that the Tab key controls the indentation of code.
+        To move focus away from the editor, press the Escape key, and then press the Tab key directly after it.
+        Escape and then Shift-Tab can also be used to move focus backwards.
+      </p>
+      <div
+          role="toolbar"
+          aria-label="Editor Toolbar"
+          className="editor-actions"
+        >
+          {isRFile && <button onClick={runFile}>
+            <FaPlay aria-hidden="true" className="icon" /> Run
+          </button>}
           {!isReadOnly && <button onClick={saveFile}>
-            <FaRegSave className="icon" /> Save
+            <FaRegSave aria-hidden="true" className="icon" /> Save
           </button>}
-          {isRFile && <button onClick={runFile}><FaPlay className="icon" /> Run</button>}
         </div>
-      </div>
-      <div className="editor-container" ref={editorRef}></div>
     </div>
   );
 }
diff --git a/src/repl/components/Files.css b/src/repl/components/Files.css
index ad968e8b..717d3548 100644
--- a/src/repl/components/Files.css
+++ b/src/repl/components/Files.css
@@ -56,14 +56,14 @@
 
 .directory .tree-node {
   cursor: pointer;
+  border-left: 2px solid transparent;
 }
 
-.directory .tree-node:hover {
-  background: var(--bg-secondary);
-}
-
-.directory .tree .tree-node--focused {
-  background: var(--bg-secondary);
+.directory .tree-node:hover,
+.directory .tree-node:focus,
+.directory .tree-branch-wrapper:focus > .tree-node
+{
+  border-left: 2px solid var(--secondary);
 }
 
 .directory .tree .tree-node--selected {
diff --git a/src/repl/components/Files.tsx b/src/repl/components/Files.tsx
index 65eec324..f5b6b07a 100644
--- a/src/repl/components/Files.tsx
+++ b/src/repl/components/Files.tsx
@@ -49,6 +49,7 @@ export function Files({
   const [treeData, setTreeData] = React.useState<INode[]>(initialData);
   const [selectedNode, setSelectedNode] = React.useState<INode | null>();
   const [isFileSelected, setIsFileSelected] = React.useState<boolean>(true);
+  const [selectedIds, setSelectedIds] = React.useState<number[]>([1]);
   const uploadRef = React.useRef<HTMLInputElement | null>(null);
   const uploadButtonRef = React.useRef<HTMLButtonElement | null>(null);
   const downloadButtonRef = React.useRef<HTMLButtonElement | null>(null);
@@ -56,12 +57,15 @@ export function Files({
   const nodeRenderer: ITreeViewProps['nodeRenderer'] = ({
     element,
     isExpanded,
-    isBranch,
     getNodeProps,
     level,
   }) => (
-    <div {...getNodeProps()} style={{ paddingLeft: 20 * (level - 1) }}>
-      { isBranch ? <FolderIcon isOpen={ isExpanded } /> : <Fa.FaRegFile className="icon" />}
+    <div {...getNodeProps()} style={{ paddingLeft: 2 + 20 * (level - 1) }}>
+      {
+        element.metadata!.type === 'folder'
+          ? <FolderIcon isOpen={isExpanded} />
+          : <Fa.FaRegFile className="icon" />
+      }
       { element.name }
     </div>
   );
@@ -76,7 +80,13 @@ export function Files({
 
   const onNodeSelect: ITreeViewProps['onNodeSelect'] = ({ element }) => {
     setSelectedNode(element);
-    setIsFileSelected(!element.isBranch);
+    setIsFileSelected(element.metadata!.type === 'file');
+  };
+
+  const onExpand: ITreeViewProps['onExpand'] = ({ element }) => {
+    setSelectedNode(element);
+    setIsFileSelected(element.metadata!.type === 'file');
+    setSelectedIds([Number(element.id)]);
   };
 
   const onUpload: ChangeEventHandler = () => {
@@ -177,7 +187,7 @@ export function Files({
     }
 
     try {
-      if (selectedNode.isBranch) {
+      if (selectedNode.metadata!.type === 'folder') {
         await webR.FS.rmdir(path);
       } else {
         await webR.FS.unlink(path);
@@ -204,7 +214,7 @@ export function Files({
         metadata: {type: 'folder'}}
       );
       data.forEach((node) => {
-        if ( node.metadata!.type === 'folder') {
+        if ( node.metadata!.type === 'folder' && node.children.length > 0) {
           node.isBranch = true;
         }
       });
@@ -212,29 +222,44 @@ export function Files({
     };
   }, [filesInterface]);
 
+  const treeView = <TreeView
+    data={treeData}
+    defaultExpandedIds={[1]}
+    selectedIds={selectedIds}
+    aria-label="Directory Tree"
+    onNodeSelect={onNodeSelect}
+    onExpand={onExpand}
+    nodeRenderer={nodeRenderer}
+    expandOnKeyboardSelect={true}
+  />;
+
   return (
-    <div className='files'>
+    <div role="region" aria-label="Files Pane" className='files'>
       <div className="files-header">
-        <div className="files-actions">
+        <div
+          role="toolbar"
+          aria-label="Files Toolbar"
+          className="files-actions"
+        >
           <button
             ref={uploadButtonRef}
             onClick={() => uploadRef.current!.click()}
             className="upload-file"
             disabled={!selectedNode || isFileSelected}
           >
-              <Fa.FaFileUpload className="icon" /> Upload file
+              <Fa.FaFileUpload aria-hidden="true" className="icon" /> Upload file
           </button>
           <button
             onClick={() => { onNewFile(); }}
             disabled={!selectedNode || isFileSelected}
           >
-            <Fa.FaFileAlt className="icon" /> New file
+            <Fa.FaFileAlt aria-hidden="true" className="icon" /> New file
           </button>
           <button
             onClick={() => { onNewDirectory(); }}
             disabled={!selectedNode || isFileSelected}
           >
-            <Fa.FaFolderPlus className="icon" /> New directory
+            <Fa.FaFolderPlus aria-hidden="true" className="icon" /> New directory
           </button>
           <input onChange={onUpload} ref={uploadRef} type="file"/>
           <button
@@ -243,30 +268,24 @@ export function Files({
             className="download-file"
             disabled={!selectedNode || !isFileSelected}
           >
-            <Fa.FaFileDownload className="icon" /> Download file
+            <Fa.FaFileDownload aria-hidden="true" className="icon" /> Download file
           </button>
           <button
             onClick={onOpen}
             disabled={!selectedNode || !isFileSelected}
           >
-            <Fa.FaFileCode className="icon" /> Open in editor
+            <Fa.FaFileCode aria-hidden="true" className="icon" /> Open in editor
           </button>
           <button
             onClick={() => { onDelete(); }}
             disabled={!selectedNode}
           >
-          <Fa.FaTimesCircle className="icon" /> Delete
+          <Fa.FaTimesCircle aria-hidden="true" className="icon" /> Delete
           </button>
         </div>
       </div>
-      <div className="directory">
-        <TreeView
-          data={treeData}
-          defaultExpandedIds={[1]}
-          aria-label="directory tree"
-          onNodeSelect={onNodeSelect}
-          nodeRenderer={nodeRenderer}
-        />
+      <div aria-label="WebAssembly Filesystem" className="directory">
+        {treeData[0].name ? treeView : undefined}
       </div>
     </div>
   );
diff --git a/src/repl/components/Plot.tsx b/src/repl/components/Plot.tsx
index 000b441c..f53f32af 100644
--- a/src/repl/components/Plot.tsx
+++ b/src/repl/components/Plot.tsx
@@ -8,7 +8,7 @@ export function Plot({
 }: {
   plotInterface: PlotInterface;
 }) {
-  const plotContainterRef = React.useRef<HTMLDivElement | null>(null);
+  const plotContainerRef = React.useRef<HTMLDivElement | null>(null);
   const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
   const canvasElements = React.useRef<HTMLCanvasElement[]>([]);
   const [selectedCanvas, setSelectedCanvas] = React.useState<number | null>(null);
@@ -25,25 +25,27 @@ export function Plot({
 
     // If a new plot is created in R, add it to the list of canvas elements
     plotInterface.newPlot = () => {
+      const plotNumber = canvasElements.current.length + 1;
       const canvas = document.createElement('canvas');
       canvas.setAttribute('width', '1008');
       canvas.setAttribute('height', '1008');
+      canvas.setAttribute('aria-label', `R Plot ${plotNumber}`);
       canvasRef.current = canvas;
       canvasElements.current.push(canvas);
-      setSelectedCanvas(canvasElements.current.length - 1);
+      setSelectedCanvas(plotNumber - 1);
     };
   }, [plotInterface]);
 
   // Update the plot container to display the currently selected canvas element
   React.useEffect(() => {
-    if (!plotContainterRef.current) {
+    if (!plotContainerRef.current) {
       return;
     }
     if (selectedCanvas === null) {
-      plotContainterRef.current.replaceChildren();
+      plotContainerRef.current.replaceChildren();
     } else {
       const canvas = canvasElements.current[selectedCanvas];
-      plotContainterRef.current.replaceChildren(canvas);
+      plotContainerRef.current.replaceChildren(canvas);
     }
   }, [selectedCanvas]);
 
@@ -65,30 +67,49 @@ export function Plot({
   const prevPlot = () => setSelectedCanvas((selectedCanvas === null) ? null : selectedCanvas - 1);
 
   return (
-    <div className="plot">
+    <div role="region" aria-label="Plotting Pane" className="plot">
       <div className="plot-header">
-        <div className="plot-actions">
-          <button disabled={!selectedCanvas} onClick={prevPlot}>
-            <FaArrowCircleLeft className="icon" />
+        <div role="toolbar" aria-label="Plotting Toolbar" className="plot-actions">
+          <button
+            aria-label="Previous Plot"
+            disabled={!selectedCanvas}
+            onClick={prevPlot}
+          >
+            <FaArrowCircleLeft aria-hidden="true" className="icon" />
           </button>
           <button
+            aria-label="Next Plot"
             disabled={
               selectedCanvas === null || selectedCanvas === canvasElements.current.length - 1
             }
             onClick={nextPlot}
           >
-            <FaArrowCircleRight className="icon" />
+            <FaArrowCircleRight aria-hidden="true" className="icon" />
           </button>
-          <button disabled={selectedCanvas === null} onClick={saveImage}>
-            <FaRegSave className="icon" /> Save Plot
+          <button
+            aria-label="Save Plot"
+            disabled={selectedCanvas === null}
+            onClick={saveImage}
+          >
+            <FaRegSave aria-hidden="true" className="icon" /> Save Plot
           </button>
-          <button disabled={selectedCanvas === null} onClick={clearPlots}>
-            <FaTrashAlt className="icon" /> Clear Plots
+          <button
+            aria-label="Clear Plots"
+            disabled={selectedCanvas === null}
+            onClick={(e) => {
+              if (confirm('Clear all plots?')) {
+                clearPlots();
+              } else {
+                e.stopPropagation();
+              }
+            }}
+          >
+            <FaTrashAlt aria-hidden="true" className="icon" /> Clear Plots
           </button>
         </div>
       </div>
       <div className='plot-background'>
-        <div ref={plotContainterRef} className="plot-container"></div>
+        <div ref={plotContainerRef} className="plot-container"></div>
       </div>
     </div>
   );
diff --git a/src/repl/components/Terminal.tsx b/src/repl/components/Terminal.tsx
index cef1de0b..997b309e 100644
--- a/src/repl/components/Terminal.tsx
+++ b/src/repl/components/Terminal.tsx
@@ -17,19 +17,25 @@ export function Terminal({
   const termRef = React.useRef<XTerminal | null>(null);
   const [readline, setReadline] = React.useState<Readline>();
 
-  const handleCtrlC = React.useCallback((event: KeyboardEvent) => {
+  const handleShortcuts = React.useCallback((event: KeyboardEvent) => {
+    // Allow escaping the terminal with Tab navigation
+    if (event.key === 'Tab') {
+      event.stopPropagation();
+    }
+
+    // Interrupt R code executed by the Editor
     if (event.key === 'c' && event.ctrlKey) {
       webR.interrupt();
     }
   }, []);
 
-  // Handle ctrl-c here so that code executed by the Editor can be interrupted
+  // Add additional keyboard shortcut handlers
   React.useEffect(() => {
-    divRef.current!.addEventListener('keydown', handleCtrlC, true);
+    divRef.current!.addEventListener('keydown', handleShortcuts, true);
     return () => {
-      divRef.current!.removeEventListener('keydown', handleCtrlC);
+      divRef.current!.removeEventListener('keydown', handleShortcuts);
     };
-  }, [handleCtrlC]);
+  }, [handleShortcuts]);
 
   React.useEffect(() => {
     // Don't reinitialise XTerminal after an instance has been created
@@ -55,6 +61,8 @@ export function Terminal({
     term.loadAddon(fitAddon);
     term.loadAddon(readline);
     term.open(divRef.current);
+    term.element?.setAttribute('aria-label', 'R Terminal');
+    term.element?.setAttribute('tabindex', '-1');
     fitAddon.fit();
 
     const resizeObserver = new ResizeObserver(() => {
@@ -92,7 +100,12 @@ export function Terminal({
     };
   }, [readline, terminalInterface]);
 
-  return <div ref={divRef} className='term'></div>;
+  return <div
+    role="region"
+    aria-label="Terminal Pane"
+    ref={divRef}
+    className='term'
+  ></div>;
 }
 
 export default Terminal;