diff --git a/editor.html b/editor.html
index 0243ffd2..51047ca8 100644
--- a/editor.html
+++ b/editor.html
@@ -82,6 +82,7 @@
             UPY_VERSION = "1.0.1";
         </script>
         <script id="files-template" type="x-tmpl-mustache">
+          <div tabindex="-1" role="dialog" aria-labelledby="loadSave-modal" aria-modal="true" class="modal-div">
             <h2 class="modal-title"><i class="fa fa-upload"></i> <strong>{{ load-title }}</strong></h2>
             <div class="load-drag-target" id="load-drag-target">
                 <input type="file" style="display: none" name="load-form-file-upload" id="file-upload-input">
@@ -89,19 +90,22 @@ <h2 class="modal-title"><i class="fa fa-upload"></i> <strong>{{ load-title }}</s
             </div>
             <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ save-but }}</strong></h2>
             <div class="save-buttons-container">
-                <button type="button" class="action save-button py" id="save-py" title="{{ save-py }}"><i class="fa fa-download"></i> {{ save-py}}</button>
-                <button type="button" class="action save-button hex" id="save-hex" title="{{ save-hex }}"><i class="fa fa-download"></i> {{ save-hex}}</button>
+                <button aria-labelledby="save-py" type="button" class="action save-button py" id="save-py" title="{{ save-py }}"><i class="fa fa-download"></i> {{ save-py}}</button>
+                <button aria-labelledby="save-hex" type="button" class="action save-button hex" id="save-hex" title="{{ save-hex }}"><i class="fa fa-download"></i> {{ save-hex}}</button>
             </div>
             <div id="addFile">
               <div id="addFileHeader">
                 <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}</strong></h2>
               </div>
-              <div id="addFileHelp"><a class="action" id="files-expand-help"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></a></div>
+              <div id="addFileHelp">
+                <button aria-labelledby="add-files" aria-expanded="false" type="button" class="snippet-button" id="expandHelpPara"><i class="fa fa-info-circle"></i> {{ help-button }}</button>
+              </div>
+            </div>
+            <div id="fileHelpPara">{{ file-help-text }}<a href="help.html#fs" target="_blank" class="action" id="files-help-link">{{ help-link }}</a>.
             </div>
-            <div id="fileHelpPara">{{ file-help-text }}<a href="help.html#fs" target="_blank" class="action" id="files-help-link">{{ help-link }}</a>.</div>
             <div class="expandable">
                 <div class="expandable-always-visible">
-                    <button type="button" class="action save-button show" id="show-files" title="{{ show-files }}">{{ show-files }} &nbsp;<i class="fa fa-caret-down"></i></button>
+                    <button aria-labelledby="show-files" aria-expanded="false" type="button" class="action save-button show" id="show-files" title="{{ show-files }}">{{ show-files }} &nbsp;<i class="fa fa-caret-down"></i></button>
                 </div>
                 <div class="expandable-content">
                     <div class="fs-file-list" id="fs-file-list">
@@ -128,13 +132,15 @@ <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}
                         </tbody>
                     </table>
                     <div>
-                        <button type="button" class="action save-button add" id="fs-file-upload-button" tile="{{ fs-add-file }}"><i class="fa fa-plus-circle"></i> {{ fs-add-file }}</button>
+                        <button role=button type="button" class="action save-button add" id="fs-file-upload-button" tile="{{ fs-add-file }}"><i class="fa fa-plus-circle"></i> {{ fs-add-file }}</button>
                         <input type="file" style="display: none" name="fs-file-upload-input" id="fs-file-upload-input" multiple>
                     </div>
                 </div>
             </div>
+          </div>
         </script>
         <script id="snippet-template" type="x-tmpl-mustache">
+          <div tabindex="-1" role="dialog" aria-labelledby="snippets-modal" aria-modal="true" class="modal-div">
             <h2><i class="fa fa-cogs"></i> <strong>{{ title }}</strong></h2>
             <p>{{ description }}</p>
             <p>{{ instructions }}</p>
@@ -146,11 +152,12 @@ <h2><i class="fa fa-cogs"></i> <strong>{{ title }}</strong></h2>
                 </tr>
                 {{#snippets}}
                 <tr id="snippet-{{trigger}}" class="action snippet-selection">
-                    <td>{{trigger}}<span class="snippet-name">{{name}}</span></td>
+                    <td><button class="snippet-button">{{trigger}}</button> <span class="snippet-name">{{name}}</span></td>
                     <td>{{#describe}}{{name}}{{/describe}}</td>
                 </tr>
                 {{/snippets}}
             </table>
+          </div>
         </script>
         <script id="share-template" type="x-tmpl-mustache">
             <h2><i class="fa fa-share-alt"></i> <strong>{{ title }}</strong></h2>
@@ -387,7 +394,7 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
             <div id="editor" class="flex3" tabindex="-1"></div>
           </div>
         <div id="flashing-overlay-container" class="modal-overlay-container">
-          <div id="flashing-overlay" class="modal-overlay">
+          <div id="flashing-overlay" class="modal-overlay" tabindex="-1" role="dialog" aria-labelledby="flashing-overlay" aria-modal="true">
             <div id="flashing-info">
               <h2 id="flashing-text">Flashing micro:bit</h2>
               <div id="webusb-flashing-loader"></div>
@@ -399,7 +406,7 @@ <h2 id="flashing-text">Flashing micro:bit</h2>
           </div>
         </div>
         <div id="modal-msg-overlay-container" class="modal-overlay-container modal-msg-overlay-container">
-          <div id="modal-msg-overlay" class="modal-overlay">
+          <div id="modal-msg-overlay" class="modal-overlay" tabindex="-1" role="dialog" aria-labelledby="flashing-overlay" aria-modal="true">
             <a class="vex-close modal-close" onclick="$('#modal-msg-overlay-container').hide()"></a>
             <div id="modal-msg-text">
               <h2 id="modal-msg-title"></h2>
diff --git a/python-main.js b/python-main.js
index f4de6f1f..a26744d6 100644
--- a/python-main.js
+++ b/python-main.js
@@ -874,7 +874,7 @@ function web_editor(config) {
             $('.fs-file-list table tbody').append(
                 '<tr><td>' + name + '</td>' +
                 '<td>' + (micropythonFs.size(filename)/1024).toFixed(2) + ' Kb</td>' +
-                '<td><button id="' + pseudoUniqueId + '_remove" class="action save-button remove ' + disabled + '" title='+ loadStrings["remove-but"] +'><i class="fa fa-trash"></i></button>' +
+                '<td><button id="' + pseudoUniqueId + '_remove" class="action save-button remove ' + disabled + '" title='+ loadStrings["remove-but"] + ' ' + disabled + '><i class="fa fa-trash"></i></button>' +
                 '<button id="' + pseudoUniqueId + '_save" class="action save-button save" title='+ loadStrings["save-but"] +'><i class="fa fa-download"></i></button></td></tr>'
             );
             $('#' + pseudoUniqueId + '_save').click(function(e) {
@@ -916,6 +916,39 @@ function web_editor(config) {
         return fullHex;
     }
 
+    // Trap focus in modal and pass focus to first actionable element
+    function focusModal() {
+        document.querySelector('body > :not(.vex)').setAttribute('aria-hidden', true);
+        var dialog = document.querySelector('.modal-div');
+        var focusableEls = dialog.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
+        $(focusableEls).each(function() {
+            $(this).attr('tabindex', '0');
+        });
+        dialog.focus();
+        dialog.onkeydown = function(event) {
+            if (event.which == 9) {
+                // if tab key is pressed
+                var focusedEl = document.activeElement;
+                var numberOfFocusableEls = focusableEls.length;
+                var focusedElIndex = Array.prototype.indexOf.call(focusableEls, focusedEl);
+
+                if (event.which == 16) {
+                    // if focused on first item and user shift-tabs back, go to the last focusable item
+                    if (focusedElIndex == 0) {
+                        focusableEls.item(numberOfFocusableEls - 1).focus();
+                        event.preventDefault();
+                    }
+                } else {
+                    // if focused on the last item and user tabs forward, go to the first focusable item
+                    if (focusedElIndex == numberOfFocusableEls - 1) {
+                        focusableEls[0].focus();
+                        event.preventDefault();
+                    }
+                }
+            }
+        };
+    }
+
     // This function describes what to do when the download button is clicked.
     function doDownload() {
         try {
@@ -942,7 +975,6 @@ function web_editor(config) {
             modalMsg(config['translate']['load']['invalid-file-title'], config['translate']['load']['extension-warning'],"");
         }
     }
-
     // Describes what to do when the save/load button is clicked.
     function doFiles() {
         var template = $('#files-template').html();
@@ -952,6 +984,7 @@ function web_editor(config) {
         vex.open({
             content: Mustache.render(template, loadStrings),
             afterOpen: function(vexContent) {
+                focusModal();
                 $("#show-files").attr("title", loadStrings["show-files"] +" (" + micropythonFs.ls().length + ")");
                 document.getElementById("show-files").innerHTML = loadStrings["show-files"] + " (" + micropythonFs.ls().length + ") <i class='fa fa-caret-down'>";
                 $('#save-hex').click(function() {
@@ -965,12 +998,14 @@ function web_editor(config) {
                     }
                     downloadFileFromFilesystem('main.py');
                 });
-                $("#files-expand-help").click(function(){
+                $("#expandHelpPara").click(function(){
                     if ($("#fileHelpPara").css("display")=="none"){
                         $("#fileHelpPara").show();
+                        $("#expandHelpPara").attr("aria-expanded","true");
                         $("#addFile").css("margin-bottom","10px");
                     }else{
                         $("#fileHelpPara").hide();
+                        $("#expandHelpPara").attr("aria-expanded","false");
                         $("#addFile").css("margin-bottom","22px");
                     }
                 });
@@ -979,11 +1014,13 @@ function web_editor(config) {
                   if (content.style.maxHeight){
                     content.style.maxHeight = null;
                     $("#hide-files").attr("id", "show-files");
+                    $("#show-files").attr("aria-expanded","false");
                     $("#show-files").attr("title", loadStrings["show-files"] + " (" + micropythonFs.ls().length + ")");
                     document.getElementById("show-files").innerHTML = loadStrings["show-files"] + " (" + micropythonFs.ls().length + ") <i class='fa fa-caret-down'>";
                   } else {
                     content.style.maxHeight = content.scrollHeight + "px";
                     $("#show-files").attr("id", "hide-files");
+                    $("#hide-files").attr("aria-expanded","true");
                     $("#hide-files").attr("title", loadStrings["hide-files"]);
                     document.getElementById("hide-files").innerHTML =loadStrings["hide-files"] + " <i class='fa fa-caret-up'>";
                   }
@@ -1133,6 +1170,7 @@ function web_editor(config) {
         vex.open({
             content: Mustache.render(template, context),
             afterOpen: function(vexContent) {
+                focusModal();
                 $(vexContent).find('.snippet-selection').click(function(e){
                     var snippet_name = $(this).find('.snippet-name').text();
                     EDITOR.triggerSnippet(snippet_name);
@@ -1661,7 +1699,7 @@ function web_editor(config) {
         var overlayContainer = "#modal-msg-overlay-container";
         $(overlayContainer).css("display","block");
         $("#modal-msg-title").text(title);
-        $("#modal-msg-content").html(content); 
+        $("#modal-msg-content").html(content);
         var modalLinks = [];
         if (links) {
             Object.keys(links).forEach(function(key) {
diff --git a/static/css/style.css b/static/css/style.css
index 2d76ef29..04b7ce3f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -506,6 +506,21 @@ a.command:hover {
     width: 200px;
 }
 
+.snippet-button {
+    text-decoration: none;
+    background: none;
+    color: inherit;
+    border: none;
+    border-radius: 5px;
+    padding: 2px;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+}
+.snippet-button:focus {
+    box-shadow: 0px 0px 5px 3px #FFCC33;
+}
+
 #share-link {
     display: none;
 }
@@ -689,6 +704,9 @@ input:checked + .menu-switch-slider:before {
 }
 
 /* Modals */
+.modal-div:focus {
+    outline: 0;
+}
 .modal-title {
     margin: 28px 0px 22px 0px;
     text-transform: capitalize;
@@ -844,6 +862,10 @@ input:checked + .menu-switch-slider:before {
     color: #ffffff !important;
 }
 
+.save-button:focus {
+    box-shadow: 0px 0px 5px 3px #FFCC33;
+}
+
 .save-buttons-container {
     display: inline-block;
     width: 100%;
@@ -871,6 +893,11 @@ input:checked + .menu-switch-slider:before {
     color: black !important;
     border: none;
 }
+
+.save-button.hex:focus {
+    box-shadow: 0px 0px 5px 3px #FFCC33;
+}
+
 .save-button.py {
     width: 49%;
     min-width: 250px;
@@ -885,6 +912,11 @@ input:checked + .menu-switch-slider:before {
     background-color: #eee;
     color: black;
 }
+
+.save-button.py:focus {
+    box-shadow: 0px 0px 5px 3px #FFCC33;
+}
+
 @media (max-width: 480px) {
     .save-button.py,
     .save-button.hex {