16

HTML タグに意味を追加するために、data - *を使用しています。実際、私はjquery mobileからこのアプローチを学びました。でも最近、WAI-ARIAに出会いました。ほとんど data- *に似ているようです。これらがどのように異なり、ブラウザの依存関係があるか、誰でも説明できますか?

便利なリンク

WAI-ARIAについて

データについて-*

更新:最後に..両方とも異なります。それらは、いくらか類似した構文を持っています。それは私を混乱させました。@Gajotresの回答を受け入れています。そして 、ARIA ライブのこのyou tube ビデオをご覧ください。このビデオを @Gajotres の回答と一致させてください。

4

2 に答える 2

21

data-* 属性

W3C HTML5 Working Draft には次のように記載されています。

「カスタム データ属性は、名前が文字列 "data-" で始まり、ハイフンの後に少なくとも 1 文字ある名前空間のない属性です...」

これらのカスタム データ属性を使用すると、独自のサイトで実行されるスクリプトとデータを共有するための属性を作成できます。それらは、一般的なソフトウェアによって使用または収集されません。指定できるカスタム データ属性の数に制限はありません。caniuse.com によると、「すべてのブラウザはすでに data-* 属性を使用でき、getAttribute を使用してそれらにアクセスできます。」

優れたサポートのおかげで、カスタム データ属性の多くの例が既に実際に存在しています。Dreamweaver CS5.5 をお持ちの場合は、jQuery Mobile (JQM) アプリケーションを作成できます。jQuery Mobile は、要素、テーマ、およびその他多くのものの役割を識別するために、カスタム データ属性を広範に使用します。JQM ページの例を次に示します。

<div data-role="page" id="page" data-theme="b"> 
    <div data-role="header"> 
        <h1>Header</h1> 
    </div> 
    <div data-role="content">Content</div> 
    <div data-role="footer"> 
        <h4>Footer</h4> 
    </div> 
</div>

role および aria-* 属性

さまざまなブラウジング習慣や身体障害を持つユーザーが Web サイトにアクセスできるように努力している場合は、role 属性と aria-* 属性に気付くでしょう。WAI-ARIA (Accessible Rich Internet Applications) は、動的な Web コンテンツとアプリケーションを定義する方法を提供する方法であり、障害のある人がそれを識別してうまく対話できるようにします。これは、ドキュメントまたはアプリケーションの構造を定義する役割を通じて、またはウィジェットの役割、関係、状態、またはプロパティを定義する aria-* 属性を通じて行われます。

HTML5 アプリケーションをよりアクセシブルにするために、仕様では ARIA の使用が推奨されています。セマンティック HTML5 要素を使用する場合は、対応する役割を設定する必要があります。基本的な構造は次のようになります。

<header id="banner" role="banner"> 
    ... 
</header> 
<nav role="navigation"> 
   ... 
</nav> 
<article id="post" role="main"> 
   ... 
</article> 
<footer role="contentinfo"> 
    ... 
</footer>

コンテンツをよりナビゲートしやすく理解しやすくするための aria-* 属性のホストもあります。aria-labelledby、aria-level、aria-記述者、aria-orientation などはすべて、コンテンツをより認識しやすくします。詳しくは、ARIA の状態とプロパティのページをご覧ください。

結論：

data-* 属性に固執します。現在、それらはより適切にサポートされています。また、古いタイプのカスタム アトリビュートの代わりとして使用する必要があります。また、data-* 属性はデータ ホルダーとして作成され、ARIA および ROLE 属性は読みやすくするために作成されます。

于 2013-01-30T11:43:09.293 に答える
4

HTML属性であることを除いて、それらの間に共通するものはありません。

ARIA属性は仕様で定義されており、ブラウザや支援ソフトウェアなどの関連ソフトウェアによって監視されることになっています。

属性は、data-ページ全体またはサイト全体で必要な目的に使用するために特別に指定されたメカニズムであり、一般的な定義はありません。つまり、これらは「プライベート使用」用であり、基本的にはクライアント側のスクリプト（および場合によってはスタイリングであり、サイト固有の検索エンジンやオーサリングツールでも使用できます）用です。サイトのdata-foo属性は、ユーザー（またはサイト管理者）がその使用法の一貫性を保ち、そのような属性の使用に関する独自の内部ドキュメントを持っている限り、仕様で定義された属性や他の属性と衝突することはありません。

于 2013-01-30T11:32:24.807 に答える