アクセシビリティに足を踏み入れる：大きな効果をもたらす小さな一歩

※これはMouseflowからの翻訳転載です。配信元または著者の許可を得て配信しています。

Dipping Your Toes into Accessibility: Small Steps for Big Impact

応用性が高く機能的で美しいWebサイトを設計するだけでは不十分です。インターネットは、日常生活のいつでも誰でも利用できます。

私はデザイナーとして、常に自分自身の偏見を意識し、自分の仮定を検証するようにいわれてきました。自分が誰であるか、自分が何を知っているか、そして自分が置かれている状況に基づいてデザインするのは当たり前のことです。しかし、これが私たちの多くが非包括的なデザインの罠にはまる理由です。だからこそ、アクセシビリティのガイドラインに従い、ツールを使用して、他の状況にある他のユーザーにとってもデザインがアクセシブルであるかどうかを評価することが重要だと考えています。

アクセシビリティを考慮したデザインは、Mouseflowのデザイナーである私にとって、昔も今も継続的な学習プロセスです。この記事では、私がこれまでに得た洞察のいくつかをご紹介します。ほんの表面をなぞったに過ぎませんが、ここで触れるトピックはアクセシビリティ設計の旅の始まりであり、みなさんの旅のヒントになれば幸いです。さて、本題に入りましょう！

デジタル世界におけるアクセシブルデザインとは？

デジタルおよび Web デザインの文脈におけるアクセシブルデザインとは、能力や制限に関係なく、すべてのユーザーにとって簡単にナビゲート、理解、操作できるデジタルインターフェースやコンテンツを作成する実践を指します。

これには、視覚的、聴覚的要素からユーザーインターフェース（UI）コンポーネントに至るまで、幅広い考慮事項が含まれます。アクセシブルなウェブデザインの基本原則は、すべてのユーザーがデジタル製品にアクセスし、効果的に使用できるようにすることです。

私にとって、アクセシビリティは、永続的な障害から日常生活を送る際に生じる可能性のある一時的または状況的な制限に至るまで、さまざまな制限に対処するという事実を考えることも重要です。制限について話す際、私は言葉よりもビジュアルで説明することが多いので、Microsoftの「Inclusiveness 101ガイドブック」のインフォグラフィックをご覧ください！

Microsoft の「Persona Spectrum」インフォグラフィックは、ウェブの使用方法に影響を与える制限が永続的なものだけでなく、一時的なもの、または状況に応じたものになる可能性があることを示しています。 前回、運転中に携帯電話の地図を使用していた時は、状況に応じて制限があったためハンドルを握り続けなければなりませんでした。

アクセシビリティの重要性

上の図を見ると、アクセシビリティを念頭に置いてデザインすべき理由がよくわかります。 ウェブサイトを利用する際には、非常に多くの異なる人々が存在し、さまざまな状況に遭遇する可能性があるため、すべての人々に対応するには、あらゆることに備えておくことが望ましいのです。 これは法的要件を遵守することだけではなく（コンプライアンスは不可欠ですが）、すべてのユーザーに平等な機会とシームレスなエクスペリエンスを提供することでもあります。 さらに、デザインをアクセシブルなものにする私の個人的な動機をいくつか挙げます。

• 包括的である：アクセシビリティは、ウェブサイトやアプリケーションがあらゆる能力のユーザーを受け入れる包括的なものであることを保証します。これは、デジタル領域における多様性を受け入れることです。
• 法的義務を満たす：多くの国では、アクセシビリティに関する厳しい法律や規制が設けられています。これらの基準に準拠することは、倫理的責任だけでなく、法的義務でもあります。
• ユーザーを拡大する：デジタル製品をアクセシブルにすることで、より多くのユーザーに製品を提供できます。これにより、ユーザーエンゲージメントが高まり、コンバージョン率が向上し、ブランドの評判の向上につながる可能性があります。
• 仕事の将来性：テクノロジーの進化とともに、ユーザーの期待も変化します。 アクセシビリティを考慮した設計を行うことで、絶えず変化するデジタル環境においても製品の関連性と適応性が確保されます。

このことを念頭に置いて、アクセシビリティを設計する際に私が心がけている具体的なステップのいくつかを紹介しましょう。それと、あなたが（私のように）これから時間を費やそうとしているものの概要を知りたい場合は、もう1つのインフォグラフィックもお楽しみください。

色のコントラストがキー

色はデザインにおいて大きな役割を果たしますが、常にアクセシビリティを考慮して使用するよう努めなければなりません。色のコントラストが不十分だと、特に視覚障害を持つユーザーにとってはテキストやUI要素が読みにくく、理解しにくくなることがあります。色を適切に使用するために、私は以下のステップが役立つと感じました。

• ウェブ・コンテンツ・アクセシビリティ・ガイドライン（WCAG）に従い、少なくとも5のコントラスト比を目指してください。
• 選択した色のコントラストをチェックするツールを活用し、アクセシビリティ基準に準拠していることを確認します。
• ダークモードまたはライトモード機能の実装を検討し、ユーザーの好みに応え、さまざまな照明条件下での読みやすさを改善しましょう（これについては次章で詳しく説明します）。

パレット内にある他の原色の上にアクセス可能な原色を表示する方法。

ビッグディベート：ダークモードとライトモード

何年もの間、デザインコミュニティでは、ダークモードの長所と短所について興味深い議論が行われてきました。私の考えは、ユーザーが決断できるように両方の選択肢を提供すべきだというものです。この2つのモードを設計する際に考慮すべき点は次の通りです。

• 異なるモード間の切り替えは、ユーザーにとっては単なるスイッチかもしれませんが、デザイナーとしては、明るい色を暗い色に直接変換することはできず、何らかの 「手動」 作業が必要になります。
• パレットを選ぶ時は、純白や黒を避け、グレーまたはブルーなどのニュアンスを使ってUIを柔らかくします。
• ダークモードを眼精疲労の緩和と考える人がいる一方、世界中で多くのユーザーが乱視を患っており、「ハレーション」を引き起こすと警告する人もいます。これは、暗い背景で明るいテキストを読むユーザーには、テキストがよりぼやけて見えることを意味します。
• ダークモードは、OLEDスクリーンで省エネであるため、より「持続可能な」モードであるといわれています。
• ユーザーの物理的な状況に応じて、一方のモードが他方のモードよりも適している場合があります。そのため、ユーザーの行動を監視する時は、ユーザーが常に1つのモードに留まっていると仮定しないでください。好みは状況によって変わる可能性があります。

モニターチップ

私は常に、できる限りすべてのユーザー行動を追跡するようにしています。このウェブサイトにダークモードを実装する際、ユーティリティバーのモードトグルにMouseflowを通してカスタムタグを設置しました。こうすることで、トグルを操作したユーザーをフィルタリングして分析し、機能の採用を追跡することができます。

[トグルがprodに追加されたら、カスタムタグ+フィルタリングのビデオを挿入]

このウェブサイトのダークモードをデザインする際に行った、ちょっとした楽しいデザインの探求は、どのタイプのダークモードトグルが最も直感的かを研究することでした。その結果が、今日メニューの上に表示されるトグルです。このトピックに関するLinkedInのディスカッションは、こちらと以下の図解でご覧いただけます。

美学より読みやすさ

現在、読みやすさに焦点を当ててデザインされた美しいフォントが数多く存在します。ブランドや製品に適したフォントを選ぶことは、読みやすさと視覚的アイデンティティのバランスをとる行為だと考えています。デザイナーだけが読みやすさに責任を負うわけではありませんが、次のような影響を与えることができます。

• 画面を横切る行の長さは、おおよそ50〜75文字に制限します。このトピックについてさらに深く知りたい場合は、Baymard Instituteの素晴らしい研究をご覧ください。
• ブログやオンライン新聞のようなテキストが多いユースケースをデザインする際には、フォントサイズと行の高さを少し大きくします。この記事のフォントサイズ（18px）と行の高さ（30px）が、私たちの他のウェブページよりも少し大きいことに注意してください。
• 目的に合った大文字と小文字を使用します。これは、視覚的階層を作る要素として使用できますが、読みやすさを向上させるためにも使用可能です。例えば、他のUI要素から際立たせるべき短く重要なテキストにはすべて大文字を使用します。短い「コールアウト」テキストにはタイトルの大文字と小文字を使用し、その他のテキストには文の大文字と小文字を使用します。短いテキストの可読性が向上すると考えられているため、コール・トゥ・アクション（CTA）にはすべて大文字と小文字が含まれていることに注目してください。
• ユーザーによっては、ビジュアルがスクリーンリーダーによって読まれることも忘れないようにしてください。特に、装飾以上の意味を持つ画像には、時間をかけて代替テキストを追加しますが、短く要点を得る内容にしましょう。

画像をクリックするとチェックリストがダウンロードできます。

コンテンツのヒント

デザインを通じて読みやすさを最適化するだけでは不十分で、書かれた内容が一般的な読みやすさに大きな役割を果たします。読者がコンテンツから何を好むかを研究してください。声のトーンと語彙に一貫性を保ってください。メッセージを複雑にする専門用語や難しい言葉の使用を控えましょう。マーク・トウェインのように、 コンテンツを消化しやすい小分けにして、長い手紙を書く代わりに「短い手紙」を書く時間を作ってください。コンテンツの評価と最適化について詳しく知りたい方は、  こちらの記事をご覧ください。

ビジュアルフォーカスインジケーター

キーボードナビゲーションは多くのユーザー、特に運動障害を持つユーザーにとって不可欠です。ブラウザには、要素にキーボードフォーカスを持つことを示すデフォルトの方法がありますが、残念ながら多くのウェブサイトがこれを手動で「無効化」しているか、サイトがイベントの正しい順序をサポートするように構築されていません。

開発者と協力して、サイト上でこれに関する計画を立てていることを確認し、自分自身でテストを実施してください。キーボード、特にtab、shift+tab、 およびEnterボタンだけを使用してサイト内を移動し、ユーザーに必要な操作を実行できますか？

ワークフローのヒント Waveを使用して要素の順序を評価し、キーボードユーザーとスクリーンリーダーのユーザー体験をサポートします。

視覚的階層と双方向性

私にとって、デザインで難しい分野の1つは、視覚的階層の作成がうまくできたかどうかを見極めることです。これは、私たちデザイナーが独自のデザインを作り、他のデザインを分析することで、目を鍛える継続的な学習プロセスです。アクセシブルなウェブデザインについては、以下の点が参考になります。

• 古典的なゲシュタルトの原則（近接性、類似性、連続性、連結性、閉鎖性）をブラッシュアップし、意識的にデザインに使いましょう。よく問題が見られるのは入力フォームで、各入力フィールドがそれに属するフィールドに近接して明確なラベルを持つことを確認する必要があります。ラベルはスクリーンリーダーにとって読みやすいものである必要があるため、フォームフィールド内のプレースホルダーテキストとラベルが同じではないことを覚えておいてください。私はフォームアナリティクスを使用して、ユーザーがフォームとどのようにやりとりしているかを分析します。
• ユーザーに注目してもらいたい要素の周りには、空白を明確に使用してください。
• 要素がインタラクティブかどうかをUI内で明確にしましょう。ウェブサイトのコンポーネントをもう少しユニークなものにしようとして、何度も同じ落とし穴にはまったことがあります。その後、Mouseflowアプリでセッション記録を見ると、ユーザーがクリックできないものをクリックしている、または他のものがクリック可能であることを理解していないことがわかります。シャドウ、コントラストカラー、およびホバー効果を使用して、インタラクティブであることを示しましょう。

ワークフローのヒント

私はMouseflowを通じて、私たちのサイトで発生したクリックラッシュなどの通知をメールで受け取っています。そうすれば、なぜユーザーがクリックできない要素をクリックしてしまうのかを簡単に観察できるからです。私は、ユーザーがこの要素をクリックしようとする理由について合理的な仮定を立て、ユーザーがクリック可能だと思わないように要素の見た目を変えるか、またはユーザーが実行しようとしているアクションを理解し、要素を期待通りに作動させるようにします。

また、ユーザーが最も時間を費やしている場所や、ページ上の要素にいつ関与しているかを理解するために、アテンションヒートマップを見る傾向があります。

以下のビデオは、Mouseflowで通知を設定するところから、クリックレイジなどが検出されたページを最適化するまでのワークフローを示しています。

アクセシビリティのいとこである応答性

レスポンシブデザインはアクセシブルなウェブデザインの基礎であり、今やユーザーは誰もがそれを実現することを期待しているだけだと思います。どのデバイスを使用していても、シームレスで一貫性のあるエクスペリエンスが期待されます。私が設計時に心がけているいくつかの具体的な行動は、以下の通りです。

• レスポンシブデザインには標準的なブレイクポイントを使用するべきですが、どの画面サイズを優先すべきかを決定するためにデータ駆動の洞察も利用してください。例えば、Mouseflowアプリを通じて、当社のウェブサイト訪問者の大多数がデスクトップからサイトを閲覧しており、画面解像度の上位3つは1920×1080、1440×900、1536×864です。この知識に基づいて、デザイン作業の大部分をこれらの画面サイズに集中できます。
• ユーザーのインタラクションを継続的に監視して、特定の画面上の潜在的な問題点を特定します。Mouseflowは、ユーザーの満足度や不満度を示すフリクションスコアに相当するさまざまな摩擦イベントを持つユーザーを自動的にタグ付けするので、サイトのユーザーエクスペリエンスを分析する時にとても便利です。ユーザーの満足度を分析する際は、Mouseflowでセッション記録を見て、デバイスや画面の解像度をフィルターして、特定の画面で他の画面よりも不満なユーザーが多いかどうかを確認します。
• 異なる画面サイズに対してカスタム変更を行います。標準的な要素の積み重ねや、すべての要素をモバイルとデスクトップで同じように表示することはできません。ナビゲーションの変更が必要になる場合があります。ユーザーリサーチを行い、ユーザーが使用しているデバイスによってサイトを訪れる目的が異なるかどうかを判断してください。

例

料金ページでは、大画面から小画面への移行に伴い、要素の順序とレイアウトがどのように変更されたかが確認できます。要素が積み重なり始めると、最後の料金プランがどのように最上位の料金プランになるのか、また、機能比較表がすべてのプランの比較からユーザーが選択した2つのプラン間の比較にどのように移行するかに注目してください。これはすべて、ページエクスペリエンスを向上させ、画面サイズに関係なくユーザーが必要な情報を確実に取得できるようにするために行われました。

当社の価格ページには、ユーザーがアクセスする画面サイズに応じて、いくつかのカスタムソリューションがあります。

継続的な改善

アクセシビリティは一度きりの取り組みではなく、継続的な取り組みです。他のユーザー中心のデザインと同様に、私たちはウェブサイトのアクセシビリティを継続的に監視し評価する必要があります。Lighthouse MetricやWAVE Web Accessibility Evaluation Toolのようなツールを活用して、問題をチェックし、スクリーンリーダーやキーボードのみのユーザーのために要素の順序を評価してください。ユーザーからのフィードバックに応答して設計を繰り返し、よりアクセシブルで包括的なデジタル空間を作り出しましょう。

私にとって、アクセシブルなデザインは単なるガイドラインのセットではなく、デザインプロセスのあらゆる段階で段階的に取り入れようとしている考え方です。これらの原則とベストプラクティスを実装することによって、あなた、私、そして他のデザイナーは法的要件を満たすだけでなく、より多くの人々の心に響くデジタル体験を創造し、デジタル領域における包括性とアクセシビリティを育むことができます。

モニターのヒント 当社では四半期ごとにパフォーマンスレビューを実施しており、Lighthouseスコア（Chromeデベロッパーツールにあります）やWaveなど、さまざまなツールを使ってページを評価しています。下記はその様子です。そして、改善点を深く掘り下げ、優先順位をつけて、次の四半期に他のウェブサイト関連タスクと並行して実行します。インターネット、デバイス、プラグインなどによってこれらのスコアが変動する可能性があることに注意してください。また、本番サイトに大きな変更を実装する場合は、実装直後にそれらがパフォーマンスに影響がないことを確認する傾向にあります。 私たちはサイトを継続的に監視し、上記のLighthouse Scoreのようなレポートに基づいて最適化を図っています。

ジュリアン（通称ジュールズ）は、UX、UI、ブランドデザインに5年以上の経験を持つMouseflowのブランドデザイナーです。