Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

全日本<label>要素マークアップ検定

55,249 views

Published on

Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。
仲間内の勉強会で、ちょっと遊びすぎましたw

Published in: Technology
  • Be the first to comment

全日本<label>要素マークアップ検定

  1. 1. 全日本<LABEL>要素 マークアップ検定 2013年8月9日 LLM-UI/UX ライトニングトーク 問題に答えるだけで、 あなたも一流のラベリストになれる!
  2. 2. 川田 寛 Kawada Hiroshi Web技術者コミュニティ html5jえんぷら部 部長 仕事:業務システム案件の技 術支援とか 入出力(UI)・グラフィクス系 Web技術がお気に入りです twitter.com/kawada_hiroshi1 facebook.com/kawada.hiroshi.758 発表者プロフィール
  3. 3. みなさんは当然 <label>を活用してますよね?
  4. 4. Google 勿論、使っている!
  5. 5. facebook 勿論、使っている!
  6. 6. twitter 勿論、使っている!
  7. 7. yahoo! 勿論、使っている!
  8. 8. DMM 勿論、使っている!
  9. 9. mixi 勿論、使っている!
  10. 10. うわっ…<label>要素の利用率 高すぎ…? なんてこと思った方
  11. 11. 今更、わからないなんて とてもじゃないけと言えません! ・・・ということで
  12. 12. <label>に不安を感じる 日本全国のラベリストたちへ送る! 始めました! 主催:日本ラベル要素ユーザグループ(JLEUG) 全日本<label>要素 マークアップ検定
  13. 13. 第1問 ラベルの最適な配置場所 - 初級 人間工学デザイン編 -
  14. 14. ユーザが最もストレスを感じない ラベルの配置場所はどこか? (A). Left-Aligned Labels(左寄せ) 名前 ふりがな
  15. 15. (B). Right-Aligned Labels(右寄せ) 名前 ふりがな ユーザが最もストレスを感じない ラベルの配置場所はどこか?
  16. 16. (C). Top-Aligned Labels(上寄せ) 名前 ふりがな ユーザが最もストレスを感じない ラベルの配置場所はどこか?
  17. 17. 正解は・・・ (B) or (C)
  18. 18. ラベルを左に寄せると・・・ 左右に移動し過ぎて、網膜が殺られる ラベルで造る、”視覚の導線”の工学 !?
  19. 19. Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 1. Left-Aligned Labels(左寄せ) 2. Right-Aligned Labels(右寄せ) 3.Top-Aligned Labels(上寄せ) ✕ ⃝ ◎ → 項目が少ないならこっち → 項目が多い時に有効 → 一番ストレスが大きい → ストレスが最小、ログイン画面 → スクロールが必要な場合とか → 使っちゃダメ
  20. 20. 人間工学的観点では、視点の動きが重要 - Path To Completion - 視点の導線は一本に。 http://www.slideshare.net/lorielue/form-design-best-practices-to-improve-conversions Single Path : Fast Path : 視点の導線は最小に。 ✕ ⃝XXX XXXXXX X XX XXX XXXXXX X XX XXX XXXXXX X XX
  21. 21. 第2問 ラベルの最適なビジュアルデザイン - 初級 人間工学デザイン編 -
  22. 22. ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ? (A). Plain Text Labels (そのまま) name furigana
  23. 23. (B). Bold Labels (太字) ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ? name furigana
  24. 24. (C). Italic Labels (斜体) ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ? name furigana
  25. 25. 正解は・・・ (A)
  26. 26. 愛され系ラベルはスリム! 太字は愛されない系。 太いとあまりに読みにくいため ユーザがストレスで痩せてしまう name furigana !?
  27. 27. Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php Plain Text Labels (そのまま) Bold Labels (太字)✕ ⃝
  28. 28. “斜体”の日本語と英語圏の文化的差異の問題 1. “意味付け”の違い 英語圏では”引用”の意味合いを強く含む 2. “相互運用性”の問題 WinNT6.0(Vista)以降は日本語メイリオが斜体に非対応 font-weight : bold; font-style : italic;
  29. 29. ラベルの周りに枠等を入れるのも ユーザストレスが高い 名前 ふりがな 年齢 名前 : ふりがな : 年齢 : 名前 ふりがな 年齢
  30. 30. 第3問 Label要素のHTML記述仕様 - 初級 Web標準仕様編 -
  31. 31. <label>要素とは HTMLドキュメント上で 入力フォームの名前を定義する記法ですが… <label>場所</label> <label>ビデオ通話</label> <label>カレンダー</label> <label>説明</label> HTMLドキュメント上の記述 Webページ上での表示
  32. 32. <label>要素の 正しいマークアップはどれ? (A). <label>   ラベル名  <input type=”text” name=”name” /> </label> 
  33. 33. <label for=”hoge”>ラベル名</label> <input type=”text” id=”hoge” name=”fuga” /> (B). <label>要素の 正しいマークアップはどれ?
  34. 34. <label id=”hoge”>ラベル名</label> <input type=”text” id=”hoge” name=”fuga” /> (C). <label>要素の 正しいマークアップはどれ?
  35. 35. <label name=”fuga”>ラベル名</label> <input type=”text” id=”hoge” name=”fuga” /> (D). <label>要素の 正しいマークアップはどれ?
  36. 36. 正解は・・・ (A), (B)
  37. 37. HTML5 - A vocabulary and associated APIs for HTML and XHTML では・・・ http://www.w3.org/TR/html5/forms.html#the-label-element
  38. 38. Label要素が他の要素と紐づく時、Labelは”form-owner”と呼ぶこと がある。form-associated要素のサブクラスに相当するから。 Label要素と紐付けできる要素を、”Labelable要素”と呼ぶ。 Label要素と紐付けされたLabelable要素を、Label要素側から は、”Labeled Control”と呼ばれる。 Label要素の構造・用語を以下と定義する <<interface>> Labelable要素Label要素 0..n 0..1 - Labeled Control (- form-owner ) 【クラス図】Label要素の構造 input要素 button要素 などなど 実質的に同じ form-associated要素 <<implements>>
  39. 39. <label for=”name”>名前 </label> <input type=”text” id=”name” … /> forが有る場合は、forで指定されたIDと一致する 最初のノードをLabeled Controlとして扱い、Label 要素で囲まれたノードは全てform-ownerとなる <label for=”name”><img src=”./img/name.png”></label>  <input type=”text” id=”name” … />
  40. 40. <label>   ラベル名  <input type=”text” … /> </label>  <label>  <input type=”checkbox” … />  <img src=”img/alert.png” />  保存しない </label>  forが無い場合は、label要素内のツリーオーダで 最初のLabelable ElementsがLabeled Controlとし て扱われ、それ以外はform-ownerとなる テキストノードを form-ownerとして扱う img要素とテキストノー ドをform-ownerとする
  41. 41. 別の名前空間(form要素)を参照するには form属性を利用する <label form=”form2” for=”input1” >名前</label> <form id=”form2”…> <input id=”input1” … /> <input id=”input2” … /> <input id=”input3” … /> </form> <form id=”form1”…> <input id=”input1” … /> <input id=”input2” … /> <input id=”input3” … /> </form>
  42. 42. Label要素は、以下のカテゴリに属す <<interface>> Label要素 Flow Content Phrasing Content Intractive Content Reasociatable form-associated Content Palpable Content <<implements>> body要素以下に配置されるコンテンツ フレーズ(あまり長くない文字列)を囲むコンテンツ クリックなどのイベントにより処理が走るコンテンツ フォームと関連付けられたコンテンツ 最低一つのノードを持たなくてはいけないコンテンツ
  43. 43. 第4問 Label要素のJavaScriptAPI仕様 - 初級 Web標準仕様編 -
  44. 44. Labelable要素からform-onwerな Label要素の一覧を取得するAPIは? var labelNodes; // NodeList labelNodes = element.[ ? ] ;
  45. 45. 正解は・・・ labels
  46. 46. Label要素とLabelable要素の2箇所で Label要素固有のDOM-APIが使える interface HTMLLabelElement : HTMLElement { readonly attribute HTMLFormElement? form; attribute DOMString htmlFor; readonly attribute HTMLElement? control; }; interface HTMLInputElement : HTMLElement { readonly attribute NodeList labels; // NodeList<HTMLLabelElement> };
  47. 47. readonly attribute HTMLFormElement? form; attribute DOMString htmlFor; readonly attribute HTMLElement? control; ! Labeled Controlの存在するフォームのDOM要素 ! for属性の値(文字列) ! Labeled ControlのDOM要素 HTMLLabelElement (Label要素) HTMLInputElement (Labelable要素) readonly attribute NodeList labels; ! Form-OwnerのDOM要素のリスト
  48. 48. 第5問 IEのバージョン対応 - 初級 Webプラットフォーム実装編 -
  49. 49. 次のHTMLドキュメントが 動作するIEのバージョンは? <label for=”name” >ラベル名</label> <input type=”text” id=”name” name=”name” />
  50. 50. 正解は・・・ IE4+
  51. 51. 古くからある要素だが 一部、追加されたのは最近 <label for=”name” form=”form” >label</label> → HTML4にあった → HTML5から追加 ※2013年8月現在「勧告候補」
  52. 52. for属性無しはIE7以上でないと 動作しない <label for=”name” >ラベル</label> <input type=”text” id=”name” name=”name” /> <label>ラベル <input type=”text” name=”name” /></label> 4+ 7+ しかし、利用率が高い使い方
  53. 53. 第6問 Labelable要素の振る舞い - 初級 Webプラットフォーム実装編 -
  54. 54. input要素(type=checkbox)に対して Label要素を指定した場合の動作は?
  55. 55. 正解は・・・ 不明 ※ただし、デファクトスタンダードがあり
  56. 56. Label要素クリック時の動作は Web標準では未定義 ”Interactive context”に属し clickイベント応答できる要素として分類される http://www.w3.org/TR/html5/dom.html#interactive-content-0 HTML5による定義で 現在は”勧告候補”
  57. 57. Label要素クリック時の挙動は Labeled Controlの種類よって異なる Label要素クリック時の発火イベントも Labeled Controlの種類よって異なる 環境依存
  58. 58. input要素(type=”text”) input要素(type=”tel”) : 公式非対応 テキストボックス・ベース input要素(type=”url”) : 公式非対応 input要素(type=”email”) : 公式非対応 input要素(type=”password”) 挙動 フォーカスが当たる onclick → onfocusイベント onfocus → onclick
  59. 59. ボタン・ベース button要素 input要素(type=”reset”) input要素(type=”submit”) input要素(type=”file”) 挙動 クリックの動作(※要注意) input要素(type=”image”) onclick → onfocusイベント onfocus → onclick
  60. 60. セレクトボックス・ベース input要素(type=”date”) input要素(type=”week”) input要素(type=”number”) input要素(type=”month”) input要素(type=”time”) input要素(type=”datetime-local”) keygen要素 select要素 input要素(type=”datetime”) 挙動 フォーカスが当たる onclick → onfocusイベント onfocus → onclick
  61. 61. ブーリアン・ベース input要素(type=”checkbox”) input要素(type=”radio”) 挙動 クリックの動作 onclick → onfocus イベント onfocus → onclick onclick
  62. 62. input要素(type=”color”) onclickイベント 挙動 クリック時の動作 onclickイベント 挙動 何も起きない 特殊系 meter要素 progress要素10+
  63. 63. input要素(type=”range”) onclickイベント 挙動 フォーカスが当たってはいるが何もできない 特殊系 フォーカスが当たり、操作が可能 onclick → onfocus 10+
  64. 64. 何問正解できましたか?
  65. 65. 全問正解のあなたは、ななな、なんと! “初級ラベリスト”と名乗る権利が与えられます <label>要素の普及に貢献して下さいね!
  66. 66. Thank You !! @kawada_hiroshi1 …お騒がせしましたm(_ _)m

×