freee
freeeアクセシビリティー・ガイドライン
Ver. 202311.1
はじめに
freeeアクセシビリティー・ガイドラインについて
freeeアクセシビリティー・ガイドラインの活用方法
この文書の編集について
更新履歴
ガイドライン
マークアップと実装
ページ全体
ログイン・セッション
入力ディバイス
テキスト
画像化されたテキスト
画像
アイコン
リンク
フォーム
動的コンテンツ
音声・映像コンテンツ
アクセシビリティー・チェック・リスト
アクセシビリティー・チェック全項目一覧
チェック実施方法の例
キーボード操作によるチェック実施方法の例
axe DevToolsを用いたチェック実施方法の例
NVDAを用いたチェック実施方法の例
macOS VoiceOverを用いたチェック実施方法の例
iOS VoiceOverを用いたチェック実施方法の例
Android TalkBackを用いたチェック実施方法の例
その他のツールを用いたチェック実施方法の例
チェック実施用Googleスプレッドシート
ガイドラインに関する補足情報
WCAG 2.1の各達成基準と当ガイドラインの項目との対応
当ガイドラインとWCAG 2.1の各達成基準のレベル
axe DevToolsのルールと当ガイドラインの対応
参考情報
セマンティクスを適切にマークアップする重要性
UIコンポーネントのアクセシビリティー
適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス
画面の表示方向と肢体不自由者の利用
使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装
制限時間とアクセシビリティー
テキスト情報の文言とアクセシビリティー
画像化されたテキストの問題点
画像化されたテキストを使用する場合の代替情報の提供
コントラスト比確保の重要性
拡大表示時のアクセシビリティー
リンク先の内容を推測しやすくする
DOMツリーとスクリーン・リーダー
ホバーで表示されるコンテンツと拡大表示
ステータス・メッセージとスクリーン・リーダー
自動的に変化するコンテンツの問題点
フォーム・コントロールのラベル付けの必要性
クリックやタッチのターゲット・サイズに関連する問題とターゲット・サイズの確認方法
フォーム操作で発生する動的な変化が及ぼす影響
入力エラーの扱い
lang
属性と音声読み上げ
ユーザーCSSを適用したチェックの実施方法
テキストによる画像の説明
画像の表示とアクセシビリティー
色を用いた表現に関する注意点
グレースケール表示への切り替え方
キーボード・トラップが引き起こす問題
様々なユーザーの入力手段の特徴とそのサポート
Tab/Shift+Tabキーを用いたチェック
音声・映像コンテンツの存在を認知可能にする
音声の自動再生とアクセシビリティー
音声・映像コンテンツのアクセシビリティーを確保する
アクセシビリティー・チェックのためのツール
The Nu Html Checkerを用いたHTMLのバリデーション
コントラスト比のチェック方法
スクリーン・リーダーを用いたチェックの実施方法
NVDAを用いたチェックの実施方法
macOSのVoiceOverを用いたチェックの実施方法
iOS VoiceOverを用いたチェックの実施方法
Android TalkBackを用いたチェックの実施方法
axe DevToolsを使用したアクセシビリティー・チェック
freeeアクセシビリティー・ガイドライン
freeeアクセシビリティー・ガイドライン
»
参考情報
»
アクセシビリティー・チェックのためのツール
アクセシビリティー・チェックのためのツール
The Nu Html Checkerを用いたHTMLのバリデーション
ブックマークレットの利用
ローカルに実行環境を構築
関連ガイドライン項目
コントラスト比のチェック方法
アクセシビリティー・チェックツールの使用
コントラスト比の自動判定ができない場合
コントラスト比の計算ツールの使用
参考
関連ガイドライン項目
スクリーン・リーダーを用いたチェックの実施方法
NVDAを用いたチェックの実施方法
標準環境
事前準備
NVDAのインストール
初回起動時の設定
キーボード配列
NVDA制御キー
その他の設定
その他の初期設定
音声
ビジョン
ブラウズモード
マウス
音声合成エンジンの管理
最低限知っておきたいこと
NVDAメニュー
起動と終了
フォーカス・モードとブラウズ・モード
スピーチビューアーの活用
知っておきたいキー操作
音声設定の変更
その他
参考: NVDAチートシート
NVDAの更新
Webコンテンツのチェック
ページ全体を読み上げさせる
操作を受け付けるコンポーネント
移動のための様々なキー操作
macOSのVoiceOverを用いたチェックの実施方法
macOS VoiceOverを用いたチェックの位置づけ
事前準備
VoiceOverの起動と終了
ファンクション・キーの設定
初回起動時の操作
推奨設定
一般
ビジュアル
コマンダー
最低限知っておきたいこと
VoiceOverキー(
VO
キー)と
VO
キー・ロック
VoiceOverカーソルとキーボード・フォーカス
VoiceOverカーソルの移動
項目の操作
ローター
知っておきたいキー操作
参考情報
Webコンテンツのチェック
まとまったコンテンツを読み上げさせる
操作を受け付けるコンポーネント
移動のための様々なキー操作
iOS VoiceOverを用いたチェックの実施方法
起動と終了
推奨設定
ヒントの読み上げ
ローター
句読点の読み上げ
多言語読み上げが可能な設定
VoiceOverの読み上げ内容の表示
基本的な使い方
1本指による右および左方向へのフリック
1本指によるダブルタップ
1本指による上および下方向へのフリック
ローター・ジェスチャー
スクロール
その他の3本指によるフリック操作
ホーム画面への移動
戸惑わないために知っておきたいジェスチャー
読み上げのオン/オフ
スクリーン・カーテン
音楽の再生
一般的に用いられるコンポーネントの操作方法と期待される挙動
ボタン
VoiceOver利用時の挙動
実装のポイント
ラベル
VoiceOver利用時の挙動
ページコントロール
使用されている箇所の例
VoiceOver利用時の挙動
ピッカー
使用されている箇所の例
VoiceOver利用時の挙動
セグメントコントロール
使用されている箇所の例
VoiceOver利用時の挙動
スライダ
使用されている箇所の例
VoiceOver利用時の挙動
実装のポイント
トグル
使用されている箇所の例
VoiceOver利用時の挙動
テキストフィールド
使用されている箇所の例
VoiceOver利用時の挙動
Android TalkBackを用いたチェックの実施方法
起動と終了
推奨設定
読み上げの詳細設定
読み上げコントロール
TalkBackの読み上げ内容の表示
基本的な使い方
1本指による右および左方向へのフリック
1本指によるダブルタップ
1本指による上および下方向へのフリック
読み上げコントロールの変更(3本指による上および下方向へのフリックなど)
スクロール
その他の2本指による操作
戸惑わないために知っておきたいジェスチャー
音楽の再生
一般的に用いられるコンポーネントの操作方法と期待される挙動
ボタン
使用されている箇所の例
TalkBack利用時の挙動
checkbox
使用されている箇所の例
TalkBack利用時の挙動
switch
使用されている箇所の例
TalkBack利用時の挙動
radio button
使用されている箇所の例
TalkBack利用時の挙動
スピナー
使用されている箇所の例
TalkBack利用時の挙動
time picker
使用されている箇所の例
TalkBack利用時の挙動
ポップアップ
使用されている箇所の例
TalkBack利用時の挙動
dialog
使用されている箇所の例
TalkBack利用時の挙動
ハンバーガー・メニュー
使用されている箇所の例
TalkBack利用時の挙動
画面右上のメニュー
使用されている箇所の例
TalkBack利用時の挙動
tab
使用されている箇所の例
TalkBack利用時の挙動
縦スクロール
使用されている箇所の例
TalkBack利用時の挙動
text field
使用されている箇所の例
TalkBack利用時の挙動
検索ボックス
使用されている箇所の例
TalkBack利用時の挙動
axe DevToolsを使用したアクセシビリティー・チェック
axe DevToolsのインストールと起動の仕方
初期設定(推奨)
axe DevToolsで今見ているページを分析する
レポートの見方
axe DevToolsを使用する上での注意点