PrimeVueはWCAG 2.1 AAレベルに準拠しています。詳細については、各コンポーネントのアクセシビリティドキュメントを参照してください。
世界保健機関によると、世界の人口の15％は何らかの障害を持っています。その結果、車椅子利用者向けのランプやキャプション付きのマルチメディアなど、あらゆる状況でのアクセシビリティ機能は、誰でもコンテンツを消費できるようにするために非常に重要です。
障害の種類は多様であるため、対象者をよく理解し、作成されたコンテンツとどのように対話するかを知る必要があります。主なカテゴリは4つあります。
失明、低視力、または色覚異常が一般的な視覚障害の種類です。画面拡大鏡と色覚異常モードは通常、ブラウザーの組み込み機能ですが、スクリーンリーダーに依存している人々のために、ページ開発者はコンテンツがリーダーによって読み取り可能であることを確認する必要があります。一般的なリーダーは、NVDA、JAWS、およびChromeVoxです。
難聴または聴力損失は、音を完全にまたは部分的に聞くことができないことを指します。聴覚障害者は補助機器を使用しますが、Webページを操作するときに十分でない場合があります。一般的な実装は、音声付きコンテンツのテキストによる代替、トランスクリプト、およびキャプションを提供することです。
運動機能障害のある人は、手足の喪失、麻痺、その他のさまざまな理由により、運動に関連する障害を抱えています。ヘッドポインターのような補助技術は、画面と対話するためのデバイスですが、キーボードやトラックパッドは、マウスを使用できない人々のためのソリューションとして残っています。
認知障害には、学習障害、うつ病、ディスレクシアのある人々を含む幅広い範囲があります。適切に設計されたコンテンツは、障害のない人々にとってもより良いユーザーエクスペリエンスにつながるため、認知障害に対応した設計は、すべてのユーザーにとってより良い設計につながります。
補助技術の助けを借りた正しいページ構造は、アクセシブルなWebコンテンツのコアな要素です。 HTMLはアクセス可能な基盤に基づいており、フォームコントロールはデフォルトでキーボードで使用でき、セマンティックHTMLはスクリーンリーダーで処理しやすくなっています。
WCAGは、Web Content Accessibility Guidelineを指し、W3C（World Wide Web Consortium）のWAI（Web Accessibility Initiative）が管理する標準です。 WCAGは、Webコンテンツをよりアクセスしやすくするための推奨事項で構成されています。 PrimeVueコンポーネントは、近い将来、高いレベルのWCAG準拠を目指しています。
世界中のさまざまな国も、Webアクセシビリティに関する政府の方針を持っています。これらの最もよく知られているのは、米国のSection 508と、欧州連合のWeb Accessibility Directiveです。
ネイティブのフォーム要素は、プレゼンテーションなど他の目的のために使用される要素の代わりに優先される必要があります。例として、以下のボタンはブラウザーによってフォームコントロールとしてレンダリングされ、タブキーでフォーカスを受け取り、スペースキーでもトリガーできます。
<button @click="onButtonClick(event)">Click</button>
一方、divを使用した派手なcssベースのボタンには、キーボードやスクリーンリーダーのサポートがありません。
<div class="fancy-button" @click="onButtonClick(event)">Click</div>
キーボードサポートを戻すためにkeydownを使用することに加えて、div要素をアクセス可能にするには、tabindexが必要です。オーバーロードを回避し、ブラウザーによってすでに提供されている機能を実装するために、ネイティブのフォームコントロールを優先する必要があります。
<div class="fancy-button" @click="onClick(event)" @keydown="onKeyDown(event)" tabindex="0">Click</div>
フォームコンポーネントは、フォーム要素が何に使用されているかを説明する別の要素に関連付けられている必要があります。これは通常、label要素で実現されます。
<label for="myinput">Username:</label>
<input id="myinput" type="text" name="username" />
HTMLは、スクリーンリーダーが認識しているWebページ上のコンテンツを整理するためのさまざまな要素を提供します。セマンティックHTMLを適切なセマンティクスのために優先すると、クラス付きの通常のdiv要素を使用した場合に不可能な、すぐに使用できるリーダーのサポートが提供されます。リーダーにとってはあまり意味のない次の例を考えてみてください。
<div class="header">
<div class="header-text">Header</div>
</div>
<div class="nav"></div>
<div class="main">
<div class="content">
</div>
<div class="sidebar">
</div>
</div>
<div class="footer">
</div>
同じレイアウトは、組み込みのスクリーンリーダーサポートを備えたセマンティック要素を使用して実現できます。
<header>
<h1>Header</h1>
</header>
<nav></nav>
<main>
<article></article>
<aside></aside>
</main>
<footer>
</footer>
ARIAは「Accessible Rich Internet Applications」を指し、セマンティックHTMLが不十分なギャップを埋めるためのスイートです。これらのケースは主に、リッチUIコンポーネント/ウィジェットに関連しています。日付ピッカーやカラーピッカーなどのリッチUIコンポーネントに対するブラウザーのサポートは過去数年間で改善されましたが、多くのWeb開発者は、PrimeVueのような他のプロジェクトによって作成された、または標準HTML要素から派生したUIコンポーネントを引き続き利用しています。これらのタイプのコンポーネントは、キーボードとスクリーンリーダーのサポートを提供する必要があります。後者のケースでは、WAI-ARIAが使用されます。
ARIAは、役割、プロパティ、および属性で構成されています。 役割は、要素が主に何に使用されるかを定義します。たとえば、checkbox、dialog、tablistなどです。一方、状態とプロパティは、aria-checked、aria-disabledなどの要素のメタデータを定義します。
ネイティブチェックボックスの次のケースを検討してください。キーボードとスクリーンリーダーのサポートが組み込まれています。
<input type="checkbox" value="Prime" name="ui" checked>
CSSアニメーションを使用した派手なチェックボックスは、より魅力的に見えるかもしれませんが、アクセシビリティが不足している可能性があります。以下のチェックボックスは、チェックされたフォントアイコンをアニメーションで表示する場合がありますが、タブ移動できず、スペースキーでチェックできず、リーダーで読み取ることができません。
<div class="fancy-checkbox">
<i class="checked-icon" v-if="checked"></i>
</div>
1つの代替案は、リーダーにARIAロールを使用し、キーボードサポートにjavascriptを使用することです。 for付きのlabelタグの代わりに、aria-labelledbyの使用法に注意してください。
<span id="chk-label">Remember Me</span>
<div class="fancy-checkbox" role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk-label"
@click="toggle" @keydown="onKeyDown(event)">
<i class="checked-icon" v-if="checked"></i>
</div>
ただし、ベストプラクティスは、アクセシビリティのためにセマンティックHTMLを組み合わせ、UXのためにデザインを維持することです。このアプローチでは、アクセシビリティのためにネイティブチェックボックスを非表示にし、javascriptイベントを使用してその状態を更新します。ユーザーには非表示だがスクリーンリーダーには非表示にならない要素を非表示にするp-hidden-accessibleの使用に注意してください。
<label for="chkbox">Remember Me</label>
<div class="fancy-checkbox" @click="toggle">
<input class="p-hidden-accessible" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals"
@keydown="onKeyDown(event)">
<i class="checked-icon" v-if="checked"></i>
</div>
動作するサンプルは、タブ移動可能で、キーボードでアクセス可能で、スクリーンリーダーに準拠しているPrimeVueチェックボックスです。 ARIAロールの代わりに、非表示のネイティブチェックボックスに依存しています。
Webページの色は、少なくとも4.5：1のコントラスト比を目指し、振動を引き起こさない色の選択を検討する必要があります。
背景と前景のコンテンツ間の色のコントラストは、読みやすさを確保するのに十分である必要があります。以下の例は、適切なサンプルと不適切なサンプルを示す2つのケースを示しています。
色の振動は、互いに視認性の低い色を選択するために、動きの錯覚につながります。色の組み合わせは、振動を避けるために慎重に選択する必要があります。
彩度の高い色は、目の疲れを引き起こすため、ダークデザインスキームで使用する場合は避ける必要があります。代わりに、彩度の低い色を優先する必要があります。