【CSS】スマホでタップ時に表示される枠を消す方法

スマートフォンで要素をタップすると、フォーカス枠（アウトライン）が表示されます。この枠はアクセシビリティの向上に役立ちますが、デザイン上、不要な場合もあります。本記事では、このフォーカス枠をCSSで消す方法と、アクセシビリティを損なわないための代替案について解説します。

フォーカス枠を消す基本的な方法

まずは、要素がフォーカスされたときに表示されるアウトラインを消す基本的なCSSを紹介します。以下のコードを使用すると、ボタン、リンク、入力フィールドなどのフォーカス枠を消すことができます。

/* ボタン要素のフォーカス枠を消す */
button:focus {
    outline: none;
}

/* リンク要素のフォーカス枠を消す */
a:focus {
    outline: none;
}

/* 他のインタラクティブな要素のフォーカス枠を消す */
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

このコードを使用することで、タップ時に表示されるフォーカス枠をなくすことができます。

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

フォーカス枠を消すことでデザインが洗練される一方で、アクセシビリティが低下する可能性があります。フォーカス枠は、キーボード操作やスクリーンリーダーを使用するユーザーにとって重要な視覚的フィードバックを提供します。したがって、フォーカス枠を消す際には、他の視覚的なフィードバックを提供することが推奨されます。

フォーカス時の代替ビジュアルフィードバック

フォーカス枠を消す代わりに、フォーカス時に他の視覚的な変化を与えることで、アクセシビリティを確保します。以下に例を示します。

ボタン要素のフォーカス時に背景色を変更

button:focus {
    outline: none;
    background-color: #e0e0e0;
}

リンク要素のフォーカス時に下線を表示

a:focus {
    outline: none;
    text-decoration: underline;
}

これらのスタイルを適用することで、ユーザーはフォーカスがどの要素にあるかを視覚的に確認できます。

まとめ

フォーカス枠をCSSで消す方法について解説しましたが、アクセシビリティを考慮することが重要です。デザインとアクセシビリティのバランスを取りながら、ユーザーにとって使いやすいインターフェースを提供しましょう。