1. 「outline: none;」という禁忌（タブー）

Web制作の現場で、デザインの整合性を守るために CSS で outline: none; や outline: 0; を指定し、フォーカス時の枠線を消し去ってしまうケースが後を絶ちません。

しかし、これはアクセシビリティの観点からは非常に危険な選択です。

マウスを使わず、キーボードの「Tabキー」で操作するユーザーにとって、フォーカス・インジケーターは**「現在地を示す唯一の標識」**だからです。

2024年4月に施行された改正障害者差別解消法による「合理的配慮の義務化」を鑑みても、操作不能な状態（キーボードトラップの一歩手前）を作り出す実装は、もはやリスクでしかありません。

2. :focus-visible で解決する「デザイン」と「機能」の対立

かつては「マウスでクリックした時にも枠線が出てしまうのが格好悪い」という理由で消されてきました。

しかし、現代のブラウザ実装では :focus-visible 擬似クラス を使うことで、この問題はスマートに解決できます。

/* マウス操作時は枠を出さず、キーボード操作時のみ表示 */
.button:focus-visible {
  outline: 3px solid #0055ff; /* サイトのメインカラー */
  outline-offset: 2px;
}

/* 従来の outline: none は、focus-visible をサポートしない環境への配慮が必要 */
.button:focus:not(:focus-visible) {
  outline: none;
}

この実装により、デザインを重視するマウスユーザーにはノイズを与えず、キーボード操作が必要なユーザーには確実な視認性を提供することが可能です。

3. 京都の美学を実装に宿す「おもてなしの枠線」

京都ホームページでは、ブラウザ標準の無機質な青い枠をそのままにするのではなく、サイトの世界観に溶け込む「カスタム・インジケーター」を提案しています。

• コントラスト比の確保: 背景色に対して十分なコントラスト比（4.5:1以上）を維持した配色。

• outline-offset の活用: outline-offset を数ピクセル設定するだけで、ボタンの角丸や境界線に干渉しない、美しく整った外枠を描けます。

• アニメーションの付加: フォーカスが当たった瞬間に、ほんの少しだけ枠が膨らむような動きを加えることで、操作に「心地よさ」という付加価値を与えます。

4. まとめ：見えないところまで「整える」

京都の伝統的な建築物や庭園が、目に見えない細部の手入れによってその美しさを保っているように、Webサイトもまた、コードの裏側に宿る「配慮」がその品質を決定づけます。

「outline: none;」で思考を停止するのではなく、あらゆるユーザーが迷わずに目的地へ辿り着ける「道」を整えること。

それが、京都ホームページが追求するWeb制作のあり方です。

Webアクセシビリティへの対応や、セマンティックなマークアップのご相談は、京都ホームページへお問い合わせください。