diff --git a/src/components/AppToolbar.jsx b/src/components/AppToolbar.jsx
index 052e1ee..7480210 100644
--- a/src/components/AppToolbar.jsx
+++ b/src/components/AppToolbar.jsx
@@ -184,7 +184,7 @@ export default class AppToolbar extends React.Component {
       return view.id === this.props.mapState;
     });
 
-    return <div className='maputnik-toolbar'>
+    return <nav className='maputnik-toolbar'>
       <div className="maputnik-toolbar__inner">
         <div
           className="maputnik-toolbar-logo-container"
@@ -278,6 +278,6 @@ export default class AppToolbar extends React.Component {
           </ToolbarLinkHighlighted>
         </div>
       </div>
-    </div>
+    </nav>
   }
 }
diff --git a/src/components/InputCheckbox.jsx b/src/components/InputCheckbox.jsx
index e01d99c..7cf8323 100644
--- a/src/components/InputCheckbox.jsx
+++ b/src/components/InputCheckbox.jsx
@@ -13,7 +13,7 @@ export default class InputCheckbox extends React.Component {
   }
 
   render() {
-    return <label className="maputnik-checkbox-wrapper">
+    return <div className="maputnik-checkbox-wrapper">
       <input
         className="maputnik-checkbox"
         type="checkbox"
@@ -28,7 +28,7 @@ export default class InputCheckbox extends React.Component {
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
       </div>
-    </label>
+    </div>
   }
 }
 
diff --git a/src/components/InputNumber.jsx b/src/components/InputNumber.jsx
index d660daf..f256288 100644
--- a/src/components/InputNumber.jsx
+++ b/src/components/InputNumber.jsx
@@ -172,7 +172,6 @@ export default class InputNumber extends React.Component {
           step="any"
           spellCheck="false"
           value={value === undefined ? defaultValue : value}
-          aria-hidden="true"
           onChange={this.onChangeRange}
           onKeyDown={() => {
             this._keyboardEvent = true;
diff --git a/src/components/LayerEditor.jsx b/src/components/LayerEditor.jsx
index 1479ffc..f4dbb8e 100644
--- a/src/components/LayerEditor.jsx
+++ b/src/components/LayerEditor.jsx
@@ -290,7 +290,7 @@ export default class LayerEditor extends React.Component {
       items[id].handler();
     }
 
-    return <div className="maputnik-layer-editor"
+    return <section className="maputnik-layer-editor"
       role="main"
       aria-label="Layer editor"
     >
@@ -332,6 +332,6 @@ export default class LayerEditor extends React.Component {
       >
         {groups}
       </Accordion>
-    </div>
+    </section>
   }
 }
diff --git a/src/components/LayerList.jsx b/src/components/LayerList.jsx
index 5d94c60..cadb166 100644
--- a/src/components/LayerList.jsx
+++ b/src/components/LayerList.jsx
@@ -248,6 +248,7 @@ class LayerListContainer extends React.Component {
           })}
           index={idx}
           key={layer.key}
+          id={layer.key}
           layerId={layer.id}
           layerIndex={idx}
           layerType={layer.type}
@@ -264,7 +265,7 @@ class LayerListContainer extends React.Component {
       })
     })
 
-    return <div
+    return <section
       className="maputnik-layer-list"
       role="complementary"
       aria-label="Layers list"
@@ -310,7 +311,7 @@ class LayerListContainer extends React.Component {
           {listItems}
         </ul>
       </div>
-    </div>
+    </section>
   }
 }
 
diff --git a/src/components/LayerListItem.jsx b/src/components/LayerListItem.jsx
index f135288..6e8f18c 100644
--- a/src/components/LayerListItem.jsx
+++ b/src/components/LayerListItem.jsx
@@ -100,6 +100,7 @@ class LayerListItem extends React.Component {
     const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
 
     return <li
+      id={this.props.id}
       key={this.props.layerId}
       onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
       data-wd-key={"layer-list-item:"+this.props.layerId}
diff --git a/src/components/ModalDebug.jsx b/src/components/ModalDebug.jsx
index 6b92729..a7e040c 100644
--- a/src/components/ModalDebug.jsx
+++ b/src/components/ModalDebug.jsx
@@ -29,8 +29,8 @@ export default class ModalDebug extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Debug'}
     >
-      <div className="maputnik-modal-section maputnik-modal-shortcuts">
-        <h4>Options</h4>
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
+        <h1>Options</h1>
         {this.props.renderer === 'mbgljs' &&
           <ul>
             {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
@@ -53,9 +53,9 @@ export default class ModalDebug extends React.Component {
             })}
           </ul>
         }
-      </div>
-      <div className="maputnik-modal-section">
-        <h4>Links</h4>
+      </section>
+      <section className="maputnik-modal-section">
+        <h1>Links</h1>
         <p>
           <a
             target="_blank"
@@ -65,7 +65,7 @@ export default class ModalDebug extends React.Component {
             Open in OSM
           </a> &mdash; Opens the current view on openstreetmap.org
         </p>
-      </div>
+      </section>
     </Modal>
   }
 }
diff --git a/src/components/ModalExport.jsx b/src/components/ModalExport.jsx
index 19e0c85..5af01cc 100644
--- a/src/components/ModalExport.jsx
+++ b/src/components/ModalExport.jsx
@@ -67,8 +67,8 @@ export default class ModalExport extends React.Component {
       className="maputnik-export-modal"
     >
 
-      <div className="maputnik-modal-section">
-        <h4>Download Style</h4>
+      <section className="maputnik-modal-section">
+        <h1>Download Style</h1>
         <p>
           Download a JSON style to your computer.
         </p>
@@ -101,7 +101,7 @@ export default class ModalExport extends React.Component {
           <MdFileDownload />
           Download
         </InputButton>
-      </div>
+      </section>
 
     </Modal>
   }
diff --git a/src/components/ModalOpen.jsx b/src/components/ModalOpen.jsx
index 42bde38..8ef91be 100644
--- a/src/components/ModalOpen.jsx
+++ b/src/components/ModalOpen.jsx
@@ -27,11 +27,11 @@ class PublicStyle extends React.Component {
         aria-label={this.props.title}
         onClick={() => this.props.onSelect(this.props.url)}
       >
-        <header className="maputnik-public-style-header">
-          <h4>{this.props.title}</h4>
+        <div className="maputnik-public-style-header">
+          <div>{this.props.title}</div>
           <span className="maputnik-space" />
           <MdAddCircleOutline />
-        </header>
+        </div>
         <div
           className="maputnik-public-style-thumbnail"
           style={{
@@ -200,18 +200,19 @@ export default class ModalOpen extends React.Component {
           <section className="maputnik-modal-section">
             <h2>Upload Style</h2>
             <p>Upload a JSON style from your computer.</p>
-            <FileReaderInput onChange={this.onUpload} tabIndex="-1">
+            <FileReaderInput onChange={this.onUpload} tabIndex="-1" aria-label="Style file">
               <InputButton className="maputnik-upload-button"><MdFileUpload /> Upload</InputButton>
             </FileReaderInput>
           </section>
 
           <section className="maputnik-modal-section">
-            <h2>Load from URL</h2>
-            <p>
-              Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
-            </p>
             <form onSubmit={this.onSubmitUrl}>
+              <h2>Load from URL</h2>
+              <p>
+                Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
+              </p>
               <InputUrl
+                aria-label="Style URL"
                 data-wd-key="modal:open.url.input"
                 type="text"
                 className="maputnik-input"
diff --git a/src/components/ModalShortcuts.jsx b/src/components/ModalShortcuts.jsx
index 2710863..ebe8a0e 100644
--- a/src/components/ModalShortcuts.jsx
+++ b/src/components/ModalShortcuts.jsx
@@ -105,7 +105,7 @@ export default class ModalShortcuts extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Shortcuts'}
     >
-      <div className="maputnik-modal-section maputnik-modal-shortcuts">
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
         <p>
           Press <code>ESC</code> to lose focus of any active elements, then press one of:
         </p>
@@ -125,7 +125,7 @@ export default class ModalShortcuts extends React.Component {
             </li>
           })}
         </ul>
-      </div>
+      </section>
     </Modal>
   }
 }
diff --git a/src/components/ModalSources.jsx b/src/components/ModalSources.jsx
index 475aa45..05369e7 100644
--- a/src/components/ModalSources.jsx
+++ b/src/components/ModalSources.jsx
@@ -84,6 +84,7 @@ class ActiveModalSourcesTypeEditor extends React.Component {
         <span className="maputnik-active-source-type-editor-header-id">#{this.props.sourceId}</span>
         <span className="maputnik-space" />
         <InputButton
+          aria-label={`Remove '${this.props.sourceId}' source`}
           className="maputnik-active-source-type-editor-header-delete"
           onClick={()=> this.props.onDelete(this.props.sourceId)}
           style={{backgroundColor: 'transparent'}}
@@ -291,28 +292,28 @@ export default class ModalSources extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Sources'}
     >
-      <div className="maputnik-modal-section">
-        <h4>Active Sources</h4>
+      <section className="maputnik-modal-section">
+        <h1>Active Sources</h1>
         {activeSources}
-      </div>
+      </section>
 
-      <div className="maputnik-modal-section">
-        <h4>Choose Public Source</h4>
+      <section className="maputnik-modal-section">
+        <h1>Choose Public Source</h1>
         <p>
           Add one of the publicly available sources to your style.
         </p>
         <div className="maputnik-public-sources" style={{maxwidth: 500}}>
         {tilesetOptions}
         </div>
-      </div>
+      </section>
 
-      <div className="maputnik-modal-section">
-				<h4>Add New Source</h4>
+      <section className="maputnik-modal-section">
+				<h1>Add New Source</h1>
 				<p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
 				<AddSource
 					onAdd={(sourceId, source) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
 				/>
-      </div>
+      </section>
     </Modal>
   }
 }
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 3a04689..8dd491c 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -163,10 +163,10 @@
 // INPUT BLOCK
 .maputnik-input-block {
   margin: $margin-3;
+  display: flex;
 
   &-label {
     color: $color-lowgray;
-    display: inline-block;
     user-select: none;
     width: 32%;
     vertical-align: top;
@@ -175,7 +175,6 @@
 
   &-action {
     color: $color-lowgray;
-    display: inline-block;
     user-select: none;
     width: 18%;
     vertical-align: top;
@@ -184,7 +183,6 @@
   }
 
   &-content {
-    display: inline-block;
     width: 50%;
   }
 }
diff --git a/src/template.html b/src/template.html
index 300e999..cfa2a3e 100644
--- a/src/template.html
+++ b/src/template.html
@@ -41,6 +41,7 @@
   <!-- TODO: Import dynamically -->
   <!-- From <https://github.com/hail2u/color-blindness-emulation> -->
   <svg
+    aria-hidden="true"
     xmlns="http://www.w3.org/2000/svg"
     version="1.1">
     <defs>