- このトピックには10件の返信、2人の参加者があり、最後に
により3年、 10ヶ月前に更新されました。
-
投稿
-
現状の Snow Monkey Forms で「確認する」ボタンを押し、確認画面へ遷移した場合、先頭スクロールがしないようです。
（iPhone、またはMac Safari時…それ以外は未確認）なので、確認画面の表示がされる際は「戻る」「送信する」の最後部が表示される形となり、縦に長いフォームになると「お前は何を確認させたいんだ（AA略）」とか、いちいちスクロールで戻らないといけないので「お前は本当に確認させる気があるのか（AA略）」な状態などになっていると思います。
各イベント発生後にフォームの先頭箇所へスクロールするようにすると、使い勝手も上がると思いますがどうでしょうか？
追記：公式のお問い合わせフォームでも先頭にスクロールしない事を確認してます
Who liked: No user再度幾つかのブラウザ確認すると、確かに Safari だけスクロールしないようでした。Linux でも Chrome だと起こりませんね。
(※ なお、Windows 環境の Edge などは不明です）公式お問い合わせフォームでも Safari だけで起こっているのを確認できています。
Who liked: No userこのフォーム先頭への移動、
divにtabindex="-1"をつけて実現しているのですが、どうも Safari はそのような要素は無視し、フォームの要素やリンクだけが対象になるようです。ダミーのテキストフィールドを disabled で置いてみたり、
display: noneで置いてみたりもしたのですが、ちゃんと送信できるものでないとフォーカスされないようです。ということでこれ結構対処難しそうだなと…。Who liked: No userんー、こちらでも調べてみた感じだと Safari では確かに
tabindexでフォームにフォーカスを当てるの難しい感じですね。となると…フォームの先頭に
ｉｄなどを一意的に自動的に割り当てて、送信した瞬間にｉｄへのスクロールを発生させるとかでは駄目です？要は、先頭に行けば良いと言う考えです。
（やってみないと解らないけど、今の仕様ならフック使ってでも一意的なｉｄをランダム生成できるっぽいし）入力へ戻る場合は、確かに先頭の入力にフォーカスも移動する方が良いんですが、
確認画面と完了画面って基本的には入力をする画面じゃないので…フォームの先頭にスクロールをさせるだけでも今よりはマシになるのではないかと。何か５０１出るので、ｉｄと大文字にしといた（汗）
Who liked: No userアンカーへのスクロールってことですよね。それだとドロップナビやヘッダーの高さなんかも考慮しないといけなくなるのでちょっと面倒なんですよね。今試していたのですが、フォーカスさせている
.smf-focus-pointをa要素にして適当なテキストを入れておき、それを.smf-focus-point { outline: none; height: 1px; overflow: hidden; display: block; font-size: 0px; }しておけば気にならないくらいの見え方でフォーカスも効くようにできそうでした。
Who liked: No userなるほど。
気にならない見え方ですし、
screen textのやり方と似たような方法なので SEO 的にも大丈夫そうですね。
灯台などのスコアで見えないテキスト云々と警告になる場合があるのですが、
少し試してみただけの感じでは問題なさそうでした。いや、、ページ内検索（
コマンド + F）した場合に適当なテキストが引っかからないかどうかだけ未検証なので、
そこの検証は必要そうですね…。後でチェックしときます。このサポートフォーラム、ｃｍｄって単語だけでも 501 出るの…コード弾きが強すぎ…
Who liked: No userいや、、ページ内検索（ コマンド + F ）した場合に 適当なテキスト が引っかからないかどうかだけ未検証なので、
そこの検証は必要そうですね…。後でチェックしときます。僕も未検証ですが、多分ひっかかると思うんですよね。だから検索にかかるのもそうだし、もし表示されてもおかしくないテキストにしないとかな？と思いました。全然良いのが思いついていないですが、「フォームの先頭」みたいな。
このサポートフォーラム、ｃｍｄって単語だけでも 501 出るの…コード弾きが強すぎ…
ねー。普通の記事投稿画面だとコードも普通に書けることが多いので、フォーラム投稿でも書けるようになってほしいんですけどね…。
Who liked: No userinput[text].smb-focus-pointにして.smf-focus-point { pointer-events: none; outline: none; background-color: black;; border: none; box-shadow: none; width: 1px; height: 1px; line-height: 0; overflow: hidden; font-size: 1px !important; padding: 0; margin: 0; } .snow-monkey-form { position: relative; } .snow-monkey-form .smf-focus-point { position: absolute; top: 0; left: 0; }でも良いかも。これならテキスト考えなくても良いし。
Who liked: No userだから検索にかかるのもそうだし、もし表示されてもおかしくないテキストにしないとかな？と思いました。
少し関連する事かもと、今少し試してましたが
WordPress の 標準でもあるscreen-reader-textでも、ページ内検索ではその中に記述されている文字列はヒットしていますね。
ソーシャルナビでscreen-reader-textに変更してもらいましたが、
この場合はページ内検索時じゃなく、リンクのカーソルに合わせた場合でも、リンク内文字列を音声で正しく鳴るようになっているので、むしろメリットと考えられます。
（音声ブラウザの設定にもよるんだろうけど、Twitterの鳥アイコンなら、マウスホバーすると「ツイッター」って発音してくれるようになった）そう考えたら、文字列を入れて進行によって「この先の項目を入力してください」「この先の項目を確認してください」みたいな見えない文字列にも変わるようになれば、音声ブラウザ上では違和感がない、むしろ確認などを促せるメリット効果になる可能性も考えられるかも。
と、考えているうちに別のコードが書かれている（笑）
ちょっとコードの方はまだ試せてませんが、書かれたコードのパターンだと確かにテキスト要らなくなりスッキリしますね。Who liked: No user
- トピック「Snow Monkey Forms のアクション時にスクロールさせられないか」には新しい返信をつけることはできません。