Win11 コントラストテーマをオンにすると一部のサイトのラジオボタンのチェックが見えなくなる

今回は、Windows 11 でコントラストテーマをオンにすると、Microsoft Edge や Google Chrome などのブラウザーで一部のサイトのラジオボタンのチェックが見えなくなる場合の原因と対処法を紹介します。

目次

ブラウザーで一部のサイトのラジオボタンのチェックが見えなくなる場合の原因と対処法

原因

一部のサイトのラジオボタンのチェックが見えなくなる原因は、ラジオボタンにスタイルが指定されているためです。

例えば Yahoo!知恵袋の質問にある、ベストアンサーへのお礼のラジオボタンを開発者ツールで確認すると、Input 要素に class が指定されています。

開発者ツールで Input 要素に指定されている class を削除すると、チェックが見えるラジオボタンが出現します。

class を削除すると、チェックが見えるラジオボタンが出現
class を削除すると、チェックが見えるラジオボタンが出現

さらにチェックが見えない大きな〇の部分を削除すると次のようになりました。

HTML コードの変更前と変更後
HTML コードの変更前と変更後

対処法

対処法は 2つあります。

1.WEB サイトに依頼する

根本的に解決するには WEB サイトに依頼する必要があります。

対処してくれるかはわかりませんが、ご利用する WEBサイトにスタイルの指定を削除または変更してもらうようにお願いをしてみてください。

2. ブラウザーの設定で一時的に選択が見えるようにする

Google Chrome の場合

1.Google Chrome を開き、右上の「︙」をクリック>「設定」をクリックします。

2.左側のメニューの「ユーザー補助機能」をクリックします。

ユーザー補助機能
ユーザー補助機能

3.「フォーカス中の項目をハイライト表示する」をオンにします。

ユーザー補助機能 - 「フォーカス中の項目をハイライト表示する」
ユーザー補助機能 – 「フォーカス中の項目をハイライト表示する」

すると、ラジオボタンを選択した際に周りに枠が表示されるようになります。

選択するとハイライトされる
選択するとハイライトされる

ただ、この枠はすぐに(約 2秒)消えてしまいますので、一時的に選択をしたかどうかを確認するための機能です。

Microsoft Edge の場合

1.Microsoft Edge を開き、右上の「・・・」をクリック>「設定」をクリックします。

2.左側のメニューの「アクセシビリティ」をクリックします。

アクセシビリティ
アクセシビリティ

3.一番上にある「ページのフォーカス領域の周囲に高い可視性のアウトラインを表示する」をオンにします。

ページのフォーカス領域の周囲に高い可視性のアウトラインを表示する
ページのフォーカス領域の周囲に高い可視性のアウトラインを表示する

すると、ラジオボタンを選択した際に周りに枠が表示されるようになります。

選択するとハイライトされる
選択するとハイライトされる

ただ、この枠はすぐに(約 2秒)消えてしまいますので、一時的に選択をしたかどうかを確認するための機能です。

この記事が「役立った!」と思ったら、ぜひSNSでシェアをお願いします。
  • URLをコピーしました!

この記事を書いた人

日々の PC 操作から生まれた疑問や、「もっとこうしたい」という想いを原動力に、2008年頃から現在に至るまで Windows の知識を独学で追求してきました。試行錯誤を重ねて見つけた「なるほど!」な技や、困った時の解決策を、皆さんの PC ライフに役立ててほしい一心で発信しています。

プロフィールを見る

コメント

コメントする

【投稿について】
記事の内容に関するご質問や情報提供は大歓迎です。
ただし、記事の趣旨と無関係な内容、特定の人物・団体への批判、攻撃的な表現、不適切な語句を含むコメントは、管理人の判断で予告なく削除・非公開とさせていただく場合があります。
また、スパム対策機能により自動的に削除される場合もありますのでご了承ください。

CAPTCHA


目次