Web開発者向けのアクセシビリティのヒント、コツ、およびリソース

May 09 2022
障害のあるWebユーザーのアクセシビリティは、すべての開発者が作業に含めることが重要です。これはW3CのガイドWeb開発の信条であり、アクセスできないWebサイトが障害のあるユーザーに対する差別の一形態と見なされるかどうかをめぐって法廷闘争が繰り広げられています。

障害のあるWebユーザーのアクセシビリティは、すべての開発者が作業に含めることが重要です。これはW3CのガイドWeb開発の信条であり、アクセスできないWebサイトが障害のあるユーザーに対する差別の一形態と見なされるかどうかをめぐって法廷闘争が繰り広げられています。言うまでもなく、アクセシビリティをあらゆるデザインの最前線に置くケースは間違いなくあります。

アクセシビリティは、特に障害のあるWebユーザーとそのニーズの経験が限られている開発者にとっては、複雑または圧倒的に見える場合があります。それでも、適切なツール、視点、ガイドラインを自由に使用できる限り、アクセス可能なWebコンテンツの作成は思ったよりも簡単なことがよくあります。

この記事では、Webデザインにおけるアクセシビリティの一般的な理解について簡単に説明します。また、アクセシブルな開発におけるいくつかの主要なトピックについて、より微妙な例と考慮事項をいくつか提供します。また、アクセシビリティ指向の視点を開発するのに役立ったリンクとリソースも提供します。これらも役立つと確信しています。

アクセス可能なWebデザインとは何ですか?

W3Cによると

Webアクセシビリティとは、障害を持つ人々がそれらを使用できるようにWebサイト、ツール、およびテクノロジーが設計および開発されていることを意味します。

これには、コーディングをガイドするアクセシビリティの原則があるだけでなく、スクリーンリーダー、API、ブラウザー拡張機能、および障害者が障害なくインターネットを使用できるようにするその他のツールのサポートを確保することも含まれます。

アクセシビリティの主要なガイドエンティティの1つは、障害を持つアメリカ人法(ADA)です。これは、米国の公共および連邦政府が資金提供するスペースで障害者の宿泊施設を確保するために1990年に可決されました。近年、多くの組織が主にインターネットを介してビジネスを行っているため、これらのスペースにはデジタルスペースが含まれるようになりました。

そのため、Web開発では、障害のある人がWebを認識、理解、ナビゲート、またはその他の方法で対話できるようにする必要があります。障害の種類は質問者によって異なりますが、レスポンシブWebデザインのリーダーであるW3Cは、Web開発者の主な関心事として次の障害を指定しています。

  • 聴覚障害
  • 認知障害
  • 神経障害
  • 身体障害(運動障害と呼ばれることもあります)
  • 音声障害
  • 視覚障害
アクセシビリティの障壁は数多くありますが、予測することは不可能ではありません。出典:https://bestwebsiteaccessibility.com/guides/web-accessibility-barriers-and-how-to-overcome-them/

なぜアクセシビリティ?

正しいことをするだけでなく、アクセス可能なWebコンテンツを用意することで、ユーザーとデザイナーの両方にさまざまなメリットがもたらされます。

1.アクセシブルなデザインは誰にでも役立ちます。たとえば、視覚障害に対応するための設計原則の1つは、前景要素と背景要素の間に高いコントラストを持たせることです。これは視覚障害者を助けるだけでなく、より大きなコントラストは光沢のある画面での日光のまぶしさを防ぐのに役立ちます。つまり、電話の外にいる人は誰でも恩恵を受けることができます。

2.アクセシブルなデザインは、企業や組織に最適です。皮肉なことに、アクセス可能なWebサイトがあると、必然的にWebサイトのオーディエンスが増えることになります。もちろん、これには、より多くの売上、より多くのユーザー登録などが含まれます。

3.アクセシブルなデザインはあなたの仕事を将来にわたって保証します。より多くの組織がアクセシビリティに向けて準備を進めているので、宿泊施設を第一に考えていることで、将来、仕事を再訪する必要がある頻度が減ります。

4.アクセシブルな設計により、ADAコンプライアンスが向上します。ウェブ上で宿泊施設を強制することの合法性は少し曖昧ですが、アクセスできないウェブサイトは差別と見なすことができるという議論がなされ、首尾よく擁護されています。これは、ユーザーと組織の相互作用に必要なWebサイトまたはオンラインフォームが、保護されたクラスがパブリックスペースに参加できないようにするためです。ADAへの準拠は必須であるため、これは連邦政府の資金提供を受ける組織にとって大きな考慮事項です。

もちろん、もっと多くのメリットがありますが、これらは誰の注意を引くのにも十分に顕著であるはずだと感じました。デザインに採用できる具体的なヒントとコツに移りましょう。

デザインのアクセシビリティ

ここでコードや哲学をインフォダンプするのではなく、このスペースを使用して、アクセシビリティゲームを探しているWeb開発者に、より具体的または微妙なヒントや考慮事項を提供したいと思います。その側では、特定のアクセシビリティ設計と哲学の例について、これらのリソースを確認することをお勧めします。

  • アクセス可能なWeb開発の目的の詳細については、W3のWebAccessibilityInitiativeをお読みください。
  • すぐに採用できるコードのアクセシビリティの例を確認するには、InicaBlessySのすばらしいWeb開発におけるアクセシビリティの記事を読んでください。
  • アクセス可能なフロントエンドコンポーネントのリストについては、SmashingMagazinesがこの記事を書いています。
  • アクセシビリティを設計プロセスに組み込むのに役立つ簡単なキャッチフレーズを探している場合は、ピッツバーグ大学のPOUR(知覚可能、操作可能、理解可能、および堅牢)に関するこの記事を読むことを検討してください。

説明文

アクセス可能なWeb開発の主要な信条の1つは、すべての非テキストコンテンツに相当する説明テキストを用意することです。これには、画像の代替テキストが含まれますが、説明リンク、複数ページまたは複数ステップのイベントのナビゲーションガイド、ビデオのキャプションなども含まれます。

基本的に、含めるすべての非テキストコンテンツについて、説明的なテキストの代替を準備します。これはアクセシビリティの大部分であり、そのため、これはこの記事の最も長いセクションになります。

たとえば、ユーザーがお問い合わせページに移動するためにクリックするリンクについて考えてみます。アクセシビリティに関する考慮事項は次のとおりです。

  1. リンクURLはわかりやすいものにする必要があります
  2. アクセスできないURL:www.website.com/contact 宛先ページの内容や目的を明確に説明していません。
  3. アクセス可能なURL:website.com/contact-us 宛先ページの目的と、そこに何が表示されるかを明確に示しています。
    • アクセスできないリンク:お問い合わせください。これにより、スクリーンリーダーがすべての文字を個別に読むという問題が発生することがよくあります。つまり、読者は「C」、「O」、「N」の順にアナウンスします。
    • アクセス可能なリンク:お問い合わせまたはお問い合わせください。スクリーンリーダーは、(おそらく)開発者が意図したように、これらを「お問い合わせ」と読み替えます。
    • 誰かが単語全体ではなく、個々の文字を声に出して読んだ場合を想像してみてください。出典:https://www.flickr.com/photos/daniel_gies/5392604084/
    • アクセスできない代替テキスト:「赤いボタン」。この代替テキストは、ボタンの機能やユーザーの移動場所については説明していません。
    • アクセス可能な代替テキスト:「このボタンをクリックすると、お問い合わせページに移動しますボタンの目的とリンクの宛先について説明します。
    • 画像の代替テキストに関する注記—ボタンまたは画像が装飾的である場合は、代替コンポーネントを完全に削除するのではなく、<…alt =““>を使用します。スクリーンリーダーに適しています。
    • :「このリンクをクリックすると、お問い合わせできるページに移動します。」
    • :「私たちに連絡するには、お問い合わせページにアクセスしてください。」

    アクセス可能なリンクに関するUsableNetの記事は、リンク名を改善する方法に関する例外的な例を提供します。

    対比

    前景のアイテムと背景のコントラストが高いことは、私の意見では、アクセシブルなデザインの最も簡単な側面の1つです。いずれにせよ、ページデザインではすでに考慮事項になっているはずです。暗い背景と明るいテキストのコントラストが大きいほど、読みやすさが向上します。

    最高の読みやすさは、もちろん、白い背景と黒いテキストから得られますが、ページのコンテキストが背景から明確に分離されていることを確認するのに十分なコントラストが高い場合は、必要に応じて青い背景と黄色のテキストを使用することもできます。

    これはコントラストの悪い例です。読みにくいことに注意してください。ソース:

    これで、私はあなたが含むページの背景と本文だけを参照しているのではないことに注意することが重要です。高コントラストもビデオキャプションの主要な要素である必要があります。正確なキャプションを持つことは素晴らしいです(そして非常に十分に活用されていません)が、それらが簡単に読めることを確認する必要もあります。

    設計アプローチがアクセシビリティの障壁を生み出していないことを確認するために使用できるツールはたくさんあります。一例として、WebAIMのコントラストチェッカーがあります。

    フォーム

    アクセス可能なフォームデザインは、当然のことと見なされることがよくあります。

    フォームの作成と記入の両方が当然のことと見なされることが多いため、フォームは大きなアクセシビリティの障壁となる可能性があります。ただし、次の点を考慮してください。フォームで「名前」の入力を求められた場合、名前、名前、またはその両方で応答しますか?ミドルネームを含める必要がありますか?入力フィールドが回答の全長をサポートしていない場合はどうなりますか?さらに重要なことに、スクリーンリーダーまたはアクセシビリティ支援機能は、この情報をユーザーにどのように伝達しますか?

    これは、よりアクセスしやすいWebフォームを作成するのに役立つ包括的なヒントのセットです。アクセス可能なフォームの作成に関するDequeの記事は非常に役立ち、使用できるコーディング例が含まれています。この記事には、ここで提供するよりもはるかに多くの情報があります。

    • 灰色のプレースホルダーテキストは避けてください。一部の人にとっては見た目が良いかもしれませんが、白い背景の灰色のテキストのコントラストが低いため、視覚障害のあるユーザーはサンプルテキストを見るのが難しくなります。
    • すべてのフォーム要素を明確にマークします。これがどれほど取るに足らないように見えても、誰かが自分の名をどこに置くか、そして自分の名前をどこに置くかを知る必要があります。
    • 可能な限り、時限イベントを避けてください。これには、自動ログアウト、フォーム送信、または完全な代理店がユーザーから直接奪われるその他のアクションが含まれます。確かに、機密情報が含まれる場合、これは避けられません。ただし、時限イベントは、スクリーンリーダーを使用しているユーザー、または認知障害や運動障害/身体障害のあるユーザーにとって、ストレスがたまり、邪魔になる可能性があります。可能であれば、タイマー、アクティビティチェッカー、またはその他の方法を含めて、入力が必要または監視されていることをユーザーに知らせます。
    • 複数ページのフォームがある場合は、ナビゲーション要素を含めます。たとえば、「1/5ページ」という行があると、プロセスの進行状況をユーザーに知らせるのに非常に役立ちます。これにより、ユーザーは必要な休憩を取ることができます。特定のアプリケーションやテクノロジーでは、ユーザーのフォーム全体を展開する必要がある場合に役立ちます。
    • ページのメインコンテンツにスキップするリンクを含めます。これは食品ブログでよく見られます。そこでは、著者の息子のサッカーゲームの説明をスキップして、レシピに直接アクセスできます。これは、ユーザーが自分にとって無関係なコンテンツが終了するのを待って疲れたりイライラしたりしないようにするために重要です。また、スクリーンリーダーの使用を容易にするページ構造にも役立ちます。

    ここに私が共有するのが良いと感じたいくつかのヒントがありますが、私はそれらを上記のカテゴリーのいずれにも整理することができませんでした。

    • 障害のある人にあなたのウェブサイトを試してもらい、あなたがそれをどのように改善できるかについて彼らの考えを聞いてください。障害のあるユーザー自身の洞察を得る以上に役立つものはありません。
    • アクセシビリティ作業の大部分はHTMLで行われるため、コードについては戦略的かつ慎重に行ってください。たとえば、プライマリページのタイトルには<h1>のみを使用し、ヘッダータグは純粋に子孫の方法(<h1>、<h2>、<h3>など)で使用して、ユーザーが使用していないことを認識できるようにします。何かが恋しい。HTMLのARIAマーカーも役立つ場合があります。https://www.w3.org/TR/html-aria/
    • 設計およびテスト中に、スクリーンリーダー、ブラウザー拡張機能、API、またはその他のアクセシビリティ補助機能を使用してみてください。これにより、これらのデバイスがどのように機能するか、およびデザインがどのように機能するかをよりよく理解できます。
    • Web開発者に自分の作業のアクセシビリティに関する洞察を与えるように設計されたツールもいくつかあります。たとえば、WAVE Browser Extensionは、Webサイトを使用するときにWebサイトのアクセシビリティレポートを作成します。現在、Chrome、Firefox、およびMicrosoftEdgeで動作します。
    • すべてのページにすぐにアクセスできるようにする時間やリソースがない場合は、トラフィックが最も多いページと、ユーザーに最も関連性の高いページを優先します。
    • ユーザーに直接対応する必要がある場合は、「障害者」のような人を第一に考える言葉を使用しないでください。はい、私は以前に提供したW3Cの見積もりがそれを行っていることを知っていますが、それが私がそれを指摘したい理由です。ほとんどの障害者(私自身を含む)は、この用語が不必要に複雑で、場合によっては見下していると感じています。「障害者」は「障害者」と同じ情報ですが、言葉が少なく、より直接的です。このメモの明確な例を次に示します。カジュアルな会話では、自分をWeb開発者と呼んでいますか、それともWeb用に開発している人と呼んでいますか。

    私が高等教育で働いていたとき、私は同僚がアクセシビリティに入る「余分な仕事」について不平を言っているのを耳にしました。私は同意しません—他の人の生活を改善するためにあなたが行き過ぎてしまうことは決してないと思います。あなたの仕事を含め、誰もがインターネットへの公平なアクセスに値します。あなたはそれに多くの努力を注いでいます、彼らが望むなら誰もがそれを見てそして使う機会を得るべきではありませんか?

    参考文献:

    • W3CのWebコンテンツアクセシビリティガイド
    • UsableNetアーカイブ
    • MDN:Webアクセシビリティ
    • Texas A&M:アクセシビリティを念頭に置いたWebサイトの開発

© Copyright 2021 - 2022 | hachiwiki.com | All Rights Reserved