アクセシビリティの概要と、それがReact UIコンポーネントにどのように反映されるかについて説明します。
アクセシビリティはPrime UIライブラリ、そしてPrimeReactにおいても重要な懸念事項です。PrimeTekチームは、コンポーネントのアクセシビリティ機能を見直し、強化するための重要なプロセスを開始しました。このガイドでは、PrimeReactが従う一般的なガイドラインの基礎を説明し、各コンポーネントのドキュメントには、キーボードサポート、スクリーンリーダーの互換性、実装の詳細、およびWCAG準拠を達成するためのヒントを記載した別のアクセシビリティセクションがあります。この作業はPrimeVueとPrimeNGで完了しており、現在PrimeReactに移植中で、2023年第4四半期に完了予定です。
世界保健機関によると、世界人口の15％はなんらかの程度で障害を持っています。その結果、車椅子ユーザーのためのスロープやキャプション付きのマルチメディアなど、あらゆるコンテキストにおけるアクセシビリティ機能は、誰もがコンテンツを利用できるようにするために不可欠です。
障害の種類は多様であるため、対象者とその作成したコンテンツとのインタラクション方法をよく理解する必要があります。4つの主要なカテゴリーがあります。
失明、低視力、色覚異常は、一般的な視覚障害です。スクリーンリーダーに依存する人々のために、ページ開発者は、コンテンツがリーダーによって読み取れることを確認する必要があります。一般的なリーダーは NVDA, JAWS そして ChromeVox.
難聴または聴覚障害とは、完全にまたは部分的に音を聞くことができない状態を指します。聴覚障害のある人は補聴器を使用しますが、ウェブページとやり取りする際には不十分な場合があります。一般的な実装としては、音声付きコンテンツにテキスト代替、トランスクリプト、キャプションを提供することが挙げられます。
運動障害のある人は、手足の喪失、麻痺、その他の様々な理由による運動に関する障害を持っています。ヘッドポインターなどの支援技術は画面とやり取りするためのデバイスですが、マウスを使用できない人のためのソリューションとしては、キーボードやトラックパッドが残ります。
認知障害には、学習障害、うつ病、失読症のある人を含む幅広い範囲が含まれます。よく設計されたコンテンツは、障害のない人にとってもより良いユーザーエクスペリエンスにつながるため、認知障害を考慮した設計は、あらゆるユーザーにとってより良い設計につながります。
支援技術を利用した適切なページ構造は、アクセシブルなウェブコンテンツの重要な要素です。HTMLはアクセシブルな基礎に基づいており、フォームコントロールはデフォルトでキーボードから使用でき、セマンティックHTMLはスクリーンリーダーで処理しやすくなっています。
WCAG はWeb Content Accessibility Guideline（ウェブコンテンツアクセシビリティガイドライン）を指し、W3C（World Wide Web Consortium）のWAI（Web Accessibility Initiative）によって管理されている標準です。WCAGは、ウェブコンテンツをよりアクセシブルにするための推奨事項で構成されています。PrimeReactコンポーネントは、近い将来、高度なWCAG準拠を目指しています。
世界各国には、ウェブアクセシビリティに関する政府の方針もあります。最もよく知られているのは、米国のセクション508と 欧州連合のウェブアクセシビリティ指令です。
プレゼンテーションを目的とした要素（例：div）ではなく、ネイティブのフォーム要素を優先する必要があります。たとえば、下のボタンはブラウザによってフォームコントロールとしてレンダリングされ、タブでフォーカスを受け取り、スペースキーでもトリガーできます。
<button onClick={e => console.log(e)}>Click</button>
一方、divを使用した派手なCSSベースのボタンには、キーボードやスクリーンリーダーのサポートがありません。
<div className="fancy-button" onClick={e => console.log(e)}>Click</div>
div要素をアクセシブルにするには、tabIndexが必要であり、キーボードサポートを復元するにはkeydownを使用する必要があります。オーバーロードを避け、ブラウザによって既に提供されている機能を実装することを避けるために、ネイティブのフォームコントロールを優先する必要があります。
<div className="fancy-button" onClick={e => console.log(e)} onKeyDown={e => e.code === 'Space' && console.log(e) } tabIndex="0">Click</div>
フォームコンポーネントは、フォーム要素が何に使用されるかを説明する別の要素に関連付けられている必要があります。これは通常、label要素を使用して実現されます。
<label htmlFor="myinput">Username:</label>
<input id="myinput" type="text" name="username" />
HTMLは、スクリーンリーダーが認識する様々な要素を提供して、ウェブページ上のコンテンツを整理します。優れたセマンティクスを実現するためにセマンティックHTMLを優先すると、クラス付きの通常のdivを使用する場合には不可能な、リーダーのすぐに使えるサポートが提供されます。要素を使用します。リーダーにとってあまり意味のない次の例を考えてみましょう。
<div className="header">
<div className="header-text">Header</div>
</div>
<div className="nav"></div>
<div className="main">
<div className="content">
</div>
<div className="sidebar">
</div>
</div>
<div className="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開発者は、PrimeReactなどの他のプロジェクトによって作成された、標準的なHTML要素から派生したUIコンポーネントを依然として使用しています。これらのタイプのコンポーネントは、キーボードとスクリーンリーダーのサポートを提供する必要があり、後者のケースはWAI-ARIAが使用される場所です。
ARIAは、ロール、プロパティ、属性で構成されます。ロールは、要素が主に何に使用されるかを定義します（例：checkbox、dialog、tablist）。一方、状態とプロパティは、aria-checked、aria-disabledなどの要素のメタデータを定義します。
ネイティブのチェックボックスの例を考えてみましょう。これは、キーボードとスクリーンリーダーのサポートが組み込まれています。
<input type="checkbox" value="Prime" name="ui" checked>
CSSアニメーションを使った派手なチェックボックスは、より魅力的に見えるかもしれませんが、アクセシビリティが不足している可能性があります。下のチェックボックスは、アニメーション付きでチェック済みのフォントアイコンを表示する可能性がありますが、タブで操作できず、スペースキーでチェックできず、リーダーで読むことができません。
<div className="fancy-checkbox">
{checked && <i className="checked-icon"></i>}
</div>
代替案の1つは、リーダーのためにARIAロールを使用し、キーボードサポートにはJavaScriptを使用することです。htmlForの代わりにaria-labelledbyの使用に注目してください。
<span id="chk-label">Remember Me</span>
<div className="fancy-checkbox" role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk-label"
onClick="() => toggle()" onKeyDown="(e) => e.keyCode === 32 && toggle()">
{checked && <i className="checked-icon"></i>}
</div>
しかし、ベストプラクティスは、UXのためのデザインを維持しながら、アクセシビリティのためにセマンティックHTMLを組み合わせることです。このアプローチでは、アクセシビリティのためにネイティブのチェックボックスを非表示にし、JavaScriptイベントを使用してその状態を更新します。ユーザーには表示されませんが、スクリーンリーダーには表示されるp-sr-onlyの使用に注目してください。
<label htmlFor="chkbox">Remember Me</label>
<div className="fancy-checkbox" onClick="() => toggle()">
<input className="p-sr-only" type="checkbox" id="chkbox" onFocus="() => updateParentVisuals()" onBlur="() => updateParentVisuals()"
onKeyDown="(e) => e.keyCode === 32 && updateParentVisuals()">
{checked && <i className="checked-icon"></i>}
</div>
動作するサンプルとして、タブ操作が可能で、キーボードからアクセスでき、スクリーンリーダーにも対応したPrimeReactのチェックボックスがあります。ARIAロールの代わりに、非表示のネイティブチェックボックスを使用しています。
ウェブページの色は、少なくとも4.5:1のコントラスト比を目指し、ちらつきを引き起こさない色の選択を検討する必要があります。
背景と前景コンテンツ間の色のコントラストは、可読性を確保するのに十分なものでなければなりません。以下の例では、良好なサンプルと不良なサンプルの2つのケースを示しています。
色のちらつきは、互いに視認性が低い色を選択することによって、動きの錯覚につながります。ちらつきを避けるために、色の組み合わせは注意深く選択する必要があります。
ダークデザインスキームで使用する場合、彩度の高い色は目の疲れを引き起こすため避けるべきです。代わりに、彩度の低い色を優先する必要があります。