HTMLでARIAを使用するためのルール

Web Accessibility InitiativeのAccessible Rich Internet Applications Suite（WAI-ARIA、または単にARIA）は、Webコンテンツとアプリケーションをよりアクセスしやすくするためのツールとガイドラインのセットです。

特に、支援技術を使用して読み取ることができるセマンティック情報をHTML要素に追加できる属性のセットが含まれています。

ARIAは非常に便利ですが、どのようにいつ使用するかに注意する必要があります。 HTMLでARIAを使用する際に考慮すべき5つのルールを以下に示します。

1. ARIAを支持してセマンティックHTMLを使用する

意味と動作が埋め込まれたネイティブのHTML要素または属性を使用できる場合は、ARIAの役割、状態、またはプロパティを追加して利用可能にする代わりに、それを使用します。

ルール1-これが必要でない場合は、ARIAを使用しないでください。 HTML5は、広範囲のセマンティック要素を提供します。

したがって、可能な限り、ARIA属性ではなく、セマンティックHTML要素を使用する必要があります。

<div>



要素を作成してARIAロールを追加する代わりに：

 <div role="button">Click Me</div>  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

<button>



要素を使用する必要があり<button>



。

 <button>Click Me</button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2. ARIAロールを持つセマンティック要素の値を変更しないでください

必要ない場合は、要素のネイティブセマンティクスを変更しないでください。

すでに気づいたように、多くのセマンティックHTML要素には独自の意味があります。 たとえば、 <button>



を使用すると、ユーザーエージェントに対話要素（マウスクリック、Enterキーまたはスペースバーで対話できる）であることを通知し、ページ上で何らかのアクションをトリガーします。 一方、 <a>



要素を使用する場合、これはユーザーエージェントに対して、そのような要素との対話型の対話（キーをクリックまたはキーを押すことによる）がユーザーを別のページまたは同じページの別の部分に誘導することを示します。

 <h1 role="button">Heading Button</h1>  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要素のセマンティック値をオーバーライドする代わりに、対応する要素を使用する必要があります。

 <h1><button>Heading Button</button></h1>  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、最後の手段として、そのような意味を持たない要素にARIAロールを追加できます。

 <h1><span role="button">Heading Button</span></h1>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3. ARIA Interactive Elementsはすべての環境で利用可能でなければなりません

すべてのARIAインタラクティブコントロールはキーボードフレンドリーでなければなりません。

要素でARIAロールを使用して、そのロールを本当に変更するだけでは不十分です。 たとえば、 <div>



を<buton>



に変更しようとすると、ボタンに適したインタラクション機能を手動で追加する必要があります。

ARIAマニュアルには、各要素に必要な機能のリストがあります。 たとえば、このボタンは次の要件を満たす必要があります。

• カーソルでクリックできる必要があります
• Enterキーでクリックできる必要があります
• スペースバーでクリックできる必要があります

ARIAロールを使用する場合、これらの要件を考慮する必要があります。 ボタンに似た要素を作成しても、ボタンにはなりません。 すべての環境のユーザーが要素と対話する方法を考慮する必要があります。

4.表示可能なフォーカス可能な要素に適切なロールを使用します。

表示可能なフォーカス可能な要素では、 role="presentation"



またはaria-hidden="true"



を使用しないでください。

ARIA属性role="presentation"



は、要素が視覚的な相互作用を目的としており、インタラクティブではないことを意味します。 aria-hidden="true"



属性は、要素が表示されるべきではないことを示します。 これらの属性を使用する場合、どの要素に適用されるか、およびこれらの要素が表示されインタラクティブかどうかを知る必要があります。 たとえば、これらのボタンは両方とも、一部のユーザーに、存在しないアイテムに焦点を合わせます。

 <button role="presentation">Click Me</button> <button aria-hidden="true">Click Me</button>  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらの属性は、対話型または非表示ではない要素にのみ適用する必要があります。

 <button role="presentation" tabindex="-1">Don't Click Me</button> <button aria-hidden="true" style="display: none;">Don't Click Me</button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

5.インタラクティブ要素には、アクセス可能な説明が必要です。

すべてのインタラクティブ要素には、アクセス可能な説明が必要です。

ボタンやリンクなど、やり取りできる要素には「アクセス可能な説明」が必要です。

アクセス可能な説明-ユーザーインターフェイス要素の名前。

これを例として[OK]ボタンで説明するのは非常に簡単です。 「OK」というテキストは、アクセス可能な説明（アクセス可能な名前）です。 （コメント翻訳者）

アイテムの利用可能な説明は、アイテムのタイプに応じて示される場合があります。 フォーム内の入力は、原則として、それぞれのラベルから利用可能な説明を取得します。

（ 詳細 ）。

 <label> Username <input type="text"> </label> <label for="password">Password</label> <input type="password" id="password">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ボタンやリンクなどの他の要素は、コンテンツまたはラベル属性からアクセシビリティの説明を取得できます（ 詳細 ）。