diff --git a/src/balloon.less b/src/balloon.less
index 82e8cd3..180ae06 100644
--- a/src/balloon.less
+++ b/src/balloon.less
@@ -5,7 +5,7 @@
 @balloon-bg:         fade(#111, 90%);
 @balloon-font-size:  12px;
 @balloon-arrow-size: 6px;
-
+@balloon-content-attr: aria-label;
 
 //
 // Mixins
@@ -107,7 +107,7 @@ button[data-balloon] {
         background: @balloon-bg;
         border-radius: @balloon-font-size / 3;
         color: #fff;
-        content: attr(data-balloon);
+        content: attr(@{balloon-content-attr});
         font-size: @balloon-font-size;
         padding: .5em 1em;
         white-space: nowrap;
@@ -118,7 +118,7 @@ button[data-balloon] {
         content: "";
         margin-bottom: @balloon-arrow-size - 1;
     }
-    &:hover, &[data-balloon-visible] {
+    &:hover, &:focus, &[data-balloon-visible] {
         &:before,
         &:after {
             .opacity(1);
@@ -154,7 +154,7 @@ button[data-balloon] {
         margin-top: @balloon-arrow-size - 1;
         margin-bottom: 0;
     }
-    &:hover, &[data-balloon-visible] {
+    &:hover, &:focus, &[data-balloon-visible] {
         &:before,
         &:after {
           .transform(translate(-50%, 0));
@@ -179,7 +179,7 @@ button[data-balloon] {
         margin-right: @balloon-arrow-size - 1;
         margin-bottom: 0;
     }
-    &:hover, &[data-balloon-visible] {
+    &:hover, &:focus, &[data-balloon-visible] {
         &:before,
         &:after {
           .transform(translate(0, -50%));
@@ -203,7 +203,7 @@ button[data-balloon] {
         margin-bottom: 0;
         margin-left: @balloon-arrow-size - 1;
     }
-    &:hover, &[data-balloon-visible] {
+    &:hover, &:focus, &[data-balloon-visible] {
         &:before,
         &:after {
           .transform(translate(0, -50%));
diff --git a/src/balloon.scss b/src/balloon.scss
index 23ded30..13a8aec 100644
--- a/src/balloon.scss
+++ b/src/balloon.scss
@@ -5,7 +5,7 @@
 $balloon-bg:             fade-out(#111, .1);
 $balloon-base-size:      10px;
 $balloon-arrow-height:   6px;
-
+$balloon-content-attr: aria-label; // formerly data-balloon, but replaced with aria-label for better accessibility
 
 //
 // Mixins
@@ -90,7 +90,7 @@ button[data-balloon] {
         background: $balloon-bg;
         border-radius: 4px;
         color: #fff;
-        content: attr(data-balloon);
+        content: attr(#{$balloon-content-attr});
         font-size: $balloon-base-size + 2;
         padding: .5em 1em;
         position: absolute;
@@ -107,7 +107,7 @@ button[data-balloon] {
         z-index: 10;
     }
 
-    &:hover, &[data-balloon-visible] {
+    &:hover, &:focus, &[data-balloon-visible] {
         &:before,
         &:after {
             @include opacity(1);
@@ -141,7 +141,7 @@ button[data-balloon] {
             @include transform-origin(top);
         }
 
-        &:hover, &[data-balloon-visible] {
+        &:hover, &:focus, &[data-balloon-visible] {
             &:after {
                 @include transform(translate(-50%, 0));
             }
@@ -170,7 +170,7 @@ button[data-balloon] {
             @include transform(translate(-50%, -10px));
         }
 
-        &:hover, &[data-balloon-visible] {
+        &:hover, &:focus, &[data-balloon-visible] {
             &:after {
                 @include transform(translate(-50%, 0));
             }
@@ -198,7 +198,7 @@ button[data-balloon] {
             @include transform(translate(10px, -50%));
         }
 
-        &:hover, &[data-balloon-visible] {
+        &:hover, &:focus, &[data-balloon-visible] {
             &:after {
                 @include transform(translate(0, -50%));
             }
@@ -228,7 +228,7 @@ button[data-balloon] {
             @include transform(translate(-10px, -50%));
         }
 
-        &:hover, &[data-balloon-visible] {
+        &:hover, &:focus, &[data-balloon-visible] {
             &:after {
                 @include transform(translate(0, -50%));
             }