さよなら display: none; (画面読み上げソフトウェア対策) | サイトスパイラル(Sitespiral) - 沖縄で ホームページ制作 / WordPressのことなら
初心にもどって、WordPressの標準テーマ「twentyfifteen」のコードを読んでいると、見慣れないCSSを発見！
www.sitespiral.jp
スクリーンリーダー（機械が音声を読み上げてくれる機能）を使う際、機械に読んでほしいが、画面には表示したくない要素というものがある。
これに、CSSでdisplay:none;をあててしまうと、画面には表示されないが機械も読み取らなくなってしまう。
そんなときに役に立つのが、clipプロパティ！！
こんな感じで使う↓
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
}TailwindCSSにもスクリーンリーダが使えるクラスが存在する
display - Layout
Utilitiesforcontrollingthedisplayboxtypeofanelement.
tailwindcss.com
