Skip to content

Commit

Permalink
aria-hidden for icon, dynamic aria-label for links
Browse files Browse the repository at this point in the history 
currently, both links lack context (particularly the count one, being
announced simply as "65,350 link" or similar). with aria-label, these
links now make more sense to screenreader/AT users
additionally, aria-hidden on the icon ensures no AT will attempt to read
the generated content icon font character
  • Loading branch information
@patrickhlauke
patrickhlauke committed Mar 29, 2015
1 parent e5373a8 commit 35dab7a
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 5 deletions.
2 changes: 1 addition & 1 deletion github-btn.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<html><body><style>body{padding:0;margin:0;font:700 11px/14px "Helvetica Neue",Helvetica,Arial,sans-serif;overflow:hidden}.github-btn{height:20px;overflow:hidden}.gh-btn,.gh-count,.gh-ico{float:left}.gh-btn,.gh-count{padding:2px 5px 2px 4px;color:#333;text-decoration:none;text-shadow:0 1px 0 #fff;white-space:nowrap;cursor:pointer;border-radius:3px}.gh-btn{background-color:#eee;background-image:-moz-linear-gradient(#fcfcfc,#eee);background-image:-webkit-linear-gradient(#fcfcfc,#eee);background-image:linear-gradient(#fcfcfc,#eee);background-repeat:no-repeat;border:1px solid #d5d5d5}.gh-btn:focus,.gh-btn:hover{text-decoration:none;background-color:#ddd;background-image:-moz-linear-gradient(#eee,#ddd);background-image:-webkit-linear-gradient(#eee,#ddd);background-image:linear-gradient(#eee,#ddd);border-color:#ccc}.gh-btn:active{background-image:none;background-color:#dcdcdc;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}.gh-ico{width:14px;height:14px;margin-right:4px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIxMiAxMiA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxMiAxMiA0MCA0MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMzIsMTMuNGMtMTAuNSwwLTE5LDguNS0xOSwxOWMwLDguNCw1LjUsMTUuNSwxMywxOGMxLDAuMiwxLjMtMC40LDEuMy0wLjljMC0wLjUsMC0xLjcsMC0zLjINCgljLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42DQoJYzAuMi0xLjIsMC43LTIuMSwxLjItMi42Yy00LjItMC41LTguNy0yLjEtOC43LTkuNGMwLTIuMSwwLjctMy43LDItNS4xYy0wLjItMC41LTAuOC0yLjQsMC4yLTVjMCwwLDEuNi0wLjUsNS4yLDINCgljMS41LTAuNCwzLjEtMC43LDQuOC0wLjdjMS42LDAsMy4zLDAuMiw0LjcsMC43YzMuNi0yLjQsNS4yLTIsNS4yLTJjMSwyLjYsMC40LDQuNiwwLjIsNWMxLjIsMS4zLDIsMywyLDUuMWMwLDcuMy00LjUsOC45LTguNyw5LjQNCgljMC43LDAuNiwxLjMsMS43LDEuMywzLjVjMCwyLjYsMCw0LjYsMCw1LjJjMCwwLjUsMC40LDEuMSwxLjMsMC45YzcuNS0yLjYsMTMtOS43LDEzLTE4LjFDNTEsMjEuOSw0Mi41LDEzLjQsMzIsMTMuNHoiLz4NCjwvc3ZnPg0K);background-size:100% 100%;background-repeat:no-repeat}.gh-count{position:relative;display:none;margin-left:4px;background-color:#fafafa;border:1px solid #d4d4d4}.gh-count:focus,.gh-count:hover{color:#4183C4}.gh-count:after,.gh-count:before{content:'';position:absolute;display:inline-block;width:0;height:0;border-color:transparent;border-style:solid}.gh-count:before{top:50%;left:-3px;margin-top:-4px;border-width:4px 4px 4px 0;border-right-color:#fafafa}.gh-count:after{top:50%;left:-4px;z-index:-1;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#d4d4d4}.github-btn-large{height:30px}.github-btn-large .gh-btn,.github-btn-large .gh-count{padding:3px 10px 3px 8px;font-size:16px;line-height:22px;border-radius:4px}.github-btn-large .gh-ico{width:20px;height:20px}.github-btn-large .gh-count{margin-left:6px}.github-btn-large .gh-count:before{left:-5px;margin-top:-6px;border-width:6px 6px 6px 0}.github-btn-large .gh-count:after{left:-6px;margin-top:-7px;border-width:7px 7px 7px 0}</style><span class=github-btn id=github-btn><a class=gh-btn id=gh-btn href=# target=_blank><span class=gh-ico></span> <span class=gh-text id=gh-text></span></a> <a class=gh-count id=gh-count href=# target=_blank></a></span><script>function addCommas(t){return String(t).replace(/(\d)(?=(\d{3})+$)/g,"$1,")}function jsonp(t,e){var r=document.createElement("script");r.src=t+"?callback="+(e?e:"callback"),head.insertBefore(r,head.firstChild)}function callback(t){switch(type){case"watch":counter.innerHTML=addCommas("2"==v?t.data.subscribers_count:t.data.stargazers_count);break;case"star":counter.innerHTML=addCommas(t.data.stargazers_count);break;case"fork":counter.innerHTML=addCommas(t.data.network_count);break;case"follow":counter.innerHTML=addCommas(t.data.followers)}"true"==count&&"undefined"!==counter.innerHTML&&(counter.style.display="block")}var params=function(){for(var t,e=[],r=window.location.href.slice(window.location.href.indexOf("?")+1).split("&"),a=0;a<r.length;a++)t=r[a].split("="),e.push(t[0]),e[t[0]]=t[1];return e}(),user=params.user,repo=params.repo,type=params.type,count=params.count,size=params.size,v=params.v,head=document.getElementsByTagName("head")[0],button=document.getElementById("gh-btn"),mainButton=document.getElementById("github-btn"),text=document.getElementById("gh-text"),counter=document.getElementById("gh-count");switch(button.href="https://github.com/"+user+"/"+repo+"/",type){case"watch":"2"==v?(mainButton.className+=" github-watchers",text.innerHTML="Watch",counter.href="https://github.com/"+user+"/"+repo+"/watchers"):(mainButton.className+=" github-stargazers",text.innerHTML="Star",counter.href="https://github.com/"+user+"/"+repo+"/stargazers");break;case"star":mainButton.className+=" github-stargazers",text.innerHTML="Star",counter.href="https://github.com/"+user+"/"+repo+"/stargazers";break;case"fork":mainButton.className+=" github-forks",text.innerHTML="Fork",button.href="https://github.com/"+user+"/"+repo+"/fork",counter.href="https://github.com/"+user+"/"+repo+"/network";break;case"follow":mainButton.className+=" github-me",text.innerHTML="Follow @"+user,button.href="https://github.com/"+user,counter.href="https://github.com/"+user+"/followers"}"large"==size&&(mainButton.className+=" github-btn-large"),jsonp("follow"==type?"https://api.github.com/users/"+user:"https://api.github.com/repos/"+user+"/"+repo);</script>
<html><body><style type=text/css>body{padding:0;margin:0;font:700 11px/14px "Helvetica Neue",Helvetica,Arial,sans-serif;overflow:hidden}.github-btn{height:20px;overflow:hidden}.gh-btn,.gh-count,.gh-ico{float:left}.gh-btn,.gh-count{padding:2px 5px 2px 4px;color:#333;text-decoration:none;text-shadow:0 1px 0 #fff;white-space:nowrap;cursor:pointer;border-radius:3px}.gh-btn{background-color:#eee;background-image:-moz-linear-gradient(#fcfcfc,#eee);background-image:-webkit-linear-gradient(#fcfcfc,#eee);background-image:linear-gradient(#fcfcfc,#eee);background-repeat:no-repeat;border:1px solid #d5d5d5}.gh-btn:focus,.gh-btn:hover{text-decoration:none;background-color:#ddd;background-image:-moz-linear-gradient(#eee,#ddd);background-image:-webkit-linear-gradient(#eee,#ddd);background-image:linear-gradient(#eee,#ddd);border-color:#ccc}.gh-btn:active{background-image:none;background-color:#dcdcdc;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}.gh-ico{width:14px;height:14px;margin-right:4px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIxMiAxMiA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxMiAxMiA0MCA0MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMzIsMTMuNGMtMTAuNSwwLTE5LDguNS0xOSwxOWMwLDguNCw1LjUsMTUuNSwxMywxOGMxLDAuMiwxLjMtMC40LDEuMy0wLjljMC0wLjUsMC0xLjcsMC0zLjINCgljLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42DQoJYzAuMi0xLjIsMC43LTIuMSwxLjItMi42Yy00LjItMC41LTguNy0yLjEtOC43LTkuNGMwLTIuMSwwLjctMy43LDItNS4xYy0wLjItMC41LTAuOC0yLjQsMC4yLTVjMCwwLDEuNi0wLjUsNS4yLDINCgljMS41LTAuNCwzLjEtMC43LDQuOC0wLjdjMS42LDAsMy4zLDAuMiw0LjcsMC43YzMuNi0yLjQsNS4yLTIsNS4yLTJjMSwyLjYsMC40LDQuNiwwLjIsNWMxLjIsMS4zLDIsMywyLDUuMWMwLDcuMy00LjUsOC45LTguNyw5LjQNCgljMC43LDAuNiwxLjMsMS43LDEuMywzLjVjMCwyLjYsMCw0LjYsMCw1LjJjMCwwLjUsMC40LDEuMSwxLjMsMC45YzcuNS0yLjYsMTMtOS43LDEzLTE4LjFDNTEsMjEuOSw0Mi41LDEzLjQsMzIsMTMuNHoiLz4NCjwvc3ZnPg0K);background-size:100% 100%;background-repeat:no-repeat}.gh-count{position:relative;display:none;margin-left:4px;background-color:#fafafa;border:1px solid #d4d4d4}.gh-count:focus,.gh-count:hover{color:#4183C4}.gh-count:after,.gh-count:before{content:'';position:absolute;display:inline-block;width:0;height:0;border-color:transparent;border-style:solid}.gh-count:before{top:50%;left:-3px;margin-top:-4px;border-width:4px 4px 4px 0;border-right-color:#fafafa}.gh-count:after{top:50%;left:-4px;z-index:-1;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#d4d4d4}.github-btn-large{height:30px}.github-btn-large .gh-btn,.github-btn-large .gh-count{padding:3px 10px 3px 8px;font-size:16px;line-height:22px;border-radius:4px}.github-btn-large .gh-ico{width:20px;height:20px}.github-btn-large .gh-count{margin-left:6px}.github-btn-large .gh-count:before{left:-5px;margin-top:-6px;border-width:6px 6px 6px 0}.github-btn-large .gh-count:after{left:-6px;margin-top:-7px;border-width:7px 7px 7px 0}</style><span class=github-btn id=github-btn><a class=gh-btn id=gh-btn href=# target=_blank aria-label=""><span class=gh-ico aria-hidden=true></span> <span class=gh-text id=gh-text></span></a> <a class=gh-count id=gh-count href=# target=_blank aria-label=""></a></span><script>function addCommas(t){return String(t).replace(/(\d)(?=(\d{3})+$)/g,"$1,")}function jsonp(t,e){var r=document.createElement("script");r.src=t+"?callback="+(e?e:"callback"),head.insertBefore(r,head.firstChild)}function callback(t){switch(type){case"watch":"2"==v?(counter.innerHTML=addCommas(t.data.subscribers_count),counter.setAttribute("aria-label",counter.innerHTML+" watchers"+labelSuffix)):(counter.innerHTML=addCommas(t.data.stargazers_count),counter.setAttribute("aria-label",counter.innerHTML+" stargazers"+labelSuffix));break;case"star":counter.innerHTML=addCommas(t.data.stargazers_count),counter.setAttribute("aria-label",counter.innerHTML+" stargazers"+labelSuffix);break;case"fork":counter.innerHTML=addCommas(t.data.network_count),counter.setAttribute("aria-label",counter.innerHTML+" forks"+labelSuffix);break;case"follow":counter.innerHTML=addCommas(t.data.followers),counter.setAttribute("aria-label",counter.innerHTML+" followers"+labelSuffix)}"true"==count&&"undefined"!==counter.innerHTML&&(counter.style.display="block")}var params=function(){for(var t,e=[],r=window.location.href.slice(window.location.href.indexOf("?")+1).split("&"),a=0;a<r.length;a++)t=r[a].split("="),e.push(t[0]),e[t[0]]=t[1];return e}(),user=params.user,repo=params.repo,type=params.type,count=params.count,size=params.size,v=params.v,head=document.getElementsByTagName("head")[0],button=document.getElementById("gh-btn"),mainButton=document.getElementById("github-btn"),text=document.getElementById("gh-text"),counter=document.getElementById("gh-count"),labelSuffix=" on GitHub";switch(button.href="https://github.com/"+user+"/"+repo+"/",type){case"watch":"2"==v?(mainButton.className+=" github-watchers",text.innerHTML="Watch",counter.href="https://github.com/"+user+"/"+repo+"/watchers"):(mainButton.className+=" github-stargazers",text.innerHTML="Star",counter.href="https://github.com/"+user+"/"+repo+"/stargazers");break;case"star":mainButton.className+=" github-stargazers",text.innerHTML="Star",counter.href="https://github.com/"+user+"/"+repo+"/stargazers";break;case"fork":mainButton.className+=" github-forks",text.innerHTML="Fork",button.href="https://github.com/"+user+"/"+repo+"/fork",counter.href="https://github.com/"+user+"/"+repo+"/network";break;case"follow":mainButton.className+=" github-me",text.innerHTML="Follow @"+user,button.href="https://github.com/"+user,counter.href="https://github.com/"+user+"/followers"}button.setAttribute("aria-label",text.innerHTML+labelSuffix),"large"==size&&(mainButton.className+=" github-btn-large"),jsonp("follow"==type?"https://api.github.com/users/"+user:"https://api.github.com/repos/"+user+"/"+repo);</script>
15 changes: 11 additions & 4 deletions github-btn.source.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,11 +120,11 @@
}
</style>
<span class="github-btn" id="github-btn">
<a class="gh-btn" id="gh-btn" href="#" target="_blank">
<span class="gh-ico"></span>
<a class="gh-btn" id="gh-btn" href="#" target="_blank" aria-label="">
<span class="gh-ico" aria-hidden="true"></span>
<span class="gh-text" id="gh-text"></span>
</a>
<a class="gh-count" id="gh-count" href="#" target="_blank"></a>
<a class="gh-count" id="gh-count" href="#" target="_blank" aria-label=""></a>
</span>
<script>
// Read a page's GET URL variables and return them as an associative array.
Expand All @@ -149,7 +149,8 @@
button = document.getElementById('gh-btn'),
mainButton = document.getElementById('github-btn'),
text = document.getElementById('gh-text'),
counter = document.getElementById('gh-count');
counter = document.getElementById('gh-count'),
labelSuffix = ' on GitHub';


// Add commas to numbers
Expand All @@ -168,18 +169,23 @@
case 'watch':
if (v == '2') {
counter.innerHTML = addCommas(obj.data.subscribers_count);
counter.setAttribute('aria-label',counter.innerHTML + ' watchers' + labelSuffix);
} else {
counter.innerHTML = addCommas(obj.data.stargazers_count);
counter.setAttribute('aria-label',counter.innerHTML + ' stargazers' + labelSuffix);
}
break;
case 'star':
counter.innerHTML = addCommas(obj.data.stargazers_count);
counter.setAttribute('aria-label',counter.innerHTML + ' stargazers' + labelSuffix);
break;
case 'fork':
counter.innerHTML = addCommas(obj.data.network_count);
counter.setAttribute('aria-label',counter.innerHTML + ' forks' + labelSuffix);
break;
case 'follow':
counter.innerHTML = addCommas(obj.data.followers);
counter.setAttribute('aria-label',counter.innerHTML + ' followers' + labelSuffix);
break;
}

Expand Down Expand Up @@ -223,6 +229,7 @@
counter.href = 'https://github.com/' + user + '/followers';
break;
}
button.setAttribute('aria-label',text.innerHTML + labelSuffix);

// Change the size
if (size == 'large') {
Expand Down

0 comments on commit 35dab7a

Please sign in to comment.