web-dev-qa-db-ja.com

SEO-aria-label vs .sr-only

SEOの目的のために、私は目に見えないコンテンツは目に見えるものよりも重みが少ないことを読みました。そのため、Twitter Bootstrapの.sr-onlyクラスを使用すると、もちろん最悪の場合、ブラックハットSEOとして扱うことができます。

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

したがって、aria-labelを使用できますが、 WAI-ARIAページ では次のように読むことができます。

WAI-ARIAはこれらのオブジェクトのアクセシビリティを向上させることができますが、ユーザーエージェントがオブジェクトをネイティブに処理できるようにすることでアクセシビリティが最適に提供されます。

私の意見では、これはユーザーエージェントによってネイティブにメッセージを処理できる.sr-onlyクラスに適合します。では、HTML aria-label要素の場合のように、SEO（およびもちろんアクセシビリティの目的）、.sr-only、または<button>クラスにまたがる方が良いでしょうか？例：

<button>
    <i class="add-icon" aria-hidden="true"></i>
    <span class="sr-only">Add item</span>
</button>

または

<button aria-label="Add item">
    <i class="add-icon" aria-hidden="true"></i>
<button>
seohtml5accessibilityhidden-textbootstrap
4
Radek Anuszewski

この質問は興味深いものですが、GoogleがFlashを読むことができるかどうかについて人々が議論したときの思い出を思い出させます。また、フラッシュのテキストが-ここでお聞きしたように-表示されている場合、または（ブラックハット）コンテンツを追加するためのテクニックとして表示される可能性がある場合。 Flashストーリーの答えは、「Googleはすべてを読む」というものでした。また、コンテンツに役立つスクリーンリーダー（など）用に作成されたTEXTは、コンテンツの品質に対する献身のしるしであり、私の見解では、リスクではありません。

これは...チェック： https://github.com/twbs/bootstrap/issues/10446https://support.google.com/webmasters/answer/6635 =

2
Michael