ゴーストボタンのアクセシビリティ

ウェブサイトのユーザーインターフェース (UI) で、「ゴーストボタン (ghost button)」を目にすることがあります。背景が透過するスタイルのボタンのことですが、たとえば、メインビジュアルが高品位かつ大きな写真である場合に、その写真の魅力を損なわずに、行動喚起 (Call To Action : CTA) を提示する...といったデザインができます。

ゴーストボタンの例 (Lees Ferry のウェブサイト。このスクリーンショットは iPad で撮ったものだが、PC でアクセスすると、メインビジュアルエリアは動画になっていて面白い。)
ゴーストボタンの例 (Lees Ferry のウェブサイト)

ゴーストボタンはその性質上、目に触れやすい位置に配置されつつも、ビジュアル的な存在感としては「控えめ」であることが求められます。「控えめ」であることの度合いが過ぎるとボタンの視認性が損なわれ、アクセシビリティが低下することになる (ひいては、せっかくの Call To Action であるにもかかわらず機会損失につながってしまう) 恐れがあるので、十分に注意したいところです。

色覚特性ごとの視認性をチェックする

ユーザーの中には、様々な色覚特性を持った人がいます。赤の視感度がないか弱い「P型 (Protanope/Protanopia)」、緑の視感度がないか弱い「D型 (Deuteranope/Deuteranopia)」、青の視感度がないか弱い「T型 (Tritanope/Tritanopia)」といったタイプがあります。このような各種色覚特性においても、ゴーストボタンが十分に見えるようにしましょう。

色覚特性による見えかたをシミュレーションするツールは、以下のように無料のものがいくつかあります。

十分なコントラスト比を確保する

W3C が勧告するウェブアクセシビリティのガイドライン「WCAG 2.0」(または日本の 「JIS-X8341-3:2010」) では、文字色と背景色のコントラストに関する規定が設けられていて、「4.5:1」というコントラスト比が達成基準 (等級AA) とされています。このコントラスト比は「Colour Contrast Analyser」という無料ツールで簡単に検証できます。

コントラストが十分あることは、ロービジョンや高齢者だけでなく、モバイルでのウェブ閲覧ユーザーにとっても助かるものです (小さな画面、屋外、移動中、など)。もっとも背景が写真の場合、ゴーストボタンがレイヤー配置されるエリアにおいて背景色は一定ではないため、文字 (ゴーストボタンのラベル) と背景のコントラストを厳密に確保するのは難しいかもしれませんが、できるだけ意識したいところです。

フォーカス時の視認性を高める

ゴーストボタンは、当然、キーボードでも操作できるべきです ([Tab] キーによってフォーカスを当てて、[Enter] キーで実行)。しかし、ゴーストボタンはものもと「控えめ」なビジュアルであるため、デザイン上の配慮がないと、フォーカスが当たっていても視覚的にわかりにくい可能性があります。フォーカス時の視認性を高めるスタイリングをすると、キーボード操作に頼らざるを得ない (マウスポインターをボタンに当ててクリックしたり、直接ボタンをタップしたりすることができない) ユーザーにとっても、使いやすいものになります。

たとえば、フォーカスが当たったときには色を反転させてみる (もともと枠線だった色でボタンを塗りつぶし、ボタン内のラベルは可読性の高い十分なコントラストを持った色にする)、というのも一考かと思います。

ゴーストボタンのフォーカス時のスタイリング例 (上がフォーカスが当たっていない状態、下がフォーカスが当たっている状態)
ゴーストボタンのフォーカス時のスタイリング例

高品位で大きな写真とゴーストボタンの組み合わせは、ユーザーのエモーションを高める効果的なデザインと言えます。そのうえで併せて、上記のようにアクセシビリティに配慮したデザインを盛り込むことで、より一層のユーザーエクスペリエンス (UX) 向上が期待できると思います。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加