CSS 擬似要素はスクリーンリーダーでどう読まれるのか

CSS の擬似要素「::before」「::after」を使って表示されるテキストや記号、装飾はスクリーンリーダーではどの様に解釈されるのでしょうか。
擬似要素で挿入されたテキストが Google の検索結果に表示される事から、Google のクローラーにはコンテンツとして認識されている様に見えます。

ブラウザとスクリーンリーダーの組み合わせや種類によって挙動が異なるので正解は無いのですが、数パターンの組み合わせを使って実際に検証してみました。

擬似要素でテキストを挿入した場合

::before ::after で content にテキストを指定

element::before{
  content: 'テキスト'
}
element::after{
  content: 'テキスト'
}

この場合、スクリーンリーダーにはテキストが読まれると思って間違い無いでしょう。
スクリーンリーダーは擬似要素かどうかの区別なく文章の一部として読み上げます。

擬似要素で記号やアイコンを挿入した場合

キーボードから入力出来る記号「/(スラッシュ)」や「|(パイプ)」等は文字として読み上げられます。
擬似要素だから読み上げられないと思ってメニューの境界等にに用いるとしっかりと読み上げられてしまうので注意が必要です。

アイコンを擬似要素で挿入した場合。
Google のアイコンフォント Material Icons を擬似要素として利用したとすると

element::before{
  content: 'home';
  font-family: 'Material Icons'
}

この場合も content 内の「home」が読み上げられます。
又、content にコードを利用して

element::before{
  content: '\e88a';
  font-family: 'Material Icons'
}

とする事も出来ますが、この場合はスクリーンリーダーが読み取れずに無言になる場合が有ります。
NVDA では上手く処理して読み飛ばしたりもしますが、インライン要素をまとめて読み上げるか、個々に読み上げるかといったスクリーンリーダーの仕様による影響も有りそうです。

特に注意したいのが、見出しの前に擬似要素として挿入している場合です。
スクリーンリーダーには次の見出しへジャンプするコマンドが通常備わっていますが、見出しへジャンプした時にアイコンの擬似要素が邪魔をして見出しを正しく読み上げられないといった事がおき、これが非常にユーザーのストレスになります。

アイコンを使うなら擬似要素としてでは無く、HTML タグとして

<span class="material-icons" aria-hidden="true">home</span>

の様に、aria-hidden="true" を併用する事を推奨します。
これであれば<h2>、<h3>タグの中にアイコンを入れたとしても見出しが正しく読み上げられます。

擬似要素を装飾目的として使用する場合

content を空にし、擬似要素を装飾として使用

element::after{
  content: '';
  ...
}

「content: ''」とするとスクリーンリーダーでは読み上げません。
その後に border や background を使って線や背景色をデザインしてもスクリーンリーダーの読み上げには影響しません。

装飾目的なら、テキストで「|(パイプ)」記号は使わず、border で縦線を引けばアクセシビリティを保ちつつデザインする事が出来ます。
こういった事から、特別な理由が無いならアクセシビリティを考慮し、擬似要素は装飾目的の利用に限定した方が良いでしょう。