特別なニーズを持つユーザーを考慮して、Webサイトまたはアプリケーションを作成する方法

デジタルコンテンツを作成するために、私たちは平均的なユーザーに焦点を合わせています。 したがって、ロシアの人口のほぼ3分の1は無視されます。これらは、障害者、高齢者、および一時的に特別なニーズを持っている人々です。 前の記事で、 Sberbankでデジタルサービスを適応させるためのアプローチについて説明しました 。

国際障害者の日には、 デジタルアクセシビリティガイドラインを専門家コミュニティと共有することにしました。 この記事では、アクセス可能なインターフェースを設計する際に、マネージャー、デザイナー、開発者を知ることが重要であることがわかります。

管理者向けの一般的な推奨事項

障害を持つユーザーのユーザーエクスペリエンスを想像するには、さまざまな種類の色覚異常 、視力低下、およびその他の障害をシミュレートするプログラムを試してください。 視覚障害者が音声インターフェイスでどのように機能するかをよりよく理解するには、スクリーンアクセスプログラム（ MacOSの VoiceOver、iOSのVoiceOver 、AndroidのTalkBack 、 NVDAまたはWindows用JAWS ）が適しています。

開発プロセスに最初からアクセシビリティを含める：

1. アクセシビリティの要件に基づいてユーザーエクスペリエンスを作成および評価することが重要であることをチームに伝えます。
   
2. 障害のある人のニーズについて、すべての更新と新機能を確認してください。
   
3. 各スプリントは、一般的なエラーをすばやくキャッチするために開発者と自動テストを実施し、カスタムテストと組み合わせてアクセシビリティ要件を達成します。
   
4. 定期的に手動で製品テストを実行します。最終段階で修正はほとんど行われません。
   
5. 製品を少なくとも3週間販売する前に、アクセシビリティの専門家と最終テストを実施してください。
   

デザイナーにすべきこと

デザイナー向けのヒントのリストはもっとたくさんあります。 いくつかのヒントは一般的であり、原則としてインターフェースに役立ちます。

構造要素とページ管理の要件

• ユーザーが重要な情報をすばやく簡単に見つけられるように設計する必要があります。
  
• すべてのコンテンツとデザインは、見出しの論理構造に適合する必要があります。これは、視覚障害のあるユーザーや高齢者を大いに助けます。
  
• ユーザーは、目次、サイトマップ、ページ間のリンク、検索など、いくつかの方法でサイトをナビゲートできる必要があります。
  
• スクリーンリーダーはポップアップオブジェクトではうまく機能しないため、モーダルウィンドウは使用しない方が良いでしょう。
  
• スタイルを正しく使用する必要があります。 レイアウトのレベル1ヘッダーは、コードのH1ヘッダーにする必要があります。 逆に、第1レベルの見出しではないものをH1見出しとしてマークしないでください。
  

また、ページを適切にスケーリングすることにより、あらゆる電子媒体からの読み取りが容易になり、視覚障害のあるコンテンツの認識が容易になります。 この場合の最適なソリューションは、アダプティブレイアウトです。 レイアウトの準備ができたら、チェックを行います。キーボードショートカット「Cmd +」または「Ctrl +」を使用して画面を200％に増やします。


（悪いスケーリングの例）


（スケーリングの良い例）

キーボード制御は、筋骨格系と運動能力に違反している人、およびスクリーンリーダーを使用してインターネットを操作する盲目のユーザーにとって、真の救いです。 キーボードから正しくアクセスするには、次の点を制御する必要があります。

• ユーザーは、Tab、スペース、および矢印キーを使用して、ページ上の任意のインタラクティブ要素を選択してアクティブにできる必要があります。
  
• 視力のあるユーザーにとって、インタラクティブな要素には、フォーカス、ホバー、アクティブ、および訪問済みという視覚的で馴染みのある状態が重要です。
  
• 目の不自由なユーザーの場合、メインコンテンツに移動できる機能が重要です。ナビゲーション要素を含む広告をスキップし、すぐにメイン情報に移動して、不必要なコンテンツの量を減らします。
  
• ユーザーは、要素間のフォーカスが論理的な順序で切り替わることも期待しています。通常、これは左から右、上から下です。
  
• サイトのレイアウトの準備ができたら、Tabキーで確認します。フォーカスがあるキーボードから制御する場合、どこにでも表示されますか？
  

一部のユーザーにとって、アイテムのクリック領域の設定は非常に重要です。 筋骨格系と運動能力の障害を持つ人々がいます。 片手でサイト/アプリケーションを操作するために、小さなリンクやお互いのリンクの近くに立つことは困難です。 そのようなユーザーにインターフェースを提供するには、以下を行う必要があります。

• 大型の携帯電話でも、親指と左手と右手で基本的なコントロールに到達できることを確認してください。
  
• 少なくとも44 CSSピクセルのクリック領域を定義します。 したがって、指先のサイズが約10 mmの平均的な大人に簡単に乗せられます。 多くの場合、アイコンは小さいため、アイコンの周囲の領域を拡大する必要があります。
  
• クリック可能な要素は8ピクセルのスペースで区切ります。
  

サイト/アプリケーションのコンテンツ

サイト上のすべてのテキストは読みやすいはずです。 これのためにできることは次のとおりです。

• 事務職主義、特定の用語、難解な文章を避け、あらゆる種類のターンでいっぱい。
  
• 段落を短くしてみてください-モバイルデバイスで表示しやすくなります。
  
• 可能な限り短い文章を使用してください。
  
• 用語を使用する必要がある場合は、説明してください。 数が多すぎる場合は、用語集をコンパイルします。
  
• 略語または頭字語を初めて使用するときは、それらを解読します。
  
• イディオムを使用しないようにしてください。手話を話す人々や精神障害を持つユーザーは文字通りそれらを使用できます。
  
• キーボードレイアウトとタイプミスを追跡してください。これらが存在するとスクリーンリーダーの作業が非常に複雑になります。
  

テキスト自体の読みやすさに加えて、そのデザインが知覚に役立つことが重要です。 これを行うには：

• 最小コントラスト比が4.5：1であることを確認してください。テキストを拡大する場合、コントラストを3：1に下げることができます。 例外は、ロゴ、装飾的な役割を果たす要素、および非アクティブなコントロールです。
  
• 読みやすいフォントサイズを使用してください。メインテキストの最小サイズは16ピクセルです。
  
• スケールに関係なく読みやすく、選択したサイズで十分に大きく、必要なすべての文字とスタイルをサポートする読みやすいフォントを選択します。パラメーターは、文字形式と互いに混同できない一意の文字に対して一定です。
  

• ユーザーの中には色覚異常の人がいるので、情報を送信するための唯一の視覚媒体として色に頼らないでください。 太字、星、アイコン、タイポグラフィ、テキスト、必須フィールドのマークなどを使用します。
  

グラフィックは、1つのテキストに対応できない場合にのみ使用する必要があります。 その場合、次に：

• すべてのグラフィックに、簡潔でわかりやすい説明を必ず添付してください。
  
• おなじみのアイコンを選択してください-たとえば、情報を削除するためのゴミ箱。
  
• 画像にテキストをオーバーレイするときは、コントラストに注意してください。無地の背景を使用するか、画像を暗くしてください。
  
• データ視覚化の簡単な説明を提供して、ユーザーをコンテキストに引き込みます。
  
• 色覚異常のある人が色を区別できるように、提示されたデータ間に十分なコントラストがあることを確認してください。
  
• テキストとして表現できないコンテンツの代替フォームを作成します。 たとえば、ATM検索は、カードとテーブルまたはリストの両方を介して実装できます。
  
• キャプチャは視覚障害者にとって最大の問題の1つです。 拒否できない場合は、音声など、別の方法で認識してください。
  
• サイトのアニメーション化された要素は、ある種の障害を持つ人々をてんかん発作に導く可能性があるため、デザインに1秒間に3回以上点滅する要素がないことを確認してください。
  

要素、リンク 、および指示 への署名は論理的に正当化される必要があります。たとえば、盲目のユーザーは、特定の状況でそれらが必要な理由と、それらをクリックしたときに何が起こるかを理解します。

• [アカウントの作成]ボタンの名前で、[完了]ボタンとは異なり、ユーザーは次のステップで何が起こるかを明確に理解しています。
  
• クリックしてドキュメントをダウンロードする場合は、それについて直接書いてください。 「ここをクリック」の代わりに、「レポートのダウンロード」を作成します。
  
• リンクは文の一部になるようにテキストに入力する必要があります。 このアプローチは、視覚障害のあるユーザーにとってより便利です。
  
• 聴覚と視覚を持たない人でも指示に従うことができることを確認してください。形状、サイズ、視覚的なレイアウト、または音を参照しないでください。
  

コンテキストヒントは重要な補助機能を実行し、サイト上のフォームに入力する際のエラーの可能性を減らします。 それらがあることを確認してください。 そして忘れないでください：

• すべての入力要素に、フィールドに入力しても表示されたままの明確なラベル名があることを確認します。
  
• 日付、電話、TINなどのデータ形式について事前にユーザーに警告するには、CAPS LOCKが有効になっている場合、このことを思い出してください。
  

• フォームに入力するプロセスでの新しい情報の出現についてユーザーに通知します。
  
• ユーザーがエラーを修正するのに役立つ手順を確認してください。
  

Web開発者のヒント

視覚障害者は、画面に表示されているものを音声で再現する画面アクセス/スクリーンリーダープログラムの助けを借りて、インターフェイスと対話します。 スクリーンリーダーユーザーのインターフェイスの可用性は、主に開発者に依存します。 スクリーンリーダーのカーソルがボタン上にある場合、開発者からのボタン名とオペレーティングシステムからのこの要素のタイプは、音声メッセージ出力ブロックに分類されます。 そのため、目の不自由なユーザーは、この要素が何であり、どのように作業するかを理解しています。

開発者もナビゲーションに関与しているため 、それに関連する推奨事項は次のとおりです。

• ページ間の論理的な移行を提供します。 ページが長時間読み込まれると、サイトの視覚障害者はこれを簡単に理解できますが、視覚障害のあるユーザーは読み込みが進行中であることを警告する必要があります。
  
• 更新または新しいページに移動する場合、フォーカスがすぐに最初の要素（「戻る」ボタンまたはページタイトル）にあることを確認してください。 これにより、目の不自由なユーザーは、ページが更新されたことを知り、自分がどこに来たかを理解できます。
  
• ページがリロードされず、コンテナのコンテンツのみが変更される場合、コンテンツが変更されたことをユーザーに通知する必要があります。
  
• 要素間に論理的なフォーカス遷移を提供します。通常、これは左から右または上から下に切り替わります。
  
• そうしないと、視覚障害者はこのフィールドまたはその署名が参照しているフィールドを理解できないため、ページ上の各要素を分離してください。
  
• リンク上の要素を使用して、ページ上のユーザーをすばやく移動します。
  
• 「メインコンテンツにスキップ」リンクをページヘッダーに追加します。 これにより、ページをすばやく移動できます。 オプションは最初は非表示にすることができますが、フォーカスを当てると表示されるはずです。
  
• HTML5のセマンティックマーカーまたはARIAロールを使用して定義される基本的なランドマーク要素を作成します。
  

論理と構造の質問については、次のとおりです。

• コンテンツの属性（セクション、記事、その他）を使用して、ページのコンテンツを論理ブロックに分割します。
  
• 見出しがページ構造と一致していることを確認してください。
  
• ヘッダーレベルH1〜H6を使用します。最高レベルにはH1、最低レベルにはH6を使用します。 見出しレベルをスキップしないでください。
  
• コンテンツを検索するさまざまな方法を提供します：サイトマップ、サイト検索。
  

すべてのユーザーを快適にするには、次のことが必要です。

• buttonのようなネイティブコントロールを使用してみてください。
  
• スクリーンリーダーユーザーがカスタムインターフェイスコンポーネントにアクセスできることを確認します。
  
• スクリーンリーダーユーザーからのアクションを待機しているインターフェイス要素の要素のタイプ、その状態（値）、名前、およびツールチップをコードで示します。
  
• 要素タイプが正しく定義されているか確認してください。 原則として、ネイティブ要素のタイプはデフォルトで正しく決定されます。カスタムまたはより複雑な要素の場合、タイプは誤って決定される可能性があり、それから独立して決定する必要があります。
  
• 表形式のデータにはテーブルを使用します-スクリーンリーダーで使用できるようになります。
  
• 目が見える人に見える、スクリーンリーダーに価値のあるインターフェース要素に署名します。 要素がスクリーンリーダーの値を表していない場合、ユーザーの「可視性」を無効にする必要があります。 画像のキャプションにより、目の不自由なユーザーは、表示されている内容を理解できます。 コード内の画像の署名は、インターネットの速度が遅いユーザーにとって重要です。
  
• ラベル、タイトル属性、またはaria-labelを使用して入力フィールドを記述します。
  
• ある要素を別の要素のラベルソースとして設定する場合は、属性バインディングと支援技術の特別なクラスに使用します。
  

自動化されたテストは、アクセシビリティエラーを見つけるのに役立ち、ユーザーテストは、特別なニーズを持つ人々のニーズへのインターフェイスの適合性をチェックするのに役立ちます。したがって、これら2つのタイプを組み合わせる必要があります。

クイック自動チェックは、いくつかの方法で実行できます。

• HTML CodeSniffer 、 ax 、 Lighthouse Accessibility Audit、またはWAVEを使用してブラウザーで直接。
  
• ツールax-core 、 Lighthouse Audits 、またはAccessLint.jsをプロジェクトに統合して、プログラムでアクセシビリティテストを追加し、インターフェイスの構築時にエラーをキャッチします。
  
• AccessLintなどのツールを使用して、GitHubを利用しながらアクセシビリティの問題を見つけます。
  

そして、これが視覚障害者向けのユーザーテストアルゴリズムです。

• スクリーンリーダーが要素にぶつかり、ラベル、ヒント、エラーなど、必要なものすべてを発声していることを確認します。
  
• コンテンツが正しい順序で再生されることを確認してください：フィールドへのラベル、コンテンツへのヘッダーなど。
  
• コードが正しい言語を示し、スクリーンリーダーがアクセントなしで単語を発音することを確認します。
  
• ボタンとリンクには、それらをクリックすることでどこにつながるかを理解できる説明があることを確認してください。
  

Webおよびモバイル開発者向けのその他の推奨事項については、デジタルアクセシビリティガイドを参照してください 。

私たちは、聴覚、視覚、運動機能障害、情報の認識が困難な人など、特別なニーズを持つ人にデジタル環境を最大限に適応させたいと考えています。

推奨事項により、特別なニーズを持つ感謝の気持ちのあるユーザーがサイト/アプリケーションのオーディエンスを補充することを願っています。 コメントで質問にお答えします。