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 アクセシビリティに関する政府の方針を持っています。最もよく知られているのは、米国のセクション 508 と、欧州連合のWeb アクセシビリティ指令です。
プレゼンテーションなど、他の目的で使用される要素の代わりに、ネイティブフォーム要素を優先する必要があります。例として、以下のボタンはブラウザーによってフォームコントロールとしてレンダリングされ、タブキーでフォーカスを受け取り、スペースキーでもトリガーできます。
<button @click="onButtonClick(event)">Click</button>
一方、div を使用した派手な CSS ベースのボタンには、キーボードやスクリーンリーダーのサポートがありません。
<div class="fancy-button" @click="onButtonClick(event)">Click</div>
tabindex は、キーボードのサポートを復元するために keydown を使用することに加えて、div 要素をアクセス可能にするために必要です。オーバーロードを回避し、ブラウザーによって既に提供されている機能を実装するには、ネイティブフォームコントロールを優先する必要があります。
<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 開発者は、作成した標準 HTML 要素、または 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>
ただし、ベストプラクティスは、UX のデザインを維持しながら、アクセシビリティのためにセマンティック HTML を組み合わせることです。このアプローチでは、アクセシビリティのためにネイティブチェックボックスを非表示にし、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 つのケースを示しています。
色の振動は、互いに視認性の低い色を選択することによって、動きの錯覚を引き起こします。色の組み合わせは、振動を避けるために慎重に選択する必要があります。
彩度の高い色は、目の疲れを引き起こすため、ダークデザインスキームで使用する場合は避ける必要があります。代わりに、彩度の低い色が推奨されます。