サポート » テーマ » スクリーリーダーで使う文字列の表示について

  • 解決済 echizenya

    (@echizenya)


    いつもお世話になっています。
    下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

    【質問の主旨】

    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件中)
  • こんにちは

    下記ページの「WordPress Generated Classes」の CSS は記述されていますか?
    https://codex.wordpress.org/CSS

    /* Text meant only for screen readers. */
    .screen-reader-text {
    	border: 0;
    	clip: rect(1px, 1px, 1px, 1px);
    	clip-path: inset(50%);
    	height: 1px;
    	margin: -1px;
    	overflow: hidden;
    	padding: 0;
    	position: absolute !important;
    	width: 1px;
    	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
    }
    
    .screen-reader-text:focus {
    	background-color: #eee;
    	clip: auto !important;
    	clip-path: none;
    	color: #444;
    	display: block;
    	font-size: 1em;
    	height: auto;
    	left: 5px;
    	line-height: normal;
    	padding: 15px 23px 14px;
    	text-decoration: none;
    	top: 5px;
    	width: auto;
    	z-index: 100000;
    	/* Above WP toolbar. */
    }

    こちらの CSS により表示されないと思います。
    なお、WordPress テーマの CSS には、screen-reader-text クラスが必要(公式テーマでは必須)です。

    • この返信は3ヶ月、 2週前にishitakaが編集しました。

    @ishitaka さん。
    こんにちは。いつもコメントありがとうございます。

    下記ページの「WordPress Generated Classes」の CSS は記述されていますか?

    ご指摘助かります。「WordPress Generated Classes」について全く気づいていませんでした。教えていただいたCSSのコードをstyle.cssの最下行に追記しました。

    そうすると、spanタグの中に(新しいタブで開く)を記述しても記事中に表示されなくなりました。ありがとうございます。これからもどうぞよろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。