メインコンテンツへスキップ

アクセシブルな XUL 記述ガイドライン

以下に述べるガイドラインに従って記述すれば、アクセシブルなユーザインターフェイスを XUL で作成できます。 コーダー、レビュー担当者、設計者、品質保証技術者は、これらのガイドラインをよく理解しておくべきでしょう。

  • タブの順番を変えない - a) 対話式要素はすべてタブの順番の中に置かれる必要があり、b) 左から右へ、上から下へというタブの順番は、それを変えるだけの十分な理由がない限り、変えるべきではありません。インラインフレーム (iframe) がある場合は、その中に Tab キーで移動できるようにしなければなりません。
  • フォーカスは必ず適切に動くようにする - フォーカスの置かれた要素が無効化、非表示、削除されたときに、フォーカスが見失われることがないか、確認してください。
  • フルキーボードアクセスを可能にする - キーボードでその機能を使ってみてください。(ドラッグ & ドロップなどの) マウス操作が必要ですか? それは視覚的でランダムなアクセスですか? それとも、情報を順番にしか得られない (スクリーンリーダーや点字ディスプレイの) ユーザでも利用できますか?
  • Don't use mouse event listening code such as onclick, onmousein and ondrag without enabling keyboard operation for the same set of features. Consider context menu items or UI widgets with accesskey mnemonics for implemenenting the keyboard functionality.

    onclick, onmousein, ondrag のような マウスイベント読み取りコード はキーボードから同じ操作ができるようにする。 キーボードからの操作を提供するために、コンテキストメニュー項目または アクセスキーニモニック付きの UI ウィジットを設けることを検討してください。
  • コンテキストメニューは必ずキーボードをサポートする - Windows では VK_APPS キー Microsoft のコンテキストメニューキー と Shift+F10 キー、UNIX と Linux では Shift+F10、Mac OX X では Control+Space です。これは oncontextmenu イベントによって自動的に処理されます。 —右クリックを直接処理しないでください。
  • 対話式の UI ウィジェット上ではアクセスキー (ニモニック) をサポートする - XUL アクセスキー FAQ をご覧ください。
  • Provide global accelerators for common operations. Use the "accel" modifier for keys that should use control on Windows and Linux, and cmd on OS X. Unlike accesskeys, here is no need to localize global accelerators.

    共通で使われる操作には グローバル アクセラレータを提供する。 Windows と Linux で Ctrl キー、OS X では cmd キーを使うキーコンビネーションには "accel" 修飾子 を使用してください。 アクセスキーとは異なり、グローバルアクセラレータをローカライズする必要はありません。
  • ツールバーボタンに頼らない - ツールバーボタンは、Tab キーを使ったナビゲーションサイクルに含まれない (フォーカスが移らない) 要素であり、またメニューシステムにも属しません。ツールバーボタンに割り当てられたコマンドは、すべて (メニューなど) 他の場所からも利用可能でなければなりません。
  • 情報提供式や対話式の画像 (ボタンなど) にはすべて tooltiptext 属性を付ける - 目の不自由なユーザが利用するスクリーンリーダーでも読み上げることができます。
  • ユーザに対して (身体的反応、意思決定、内容理解など) すばやい応答を要求しない
  • 情報を示すとき、色だけに頼らない - 例えば、異なる状況を示すのに違う色のドットを用いてはいけません。青と緑などコントラストの低い色の組み合わせや、赤と緑の併用など、(男性では 10 人に 1 人が該当する) 色覚障害を持つ人が区別しづらい色の組み合わせは避けてください。
  • Don't break theming. Ensure compatibility with system themes, such as the high contrast theme on Windows (available via Left-alt + Left-shift + Printscreen).

    テーマを乱さない。 システムのテーマ、例えば Windows のコントラストが高いテーマを適用したときに、見づらくならないことを確認してください。これは、左 Alt キー + 左 Shift キー + PrintScreen キーで有効になります。
  • ターゲットを小さくしない - 見るのもクリックするのも大変です。
  • スクロールバーを出さない - スクロールが必要なページは、スクロールの必要がないページ (あるいは続きページ) よりもナビゲートが複雑になります。
  • 並び替え可能なツリービューには、必ず [表示] > [並び替え] メニューを用意する - ツリービューやリストビューは、各行に付けられた対話式アイコンへのフルキーボードアクセスが可能でなくてはなりません。
  • XUL のフォームコントロールにテキストラベルを追加するには、label 要素か label 属性を使います。テキストノードをラベルの代わりに使ってはいけません。そのようなラベルは、どこにあるのかを推測するのにスクリーンリーダーが必要となります。
  • Don't use form controls as the only content for a label. Assistive technologies such as screen readers and onscreen keyboards require a proper label.
    This is incorrect:
    This is correct:
    Name of audio file:


    フォームのコントロール以外にもラベルのついたコンテンツを用意する - スクリーンリーダーやオンスクリーンキーボードなどの支援技術には、適切なラベルが必要です。
    間違った例:
    正しい例:
    Name of audio file:
  • Escape キーはダイアログをキャンセルし、何も変更せずにそのダイアログを閉じる - キャンセルボタン (もしあれば) をクリックしたときと同じように動作すべきです。これは <xul:dialog> によって自動的に処理されます。
  • ダイアログには必ずデフォルトボタンを設定する - <xul:button> 要素では、これを示すのに default="true" を用います。これは <xul:dialog> 内で自動的に機能するはずです。

Seamonkey と Firefox に関する作業のための追加ガイドライン

Mozilla のアクセシビリティについて詳しく知るには、Mozilla アクセシビリティプロジェクト のページをご覧ください。