なぜ、どのように、いつ、いつセマンティックHTMLとARIAを使用するか

セマンティックHTMLおよびアクセス可能なリッチインターネットアプリケーション（ARIA）は、包括的でパフォーマンスのあるWebインターフェイスを構築するために重要です。コンテンツに本質的なコンテキストを提供し、ブラウザ、検索エンジン、スクリーンリーダー、ユーザーが理解できるようにします。その利点にもかかわらず、多くの開発者はそれらを見落としています。引用されている一般的な理由は、彼らの利点に関する認識の欠如です。

この記事では、セマンティックHTMLとARIAの利点を調査し、セマンティックHTMLの優先順位付けと、最後の手段としてのみARIAの使用を提唱しています。

プレーンテキストから始めてください：問題

要素はページのメインコンテンツを保持します。要素を構築することなく、ブラウザには、見出しや段落などのコンテンツタイプを区別する機能がありません。この例を考えてみましょう。

 <code>A Study of Butterflies Butterflies are little bugs with cute wings. Butterfly Habitats Butterflies live in flower houses and hang out at dank coffeeshops.</code>

この構造の欠如は、いくつかの問題をもたらします：

• パラグラフとは異なる見出しをスタイリングできない。
• 検索エンジンのインデックス作成の障害と発見可能性。
• 支援技術に対するコンテンツの効果的な通信。
• 視覚的なプレゼンテーションが悪い。

で基本構造を追加します<div>s<p>テキストをラッピングします<code><div>要素はわずかな改善を提供します：<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;div&gt;蝶の研究。&lt;/div&gt; &lt;div&gt;蝶はかわいい翼のある小さな虫です。&lt;/div&gt; &lt;div&gt;蝶の生息地&lt;/div&gt; &lt;div&gt;蝶はフラワーハウスに住んでいて、ダンクコーヒーショップでたむろします。&lt;/div&gt;&lt;/code&gt;</pre> <p>ただし、これにはまだ意味の意味がありません。コンテンツのタイプは、支援技術と検索エンジンのために曖昧なままです。</p> <h3 id="CSSのスタイリング-限られたソリューション"> CSSのスタイリング：限られたソリューション</h3> <p>CSSはスタイルできます<code><div>クラスまたはIDを使用した要素、視覚的なプレゼンテーションを強化します。ただし、これは目撃されたユーザーのみに利益をもたらし、他のテクノロジーに意味的な意味を提供しません。<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;div class=&quot;heading1&quot;&gt;蝶の研究&lt;/div&gt; &lt;div class=&quot;paragraph&quot;&gt;蝶はかわいい翼のある小さな虫です。&lt;/div&gt; &lt;div class=&quot;heading2&quot;&gt;蝶の生息地&lt;/div&gt; &lt;div class=&quot;paragraph&quot;&gt;蝶はフラワーハウスに住んでいて、ダンクコーヒーショップでたむろします。&lt;/div&gt;&lt;/code&gt;</pre> <p>このアプローチは壊れやすく、固有のセマンティックな意味がありません。</p> <h3 id="セマンティックHTMLの力">セマンティックHTMLの力</h3> <p>セマンティックHTML要素のようです<code><h1 id="code-h-そして-code-p-固有の意味を提供します-ジェネリックの代わりにこれらの要素を使用します-code-div-Sははるかに優れています-pre-code-h-蝶の研究">、<code><h2> 、 そして<code><p>固有の意味を提供します。ジェネリックの代わりにこれらの要素を使用します<code><div>Sははるかに優れています：<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;h1&gt;蝶の研究&lt;/h1&gt; &lt;p&gt;蝶はかわいい翼のある小さな虫です。&lt;/p&gt; &lt;h2 id=&quot;蝶の生息地&quot;&gt;蝶の生息地&lt;/h2&gt; &lt;p&gt;蝶はフラワーハウスに住んでいて、ダンクコーヒーショップでたむろします。&lt;/p&gt;&lt;/code&gt;</pre> <p>このアプローチは多くの利点を提供します。</p> <ul> <li>デフォルトのブラウザのスタイリングと視覚的なプレゼンテーションの改善。</li> <li>検索エンジンの最適化を強化しました。</li> <li>支援技術による適切な解釈。</li> <li>よりクリーナー、より簡潔なコード。</li> <li> HTMLプロセッサとの将来の互換性。</li> </ul> <h3 id="セマンティックHTMLのさらなる利点">セマンティックHTMLのさらなる利点</h3> <p>セマンティックHTMLには追加の利点があります。たとえば、使用<code><input type="tel">モバイルデバイスに数値キーパッドを提供します。 Safariの読者モードのようなブラウザもセマンティックHTMLの恩恵を受け、よりクリーンな読書体験を提供します。

Aria：必要なサプリメント

ARIA（アクセス可能なリッチインターネットアプリケーション）は、セマンティックHTMLを補完し、支援技術のアクセシビリティを向上させます。 JavaScriptによって操作される動的なコンテンツに特に役立ちます。

たとえば、ARIAを使用してエラーメッセージをフォームフィールドに関連付けることにより、スクリーンリーダーがエラーを正しく発表することが保証されます。

 <code><label for="first-name">First name</label><input type="text" id="first-name" aria-describedby="first-name-error"> <span id="first-name-error" aria-live="assertive">This field is required</span></code>

アリアの誤用を避けます

ARIAを使用して貧弱なセマンティックHTMLを補償することを避けることが重要です。ネイティブのHTML要素（たとえば、チェックボックス）を使用して模倣しようとします<div>SとAriaは、適切なネイティブ要素を使用するよりも過度に複雑で、信頼性が低いです。<h3 id="結論">結論</h3> <p>包括的設計は、すべてのユーザーのアクセシビリティを優先します。セマンティックHTMLは基盤であり、固有の意味を提供し、さまざまなテクノロジーにわたってユーザーエクスペリエンスを改善します。 ARIAは、セマンティックHTMLを補足するために慎重に使用する必要があります。これは、動的インターフェイスの特定のアクセシビリティの課題に対処する必要がありますが、適切なセマンティックマークアップの代替としてはありません。セマンティックHTMLの優先順位付けは、真に包括的なWebエクスペリエンスを作成するための最も効率的で信頼できるパスです。</p> </div>