diff --git a/KEYBOARD b/KEYBOARD
new file mode 100644
index 00000000..d7832b8f
--- /dev/null
+++ b/KEYBOARD
@@ -0,0 +1,39 @@
+# Use of the keyboard with Galene
+
+People wich are not able to use a mouse need to have other possibilities.
+
+Some user will use the keyboard in order to navigate to the galene Web
+Interface and will use the Tab Key to select the wanted element and
+other key as arrow up, down, space.
+
+User with visual impairement, may use a screenreader.
+
+For keyboard user we can use the following keys:
+
+- 'u' goto user list 
+- 'c' go to  the chat input box
+- 'r' raise, unraise hand
+- 'm' mute, unmute
+
+
+- Esc close contextual menu, close the setting, close the chat box,
+close the user list
+
+
+For the screenreader user, it is difficult to provide shortcuts, most
+keys or keys combination are reserved from the OS the screenreader and
+the browser.
+
+In order to offer a faster way for selecting the wanted element, we use
+thw header navigation (h1, h2. h3).
+
+- The key 1 will got to the main Title of the page.
+- The key 2 will allow to select one of the area user list, chat box or media area.
+- The key 3 allow to navigate from message to message.
+- The Tab and Esc key work as for the normal keyboard user
+
+Screenreader shall announce the error and warning textes issued by galene,
+this is also implemented.
+
+
+
diff --git a/static/galene.css b/static/galene.css
index 096a2fdf..e617720e 100644
--- a/static/galene.css
+++ b/static/galene.css
@@ -1,3 +1,9 @@
+button {
+    background: none;
+    border: 0;
+    color: inherit;
+}
+
 .nav-fixed .topnav {
     z-index: 1039;
 }
@@ -109,7 +115,7 @@
     display: none;
 }
 
-.sidenav .user-logout a {
+.sidenav .user-logout button {
     font-size: 1em;
     padding: 7px 0 0;
     color: #e4157e;
@@ -117,7 +123,7 @@
     line-height: .7;
 }
 
-.sidenav .user-logout a:hover {
+.sidenav .user-logout button:hover {
     color: #ab0659;
 }
 
@@ -312,7 +318,6 @@
     resize: none;
     overflow: hidden;
     padding: 5px;
-    outline: none;
     border: none;
     text-indent: 5px;
     box-shadow: none;
@@ -467,7 +472,7 @@ textarea.form-reply {
 }
 
 .collapse-video {
-    left: 30px;
+    left: calc(-100vw);
     right: inherit;
 }
 
@@ -864,14 +869,6 @@ h1 {
     overflow-y: hidden;
 }
 
-#input:focus {
-    outline: none;
-}
-
-#inputbutton:focus {
-    outline: none;
-}
-
 #resizer {
     width: 4px;
     margin-left: -4px;
@@ -945,7 +942,7 @@ h1 {
     position: fixed;
     -webkit-transition: all .2s ease-out;
     transition: all .2s ease-out;
-    width: 0px;
+    width: 250px;
     /* on top of everything */
     z-index: 2999;
     top: 0;
@@ -953,9 +950,13 @@ h1 {
     height: calc(var(--vh, 1vh) * 100);
     overflow-x: hidden;
     overflow-y: hidden;
+
+}
+.sidenav.invisible {
+    display: none;
 }
 
-.sidenav a {
+.sidenav button {
     padding: 10px 20px;
     text-decoration: none;
     font-size: 30px;
@@ -965,7 +966,7 @@ h1 {
     line-height: 1.0;
 }
 
-.sidenav a:hover {
+.sidenav button:hover {
     color: #c2a4e0;
 }
 
@@ -1112,8 +1113,12 @@ header .collapse:hover {
 
 /* Shrinking the sidebar from 200px to 0px */
 #left-sidebar.active {
-    min-width: 0;
-    max-width: 0;
+    display: none;
+}
+        
+#left-sidebar:not(.active) {
+    display: block;
+    width:200px;
 }
 
 #left-sidebar .sidebar-header strong {
@@ -1148,17 +1153,23 @@ header .collapse:hover {
     cursor: pointer;
     overflow: hidden;
     white-space: pre;
+    display: block;
+    width: 100%;
+    text-align: left;
 }
 
-#left-sidebar.active #users > div {
+#left-sidebar.active #users > button {
     padding: 10px 5px !important;
 }
 
-#users > div:hover {
+#users > button:hover {
     background-color: #f2f2f2;
 }
+#users > button:focus, #users > button:focus-visible {
+   outline-offset: -2px;
+}
 
-#users > div::before {
+#users > button::before {
     content: "\f111";
     font-family: 'Font Awesome 6 Free';
     color: #20b91e;
@@ -1166,11 +1177,11 @@ header .collapse:hover {
     font-weight: 900;
 }
 
-#users > div.user-status-raisehand::before {
+#users > button.user-status-raisehand::before {
     content: "\f256";
 }
 
-#users > div::after {
+#users > button::after {
     font-family: 'Font Awesome 6 Free';
     color: #808080;
     margin-left: 5px;
@@ -1178,11 +1189,11 @@ header .collapse:hover {
     float: right;
 }
 
-#users > div.user-status-microphone::after {
+#users > button.user-status-microphone::after {
     content: "\f130";
 }
 
-#users > div.user-status-camera::after {
+#users > button.user-status-camera::after {
     content: "\f030";
 }
 
@@ -1300,7 +1311,7 @@ header .collapse:hover {
         display: block;
     }
 
-    .sidenav a {padding: 10px 10px;}
+    .sidenav button {padding: 10px 10px;}
 
     .sidenav-header h2 {
         line-height: 36px;
diff --git a/static/galene.html b/static/galene.html
index d76c09ec..16cc183d 100644
--- a/static/galene.html
+++ b/static/galene.html
@@ -29,9 +29,9 @@
           <header>
             <nav class="topnav navbar navbar-expand navbar-light fixed-top">
               <div id="header">
-                <div class="collapse" title="Collapse left panel" id="sidebarCollapse">
+                <button class="collapse" title="Collapse left panel" id="sidebarCollapse">
                   <i class="fas fa-align-left" aria-hidden="true"></i>
-                </div>
+                </button>
                 <h1 id="title" class="header-title">Galène</h1>
               </div>
 
@@ -47,21 +47,21 @@ <h1 id="title" class="header-title">Galène</h1>
                   </button>
                 </li>
                 <li>
-                  <div id="mutebutton" class="nav-link nav-button">
+                  <button id="mutebutton" class="nav-link nav-button">
                     <span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
                     <label>Mute</label>
-                  </div>
+                  </button>
                 </li>
                 <li>
-                  <div id="sharebutton" class="invisible nav-link nav-button">
+                  <button id="sharebutton" class="invisible nav-link nav-button">
                     <span><i class="fas fa-share-square" aria-hidden="true"></i></span>
                     <label>Share Screen</label>
-                  </div>
+                  </button>
                 </li>
                 <li>
-                  <div class="nav-button nav-link nav-more" id="openside">
+                  <button class="nav-button nav-link nav-more" id="openside">
                     <span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
-                  </div>
+                  </button>
                 </li>
               </ul>
             </nav>
@@ -85,15 +85,15 @@ <h1 id="title" class="header-title">Galène</h1>
             </div>
             <div id="resizer"></div>
             <div class="coln-right" id="right">
-              <span class="show-video blink invisible" id="show-video">
+              <button class="show-video blink invisible" id="show-video">
                 <i class="fas fa-exchange-alt" aria-hidden="true"></i>
-              </span>
-              <div class="chat-btn show-chat invisible" id="show-chat">
+              </button>
+              <button class="chat-btn show-chat invisible" id="show-chat">
                 <i class="far fa-comment-alt icon-chat" title="Show chat"></i>
-              </div>
-              <div class="chat-btn collapse-video invisible" id="collapse-video">
+              </button>
+              <button class="chat-btn collapse-video invisible" id="collapse-video">
                 <i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i>
-              </div>
+              </button>
               <div class="video-container invisible" id="video-container">
                 <div id="expand-video" class="expand-video">
                   <div id="peers"></div>
@@ -144,27 +144,27 @@ <h1 id="title" class="header-title">Galène</h1>
       </div>
     </div>
 
-    <div id="sidebarnav" class="sidenav">
+    <div id="sidebarnav" class="sidenav invisible">
       <div class="sidenav-header">
         <h2>Settings</h2>
-        <a class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></a>
+        <button class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></button>
       </div>
       <div class="sidenav-content" id="optionsdiv">
         <div id="profile" class="profile invisible">
           <div class="profile-user">
-            <div class="profile-logo">
+            <button class="profile-logo">
               <span><i class="fas fa-user" aria-hidden="true"></i></span>
-            </div>
+            </button>
             <div class="profile-info">
               <span id="userspan"></span>
               <span id="permspan"></span>
               <span id="chpwspan" class="invisible"><a id="change-password">Change password</a></span>
             </div>
             <div class="user-logout">
-              <a id="disconnectbutton">
+              <button id="disconnectbutton">
                 <span class="logout-icon"><i class="fas fa-sign-out-alt"></i></span>
                 <span class="logout-text">Logout</span>
-              </a>
+              </button>
             </div>
           </div>
         </div>
@@ -260,21 +260,21 @@ <h2>Settings</h2>
     <div id="videocontrols-template" class="invisible">
       <div class="video-controls vc-overlay">
         <div class="controls-button controls-left">
-          <span class="video-play" title="Play video">
+          <button class="video-play" title="Play video">
             <i class="fas fa-play"></i>
-          </span>
-          <span class="volume" title="Volume">
+          </button>
+          <span class="volume" title="Volume" role="button">
             <i class="fas fa-volume-up volume-mute" aria-hidden="true"></i>
             <input class="volume-slider" type="range" max="100" value="100" min="0" step="5" >
           </span>
         </div>
         <div class="controls-button controls-right">
-          <span class="pip" title="Picture In Picture">
+          <button class="pip" title="Picture In Picture">
             <i class="far fa-clone" aria-hidden="true"></i>
-          </span>
-          <span class="fullscreen" title="Fullscreen">
+          </button>
+          <button class="fullscreen" title="Fullscreen">
             <i class="fas fa-expand" aria-hidden="true"></i>
-          </span>
+          </button>
         </div>
       </div>
     </div>
diff --git a/static/galene.js b/static/galene.js
index 586a04aa..5af17f38 100644
--- a/static/galene.js
+++ b/static/galene.js
@@ -2455,7 +2455,7 @@ function userMenu(elt) {
  */
 function addUser(id, userinfo) {
     let div = document.getElementById('users');
-    let user = document.createElement('div');
+    let user = document.createElement('button');
     user.id = 'user-' + id;
     user.classList.add("user-p");
     setUserStatus(id, user, userinfo);
@@ -4170,11 +4170,13 @@ document.getElementById('disconnectbutton').onclick = function(e) {
 };
 
 function openNav() {
-    document.getElementById("sidebarnav").style.width = "250px";
+    //document.getElementById("sidebarnav").style.width = "250px";
+    document.getElementById("sidebarnav").classList.remove('invisible');
 }
 
 function closeNav() {
-    document.getElementById("sidebarnav").style.width = "0";
+    //document.getElementById("sidebarnav").style.width = "0";
+    document.getElementById("sidebarnav").classList.add('invisible');
 }
 
 document.getElementById('sidebarCollapse').onclick = function(e) {
@@ -4183,9 +4185,16 @@ document.getElementById('sidebarCollapse').onclick = function(e) {
 };
 
 document.getElementById('openside').onclick = function(e) {
-      e.preventDefault();
-      let sidewidth = document.getElementById("sidebarnav").style.width;
-      if (sidewidth !== "0px" && sidewidth !== "") {
+//      e.preventDefault();
+//      let sidewidth = document.getElementById("sidebarnav").style.width;
+//      if (sidewidth !== "0px" && sidewidth !== "") {
+//          closeNav();
+//          return;
+//      } else {
+//          openNav();
+//      }
+      let invisible = document.getElementById("sidebarnav").classList.contains('invisible');
+      if (! invisible) {
           closeNav();
           return;
       } else {
diff --git a/static/key.js b/static/key.js
new file mode 100644
index 00000000..173e1eef
--- /dev/null
+++ b/static/key.js
@@ -0,0 +1,263 @@
+'use strict';
+let galeneKeys = {
+    from : null,
+    focusAgain : function() {
+        if ( galeneKeys.from ) {
+            galeneKeys.from.focus();
+            //galeneKeys.from = null;
+        }
+        else {
+           document.body.focus();
+        }
+    },
+    leave : function (event) {
+        if ( event.target.classList.contains('first') ) {
+           if ( event.shiftKey ) {
+               let cm = document.querySelector('.contextualMenu');
+               if ( cm ) {
+                  cm.remove();
+                  setTimeout(galeneKeys.focusAgain, 20);
+                  return;
+               }
+           }
+        }
+        if ( event.target.classList.contains('last') ) {
+           if ( ! event.shiftKey ) {
+                let cm = document.querySelector('.contextualMenu');
+               if ( cm ) {
+                  cm.remove();
+                  setTimeout(galeneKeys.focusAgain, 20);
+                  return;
+               }
+            }       
+        }
+        if ( event.key === 'Escape' )
+           setTimeout(galeneKeys.focusAgain, 20);
+    },
+    setTabindexContextMenu : function (target) {
+        let context = document.querySelectorAll('.contextualMenuItemTitle');
+        if ( context && context.length) {
+            context.forEach( c => {
+                let btn = document.createElement('button');
+                btn.classList.add('contextualMenuItemTitle');
+                btn.classList.add('contextualJs');
+                btn.textContent = c.textContent;
+                btn.addEventListener('click', galeneKeys.menuClick);
+                c.replaceWith(btn);
+            });
+            context = document.querySelectorAll('.contextualMenuItemTitle');
+            context[0].classList.add('first');
+            let last = context.length - 1;
+            context[last].classList.add('last');
+            galeneKeys.from = target;
+            context[0].focus();
+            let pos = target.getBoundingClientRect();
+
+            let contextParent = document.querySelector('.contextualMenu');
+            contextParent.style.top = pos.top+20+'px';
+            // the following work only if the display with is enough we may have to correct this.
+            let x = 180;
+            let w = window.innerWidth;
+            if ( x + 200 > window.innerWidth ) {
+                x = w - 205;
+            }
+            contextParent.style.left = x+'px';
+            
+            let menu = document.querySelector('ul.contextualMenu');
+        } else {
+             // Enter pressed    
+             galeneKeys.focusAgain();
+        }
+    },
+    menuClick : function(e) {
+        galeneKeys.focusAgain();
+    },
+    processKey : function (event) {
+        let target = event.target;
+        let key = event.key;
+        switch(key) {
+            case 'Tab':
+                if ( document.activeElement.classList.contains('contextualMenuItemTitle') ) {
+                    galeneKeys.leave(event);
+                    return;
+                }
+                if ( document.activeElement.id === 'sideBarCollapse')
+                    return;
+            break;
+            case 'Escape':
+                let dialog = document.querySelector('dialog');
+                if ( dialog ) {
+                    let open = dialog.getAttribute('open');
+                    if ( open == '' ) {
+                        dialog.close(); 
+                        galeneKeys.focusAgain();
+                        return;
+                    }
+                }
+                let cm = document.querySelector('.contextualMenu');
+                 if ( cm ) {
+                   cm.remove();
+                   galeneKeys.leave(event);
+                   return;
+                }
+                // if the setting are open close them
+                let sidebar = document.querySelector('#sidebarnav[open]');
+                if ( sidebar ) {
+                    event.preventDefault();
+                    sidebar.removeAttribute('open');
+                    return;
+                }
+                // check if we are within the chat
+                let active = document.activeElement;
+                let chat = document.querySelector('#left:not(.invisible)');
+                if ( chat ) {
+                    event.preventDefault();
+                    chat.classList.add('invisible');
+                    let showChat = document.querySelector('#show-chat');
+                    showChat.classList.remove('invisible');
+                    return;
+                }
+                // finally close possibly the user list 
+                let userList = document.querySelector('#left-sidebar:not(.active)');
+                if ( userList ) {
+                    event.preventDefault();
+                    document.querySelector('#left-sidebar').classList.add('active');
+                    return;
+                }
+            break;
+            case 'Enter':
+            case ' ':
+                if ( target.classList.contains('volume-mute') ) {
+                    let state = 
+                    target.click();
+                    if ( translate && translate.translateList ) {
+                        translate.setVolumeAria();
+                    }
+                    return;
+                }
+            break;
+
+        }
+        switch(target.nodeName) {
+            case 'INPUT':
+                let type = target.getAttribute('type');
+                if ( type && type === 'submit' ) {
+                    return;
+                }
+            case 'TEXTAREA':
+            case 'SELECT':
+                return;
+            break;
+        }
+        let usercont = null;
+        switch(key) {
+            case 'u':
+                event.preventDefault();
+                usercont = document.querySelector('#left-sidebar');
+                if ( !usercont.classList.contains('active')) {
+                    /* focus first user */
+                    let user = document.querySelector('#users .user-p');
+                    if ( user )
+                        user.focus();
+                } else {
+                    usercont.classList.remove('active');
+                }
+            break;
+            case 'r':
+                /* raise hand */
+                let me = document.querySelector('#left-sidebar #users .user-p');
+                if ( me ) {
+                   if (me.classList.contains('user-status-raisehand') )
+                        me.classList.remove('user-status-raisehand');
+                    else
+                        me.classList.add('user-status-raisehand');
+                }
+            break;
+            case 'm':
+                let localMute = getSettings().localMute;
+                localMute = !localMute;
+                setLocalMute(localMute, true);
+            break;
+            case 'c':
+                /* Chat */
+                event.preventDefault();
+                let chat = document.querySelector('#left:not(.invisible)');
+                if (!chat) {
+                    setVisibility('left', true);
+                    setVisibility('show-chat', false);
+                    resizePeers();
+                    chat = document.querySelector('#left:not(.invisible) textarea');
+                }
+                if (chat)
+                    chat.focus();
+            break;
+       }
+    },
+    userClick : function (e) {
+        galeneKeys.from = e.target;
+        setTimeout(galeneKeys.setTabindexContextMenu,20, e.target);
+    },
+    addClickListener : function (mutationList) {
+        for (const mutation of mutationList) {
+            if (mutation.type === "childList") {
+                if (mutation && mutation.addedNodes) {
+                    let idx = mutation.addedNodes.length -1;
+                    if (idx >= 0) {
+                        mutation.addedNodes[idx].addEventListener('click', galeneKeys.userClick);
+                    }
+                }
+            }   
+        }
+    },
+    focusInput : function() {
+        let input = document.querySelector('#input');
+        input.focus();
+    },
+    collapseSidebar : function(e) {
+        let sidebar = document.querySelector('#left-sidebar.active');
+        if ( !sidebar ) {
+            // focus the first user-p button done but no outline!
+            //let user = document.querySelector('.user-p');
+            let userP = document.querySelector('.user-p');
+            if (userP)
+                userP.focus();
+        }
+    },
+    setSr : function (sr, toast) {
+        sr.textContent = toast.textContent;
+    },
+    resetSr : function(sr) {
+        sr.textContent = '';
+    },
+    setSrText : function() {
+        let toast = document.querySelector('.toastify');
+        let sr = document.querySelector('#srSpeak');
+        if ( toast ) {
+            setTimeout(galeneKeys.setSr, 50, sr, toast);
+            setTimeout(galeneKeys.resetSr, 4000, sr);
+        }
+    },
+    init : function () {
+        // add mutation oberver
+        let toObserve = document.querySelector('#users');
+        if ( toObserve ) {
+            const observer = new MutationObserver(galeneKeys.addClickListener);
+            observer.observe(toObserve, {childList:true, subtree:false});
+        }
+        const popup = new MutationObserver(galeneKeys.setSrText);
+        popup.observe(document.body, {childList: true,subtree: false});
+
+        // add event listener to the show-chat button
+        let showChat = document.querySelector('#show-chat');
+        if ( showChat ) {
+            showChat.addEventListener('click',galeneKeys.focusInput);
+        }
+        let left = document.querySelector('#sidebarCollapse');
+        if ( left ) {
+            left.addEventListener('click', galeneKeys.collapseSidebar);
+        }
+    },
+};
+document.addEventListener('keydown', galeneKeys.processKey);
+document.addEventListener('DOMContentLoaded', galeneKeys.init);
+