回答編集履歴
2
言いすぎた感のある記述を取り下げ
test
CHANGED
|
@@ -142,13 +142,11 @@
|
|
|
142
142
|
|
|
143
143
|
### おまけ
|
|
144
144
|
|
|
145
|
-
こうするのは面倒で
|
|
145
|
+
こうするのは面倒ですね。
|
|
146
|
-
|
|
146
|
+
|
|
147
|
-
解答欄を問題のついでに書き換わる部分に置く
|
|
147
|
+
また、解答欄を問題のついでに書き換わる部分に置くようなコードはあまり見かけません。
|
|
148
|
-
|
|
148
|
+
|
|
149
|
-
解答欄を出したり消したり
|
|
149
|
+
そこで、解答欄を出したり消したりするのにはjQueryのhide showなどを使う方法を提案してみます。
|
|
150
|
-
|
|
151
|
-
例えば以下のように
|
|
152
150
|
|
|
153
151
|
```html
|
|
154
152
|
|
|
@@ -246,42 +244,48 @@
|
|
|
246
244
|
|
|
247
245
|
|
|
248
246
|
|
|
247
|
+
このコードはアクセシビリティ（あらゆる人に使えるようになっているかという点。ここではスクリーンリーダーや点字ディスプレイ利用者、キーボード以外の入力デバイスの利用者など）の観点から言うと良くありません。
|
|
248
|
+
|
|
249
|
+
think49さまの2017/11/08 12:00のコメントにある通り、
|
|
250
|
+
|
|
251
|
+
問題をHTMLに書いておくか、問題を隠したいならサーバサイドスクリプトなどページ遷移を伴う方法を代替として提供するかするのが良いです。
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
|
|
249
255
|
#### 補足
|
|
250
256
|
|
|
251
257
|
think49さまの指摘もあり、確かに説明不足だと思ったので補足します。
|
|
252
258
|
|
|
253
259
|
|
|
254
260
|
|
|
255
|
-
> こうするのは面倒で、
|
|
261
|
+
> こうするのは面倒で、
|
|
256
262
|
|
|
257
263
|
|
|
258
264
|
|
|
259
265
|
イベントハンドラの設定を毎回作り直した要素について行い直すのは、記述の位置がその要素を作った場所になることによって、コールバック地獄を悪化させる恐れがあります。これが「面倒」なことです。
|
|
260
266
|
|
|
261
|
-
|
|
267
|
+
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
268
|
+
|
|
265
|
-
>
|
|
269
|
+
>また、解答欄を問題のついでに書き換わる部分に置くようなコードはあまり見かけません。
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
+
|
|
271
|
+
|
|
270
272
|
|
|
271
273
|
フォームを隠しておきたいときにinnerHTMLやjQuery.fn.htmlでフォームを出すのはそう見かけないと思います。
|
|
272
274
|
|
|
273
|
-
|
|
275
|
+
アニメーションを入れるため、とか、tabindexを適切に設定してアクセシビリティを向上させたいから、とか、理由はいろいろあるのでしょう。
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
276
|
+
|
|
277
|
-
|
|
277
|
+
あまり見かけないコードは読む人（未来の自分を含む）を混乱させるので、よくある書き方をした方が良いのではないでしょうか。
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
|
|
281
|
+
> アクセシビリティ
|
|
278
282
|
|
|
279
283
|
|
|
280
284
|
|
|
281
285
|
hide/showはdisplay属性をいじります。これで要素を出したり隠したりすると、スクリーンリーダーがうまく対応しないということが考えられると思います。最近ではaria-hidden属性を使ってスクリーンリーダー向けにも隠された要素と明示することが広まりつつあると思います。
|
|
282
286
|
|
|
283
|
-
とはいえ、キーイベントを使った回答受付やjQuery.fn.htmlを使った問題文の更新という作りが、そういった方々への対応を考えたものと
|
|
287
|
+
とはいえ、キーイベントを使った回答受付やjQuery.fn.htmlを使った問題文の更新という作りが、そういった方々への対応を考えたものとなっていません。
|
|
284
|
-
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
|
|
285
|
-
|
|
291
|
+
（いくらか編集しています。（あとから読む方へ）編集内容は投稿日時の下、編集日時のところにリンクがあるはずです。）
|
|
286
|
-
|
|
287
|
-
言われてみれば、そう書いた方がわかりやすかったですね。
|
1
補足
test
CHANGED
|
@@ -243,3 +243,45 @@
|
|
|
243
243
|
|
|
244
244
|
|
|
245
245
|
```
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
#### 補足
|
|
250
|
+
|
|
251
|
+
think49さまの指摘もあり、確かに説明不足だと思ったので補足します。
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
> こうするのは面倒で、（今ではあまり無いはずですがかつては）メモリリークのリスクなどがあったので、
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
イベントハンドラの設定を毎回作り直した要素について行い直すのは、記述の位置がその要素を作った場所になることによって、コールバック地獄を悪化させる恐れがあります。これが「面倒」なことです。
|
|
260
|
+
|
|
261
|
+
さらに、この際に古い要素のイベントハンドラを外し忘れて、DOMオブジェクトとJavascriptオブジェクトを共に含む循環参照ができてしまうと、メモリリークを起こすという現象が昔のIEではあったと聞いています。jQueryはキャッシュなどで参照が絡んでいるので、このリスクがあると思いました。
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
> 解答欄を問題のついでに書き換わる部分に置くことは一般的ではありません。
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
（こんな理由かは確かに定かではありませんが、）
|
|
270
|
+
|
|
271
|
+
フォームを隠しておきたいときにinnerHTMLやjQuery.fn.htmlでフォームを出すのはそう見かけないと思います。
|
|
272
|
+
|
|
273
|
+
考えてみれば、アニメーションを入れるため、とか、tabindexを適切に設定してアクセシビリティを向上させたいから、とか、理由はいろいろあるのでしょう。
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
> 解答欄を出したり消したりしたいならjQueryのhide showなどを使う方がマシでしょう（アクセシビリティの観点では（略））。
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
|
|
281
|
+
hide/showはdisplay属性をいじります。これで要素を出したり隠したりすると、スクリーンリーダーがうまく対応しないということが考えられると思います。最近ではaria-hidden属性を使ってスクリーンリーダー向けにも隠された要素と明示することが広まりつつあると思います。
|
|
282
|
+
|
|
283
|
+
とはいえ、キーイベントを使った回答受付やjQuery.fn.htmlを使った問題文の更新という作りが、そういった方々への対応を考えたものとは思えません。
|
|
284
|
+
|
|
285
|
+
ここだけ長々とアクセシビリティについて書くのもおかしいと思い、「アクセシビリティの観点では要素にいないいないばあをさせるのはよくありませんよ」と軽く示すに止めようとしました。
|
|
286
|
+
|
|
287
|
+
言われてみれば、そう書いた方がわかりやすかったですね。
|