diff --git a/docs/_assets/css/style.css b/docs/_assets/css/style.css
index 25ed7d5b..a405defd 100644
--- a/docs/_assets/css/style.css
+++ b/docs/_assets/css/style.css
@@ -114,6 +114,33 @@ code {
   grid-area: sidebar;
 }
 
+.clear-filters-wrapper {
+  text-align: center;
+  margin: 1em 0;
+}
+
+.clear-filters-btn {
+  background-color: var(--vocabulary-brand-color-tomato);
+  color: white;
+  border: none;
+  padding: 0.75em 1.5em;
+  font-size: 1rem;
+  font-family: 'Roboto Condensed', sans-serif;
+  font-weight: 700;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.clear-filters-btn:hover {
+  background-color: var(--vocabulary-brand-color-dark-tomato);
+}
+
+.clear-filters-btn:focus {
+  outline: 2px solid var(--vocabulary-brand-color-turquoise);
+  outline-offset: 2px;
+}
+
 #resourcenavbar h2 {
   text-align: center;
   font-size: 1.5em;
@@ -130,6 +157,25 @@ code {
   margin-bottom: 1rem;
 }
 
+#resourcenavbar input[type="checkbox"] {
+  cursor: pointer;
+  margin-right: 0.5rem;
+}
+
+#resourcenavbar label {
+  cursor: pointer;
+  display: inline;
+}
+
+#resourcenavbar input[type="checkbox"]:focus {
+  outline: 2px solid var(--vocabulary-brand-color-turquoise);
+  outline-offset: 2px;
+}
+
+#resourcenavbar label:hover {
+  text-decoration: underline;
+}
+
 #resourcenavbar p {
   font-size: 1rem;
 }
diff --git a/docs/_assets/js/listing.js b/docs/_assets/js/listing.js
index 7b3ed489..09bc70e3 100644
--- a/docs/_assets/js/listing.js
+++ b/docs/_assets/js/listing.js
@@ -117,3 +117,20 @@ if (language) {
   isFilterSelected += ", .resourcenavlanguageunknown";
 }
 dynamicStyle.innerHTML += `${isFilterSelected} { display: block; }`;
+
+document.addEventListener('DOMContentLoaded', function() {
+  const clearButton = document.getElementById('clear-all-filters');
+  const clearWrapper = document.querySelector('.clear-filters-wrapper');
+  
+  if (topic || medium || language) {
+    if (clearWrapper) {
+      clearWrapper.style.display = 'block';
+    }
+  }
+  
+  if (clearButton) {
+    clearButton.addEventListener('click', function() {
+      window.location.href = window.location.pathname;
+    });
+  }
+});
diff --git a/docs/_pages/all.html b/docs/_pages/all.html
index 7a2f8c97..8769487c 100644
--- a/docs/_pages/all.html
+++ b/docs/_pages/all.html
@@ -10,9 +10,16 @@
 <!-- This is the resourcenavbar, which contains the category filters. The categories are TOPIC, MEDIUM and LANGUAGE. In this there are two different options for displaying a category,
  For example - resourcenavtopicknown and resourcenavtopicunknown -->
 <!-- If the user has selected a filter, resourcenavtopicknown will be displayed. otherwise resourcenavtopicunknown will be displayed -->
-<aside id="resourcenavbar">
+<aside id="resourcenavbar" role="complementary" aria-label="Resource filters">
+  
+  <div class="clear-filters-wrapper hidden">
+    <button id="clear-all-filters" class="clear-filters-btn" aria-label="Clear all active filters">
+      Clear all filters
+    </button>
+  </div>
+  
   <article class="resourcenav resourcenavtopicknown">
-    <h2>Topic</h2>
+    <h2 id="topic-heading-known">Topic</h2>
     <p>
       <input
         type="checkbox"
@@ -28,8 +35,8 @@ <h2>Topic</h2>
   </article>
 
   <article class="resourcenav resourcenavtopicunknown topic-list">
-    <h2>Topic</h2>
-    <ul>
+    <h2 id="topic-heading-unknown">Topic</h2>
+    <ul role="group" aria-labelledby="topic-heading-unknown">
       {% for topic in site.data.topics %}
       <li>
         <input
@@ -45,7 +52,7 @@ <h2>Topic</h2>
   
 
   <article class="resourcenav resourcenavmediumknown">
-    <h2>Medium</h2>
+    <h2 id="medium-heading-known">Medium</h2>
     <p>
       <input
         type="checkbox"
@@ -61,8 +68,8 @@ <h2>Medium</h2>
   </article>
 
   <article class="resourcenav resourcenavmediumunknown medium-list">
-    <h2>Medium</h2>
-    <ul>
+    <h2 id="medium-heading-unknown">Medium</h2>
+    <ul role="group" aria-labelledby="medium-heading-unknown">
       {% for medium in site.data.media %}
       <li>
         <input
@@ -77,7 +84,7 @@ <h2>Medium</h2>
   </article>
 
   <article class="resourcenav resourcenavlanguageknown">
-    <h2>Language</h2>
+    <h2 id="language-heading-known">Language</h2>
     <p>
       <input
         type="checkbox"
@@ -94,8 +101,8 @@ <h2>Language</h2>
   </article>
 
   <article class="resourcenav resourcenavlanguageunknown language-list">
-    <h2>Language</h2>
-    <ul>
+    <h2 id="language-heading-unknown">Language</h2>
+    <ul role="group" aria-labelledby="language-heading-unknown">
       {% for language in site.data.languages %}
       <li>
         <input