インターネットは常に「フリーサイズ」ではありません。毎日、アクセスできない Web デザインにより、障害者コミュニティの何十億人もの人々が簡単なオンライン体験を妨げられています。
視覚障害、学習困難、難聴などを持つ人々にとって、あらゆる URL の背後には多数の固有の課題が待っています。しかし、障害者に優しいサイトを構築するのは、思っているよりもはるかに簡単です。
[slug="署名方法" も参照してください]
ローレンス・ベリー、英国を拠点とするデザインおよびテクノロジー組織のデザイナー未来政府誰も持っています広範囲にわたって書かれたアクセシブルな Web デザインについて、ユーザーフレンドリーなサイトを構築する最も簡単な方法は、その主要な障害を把握することだと述べています。
「これは非常に明白に聞こえますが、障害のある人々がウェブ上で直面する問題を理解することが、アクセシブルな製品を構築するための鍵です」と彼は Mashable との電子メールインタビューで述べています。
知ることが戦いの半分ですが、より包括的な Web エクスペリエンスに必要な変更を実装するのは困難に思えるかもしれません。ただし、障害のある人が Web サイトにアクセスできない場合は、自分自身を傷つけることになります。
「厳密に商業的な観点からだけ考えれば、サイトが障害のあるユーザーを考慮していない場合、市場の大きな部分を逃すことになります」と、視覚障害者登録を行っている技術者でデザイン専門家のサンディ・ワスマー氏は言う。によると、世界で約 10 億人が障害を抱えて暮らしています。国連。それは確かにかなりの量です。
ワスマー氏は、障害を持って生まれた人々に加えて、注意すべき別のユーザーグループ、つまり高齢化人口について指摘しています。
「感覚の鋭敏さの低下、認知負荷を処理する能力、細かい運動能力など、老化に伴う自然な兆候のいくつかは、高齢者がテクノロジーとどのように関わるかに影響を与えます」と彼女は言います。
それを念頭に置いて、アクセシブルなサイトを作成するために最善を尽くす方法はたくさんあります。ここでは、障害者に優しいサイトを作成する際に実装すべき、簡単で実用的なヒントをいくつか紹介します。
1. altタグを使用します。
Web サイト上の画像の上にマウスを置くと、ポップアップされる小さな単語は alt タグと呼ばれます。視覚障害があり、スクリーン リーダー (Web サイト上のテキストを読み上げるソフトウェア プログラム) を使用している人にとって、alt タグは読み上げられ、ユーザーが画像が何であるかを知る唯一の方法です。
alt タグを真剣に受け止め、画像を正確かつ簡潔に説明する機会として使用してください。人物の写真の場合は、その人の名前を書きます。それがオブジェクトの場合は、それを説明するためにいくつかの単語を使用します (たとえば、レンガの山の写真の場合は、代替テキスト「レンガの山」を使用します)。
2. 字幕とトランスクリプトを作成します。
Web コンテンツに定期的にビデオが含まれる場合、特に独自のビデオ コンテンツの大部分を制作している場合は、字幕を付けるようにしてください。などの人気のあるビデオホスティングサイトYouTubeユーザーがクリップに字幕を追加できるツールがあります。
ビデオの文字起こしをオンラインで公開することも、ユーザーにとって非常に役立つリソースです。
3. 略語にはピリオドを入れます。
HTML で何かを省略する場合は、各文字の間にピリオドを入れます。たとえば、中央情報局に言及している場合は、CIA ではなく CIA と書きます。スクリーン リーダーはピリオドのない略語を認識せず、単語として音声的に読み上げます (CIA は「cia」と読み上げられます)。
4. リンクについて説明します。
投稿にリンクを埋め込む場合、単に読者に「ここをクリックしてください」と伝えるよりも、リンクについて説明した方が便利です。たとえば、「テクノロジーについて詳しく知りたい場合は、次のことを確認してください」と書き出したほうがよいでしょう。Mashable のテクノロジー チャンネル「テクノロジーについてもっと学ぶには、ここをクリック。」
可能な限り、リンクに下線を引くか、ハイパーリンク テキストと通常のテキストの間に色のコントラストがあることを確認してください。そうすることで、色覚異常のあるユーザーは、カーソルをリンク上に移動することなく、リンクをすぐに見つけることができます。
5. カラーコントロールを活用する。
クレジット: Peter Talke Photography
賢い色の選択を実践することは、あらゆる種類の閲覧者がいる Web サイトにとって役立ちます。派手な色の組み合わせを避け、黄色、青、緑を互いに近づけて使用することに注意してください (これは色盲のユーザーにとって特に困難です)。ほとんどの読者が読みやすいため、白の背景に黒のテキストを使用するのが一般的な最良の方法です。
6. クリック可能にする。
運動に問題があるユーザーにとって、クリック可能な小さな範囲内で小さなアイテムをクリックするのは難しい場合があります。それは、ダーツのゲームをプレイするたびに的を釘付けにしようとするようなものです。クリック可能な項目の範囲を広くして、ユーザーが項目の一般領域内でその項目をクリックできるようにします。
これをコードで作成する方法については、次のような利用可能なガイドがたくさんあります。このハウツーウェブクレディブルより。
7. コピーはシンプルにしてください。
このヒントはどの視聴者にも役立ちますが、高齢の視聴者や学習障害のある視聴者にとっては不可欠です。 Web サイトに大量のテキストを配置する場合は、テキストを小さな段落に分割します。シンプルで率直な言葉を能動態で使用します。
もちろん、コンテンツによってはこれがすべてのサイトで機能するとは限りませんが、さまざまなページ (「概要」セクションや「履歴」セクションなど) に適用できます。
8. アクセシビリティガイドを含めます。
クレジット: BBC
サイトを障害者に優しいものにするために最善を尽くしている場合は、サイトにアクセスできるすべての方法を説明するセクションを含めてください。あるいは、ユーザーが自分のコンピュータに実装できるヒントやコツに関するガイドを投稿することもできます。この良い例は BBC にあります。セクション全体アクセシビリティに専念しています。
「アクセシビリティのためのさまざまなツールを提供するのではなく、コンピューターやブラウザーの設定や機能を最大限に活用する方法に関する情報を提供します」とベリー氏は言います。アクセス可能な主流サイトに関して言えば、ベリー氏は BBC がいかにユーザーフレンドリーであるかに「感銘を受けている」と述べています。
BBC は複数のセクションに分かれており、「よく見えない」、「目が見えない」、「言葉が難しい」など、ユーザーの障害に応じたサポートを提供します。ワスマー氏はまた、障害者に優しいサイトの例として BBC を挙げた。
このような網羅的なガイドを作成できる BBC と同じレベルのリソースがない場合でも、アクセシビリティのセールス ポイントをまとめる必要があります。これは、サイトの訪問者にとって強力な用途となります。
9. 聴衆を理解する。
「すべての障害に合わせて一般的に設計することは、不可能ではないにしても、困難です」とワッサーマン氏は言います。 「感覚障害、身体障害、認知障害など、主要な障害のカテゴリー内には非常に幅広いバリエーションがあるため、まずユーザーを理解することが重要です。」
可能な限りアクセシビリティの高いサイトを作ることに情熱を持っているのであれば、障害を持つ人が実際にどのようにオンラインにアクセスしているのかを実際に読んでみてください。
「人々がスクリーン リーダーなどの支援技術を通じてウェブとどのように対話するか、あるいはブラウザをどのようにカスタマイズするかを観察してください」とベリー氏は言います。
自分自身を例として使用することもできます。 Google のようなスクリーン リーダーを無料でダウンロードするChromeVox、支援技術がどのように機能するかを直接学びましょう。この経験は、より障害者に優しい Web サイトをデザインする旅の参考になります。