For SEO purpose, I read that invisible content has less weight that visible.Because of that, it means that using Twitter Bootstrap's .sr-only class can be, in the worst case of course, treated as blackhat SEO:.sr-only {    position: absolute;    width: 1px;    height: 1px;    padding: 0;    margin: -1px;    overflow: hidden;    clip: rect(0,0,0,0);    border: 0;}So aria-label can be used, but on WAI-ARIA page we can read:While WAI-ARIA can improve the accessibility of these objects, accessibility is best provided by allowing the user agent to handle the object nativelyWhich in my opinion in 100% fits to .sr-only class which allows to handle messages natively by the user agent.So, what is better for SEO (and of course accessibility purposes), aria-label or span with .sr-only class, in example in case of HTML <button> element? Example:<button>    <i class=add-icon aria-hidden=true></i>    <span class=sr-only>Add item</span></button>or<button aria-label=Add item>    <i class=add-icon aria-hidden=true></i><button>
SEO - aria-label vs .sr-only
seo;html5;accessibility;hidden text;bootstrap
The question is interesting but brings back memories of a time when people would debate IF Google could read Flash. And if text in flash was - as you ask here - visible or possibly to be viewed as a technique to add (blackhat) content. The answer to the Flash story was and is Google reads EVERYTHING. And TEXT made for screen readers (etc) that is USEFUL to the content is just a sign of devotion to your quality of content AND NOT, in my view, a risk.This said ... Check:https://github.com/twbs/bootstrap/issues/10446https://support.google.com/webmasters/answer/66353