スクリーリーダーで使う文字列の表示について
-
いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。—
【質問の主旨】
target属性をもつaタグが読み込まれたときにスクリーンリーダーを読み込まれるように、functions.phpで独自関数を追記しています。そのコーディングは以下の通りです。
// 記事本文中target属性をもつaタグにスクリーンリーダーを読み込む function screen_reader( $text ) { if ( stripos( $text, 'target' ) !== false && stripos( $text, '<a ' ) !== false ) { // spanタグの追加 $after = '<span class="screen-reader-text"></span><span aria-hidden="true" class="dashicons dashicons-external"></span>'; $text = preg_replace( '|(<a\s[^>]*target\s*=[^>]*>.*)(</a>)|i', '${1}' . $after . '${2}', $text ); } return $text; } if ( !is_admin() ) { add_filter( 'the_content', 'screen_reader', 10, 2 ); }
この場合において、パソコン内の音声を読み上げソフトを使う時だけ「新しいタブを開く」と読み上げられるようにし、
単にブラウザで読み込む時は「新しいタブを開く」は非表示にするというコードにするためにはどうすれば良いでしょうか?【質問の補足】
1.
target属性をもつaタグにスクリーンリーダーの属性をもつspanタグを追記しようとした理由は
WordPressフォーラムでいただいたこちらのコメントに基づきます。2.
target属性をもつaタグにスクリーンリーダーの属性をもつspanタグを追記するコーディングは
WordPressフォーラムでいただいたこちらのコメントに基づきます。3.
【質問の補足】の1と2でいただいたアドバイスでは、追記されるspanタグの中に(新しいタブで開く)
というテキストが入ります。<ul> <li> <a href="https://www6.nhk.or.jp/nhkpr/post/original.html?i=23759" rel="noopener noreferrer" target="_blank"> 新作5話、6月8日から5夜連続放送! 大家さんと僕 |NHK_PR|NHKオンライン <span class="screen-reader-text">(新しいタブで開く)</span> <span aria-hidden="true" class="dashicons dashicons-external"></span> </a> </li> </ul>
ですが現在の運用では下記の通り(新しいタブで開く)という箇所を削除しています。
<ul> <li> <a href="https://www6.nhk.or.jp/nhkpr/post/original.html?i=23759" rel="noopener noreferrer" target="_blank"> 新作5話、6月8日から5夜連続放送! 大家さんと僕 |NHK_PR|NHKオンライン <span class="screen-reader-text"></span> <span aria-hidden="true" class="dashicons dashicons-external"></span> </a> </li> </ul>
削除した理由は記事本文中のすべてのリンクに
(新しいタブで開く)
という文字列がつくと、視覚だけで読む人にとってはかえって読みづらくなるのではないかと感じたためです。—
以上、ご確認をよろしくお願いします。
ヘルプの必要なページ: [リンクを見るにはログイン]
2件の返信を表示中 - 1 - 2件目 (全2件中)
2件の返信を表示中 - 1 - 2件目 (全2件中)
- トピック「スクリーリーダーで使う文字列の表示について」には新たに返信することはできません。