diff --git a/source/javascripts/app/_toc.js b/source/javascripts/app/_toc.js
index eb20fef..8f340f9 100644
--- a/source/javascripts/app/_toc.js
+++ b/source/javascripts/app/_toc.js
@@ -22,6 +22,8 @@
   var closeToc = function() {
     $(".toc-wrapper").removeClass('open');
     $("#nav-button").removeClass('open');
+    // Ensure ARIA state is synced
+    $("#nav-button").attr("aria-expanded", "false");
   };
 
   function loadToc($toc, tocLinkSelector, tocListSelector, scrollOffset) {
@@ -70,9 +72,9 @@
       if (!$best.hasClass("active")) {
         // .active is applied to the ToC link we're currently on, and its parent <ul>s selected by tocListSelector
         // .active-expanded is applied to the ToC links that are parents of this one
-        $toc.find(".active").removeClass("active");
+        $toc.find(".active").removeClass("active").removeAttr("aria-current");
         $toc.find(".active-parent").removeClass("active-parent");
-        $best.addClass("active");
+        $best.addClass("active").attr("aria-current", "location");
         $best.parents(tocListSelector).addClass("active").siblings(tocLinkSelector).addClass('active-parent');
         $best.siblings(tocListSelector).addClass("active");
         $toc.find(tocListSelector).filter(":not(.active)").slideUp(150);
@@ -96,8 +98,22 @@
       $("#nav-button").click(function() {
         $(".toc-wrapper").toggleClass('open');
         $("#nav-button").toggleClass('open');
+
+        // Update ARIA state
+        var isOpen = $("#nav-button").hasClass('open');
+        $("#nav-button").attr("aria-expanded", isOpen ? "true" : "false");
+
         return false;
       });
+
+      $(document).keyup(function(e) {
+        // Escape key closes the ToC (mobile/tablet only)
+        // Only trigger if nav-button is visible (mobile/tablet)
+        if (e.key === "Escape" && $("#nav-button").is(":visible")) {
+          closeToc();
+        }
+      });
+
       $(".page-wrapper").click(closeToc);
       $(".toc-link").click(closeToc);
 
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index 791ed1f..2c59ec2 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -46,13 +46,13 @@ under the License.
   </head>
 
   <body class="<%= page_classes %>" data-languages="<%=h language_tabs.map{ |lang| lang.is_a?(Hash) ? lang.keys.first : lang }.to_json %>">
-    <a href="#" id="nav-button">
+    <a href="#" id="nav-button" role="button" aria-label="Toggle Navigation" aria-expanded="false" aria-controls="toc-wrapper">
       <span>
         NAV
         <%= image_tag('navbar.png') %>
       </span>
     </a>
-    <div class="toc-wrapper">
+    <nav class="toc-wrapper" id="toc-wrapper" aria-label="Table of Contents">
       <%= link_to(image_tag("logo.png", :title => "Click here to return to ZAP home page"), "/") %>
       <% if language_tabs.any? %>
         <div class="lang-selector">
@@ -94,7 +94,7 @@ under the License.
           <% end %>
         </ul>
       <% end %>
-    </div>
+    </nav>
     <div class="page-wrapper">
       <div class="dark-box"></div>
       <div class="content">
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
index 7af4df7..003bb64 100644
--- a/source/stylesheets/screen.css.scss
+++ b/source/stylesheets/screen.css.scss
@@ -390,6 +390,10 @@ html, body {
     margin-bottom: 0.8em;
   }
 
+  // Ensure long operation names wrap on small screens
+  h1, h2, h3 {
+    overflow-wrap: anywhere;
+  }
 
   h4, h5, h6 {
     font-size: 15px;
@@ -609,6 +613,10 @@ html, body {
   %right-col + %left-col {
     margin-top: $main-padding;
   }
+
+  .highlight { 
+    margin-bottom: 1em; 
+  }
 }
 
 .highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
