@@ -43,9 +43,10 @@ proto.update = function(graphInfo, buttons) {
 var modeBarId = 'modebar-' + fullLayout._uid;
 
 this.element.setAttribute('id', modeBarId);
-this._uid = modeBarId;
+this.element.setAttribute('role', 'toolbar');
 
-this.element.className = 'modebar';
+this._uid = modeBarId;
+this.element.className = 'modebar modebar--custom';
 if(context.displayModeBar === 'hover') this.element.className += ' modebar--hover ease-bg';
 
 if(fullLayout.modebar.orientation === 'v') {
@@ -145,8 +146,9 @@ proto.createGroup = function() {
 */
 proto.createButton = function(config) {
 var _this = this;
-var button = document.createElement('a');
+var button = document.createElement('button');
 
+button.setAttribute('type', 'button');
 button.setAttribute('rel', 'tooltip');
 button.className = 'modebar-btn';
 
@@ -155,7 +157,10 @@ proto.createButton = function(config) {
 // for localization: allow title to be a callable that takes gd as arg
 else if(typeof title === 'function') title = title(this.graphInfo);
 
-if(title || title === 0) button.setAttribute('data-title', title);
+if(title || title === 0) {
+button.setAttribute('data-title', title)
+button.setAttribute("aria-label", title)
+};
 
 if(config.attr !== undefined) button.setAttribute('data-attr', config.attr);
 

@@ -8,7 +8,7 @@
 @include vendor('transition', background-color 0.3s ease 0s);
 }
 
-.modebar--hover > :not(.watermark) {
+.modebar--hover> :not(.watermark) {
 opacity: 0;
 @include vendor('transition', opacity 0.3s ease 0s);
 }
@@ -17,6 +17,10 @@
 opacity: 1;
 }
 
+&:focus-within .modebar--hover .modebar-group {
+opacity: 1;
+}
+
 .modebar-group {
 float: left;
 display: inline-block;
@@ -25,6 +29,11 @@
 position: relative;
 vertical-align: middle;
 white-space: nowrap;
+
+a {
+display: grid;
+place-content: center;
+}
 }
 
 .modebar-btn {
@@ -36,15 +45,20 @@
 cursor: pointer;
 line-height: normal;
 box-sizing: border-box;
+border: none;
+background: transparent;
 
 svg {
 position: relative;
-top: 2px;
 }
 
-&.modebar-btn--logo {
-
+&:focus-visible {
+outline: 1px solid black;
+outline-offset: 1px;
+border-radius: 3px;
 }
+
+&.modebar-btn--logo {}
 }
 
 .modebar.vertical {
@@ -53,9 +67,11 @@
 flex-wrap: wrap;
 align-content: flex-end;
 max-height: 100%;
+
 svg {
-top: -1px;
+top: -1px;
 }
+
 .modebar-group {
 display: block;
 float: none;
@@ -67,4 +83,4 @@
 text-align: center;
 }
 }
-}
+}