1

HTML5 の data-* 属性に基づいてコンテンツのスタイルを設定するのは悪い習慣だと読んだことがあります。

html5doctor.com からの引用:

特定のデータ属性の有無は、スタイリングの CSS フックとして使用しないでください。そうすることで、保存しているデータがユーザーにとってすぐに重要であり、よりセマンティックでアクセスしやすい方法でマークアップする必要があることが示唆されます。

誰かがこの声明にもう少し光を当てたり、これがユーザーエクスペリエンスに悪影響を与える可能性がある理由の例を挙げたりできますか?

非常に基本的な例として、data-attribute-error="404"スクリプトにフィードバックを提供するために on 要素を使用しているとします。補足的なスタイリングのために各要素に 、 などのクラスを追加する必要error-404はerror-500ありません。

.error { color: red; }
.error[data-attribute-error]:after { content: attr(data-attribute-error); }
.error[data-attribute-error=404] { color: grey; }
.error[data-attribute-error=404]:after { color: red; }
/* etc */

これはおそらく最良の例ではなく、ブラウザーのサポートについては心配していません。全体的な概念をよりよく理解しようとしています。

CSS3 とカスタム属性を使用して、コンテンツに基づいてスタイルを設定し、コンテンツに基づかない純粋なスタイリングを処理するために「実際の」クラスをより一般的に保ちながら、多くのクールなことができるようです。

これは特定の状況で無視できる単なる一般的なガイドラインですか、それとも恐ろしいクライアント側の罪ですか?

ありがとう！

4

1 に答える 1

0

基本的に彼らが提案しているのは、エラーメッセージ、ステータス、または番号がユーザーに提示するのに十分重要である場合、アクセス可能な方法で提示する必要があるということです. WCAG ガイドライン 1.4.1には次のように書かれています。

色の使用: 色は、情報を伝達したり、アクションを示したり、反応を促したり、視覚要素を区別したりするための唯一の視覚的手段として使用されていません。(レベルA)

もう 1 つ注意すべき点は、CSS によって作成されたコンテンツは、スクリーン リーダーやその他の支援技術では利用できないことです。

于 2012-03-16T00:47:57.697 に答える