1）アクセシビリティに取り組む理由
私たちの生活はインターネット中心になりつつあり、誰もが利用できることがますます重要になっています。アクセシビリティは、その中心的な要素の一つであり、すべての人がデジタル世界に参加できるようにするための鍵です。なぜアクセシビリティに焦点を当てるべきなのか、その理由を明確に見ていきましょう。
情報設計・デザインの視点
ユーザビリティの向上、改善のためには、まずアクセシブルである（使える）ことが前提です。ユーザービリティを高めることで、ユーザー体験が向上し、操作しやすさや理解しやすさが増します。デザイナーがアクセシビリティを考慮することで、情報設計とデザインの質が向上し、広範なユーザーに対して親しみやすいデザインが可能となります。
アクセシビリティとユーザビリティの違い
ユーザビリティはターゲットユーザーが使いやすいかどうかに焦点を当て、特定のケースにおける「使いやすさ」を評価します。一方、アクセシビリティはあらゆるユーザーが支障なく利用できるかどうかに重点を置き、特定のケースだけでなく、広範なユーザーが「使える」ことを目指します。アクセシビリティが低い場合、そもそも利用が難しくなります。
駅のホームへのアクセス手段」で考えると…
車イスのかた向けに階段昇降機を設置するような特定の属性の人への個別対応ではなく、誰でも使えるようにエレベーターを設置することがアクセシビリティを考慮した設計と言えます。
アクセシビリティは障がいの有無にかかわらず、あらゆるユーザーがウェブサイトやアプリを利用できるようにするための設計原則です。ユーザビリティは使いやすさを指し、両者は密接に関連していますが異なる概念です。
アクセシビリティとUXの関係
アクセシビリティとUXは相互に補完し合う要素であり、アクセシビリティを考慮することで、ユーザー全体に対して優れたUXを提供することが可能になります。
UXの向上はアクセシブルであることが前提
優れたUXを提供するためには、アクセシビリティが基本条件となります。アクセスの容易性は、ユーザーとの信頼性のある関係を築く上で不可欠です。
このように、アクセシビリティはユーザービリティの向上だけでなく、広範なユーザーに親しみやすく使いやすいデザインを提供する重要な要素です。アクセシビリティとユーザビリティは異なる概念であり、アクセシビリティが低い場合、利用が難しくなります。しかし、両者は相互に補完し合い、アクセシビリティを考慮することで全体的なユーザーエクスペリエンス（UX）が向上します。優れたUXを提供するには、アクセシビリティが基本条件であり、これによってユーザーとの信頼性のある関係を築くことが可能となります。
2）デザインで気を付けるポイント
それでは、次にデザインで気をつけるポイントを紹介します。デザインには、ユーザーが快適にコンテンツを閲覧できるようにするための要素がたくさんあります。具体的なポイントを一緒に見ていきましょう。
フォント
アクセシビリティガイドラインにおいては、具体的なフォントサイズやフォントファミリーに関する厳格な達成基準は存在しません。ただし、ユーザーがブラウザの設定で文字を拡大でき、スクリーンリーダーで読み上げができることが求められています。これは、ユニバーサルデザインの観点から、適切なフォントサイズやフォントファミリーを選択することが重要であることを示唆しています。ユーザーが快適に閲覧でき、情報を理解しやすいデザインを提供するために、フォントの選択には配慮が必要です。
参考：【2023年対応】Web制作会社デパートが考えるフォントファミリーを解説！｜Blog｜株式会社デパート
ユニバーサルデザインとは？Web制作現場でのデザイン要点やツールをご紹介！｜Blog｜株式会社デパート
行間
テキストの行送りやマージンについては、ユーザーがカスタムCSSで変更しても表示が崩れないよう注意する必要があります。ただし、達成基準の観点からは、レベルAAAにおいては行送りと行間に関する特定のルールが存在し、これらを守ることが推奨されています。行の間隔（行送り）は1.5文字分以上（line-height: 1.5以上）、段落ごとの間隔（段落の行間）は行送りの1.5倍以上という基準が設けられています。これらの基準に従うことで、特に視覚的な優れた読みやすさを提供し、レベルAAAにおいて安心感を確保できます。
参考：WCAG 2.1 達成基準 1.4.12 テキストの間隔（レベルAA）
WCAG 2.1 達成基準 1.4.8 視覚的提示（レベルAAA）
文字の間隔
ユーザーがカスタムCSSで変更しても表示が崩れないよう留意する必要があります。ただし、特定のデザイン要素として空白文字を利用して文字の間隔を広げることは、アクセシビリティの観点からは避けるべきです。これは、スクリーンリーダーが正しく読み上げられない可能性があるためです。文字の間隔の微調整が必要な場合は、適切なCSSスタイルや他のアクセシビリティ対応手段を検討することが望ましいです。
参考：WCAG 2.1 達成基準 1.3.1 情報及び関係性（レベルA）
リンク
色だけを使用してリンクを表現することは避けるべきです。代わりに、リンクに下線やアイコンを付けるか、通常のテキストと比較してコントラスト比を3:1以上に保つことで、リンクであることが視覚的に明確になるようにします。ただし、ナビゲーションメニューやリンク集など、リンク性が一目で理解される場合はこの規定の対象外となります。これにより、視覚的なわかりやすさを確保しつつ、ユーザーがスムーズに情報にアクセスできるよう配慮します。
参考：WCAG .21 達成基準 1.4.11 非テキストのコントラスト（レベルAA）
達成基準 1.4.11: 非テキストのコントラストを理解する
アイコン
同じ機能を有する要素に対しては、一貫性を保つために同じアイコン、ラベル、および説明を付与することが推奨されています。これには、アイコンだけでなく、ボタン要素やリンクなどのコンポーネントも含まれます。異なる要素が同じ機能を果たす場合、ユーザーが簡単に理解できるように、統一されたアイコンやテキストラベルを使用し、一貫性を持たせることが重要です。これにより、ユーザーエクスペリエンスが向上し、使いやすいウェブコンテンツが提供されます。
参考：WCAG 2.1 達成基準 3.2.4 一貫した識別性（レベルAA）
コントラスト比
文字と背景
テキストと背景のコントラストに関して、基本的には4.5:1以上が求められます（レベル AA）。ただし、テキストが29px以上もしくは、24px以上かつ太字の場合には、3:1以上のコントラスト比で適合となります。これは、視覚的な明瞭性を確保しつつ、異なるフォントサイズやスタイリングに柔軟に対応するための基準です。背景が画像や文字画像の場合も同様に、コントラスト比の確保が必要です。なお、レベル AAAではより厳しい基準が適用されます。アクセシビリティを考慮した基準を選択することで、視認性の高いウェブコンテンツを提供できます。
参考：WCAG 2.1 達成基準 1.4.3 コントラスト (最低限)（レベルAA）
WCAG 2.1 達成基準 1.4.6 コントラスト (高度)（レベルAAA）
ボタンと背景
ボタンと隣接する色（背景）については、3:1以上のコントラスト比を確保することが要求されています。これは、ボタンが他の要素と視覚的に明確に区別され、ユーザーが操作を正確に認識できるようにするための基準です。良好なコントラスト比を確保することで、視覚的に優れたユーザーエクスペリエンスが促進され、アクセシビリティが向上します。
参考：WCAG .21 達成基準 1.4.11 非テキストのコントラスト（レベルAA）
達成基準 1.4.11: 非テキストのコントラストを理解する
ボタンのマウスオーバー
ボタンにマウスオーバーすると文字色や背景色が変わる場合でも、コントラスト比を4.5:1以上確保する必要があります。通常、マウスオーバー時に透過する挙動はコントラスト比を満たさないことがよくあります。そのため、文字色を変更せずに背景色を濃くする方が良いでしょう。
参考：WCAG .21 達成基準 1.4.11 非テキストのコントラスト（レベルAA）
達成基準 1.4.11: 非テキストのコントラストを理解する
グラデーション
グラデーションが背景の場合、文字やアイコンのコントラストは最も低い箇所で検証されます。基準未達の場合は、一部を取り除くことが検討されます（例えば、電話のアイコンが識別可能な場合はOK）。これにより、アイコンが接している箇所の背景とのコントラスト比が基準を満たすようになり、グラデーションがもたらす視認性の低下を最小限に抑えます。
参考：G207: アイコンに対して 3:1 のコントラスト比を確保する
判断基準
見た目に問題はないが、実際のコントラスト比が低い色の組み合わせがある場合、見た目の印象ではなくコントラスト比の数値を優先し、配色を変更します。特定の組み合わせでコントラスト比が低くなることが認識されており、次のWCAGバージョンであるWCAG3.0では計算アルゴリズムが変更される予定です。
文字画像
デコレーションが施された見出し等は、文字画像ではなくデバイステキストを用いて実装することが求められます。ただし、ロゴなどで文字画像が必須である場合や、CSSやWebフォントを利用して再現できない表現が必要な場合は、この規定の対象外となります。
参考：WCAG 2.1 達成基準 1.4.5 文字画像（レベルAA）
文字サイズの拡大
文字サイズをブラウザ設定で200%まで拡大しても、コンテンツが崩れないように実装することが求められます。一般的には、この問題は実装側で対処可能ですが、特定のケースでは背景画像に依存して文字の位置が指定されている場合などは、慎重な注意が必要です。
参考：WCAG 2.1 達成基準 1.4.4 テキストのサイズ変更（レベルAA）
タップ・クリック可能な領域
ボタンやリンクのタップ・クリック可能な領域については、最新のWCAG2.2ではクリック可能な領域を24px × 24px以上確保することが求められています。（レベルAA）しかし、JIS規格はこれに追随しておらず、従来通りの要件が続いています。
レベル AAAでは、タップ・クリック可能な領域を44px × 44px以上に確保する必要があります。ただし、以下の条件に当てはまる場合は例外とされています。
- 段落や文章の中のテキストリンク
- 同じ機能を持つボタンやリンクが画面上に存在する
- デフォルトのUIであり、CSSで変更をしていない
このような条件が満たされる場合、従来のサイズ要件が適用されることになります。
参考：WCAG 2.1 達成基準 2.5.5 ターゲットのサイズ（レベルAAA） WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum) (Level AA)
フォーカス
フォーカスの順序
キー操作によってフォーカス可能な要素は、正しい順序でフォーカスできるように配置する必要があります。
参考：WCAG 2.1 達成基準 2.4.3 フォーカス順序（レベルA）
フォーカスの見た目
フォーカスされている要素には、フォーカスインジケーターを除去しないようにします。フォーカスインジケーターの外観をカスタマイズする場合は、その見た目に隣接する要素と3:1以上のコントラスト比を確保するようにします。
参考：WCAG 2.1 達成基準 2.4.7 フォーカスの可視化（レベルAA）
図版（グラフ）
情報の伝達においては、色だけに頼ることを避け、テキストや記号など他の手段も併用して使用します。
参考：WCAG 2.1 達成基準 1.4.1 色の使用（レベルA）
アクセシビリティ | DEPART コーディングガイドライン
ナビゲーション
ナビゲーション要素は、一貫して同じ順序と表記で配置する必要があります。
参考：WCAG 2.1 達成基準 3.2.3 一貫したナビゲーション（レベルAA）
3.2.3 ナビゲーションの位置を統一する - Ameba Accessibility Guidelines
自動切り替えコンテンツ
自動で切り替わるスライドショーなどには、一時停止、非表示、停止の機能を備える必要があります。
参考：WCAG 2.1 達成基準 2.2.2 一時停止、停止、非表示（レベルA）
自動再生アニメーション・動画
オープニングアニメーションやメインビジュアルの動画など、自動再生される要素には、再生を一時停止するボタンを設けるか、再生が5秒以内に停止するように対応する必要があります。
参考：WCAG 2.1 達成基準 2.2.2 一時停止、停止、非表示（レベルA）
閃光
アニメーションや映像などのコンテンツでは、1秒に3回以上の点滅は避けるべきです。閃光を放つ（光の点滅を繰り返す）と、光感受性による発作性障害のある人が発作を引き起こす可能性があるため、注意が必要です。
参考：WCAG 2.1 達成基準 2.3.1 3 回の閃光、又は閾値以下（レベルA）
WCAG 2.1 達成基準 2.3.2 3 回の閃光（レベルAAA）
デザインにおけるアクセシビリティは、すべての人がウェブコンテンツに簡単にアクセスできるようにするための重要な要素です。フォントや行間、リンクの可視性、色のコントラストなどに配慮することで、使いやすいウェブ体験が提供されます。アクセシビリティを考慮したデザインは、障害の有無に関係なく、すべての人々がウェブを自由に利用できるようにします。
3）検証ツール
デザインを考慮した後、アクセシビリティを強化するには、検証ツールの活用が不可欠です。さまざまなツールを使ってウェブコンテンツをアクセシブルにすることで、より多くの人々に利用しやすくなります。以下では、便利なアクセシビリティ検証ツールを紹介します。
Stark
Starkは、アクセシビリティを検証するための優れたツールです。このツールを使用すると、コントラスト比やターゲットのサイズ（タップ・クリック可能な領域）、フォーカス順序などを簡単に検証できます。
また、StarkはXDやFigmaのプラグインとしても利用でき、Chromeの拡張機能も提供しています。会員登録すれば無料で利用できるので、誰でも手軽にアクセシビリティを検証することができます。
Stark：https://www.getstark.co/
Color.review
Color.reviewは、コントラスト比を検証するための便利なWebサービスです。このサービスを利用すると、手軽にコントラスト比を調べることができます。特に、コントラスト比を素早く確認したい場合に役立ちます。
Color.review：https://color.review/
まとめ
この記事では、アクセシビリティに取り組む理由やデザインで気を付けるポイントについて解説しました。ウェブアクセシビリティは、すべての人がインターネット上のコンテンツに自由にアクセスし、活用できるようにするための不可欠な要素です。我々は、この重要性を認識し、デザインや開発の過程でアクセシビリティをベーシックに考えることを目指しています。
さらに、デザインにおけるアクセシビリティに関するポイントや検証ツールの活用方法についても紹介しました。フォントや色彩、リンクの可視性など、さまざまな要素に配慮することで、ウェブコンテンツの利用性が向上し、すべてのユーザーが快適に利用できる環境を提供できることを目指しています。
最後に、アクセシビリティを意識したデザインと技術の導入により、より包括的なウェブ環境の構築に努め、社会的責任を果たしていくことが我々の使命です。これからも、我々はアクセシビリティを常に考慮し、すべての人々にとって利用しやすいウェブサイトやアプリケーションを提供していくことを継続してまいります。
株式会社デパートでは、ウェブアクセシビリティへ深い知見と対応実績を持つエンジニアが在籍し、ご要望に応じてアクセシビリティの達成基準に準拠したWebサイト制作やを行っています。
企業としての取り組み内容からのご相談も可能ですので、お気軽にご相談ください。
https://depart-inc.com/download/depart-webaccessibility/
|
Webマーケティング、Web制作に関することなら
|
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
