4

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>
  • 4
    Google really does care little about the mark-up that webmasters opt to use. If the element is invisible until called via JavaScript or using css the element is still counted towards the weight of the page but it may believe the content is less important, because rightfully so, if its that important it shouldn't be hidden in the first place. Both examples are correct and Google will not prefer one or the other. However, I will say I'd use <span> for the icons rather than <i> because technically it is for "alternate voice or mood" not for icons, even through Bootstrap, Font Awesome use it. – Simon Hayter Jul 25 '15 at 16:14
2

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/10446 https://support.google.com/webmasters/answer/66353

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.