カテゴリー
お問い合わせ

【CSS】display: none はNG？画面から隠して読み上げブラウザに伝える Visually Hidden

HTML/CSS
目次

Webサイトを作っていると、「デザイン上はテキストを表示したくないけれど、意味としてはテキストを持たせたい」という場面があります。 例えば、虫眼鏡マークだけの「検索ボタン」や、三本線の「ハンバーガーメニュー」などです。

こういう時、安易に display: none; や visibility: hidden; を使ってしまうと、視覚に障害がある方が使う「スクリーンリーダー（音声読み上げソフト）」からも要素が完全に消え去ってしまい、「何のボタンか分からない」状態になってしまいます。

そこで現代のWeb制作で必須となるのが、「画面上の見た目からは隠しつつ、スクリーンリーダーには読み上げさせる」ための Visually Hidden というCSSテクニックです！今回はその具体的なコードと活用例をご紹介します。

デモ動作

See the Pen アクセシビリティを高めるVisually Hiddenテクニック by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>Visually Hidden 活用デモ</h2>
  <p class="p-desc">見た目はアイコンだけですが、音声読み上げソフトにはテキストが伝わります！</p>
  
  <div class="p-demo-box">
    
    <!-- 💡 例1：検索ボタン -->
    <div class="p-section">
      <h3>1. アイコンだけの検索ボタン</h3>
      <button class="c-btn-icon">
        <span class="c-icon">🔍</span>
        <!-- 画面からは隠すが、読み上げソフトには「検索する」と伝わる -->
        <span class="u-visually-hidden">検索する</span>
      </button>
    </div>

    <!-- 💡 例2：SNSリンク -->
    <div class="p-section">
      <h3>2. SNSのシェアボタン</h3>
      <a href="#" class="c-btn-icon c-btn-icon--twitter">
        <span class="c-icon">🐦</span>
        <!-- 読み上げソフトには「Twitterでシェアする」と伝わる -->
        <span class="u-visually-hidden">Twitterでシェアする</span>
      </a>
    </div>

  </div>
</div>

【CSS】

/* ベース装飾 */
.l-wrap {
  padding: 40px 20px;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  color: #3e3e3e;
  line-height: 1.6;
}

h2 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #1bb4d4;
}

.p-desc {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: bold;
  color: #666;
}

.p-demo-box {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 5%);
}

h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

/* デモ用アイコンボタンの装飾 */
.c-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  text-decoration: none;
  cursor: pointer;
  background: #eee;
  border: none;
  border-radius: 50%;
  transition: opacity 0.3s;
}

.c-btn-icon:hover {
  opacity: 0.7;
}

.c-icon {
  font-size: 30px;
}

.c-btn-icon--twitter {
  color: #fff;
  background: #1da1f2;
}

/* =========================================
   Visually Hidden のユーティリティクラス
========================================= */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip-path: inset(100%) !important;
}

コードの解説・意味

Visually Hidden を使う意味と場面

Webサイトは目で見るだけでなく、音声読み上げソフトを利用して耳で情報を得るユーザーもたくさんいます。
以下のような場面では、必ず Visually Hidden を使って「見えないテキスト（代替テキスト）」を配置しましょう。

  • アイコンのみのボタン（検索ボタン、メニューボタン、SNSリンクなど）
  • デザインの都合上、見出しタグ（h2など）を視覚的に隠したい場合
  • フォームの入力欄で、ラベル（<label>）を画面には出したくない場合

なぜこんなに複雑なCSSを書くの？

.u-visually-hidden のクラスには、たくさんのプロパティが指定されています。 もし display: none; や width: 0; height: 0; を使ってしまうと、ブラウザが「この要素は存在しないもの」として扱い、スクリーンリーダーが読み飛ばしてしまいます。 そのため、「サイズを1pxにする」「枠外にはみ出させて切り取る（clip）」「絶対配置（absolute）でレイアウトに影響を与えない」といった工夫を重ねて、「存在はしているけれど、人間の目には見えない状態」を強制的に作り出しているのです。

まとめ

今回は、Webアクセシビリティを向上させるための必須テクニック「Visually Hidden」をご紹介しました。

視覚的なデザイン（UI）を美しく保つことと、すべての人が情報を得られること（アクセシビリティ）は、どちらも妥協してはいけない大切な要素です。

この .u-visually-hidden クラスは、一度CSSファイルに登録しておけばどんなプロジェクトでも使い回せる非常に便利なユーティリティクラスになります。ぜひ皆さんのベースCSSにも追加して、誰にでも優しいWeb制作を心がけていきましょう！

Prev
Next

関連記事