さよなら display: none; (画面読み上げソフトウェア対策)

初心にもどって、WordPressの標準テーマ「twentyfifteen」のコードを読んでいると、見慣れないCSSを発見！

/**
 * 7.0 Accessibility
 */

/* Text meant only for screen readers */
.says,
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

クラス「.screen-reader-text」を要素につけると、「display: none;」と同じ動きをします。だったら、「display: none;」で良いんじゃね？と思って調べると、「display: none;」だと画面読み上げソフトウェアで読み上げてくれないらしい。

clipプロパティを使った非表示の方法をもっとシンプルにすると、下記のようなCSSになります。

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
}

clipプロパティはボックスを切り抜き表示（クリッピング）する際に使用するもので、上記で縦横0pxの領域を切り抜き(つまり非表示に)しているようです。positionプロパティは、absoluteまたはfixedでないとclipプロパティが発動しないので指定しています。

clipプロパティのCSS2の仕様では「ボックスの四辺の端から内側への距離」を指定することになっていますが、 CSS2.1では「ボックスの上辺と左辺を基準とした距離」と改定されています。
http://www.htmq.com/style/clip.shtml より引用

しかし、このrectは、IE6/7では、カンマ（,）区切りではなく半角スペース区切りで値を指定しないと切り抜きされないようで、それに対応するには、下記のような書き方になります。

.screen-reader-text {
	clip: rect(1px 1px 1px 1px);  /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
}

このclipプロパティを使った非表示がSEO的にどうかはわかりませんが、少なくとも画面読み上げソフトウェア的には「display: none;」よりも良いようです。

以上、ご参考になりましたら幸いです。

なお、ボックスはそのままにテキストだけを非表示にするには、記事「さよなら-9999px (CSSでテキストを画像にする方法)」をご覧ください。