中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

focus

A要素の内容でリンクを巡る場合や、FORM要素の内容を更新する場合等、その要素を選択しなければなりませんが、其の場合、

• マウス等のポインティングデバイスを使用する。
• キーボード操作を使用する。

等の方法が、考えれれます。このキーボード操作をサポートする属性です。

• 要素を選択する事を 『 フォーカスを当てる 』 要素の選択を外す事を 『 フォーカスを外す 』 と表現します。
• 要素が選択された場合や、選択が外れた場合の動作をスクリプトで指定する属性も含まれますが、スクリプトを使用する場合は、HEAD要素内に、
  

  <meta http-equiv="Content-Script-Type" content="text/javascript" />

  
  と meta要素で基準スクリプト言語の指定を記述する必要があります。
• focusで定義されている属性は、全てのブラウザが全て実行出来るとはかぎりません。

W3C → XHTML 1.0 → Multi-part XHTML file → DTDs → XHTML-1.0-Transitional より

<!-- attributes for elements that can get the focus
  accesskey   accessibility key character
  tabindex    position in tabbing order
  onfocus     the element got the focus
  onblur      the element lost the focus -->
<!ENTITY % focus
 "accesskey   %Character;    #IMPLIED
  tabindex    %Number;       #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED"  >

accesskey   %Character;    #IMPLIED

要素を選択する場合に、キーボードから半角文字で入力する１文字を指定します。省略可。

• 同一ページ内では、同じ文字を使用できません。
• その要素を選択する場合は 『 Alt 』 キーを押下したまま、指定された文字を入力します
• 選択された要素を動作させる場合は、『 Enter 』 キーを押下します。

Web Content Accessibility Guidelines 1.0 → Guideline 9. Design for device-independence. → 9.5 より

9.5 Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls. [Priority 3]
For example, in HTML, specify shortcuts via the "accesskey" attribute.

9.5 (MAP要素を含む)重要なリンク、FORM要素とフォームコントロール部品にはキーボードショートカットを設定してください。[優先度3]
例えば、HTMLでは、accesskey属性を使用して下さい。

tabindex    %Number;       #IMPLIED

ページ内で、『 Tab 』 キーが押下された場合の要素の選択順を指定します。省略可。

• 値は 0〜32764 です。
• tabindex属性が指定されていない場合は、ページの先頭から順に選択されていきます。
• 選択された要素を動作させる場合は、『 Enter 』 キーを押下します。

Web Content Accessibility Guidelines 1.0 → Guideline 9. Design for device-independence. → 9.4 より

9.4 Create a logical tab order through links, form controls, and objects. [Priority 3]
For example, in HTML, specify tab order via the "tabindex" attribute or ensure a logical page design.

9.4 リンク、フォームコントロール部品、OBJECT要素には、タブの順序を論理的に設定してください。[優先度3]
例えば、HTMLでは、tabindex属性を使用するか、ページ設計を論理的矛盾の無いようにして下さい。

onfocus     %Script;       #IMPLIED

要素が選択された場合に動作させるスクリプト名。省略可。

onblur      %Script;       #IMPLIED

要素の選択が外れた場合に動作させるスクリプト名。省略可。