: SEO - aria-label vs .sr-only 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

@Turnbaugh106

Posted in: #Accessibility #Bootstrap #HiddenText #Html5 #Seo

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 natively


Which 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>

Vote Up Vote Down

Login to post a comment!