[キタジマ タカシ]

上記のページによると、'suppress_filters' => false の追加も必要とありました。追加してみるとどうなりますか？

♥ 0

Who liked: No user

[キタジマ タカシ]

サイドバー部分に隠し見出し的なものか aria-label="サイドバー" を追加すれば、「サイドバー」と読んでくれると思います。ここ、普通に「サイドバー」で一般の方にも意味が伝わりますかね？

♥ 0

Who liked: No user

[キタジマ タカシ]

plugins/snow-monkey-forms/dist/blocks/snow-monkey-form/render.php の form に tabindex="0" を追加することで実現できます。

<form class="snow-monkey-form" id="snow-monkey-form-<?php echo esc_attr( $form_id ); ?>" method="post" action=""  enctype="multipart/form-data" data-screen="loading">

を

<form class="snow-monkey-form" id="snow-monkey-form-<?php echo esc_attr( $form_id ); ?>" method="post" action=""  enctype="multipart/form-data" data-screen="loading" tabindex="0">

追加して確認をお願いします！

ちょっと思ったのは、一般的なやり方化はわからないのですが、例えば

<div class="screen-reader-text" tabindex="0">ここからフォームが始まります</div>
<form class="snow-monkey-form" id="snow-monkey-form-<?php echo esc_attr( $form_id ); ?>" method="post" action=""  enctype="multipart/form-data" data-screen="loading">

とすると、タブを押したときに「ここからフォームが始まります」にフォーカスして読まれるけど画面には表示できなくすることができるので、そのほうがわかりやすいかも？と思ったりしました。もう一回タブを押すと戻るボタンにフォーカスしちゃうので、確認画面の内容を読ませたいなら [Control] + [Option] + [→] を押してもらわないとですが…。

♥ 0

Who liked: No user

[キタジマ タカシ]

プログレストラッカーは読み上げられたのですが、どの項目が太字なのかわからないので、プログレストラッカーとしての役割は果たせていないようでした。

これたしかにそうですね。ちょっとまだどうやれば良いかはわかっていないのですが、aria-label とかで「プログレストラッカー」と入れて、選択中の項目のところ（例えば今確認画面を表示しているなら「確認」のところ）にも「現在このページが表示されています」みたいなテキストを設定しておくと良いのかな？と思いました。これは試してみます。

♥ 0

Who liked: No user

[キタジマ タカシ]

「確認画面へ」ボタンを押すと、「現在グループ内の Web コンテンツ上にいます」となって、ページの1つ外側（ブラウザ？）にいる状態になりました。そして、「[Control] + [Shift] + [Option] + [↓] で Web コンテンツ内に入れます」という案内がありました。

ここで指示に従って入ると普通に操作できるようになって、[Control] + [Option] + [→] と [Control] + [Option] + [→] で確認画面部分も読み上げられました（移動はかなりめんどい…）

指示に従わずに [Tab] をクリックすると、一気に送信ボタンのところに飛んでしましました。

確認画面や完了画面に遷移したあとは [Tab] を押すのが一般的であれば、[Tab] を押したときにフォーム全体にフォーカスが移るようにしたほうが良いのかな？と思ったのですがどうでしょうか？

軽く試した感じでは、[Tab] でフォーム全体にフォーカスが移るようにはなりそうだったのですが、フォーム（確認画面）内のテキストも連続で読み上げはじめてよくわからない感じになってしまいそうでした…が、そこから [Control] + [Option] + [→] をクリックすると、フォームの中のテキストにフォーカスがちゃんと移動しました。

♥ 0

Who liked: No user

[キタジマ タカシ]

VoiceOver の普通の操作方法がわからなくて申し訳ないのですが、どちらのページも、[option] + [control] + [→] を連打して「本文」に移動したあと、[option] + [control] + [A] を押すと本文が自動で読み上げられました。

これが普通の操作方法なのかわからないので、どういう操作をしたときに読み上げられなかったかがわかれば教えてほしいです！

♥ 0

Who liked: No user

[キタジマ タカシ]

「スマホ版サイト」というのは、スマホでのみ閲覧できるサイトということでしょうか？ もしそうで、スマホ以外（PC 等）を考慮しないので良いのであれば、「コンテンツ部分のコンテナーの余白を削除」を有効にすれば左右余白は無くなるはずです。

PC では余白が必要だけどモバイルでは無くしたい、ということであれば CSS を書く必要があります。

状況がよくわからないので、可能であればスクショで説明いただけると、もっと具体的にアドバイスできる可能性が高まると思うのでよろしくお願いします。

♥ 0

Who liked: No user

[キタジマ タカシ]

CSS で消すのが一番簡単です。カスタム投稿タイプのスラッグが news だとすると、news の詳細ページには .single-news というクラスがつくので、下記の CSS で消せます。

.single-news .wp-profile-box {
  display: none;
}

HTML の出力自体をなくしたいなら、フックを使う必要があります。

add_filter(
	'snow_monkey_get_template_part_args_template-parts/content/entry/entry',
	function( $args ) {
		// 投稿タイプが news 以外のときは無視
		if ( 'news' !== get_post_type() ) {
			return $args;
		}

		// news のときはプロフィールボックスを表示させない
		$args['vars']['_display_profile_box'] = false;

		return $args;
	}
);

♥ 1

Who liked:

[キタジマ タカシ]

このエラーだと、カスタマイザーのページに不正な HTML 出力がある可能性が高いのかなと思います。例えば My Snow Monkey に追加したコードや、追加したプラグインが PHP エラーを出していて、そのエラーメッセージTML）がカスタマイザーのページに出力されることで発生するなど。

もし PHP エラーの場合はサーバーのエラーログで詳しい場所やメッセージが確認できるので、そちらも確認してみるのが良いかなと思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

そのエラーが発生したタイミングで、ブラウザのコンソールにエラーメッセージが表示、あるいは、サーバーのエラーログにエラーメッセージが記録されているのではないかと思います。

一度それらを確認して、エラーメッセージがあるようであれば共有をお願いします！

♥ 0

Who liked: No user

[キタジマ タカシ]

Snow Monkey Blocks v23.1.2 をリリースしました。アップデートして、改善しているかご確認お願いします！

♥ 2

Who liked:

[キタジマ タカシ]

ありがとうございます！こちらでも再現できまして、同じエラーでした。すぐ修正版を出そうと思うので、リリースしたらまた書き込みます。

♥ 2

Who liked:

[キタジマ タカシ]

わーすみません！恐らくアップデートの影響だと思います。エラーが発生したときにブラウザのコンソールにエラーがでると思うので、そのエラーメッセージを教えてください！

♥ 0

Who liked: No user

[キタジマ タカシ]

良かったです！
解決済みということで、トピックのクローズをお願いしますm(__)m

♥ 1

Who liked:

[キタジマ タカシ]

互換性を考えると、JS でやるより CSS でやるほうが良いと思うので、ちょっと CSS を書いてみました。

.c-drawer__item--has-submenu,
.c-drawer__subitem--has-submenu{
    position: relative;
}

/* トグルボタンを持っているメニューのリンクを無効化 */
.c-drawer__item--has-submenu > a,
.c-drawer__subitem--has-submenu > a {
    pointer-events: none;
}

.c-drawer__item--has-submenu .c-drawer__toggle,
.c-drawer__subitem--has-submenu .c-drawer__toggle{
    position: static;
}

/* トグルボタンの疑似要素を利用して、クリック範囲をメニュー全体に広げる */
.c-drawer__item--has-submenu .c-drawer__toggle::before,
.c-drawer__subitem--has-submenu .c-drawer__toggle::before {
    content: '';
    position: absolute;
    inset: 0;
}

ドロワーやグローバルナビゲーションは CSS が濃いので、JS にしろ CSS にしろ、アップデートの際の後方互換性に影響がでる可能性はあるのでご注意ください！

♥ 0

Who liked: No user

[投稿者]

投稿