WordPressサイトのHTMLでARIAを使用する方法

公開: 2019-06-29

Web開発の主な目標の1つは、魅力的なユーザーエクスペリエンスを作成することです。多くの場合、Webサイトにインタラクティブな機能と見事な視覚要素を含めることでこれを行います。ただし、これらの側面は、すべての潜在的な訪問者、特にスクリーンリーダーに依存している訪問者が必ずしもアクセスできるとは限りません。

幸いなことに、すべてのユーザーがあなたのハードワークの結果を体験できるようにするためのシステムがあります。アクセス可能なリッチインターネットアプリケーション（ARIA）をサイトのHTMLに組み込むには、少し余分な労力が必要であり、大きな見返りが得られる可能性があります。この投稿では、ARIAとその使用方法を紹介します。さあ行こう！

ARIAの紹介：それは何であり、なぜあなたはそれを使いたいと思うかもしれません

つまり、ARIAは、HTMLの属性を指定して、スクリーンリーダーがそれらを正確に識別し、訪問者に中継できるようにする方法です。これは、アクセシブルなWeb開発の重要な側面であり、スクリーンリーダーユーザーにとってより正確なエクスペリエンスを作成するのに役立ちます。

これは、HTMLにARIAを組み込むと、ブラウザがスクリーンリーダー用にWebページを変更する方法に影響を与えるためです。この変更されたコンテンツはアクセシビリティツリーに表示され、ARIAはHTML要素をそのツリーに変換するタスクを引き受けます。

たとえば、チェックボックスのあるページがあり、HTMLでARIAを使用したとします。 ARIAは、ページにチェックボックスがあることをユーザーに通知するようにスクリーンリーダーに指示し、チェックされているかどうかを示します。ネイティブHTMLはそれ自体でこれを行うことはできません。

仕事だけでなく、日常生活でもWebを使用する頻度を考えてみてください。ここで、Webの大部分が使用できなくなった場合を想像してみてください。教育、雇用、医療、情報、コミュニケーション、さらには娯楽のためのより少ないリソースにアクセスできるようになります。

アクセシブルなWeb開発のベストプラクティスを使用することは、年齢や能力に関係なく、インターネットをすべての人にとって平等な機会の場所にするための1つの方法です。これは国連によって基本的人権と見なされており、それ自体のメリットのために追求する価値のある目標です。

ただし、それだけではARIAの使用に投資するのに十分でない場合は、アクセシブルな開発もビジネスの観点からも役立つことに注意してください。これは、検索エンジン最適化のベストプラクティスと重複し、Webサイトのリーチを拡大します。さらに、場合によっては、法律で義務付けられています。言い換えれば、あなたのサイトをよりアクセスしやすくするためにいくつかの簡単なステップを踏む理由はたくさんあります。

WordPressサイトのHTMLでARIAを使用する方法（3つの重要なプラクティス）

この投稿の範囲を超えて、ARIAとWebアクセシビリティについて引き続き教育することを強くお勧めします。特に、サイトの現在のアクセシビリティをテストすることを検討することをお勧めします。

そうは言っても、WordPressサイトのHTMLでARIAの使用を開始するために知っておく必要があることは実際には3つだけです。以下の実践を学ぶことはあなたに確固たる基盤を提供するはずです。

1.セマンティックHTMLでのARIAの使用

ARIAをHTMLに適用する方法について説明する前に、ARIAを使用するのが適切な場合に注意することが重要です。ネイティブHTMLだけではアクセシブルなWebコンテンツを作成できませんが、ARIAを不要にするか、正しく使用しないとARIAと競合するセマンティック要素がいくつかあります。

<header> 、 <figure> 、 <nav>などのセマンティック要素は、HTMLの目的を説明します。セマンティックHTMLはすでに要素の役割を暗示しているため、これらの要素にARIAを組み込むことは冗長になります（ARIAの役割については後で詳しく説明します）。

さらに、開発者がセマンティックHTMLと競合する方法でARIAを使用することを防ぐために、ARIAの使用に適用される特定のルールがあります。 World Wide Web Consortium（W3C）には、どのセマンティックHTML要素がARIAの役割を暗示しているかを分類する便利な表があります。

ARIA forHTMLのルールを説明する表。

最初の列はHTML要素を指定し、2番目の列は暗黙の役割をリストします。要素に暗黙の役割がリストされている場合は、その要素に追加のARIA役割を含める必要はありません。 3番目の列は、ベストプラクティスに従って、各HTML要素が持つことができる役割を示しています。

2.HTMLタグへの役割の追加

作業中のHTML要素でARIAを使用する必要があることを確認したら、「ロール」と「属性」の使用にジャンプできます。前のセクションから、ARIAの役割が何をするのかをすでに理解しているかもしれません。タグ内に含まれる要素のタイプを指定し、要素の目的を示します。

したがって、たとえば、更新をインストールする必要があることをユーザーに通知するアラートを作成する場合は、次のような「アラート」ロールを使用します。

 <div role = "alert">
<p>最新のアップデートをインストールしてください！</ p>
</ div>

前に説明したように、要素がセマンティックであり、その役割を暗示する場合は、役割を割り当てる必要はありません。また、暗黙の役割と競合する要素に新しい役割を割り当てる必要はありません。ただし、各要素に適用できる役割は1つだけであることに注意してください。

このように考えてください–役割は要素が何であるかを定義します。要素を同時に2つにすることはできないため、要素を最もよく表す役割を選択する必要があります。とはいえ、必要に応じて、別の役割を持つ要素内に1つの要素をネストすることを選択できます。

たとえば、上記のアラートをヘッダーに追加する場合は、次のようになります。

 <header> <div role = "alert">
<p>最新のアップデートをインストールしてください！</ p>
</ div> </ header>

これにより、単一の要素がヘッダーとアラートの両方であると述べるのではなく、ヘッダー内にアラートが含まれていることが明確になります。

3.メモの状態とプロパティに属性を含める

属性は、ARIAを構成する2番目の要素です。それらは、特定の要素が何であるかを定義するのではなく、特定の要素について重要なことをスクリーンリーダーに伝えるという点で役割とは異なります。 ARIA属性には次の2つのタイプがあります。

変更される可能性が彼らとするとき、ユーザーが相互作用している機能についての米国シェア情報。たとえば、これにはチェックボックスやラジオボタンが含まれる場合があります。
プロパティは、使用中に変更される可能性が低い機能を示します。別の要素にラベルを付ける要素、または要素が配置されている階層レベルは、どちらもプロパティです。

どちらも、常にaria-で始まり、その後に使用されている特定の状態またはプロパティが続くため、簡単に見つけることができます。たとえば、次の例のように、チェックボックスがデフォルトで入力されていることをスクリーンリーダーに通知するために使用される状態は、 aria-checkedです。

 <span role = "checkbox" 
aria-checked = "true"
tabindex = "0">
</ span>

同様に、ある要素が別の要素にラベルを付けているときに注意するために使用されるプロパティは、 aria-labelledbyです。 たとえば、この属性を画像に適用して、それに関連付けられたキャプションを示すことができます。

 <figure aria-labelledby = "operahouse_1" role = "group">
<img src = "operahousesteps.jpg" alt = "シドニーオペラハウス">
<figcaption>ここでオペラ<cite>セビリアの理髪師</ cite>を見ました！</ figcaption>
</ figure>

使用できる属性の例をさらに確認するには、W3Cの許可された役割、状態、およびプロパティのリストを参照することをお勧めします。

結論

Web開発に関しては、アクセシブルなコンテンツを作成することが最初に頭に浮かぶことではないかもしれません。ただし、Webアクセシビリティのベストプラクティスに従い、ARIA HTMLをサイトに組み込むことで、すべての人がWebを利用できるようにする役割を果たすことができます。

WordPressサイトでARIAを使用するための3つの重要なプラクティスは次のとおりです。

セマンティックHTMLでARIAを使用する。
HTMLタグへの役割の追加。
状態とプロパティに注意するための属性を含みます。

WordPressサイトでのARIAの使用について質問がありますか？ 以下のコメントセクションでお知らせください！

記事サムネイル画像EgudinKa / shutterstock.com