diff --git a/element.js b/element.js
index ab74f763..b7628f13 100644
--- a/element.js
+++ b/element.js
@@ -31,6 +31,14 @@ function buildElement(type, props, ...children) {
                 if (propName === "onClick") {
                     let handler = props[propName];
                     $el.click(handler);
+
+                // Some passed-in props need to be set with $.attr
+                // Currently we do this for role and aria-*
+                } else if (/^aria-/.test(propName) || propName === "role") {
+                    let value = props[propName];
+                    $el.attr(propName, value);
+
+                // All other props can go right to $.prop
                 } else {
                     let value = props[propName];
                     $el.prop(propName, value);
diff --git a/index.js b/index.js
index 60c3018c..98d8ecfc 100644
--- a/index.js
+++ b/index.js
@@ -82,20 +82,24 @@ class Toolbar {
             e.preventDefault();
             e.stopPropagation();
             $toolbar.toggleClass("tota11y-expanded");
+            $toolbar.attr("aria-expanded", $toolbar.is(".tota11y-expanded"));
         };
 
         let $toggle = (
-            <a href="#"
-               className="tota11y-toolbar-toggle"
-               onClick={handleToggleClick}>
-                <div className="tota11y-toolbar-logo">
+            <button aria-controls="tota11y-toolbar"
+                    className="tota11y-toolbar-toggle"
+                    onClick={handleToggleClick}
+                    aria-label="[tota11y] Toggle menu">
+                <div aria-hidden="true" className="tota11y-toolbar-logo">
                     {$logo}
                 </div>
-            </a>
+            </button>
         );
 
         $toolbar = (
-            <div className="tota11y tota11y-toolbar">
+            <div id="tota11y-toolbar" className="tota11y tota11y-toolbar"
+                 role="region"
+                 aria-expanded="false">
                 <div className="tota11y-toolbar-body">
                     {$plugins}
                 </div>
diff --git a/less/tota11y.less b/less/tota11y.less
index 078f9102..a8c619be 100644
--- a/less/tota11y.less
+++ b/less/tota11y.less
@@ -1,12 +1,6 @@
 @import "variables.less";
 @import "base.less";
 
-@descriptionWidth: 200px;
-@pluginPadding: 12px;
-@controlMargin: 15px;
-@indicatorSize: 16px;
-@indicatorFontSize: 13px;
-
 @togglePadding: 7px;
 @toggleCollapsedWidth: 35px;
 @toggleHeight: 25px;
@@ -21,8 +15,10 @@
     z-index: @z-index--UI;
 
     &-toggle {
+        background-color: @darkGray;
         display: block;
         padding: @togglePadding;
+        width: 100%;
     }
 
     &-logo {
@@ -44,61 +40,13 @@
     }
 }
 
-.tota11y-plugins {
-    &-separator {
-        font-size: 12px;
-        margin: @togglePadding @controlMargin 0;
-        text-transform: uppercase;
-    }
-}
-
-.tota11y-plugin {
-    .tota11y-no-select;
-    border-bottom: 1px solid @darkBorderColor;
-
-    &-label {
-        align-items: center;
-        display: flex;
-        padding: @pluginPadding @pluginPadding @pluginPadding 0;
-        margin: 0;
-
-        &:hover {
-            cursor: pointer;
-        }
-    }
-
-    &-control {
-        margin: 0 @controlMargin;
-    }
-
-    &-checkbox {
-        display: none;
-    }
-
-    &-indicator {
-        border-radius: @indicatorSize;
-        border: 1px solid @lightBorderColor;
-        color: transparent;
-        font-size: @indicatorFontSize;
-        height: @indicatorSize;
-        line-height: @indicatorSize;
-        padding: 0 0 0 1px;
-        width: @indicatorSize;
-    }
-    &-checkbox:checked + &-indicator {
-        background-color: @kaGreen;
-        border-color: @kaGreen;
-        color: white;
-    }
-
-    &-title {
-        font-weight: bold;
-    }
-
-    &-description {
-        font-size: @fontSizeSmall;
-        font-style: italic;
-        width: @descriptionWidth;
-        margin-right: 3px;
-    }
+.tota11y-sr-only {
+    border: 0;
+    clip: rect(0,0,0,0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
 }
diff --git a/plugins/base.js b/plugins/base.js
index 061a92a2..18aee4ac 100644
--- a/plugins/base.js
+++ b/plugins/base.js
@@ -9,13 +9,13 @@
  *     cleanup: code to run when the plugin is deactivated from the toolbar
  */
 
-let $ = require("jquery");
 let InfoPanel = require("./shared/info-panel");
-let template = require("../templates/plugin.handlebars");
+
+require("./style.less");
 
 class Plugin {
     constructor() {
-        this.panel = new InfoPanel(this.getTitle());
+        this.panel = new InfoPanel(this);
         this.$checkbox = null;
     }
 
@@ -51,20 +51,38 @@ class Plugin {
      * Renders the plugin view.
      */
     render(clickHandler) {
-        let templateData = {
-            title: this.getTitle(),
-            description: this.getDescription()
-        };
-
-        let $plugin = $(template(templateData));
-
-        this.$checkbox = $plugin.find(".tota11y-plugin-checkbox");
-        this.$checkbox.click((e) => {
-            e.stopPropagation();
-            clickHandler(this);
-        });
-
-        return $plugin;
+        this.$checkbox = (
+            <input
+                className="tota11y-plugin-checkbox tota11y-sr-only"
+                type="checkbox"
+                onClick={() => clickHandler(this)} />
+        );
+
+        let $switch = (
+            <label className="tota11y-plugin-switch">
+                {this.$checkbox}
+                <div aria-hidden="true"
+                     className="tota11y-plugin-indicator">
+                    &#x2713;
+                </div>
+                <div className="tota11y-plugin-info">
+                    <div className="tota11y-plugin-title">
+                        {this.getTitle()}
+                    </div>
+                    <div className="tota11y-plugin-description">
+                        {this.getDescription()}
+                    </div>
+                </div>
+            </label>
+        );
+
+        let $el = (
+            <li role="menu-item" className="tota11y-plugin">
+                {$switch}
+            </li>
+        );
+
+        return $el;
     }
 
     /**
@@ -82,10 +100,7 @@ class Plugin {
         this.cleanup();
         this.panel.destroy();
 
-        // If we toggle the plugin ourselves, the checkbox will already be
-        // unchecked. If another plugin becomes active, however, this method
-        // will be called and will uncheck the checkbox.
-        this.$checkbox.attr("checked", false);
+        this.$checkbox.prop("checked", false);
     }
 }
 
diff --git a/plugins/headings/index.js b/plugins/headings/index.js
index a2da46b8..bb49ac05 100644
--- a/plugins/headings/index.js
+++ b/plugins/headings/index.js
@@ -74,7 +74,10 @@ class HeadingsPlugin extends Plugin {
     }
 
     getDescription() {
-        return "Highlights headings (<h1>, <h2>, etc) and order violations";
+        return `
+            Highlights headings (&lt;h1&gt;, &lt;h2&gt;, etc) and
+            order violations
+        `;
     }
 
     /**
diff --git a/plugins/shared/info-panel/error.handlebars b/plugins/shared/info-panel/error.handlebars
index 329aebea..c4842be4 100644
--- a/plugins/shared/info-panel/error.handlebars
+++ b/plugins/shared/info-panel/error.handlebars
@@ -1,5 +1,5 @@
 <li class="tota11y-info-error">
-    <a href="#" class="tota11y-info-error-scroll">
+    <a aria-label="Scroll to error" href="#" class="tota11y-info-error-scroll">
         <div class="tota11y-info-error-scroll-glyph tota11y-info-error-scroll-lens"></div>
         <div class="tota11y-info-error-scroll-glyph tota11y-info-error-scroll-handle"></div>
     </a>
diff --git a/plugins/shared/info-panel/index.js b/plugins/shared/info-panel/index.js
index 2dda391f..6cfdc8b9 100644
--- a/plugins/shared/info-panel/index.js
+++ b/plugins/shared/info-panel/index.js
@@ -17,9 +17,7 @@
 let $ = require("jquery");
 let annotate = require("../annotate")("info-panel");
 
-let template = require("./template.handlebars");
 let errorTemplate = require("./error.handlebars");
-let tabTemplate = require("./tab.handlebars");
 require("./style.less");
 
 const INITIAL_PANEL_MARGIN_PX = 10;
@@ -27,8 +25,9 @@ const COLLAPSED_CLASS_NAME = "tota11y-collapsed";
 const HIDDEN_CLASS_NAME = "tota11y-info-hidden";
 
 class InfoPanel {
-    constructor(title) {
-        this.title = title;
+    constructor(plugin) {
+        this.plugin = plugin;
+
         this.about = null;
         this.summary = null;
         this.errors = [];
@@ -36,13 +35,6 @@ class InfoPanel {
         this.$el = null;
     }
 
-    /**
-     * Sets the title of the info panel
-     */
-    setTitle(title) {
-        this.title = title;
-    }
-
     /**
      * Sets the contents of the about section as HTML
      */
@@ -69,7 +61,16 @@ class InfoPanel {
 
     _addTab(title, html) {
         // Create and append a tab marker
-        let $tab = $(tabTemplate({title}));
+        let $tab = (
+            <li className="tota11y-info-tab">
+                <a className="tota11y-info-tab-anchor" href="#">
+                    <span className="tota11y-info-tab-anchor-text">
+                        {title}
+                    </span>
+                </a>
+            </li>
+        );
+
         this.$el.find(".tota11y-info-tabs").append($tab);
 
         // Create and append the tab content
@@ -113,6 +114,9 @@ class InfoPanel {
             e.preventDefault();
             e.stopPropagation();
             this.$el.addClass(HIDDEN_CLASS_NAME);
+
+            // (a11y) Bring the focus back to the plugin's checkbox
+            this.plugin.$checkbox.focus();
         });
 
         // Append the info panel to the body. In reality we'll likely want
@@ -183,9 +187,32 @@ class InfoPanel {
 
         let hasContent = false;
 
-        this.$el = $(template({
-            title: this.title,
-        }));
+        this.$el = (
+            <div className="tota11y tota11y-info" tabindex="-1">
+                <header className="tota11y-info-title">
+                    {this.plugin.getTitle()}
+                    <span className="tota11y-info-controls">
+                        <label className="tota11y-info-annotation-toggle">
+                            Annotate:
+                            {" "}
+                            <input
+                                className="toggle-annotation"
+                                type="checkbox"
+                                checked="checked" />
+                        </label>
+                        <a aria-label="Close info panel"
+                           href="#"
+                           className="tota11y-info-dismiss-trigger">
+                            &times;
+                        </a>
+                    </span>
+                </header>
+                <div className="tota11y-info-body">
+                    <div className="tota11y-info-sections" />
+                    <ul role="tablist" className="tota11y-info-tabs" />
+                </div>
+            </div>
+        );
 
         // Add the appropriate tabs based on which information the info panel
         // was provided, then highlight the most important one.
@@ -319,6 +346,9 @@ class InfoPanel {
             this.initAndPosition();
         }
 
+        // (a11y) Shift focus to the newly-opened info panel
+        this.$el.focus();
+
         return this.$el;
     }
 
diff --git a/plugins/shared/info-panel/tab.handlebars b/plugins/shared/info-panel/tab.handlebars
deleted file mode 100644
index 8f8102fc..00000000
--- a/plugins/shared/info-panel/tab.handlebars
+++ /dev/null
@@ -1,5 +0,0 @@
-<li class="tota11y-info-tab">
-    <a class="tota11y-info-tab-anchor" href="#">
-        <span class="tota11y-info-tab-anchor-text">{{title}}</span>
-    </a>
-</li>
diff --git a/plugins/shared/info-panel/template.handlebars b/plugins/shared/info-panel/template.handlebars
deleted file mode 100644
index 3d6a1c22..00000000
--- a/plugins/shared/info-panel/template.handlebars
+++ /dev/null
@@ -1,18 +0,0 @@
-<div class="tota11y tota11y-info">
-    <header class="tota11y-info-title">
-        {{title}}
-        <span class="tota11y-info-controls">
-            <label class="tota11y-info-annotation-toggle">
-                Annotate:
-                <input class="toggle-annotation" type="checkbox" checked>
-            </label>
-            <a aria-label="Close this window" href="#" class="tota11y-info-dismiss-trigger">
-                &times;
-            </a>
-        </span>
-    </header>
-    <div class="tota11y-info-body">
-        <div class="tota11y-info-sections"></div>
-        <ul role="tablist" class="tota11y-info-tabs"></ul>
-    </div>
-</div>
diff --git a/plugins/style.less b/plugins/style.less
new file mode 100644
index 00000000..5e9c0dc7
--- /dev/null
+++ b/plugins/style.less
@@ -0,0 +1,71 @@
+@import "../less/variables.less";
+
+@descriptionWidth: 200px;
+@pluginPadding: 12px;
+@controlMargin: 15px;
+@indicatorSize: 16px;
+@indicatorFontSize: 13px;
+
+.tota11y-plugin {
+    .tota11y-no-select;
+    border-bottom: 1px solid @darkBorderColor;
+    list-style: none;
+
+    &-switch {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        padding: @pluginPadding @pluginPadding @pluginPadding 0;
+        margin: 0;
+    }
+
+    &-indicator {
+        margin: 0 @controlMargin;
+    }
+
+    &-indicator {
+        border-radius: @indicatorSize;
+        border: 1px solid @lightBorderColor;
+        color: transparent;
+        font-size: @indicatorFontSize;
+        height: @indicatorSize;
+        line-height: @indicatorSize;
+        padding: 0 0 0 1px;
+        width: @indicatorSize;
+    }
+
+    // Focus styles for the fake checkboxes
+    &-checkbox:focus + &-indicator {
+        @focusColor: darken(@kaGreen, 10%);
+
+        border-color: @kaGreen;
+        background-color: @focusColor;
+        color: @focusColor;
+    }
+
+    // Checked styles for the fake checkboxes
+    &-checkbox:checked + &-indicator {
+        background-color: @kaGreen;
+        border-color: @kaGreen;
+        color: white;
+    }
+
+    &-title {
+        font-weight: bold;
+    }
+
+    &-description {
+        font-size: @fontSizeSmall;
+        font-style: italic;
+        width: @descriptionWidth;
+        margin-right: 3px;
+    }
+}
+
+.tota11y-plugins {
+    &-separator {
+        font-size: 12px;
+        margin: 7px @controlMargin 0;
+        text-transform: uppercase;
+    }
+}
diff --git a/templates/plugin.handlebars b/templates/plugin.handlebars
deleted file mode 100644
index 10943069..00000000
--- a/templates/plugin.handlebars
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="tota11y-plugin">
-    <label class="tota11y-plugin-label">
-        <div class="tota11y-plugin-control">
-            <input type="checkbox" class="tota11y-plugin-checkbox" />
-            <div class="tota11y-plugin-indicator">&#x2713;</div>
-        </div>
-        <div class="tota11y-plugin-info">
-            <div class="tota11y-plugin-title">{{ title }}</div>
-            <div class="tota11y-plugin-description">{{ description }}</div>
-        </div>
-    </label>
-</div>