diff --git a/petljadoc/runestone_ext/notes/css/notes.css b/petljadoc/runestone_ext/notes/css/notes.css
index 4a427c4..c62fa17 100644
--- a/petljadoc/runestone_ext/notes/css/notes.css
+++ b/petljadoc/runestone_ext/notes/css/notes.css
@@ -67,33 +67,27 @@
     cursor: pointer;
 }
 
-.learnmorenote-type .course-content > p:first-child::after{
-        font-family: "Font Awesome 5 Free";
-        content: "\f107";
-        display: inline-block;
-        padding-right: 3px;
-        vertical-align: middle;
-        font-weight: 900;
-        float: right;
-    }
+.toggle-arrow {
+    float: right;
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    padding-left: 2px;
+    cursor: pointer;
+    height: 20px;
+}
 
-.learnmorenote-type .course-content p.expanded:nth-of-type(1)::after {
-    display: none;
+.toggle-arrow:focus {
+    outline: 2px solid black;
+    outline-offset: 4px;
+    border-radius: 4px; 
 }
 
-.learnmorenote-type .course-content p:nth-of-type(1)::before {
-    font-family: "Font Awesome 5 Free";
+.course-content p.expanded .toggle-arrow {
     content: "\f106";
-    display: inline-block;
-    padding-right: 3px;
-    vertical-align: middle;
-    font-weight: 900;
-    float: right;
-    display: none;
 }
 
-.learnmorenote-type .course-content p.expanded:nth-of-type(1)::before {
-    display: inline-block;
+.course-content p .toggle-arrow {
+    content: "\f107";
 }
 
 .learnmorenote-type .course-content p:not(:nth-of-type(1)) {
diff --git a/petljadoc/runestone_ext/notes/js/notes.js b/petljadoc/runestone_ext/notes/js/notes.js
index a1cf026..a288ec6 100644
--- a/petljadoc/runestone_ext/notes/js/notes.js
+++ b/petljadoc/runestone_ext/notes/js/notes.js
@@ -8,11 +8,53 @@ $(document).ready(function () {
     if (document.querySelector('.learnmorenote-type .course-content ')) {
         var allNodes = document.querySelectorAll('.learnmorenote-type .course-content ');
         for (var i = 0; i < allNodes.length; i++) {
+            
             hideContent(allNodes[i])
+
+            var arrow = document.createElement("span");
+            arrow.className = "toggle-arrow closed";
+            arrow.setAttribute("role", "button");
+            arrow.textContent = "﹀";
+            arrow.setAttribute("aria-expanded", "false");
+            arrow.setAttribute("tabindex", "0")
+
+            allNodes[i].children[0].appendChild(arrow);
+            allNodes[i].children[0].className = "note-title";
+            allNodes[i].children[0].setAttribute(
+                                "aria-label",
+                                "Ова напомена садржи додатне информације. Кликните да прикажете скривени садржај.")
+            arrow.addEventListener("click", function (ev) {
+                ev.stopPropagation();
+                this.parentNode.click();
+            });
+            
             allNodes[i].children[0].addEventListener("click", function () {
                 this.classList.toggle('expanded');
                 toggleVisible(this.parentNode);
+
+                var arrow = this.querySelector(".toggle-arrow");
+                var content = this.parentNode;
+
+                if (this.classList.contains("expanded")) {
+                    arrow.classList.remove("closed");
+                    arrow.classList.add("opened");
+                    arrow.textContent = "︿";
+                    arrow.setAttribute("aria-expanded", "true");
+                } else {
+                    arrow.classList.remove("opened");
+                    arrow.classList.add("closed");
+                    arrow.textContent = "﹀";
+
+                    arrow.setAttribute("aria-expanded", "false");
+                }
             })
+
+            allNodes[i].children[0].addEventListener("keydown", function (e) {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    this.click();
+                }
+            });
         }
     }
 });
@@ -30,6 +72,10 @@ function hideContent(learnDiv) {
 
     if (contentParagraph.length == 0) {
         var titleParaghraph = document.createElement("p");
+        titleParaghraph.className = "note-title";
+        titleParaghraph.setAttribute(
+        "aria-label",
+        "Ова напомена садржи додатне информације. Кликните да прикажете скривени садржај.")
         learnDiv.prepend(titleParaghraph);
     }
 
diff --git a/petljadoc/runestone_ext/notes/notes.py b/petljadoc/runestone_ext/notes/notes.py
index 87e65c8..71f5d7d 100644
--- a/petljadoc/runestone_ext/notes/notes.py
+++ b/petljadoc/runestone_ext/notes/notes.py
@@ -32,7 +32,7 @@ def html_page_context_handler(app, pagename, templatename, context, doctree):
 TEMPLATE_START = """
     <div class="note-wrapper %(notetype)s-type">
         <div class="note-icon-holder"> </div>
-        <img src="../_static/img/%(notetype)s-img.svg" class="note-image %(notetype)s-image" /> 
+        <img src="../_static/img/%(notetype)s-img.svg" alt="" role="presentation" class="note-image %(notetype)s-image" /> 
         <div class="course-content">
             
 """
@@ -87,7 +87,7 @@ def run(self):
 TEMPLATE_START_Q = """
     <div class="note-wrapper questionnote-type">
         <div class="note-icon-holder"> </div>
-        <img src="../_static/img/question-mark.png" class="note-image questionnote-image" /> 
+        <img src="../_static/img/question-mark.png" alt="" role="presentation" class="note-image questionnote-image" /> 
         <div class="course-content">
 """