テキストを視覚的に隠しつつスクリーンリーダーだけに伝える方法

2025.05.26

visually-hiddenクラスに対してスタイルが記述されている画面のキャプチャ

WEBチームのKです。

業務中、text-indent: -9999vw;というcssの記述を見かけました。
指定されていたのはページャーの矢印部分で、矢印はcssで描写されており、画面外へとtext-indentされたテキストは「next」となっていました。

.arrow {
  text-indent: -99999vw;
}

/* 矢印 */
.arrow::before {
  /* 省略 */
  }
}

※わかりやすいように実際の記述より簡略化しています

内容からして、テキストを視覚的に隠しつつスクリーンリーダーに伝える、アクセシビリティのためのテクニックとして用いられていると思われます。
スクリーンリーダーはcssで描かれた矢印を読めないため、こうした方法で「next」という意味内容を伝えているわけですね。
調べてみたところ、寡聞にして知らなかったのですが、以前は広く使われていたテクニックだそうです。

よい機会なので、同様の目的で使用されるテクニックについてまとめてみました。

Phark手法

.hide-text {
    text-indent: -9999px;
}

上記で紹介したテクニックです。考案者の名前を取って、Phark手法（Phark method）と言われているそうです。
（筆者が実際に見たものはpxではなくてvwで記述されていましたが、考え方としては同じです）

いくつかの記事を見ると、（描画サイズが大きくなるため）パフォーマンスの低下を招く、SEO的にネガティブな評価を招く可能性があるといったデメリットが指摘されています。
非常にシンプルに書ける方法ではありますが、現在では使用を避けた方が無難と思われます。

Kellum手法

Phark手法に代替する形で考案されたのがKellum手法（Kellum method）です。こちらも同じく、考案者の名前から命名されています。

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

overflow: hidden;が指定された領域の外にテキストを出すことによって、視覚的に見えなくするテクニックです。
overflow: hidden;で不可視化された領域はスクリーンリーダーには伝わるため、アクセシビリティ的に補助が可能です。

visually-hidden / sr-only

BootstrapやTailwind CSSといったCSSフレームワークでは、「visually-hidden」や「sr-only」（Screen reader onlyの略）といったクラスが定義されています。

例えばBootstrap5.0.2のbootstrap.cssには、以下の記述があります。

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Tailwind CSS v4.0ではこちら

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

ほぼ同じですね。

サイズを限りなく小さくして見えなくするテクニックです。
細かい仕様は作り手によってそれぞれ異なりますが、これと概ね同じアイディアに基づいた方法が、現在（2025.4）では非常に広く用いられているようです。

例えば、Googleの検索結果ページにはこのような記述があります。

.bNg8Rb {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

Apple公式サイト（https://www.apple.com/）でも、h1タグにvisuallyhiddenというクラスが付与されており、下記のようなスタイルが当てられていました。

.visuallyhidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}

GoogleやAppleの方法は見たところ、完全に消すというより、肉眼で見えないレベルにまで要素を小さくするというやり方のようですが、概ね同様と言ってよいでしょう。

まとめ

アクセシビリティの対応はつい見落としてしまいがちで、また時代によっても最適解が変わってくる大変な領域ですが、同時にエンジニアとしての腕の見せどころとも言えます。
日々勉強しつつ業務に臨みたいと思います。

Blogブログ