🗂️ Design Materials：アクセシビリティ・ガイドライン：エンジニアのためのチェックリスト

2022年3月15日 09:42

このチェックリストを使用して、プロジェクトでの役割や段階に関係なく、プロセスにアクセシビリティを組み込むことができます。

プロジェクトに適用されるガイドラインのチェックボックスをオンにします。
チェックリストをプレビューしてクリップボードにコピーします。
チェックリストをドキュメント、クリックアップ、Slack、Trelloなどのマネージメントソフトに貼り付けます。それ以外の場合は、チームがプロジェクトを編成します。

エンジニア

□ コンテンツに適切なHTML要素を使用する

HTML要素は、含まれているコンテンツの種類と、ブラウザがそのコンテンツをレンダリングまたは処理する方法をブラウザに伝えます。アクセシビリティツリーは、要素とその構造に関する仮定に基づいて構築されています。これは、スクリーンリーダーを強化するブラウザ機能です。現在のコンテキストに適した要素を選択することは、エクスペリエンスの優れた基盤を作成するための簡単な方法です。

出典：WebAIM

□ キーボードナビゲーションをサポート

ブラウザは、リンク、フォーム、ボタン要素を介したタブ移動をサポートしています。これはページ内を移動する簡単な方法ですが、誤ってこの機能を妨げることは非常に簡単です。実際にHTMLを並べ替えるのではなく、CSSを使用して要素を移動します。ボタン要素を使用する代わりに（JavaScriptを使用して）ボタンを偽造するか、tabindex =”-1”を介してタブを無効にすることにより、タブフローから要素を非表示にします。フォーム要素を（タブ付きインターフェイスで）非表示にしますが、タブフローから削除しません（非表示のフォーム要素にフォーカスできるようにします）。

出典：WebAIM

□ HTMLランドマークを理解して使用する

支援機器を使用する人々は、コンテンツを直線的に閲覧したくない場合があります。代わりに、アウトラインビュー（マークアップから生成）を使用して、現在のニーズに関連するコンテンツを見つけることを好みます。メイン、フォーム、ナビゲーションなどのこれらのランドマークは、ユーザーが探したい特定の領域を定義するのに役立ち、時間を大幅に節約できます。

出典：A List Apart

□ 画像に適した代替テキストを書きましょう。

視力の弱いユーザーは、話すブラウザを使用してWebを「読み取る」ことがよくあります。これらの専用ブラウザは、ユーザーがサイト上の単語を聞くことができるように、テキストを音声に変換します。話しているブラウザが画像に到達すると、読み上げ可能な代替テキストを探します。何も見つからない場合は、「画像」とだけ表示されることが多く、画像が何であるか、ストーリーにとってどのように重要であるかについて、ユーザーは暗闇にさらされます。

代替テキストを「写真」のように設定するだけでなく、画像で何が起こっているかを説明するすべての要素を説明します

テキストの画像を使用する必要がある場合は、関連する場合はデザインと、画像内のすべての単語を必ず説明してください。

出典：WebAim: The Basics of Good Alt Text

□ ユーザーが自分のいる場所をナビゲートして理解できるように、フォーカス状態をデザインします。

デザインがフォーカス状態を積極的に隠してはいけません。人々がキーボードを使用してナビゲートする場合、製品には非常に目立つフォーカス状態が含まれている必要があります。

出典： W3C

□ ユーザーが入力を理解し、間違いを回避して修正できるようにします。

フォーカスが入力内にある場合、ラベルが完全に消えることはありません。ユーザーは、入力する内容について常に明確な指示を持っている必要があります。エラーとエラーの修正方法を説明するエラーメッセージをテキストで入力します。エラーを示すために色だけに頼らないでください。

出典：W3C

□ ユーザーが自分のいる場所をナビゲートして理解できるように、フォーカス状態を設計します。

出典：W3C

□ ユーザーが入力を理解し、間違いを回避して修正できるようにします。

出典：W3C

□ 該当する場合はARIA属性を使用します。

ARIAはAccessible RichInternet Applicationsの略です。これはオプションですが、動的なエクスペリエンス（通常はJavaScriptによって制御される）を持つHTMLをマークアップする方法を定義するのに役立つ仕様です。

それらを使用する際の目標は、コンテンツがどのように変化するか、またはコンテンツの目的が何であるかをブラウザと支援技術に伝えることです。動的エラーメッセージをスクリーンリーダーに呼び出したり、ボタンを影響を受けるコンテンツにリンクしたり、その他の多くの役立つ状態をコードレベルで表現したりできます。

出典：W3C Guide to Using Aria

□ トップレベルのナビゲーションをスキップしてメインコンテンツにアクセスする方法をユーザーに提供します。

キーボードユーザーの場合、トップレベルのナビゲーションをスキップしてメインコンテンツにアクセスする方法を提供すると便利です。これは通常、ページの上部にあるボタンであり（アクティブな場合にのみ表示できます）、クリックすると、現在のフォーカスがボタンからページのメインコンテンツの上部に移動します。これにより、ユーザーはナビゲーションの多くの要素をタブで移動する必要がなくなります。

出典：WebAIM

□ リンクをわかりやすくしましょう

支援技術は、ページ上のすべてのリンクを見つけてさまざまな形式で表示できますが、「ここをクリック」というテキストだけのリンクの長いリストである場合、これらのリンクはかなり役に立ちません。より良い方法は、ユーザーがクリックした場合にどこに行くかをリンクに記述させ、クリックの反対側に何があるかをユーザーに知らせることです。

出典：Smashing Magazine

□ 疑似要素の画像や図像は避けてください

支援技術は、ユーザーに提示するコンテンツを見つけるためにHTMLに依存しています。 CSSを使用して疑似要素を作成することは可能ですが、現在、ここに画像やアイコンがある場合、代替テキストを提供する方法はありません。

出典：Simply Accessible

□ SVGを支援技術にアクセスできるようにしましょう

SVGは、サイトのインタラクティブ要素のアイコンとしてよく使用されます。この場合、アイコンの情報がプログラムで利用できるように、SVGにはタイトルまたは埋め込みテキスト（視覚的には非表示ですが、支援技術者は利用できます）が必要です。

出典： Sitepoint

□ スクリーンリーダーから装飾要素を非表示にしましょう

分割線、一重引用符、非情報アイコンなどの装飾要素をスクリーンリーダーから非表示にして、ユーザーがページを閲覧するときに関連情報のみを受け取るようにすることができます。これは、要素にaria-hidden =” true”を追加することによって行われます。

出典：W3C

□ ユーザーが情報にアクセスするための代替ルートを作成します。

特定のコンポーネント（SVGマップなど）をアクセス可能なエクスペリエンスにするのは難しい場合があります。そのような場合は、スクリーンリーダーに適した追加のエクスペリエンスを作成することを検討するか、少なくともユーザーにエクスペリエンスを説明してください。

リンクは視覚的に識別可能であり、明確な：focusおよび：active状態を持っている必要があります

アウトラインプロパティは、要素がいつ選択されたか、フォーカスがあるかを示します。これは、マウスを使用する能力がないか、視覚障害のあるユーザーに役立ちます。

出典：WebAIM

□ HTMLドキュメントには言語属性が必要です。

HTML lang属性は、Web上のテキストコンテンツの言語を識別するために使用されます。この情報は、検索エンジンが言語固有の結果を返すのに役立ちます。また、言語プロファイルを切り替えて正しいアクセントと発音を提供するスクリーンリーダーでも使用されます。例えば <html lang = "en">

出典： Paciello Group

上記のセクションでチェックしたすべてのガイドラインは、このプレビューボックスに表示されます。チェックリストをクリップボードにコピーして、チームと共有できる形式に貼り付けます。

ツールのご紹介

これらのツールを使用して、作業にアクセスできるようにしましょう。

[詳細]

ベストプラクティスを確認するためのWCAG2.1ガイドライン
WCAG2.1ガイドライン
製品全体のアクセシビリティを確認するためのWAVE
Webアクセシビリティ評価ツール：Chrome拡張機能
Webアクセシビリティチェッカー
製品全体のアクセシビリティをチェックしよう：Webアクセシビリティチェッカー
コントラスト・アナライザー
色のコントラストを分析するための色のコントラスト・アナライザー
カラーパレット・アクセシビリティ・チェッカー
コントラストを通過するために色の組み合わせを自動的にチェックするカラーパレット・アクセシビリティ・チェッカー
カラー・エクストラクター
CSSですべての色を検索し、カラーパレットアクセシビリティチェッカーにロードするためのカラー・エクストラクター・ブックマークレット
Webアクセシビリティ・チェッカー
製品全体のアクセシビリティをチェックするWebアクセシビリティ・チェッカー
カラーセーフ
アクセス可能なカラーパレットを作成するためのカラーセーフ
カラーオラクル
色覚異常をシミュレートするカラーオラクル
シム・ダルトニズム
色覚異常をシミュレートするシム・ダルトニズム

私も色々勉強中なので、皆さまのご意見・ご感想をお聞かせください。
お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。主にデジタル・プロダクトの制作に携わっています。

この記事が気に入ったらサポートをしてみませんか？