横串

• §18-01Skip to content link

  Tab 1 回で本文へ移動するリンク。

  キーボード利用者が毎ページ長いナビゲーションを通過せずに本文へ到達できる。ヘッダーにリンクが多いサイトほど効果が大きい。

  アクセシビリティ
• §18-02Visible focus ring

  キーボード操作中の要素を枠で目立たせる。

  キーボードで操作している人が、今どこにいるかを見失わないようにする。マウスを使わない利用者には必須で、全ての操作可能な要素に適用する。

  アクセシビリティ
• §18-04ARIA live region

  画面の動的な変化を支援技術に読み上げさせる。

  保存完了やエラーなど画面上で変わった内容をスクリーンリーダー利用者に伝える。視覚的な通知だけでは気づけない問題に効く。

  アクセシビリティ
• §18-05prefers-reduced-motion 尊重

  OS の動き抑制設定に従いアニメーションを控える。

  動きで体調を崩す利用者や集中を妨げられたくない人に配慮する。装飾的なアニメーションを持つサイト全般で守るべき設定。

  アクセシビリティ
• §18-09色覚多様性配慮 (パターン併用)

  色に加えて模様や形で状態を区別する。

  色の区別が難しい利用者でも、グラフや状態表示を正しく読み取れる。系列が多いグラフや成功・失敗の表示で使う。

  アクセシビリティ
• §18-03キーボードショートカット一覧 (?)

  「?」キーでショートカットの一覧を表示する。

  キーボード操作を覚えたい利用者が、その場で一覧を確かめられる。操作頻度が高いツールで、慣れた人の速度を上げたいときに使う。

  アクセシビリティ

参考: webaim.org

• §01-13スパークライン

  表の行内に収まる軸なしの小さな折れ線を描く。

  数値一覧に推移の形を添え、一覧のまま傾向を比べられる。指標カードや銘柄一覧など、行ごとの変化を省スペースで示したい場面に向く。

  可視化・データ表現
• §01-01草チャート / contribution heatmap

  日付ごとの活動量を方眼の色の濃さで示す。

  一年分の活動の継続や偏りを一目で見渡せる。学習記録や投稿頻度など、日々の積み重ねを可視化して習慣づけを促したいときに使う。

  可視化・データ表現
• §01-15プログレスリング

  進捗率を円弧の長さで示す。

  目標に対する達成度を狭い面積で示せる。カードやアイコン横など、横長のバーが置けない場所で進み具合を伝えたいときに使う。

  可視化・データ表現
• §01-14ゲージ / ダイヤル

  一つの指標を針や円弧の塗りで示す。

  現在値が目標や上限に対してどこにあるかを一目で伝える。監視画面で指標を一つだけ強調したいときに向く。

  可視化・データ表現
• §01-27状態 badge

  処理の状態を色付きのラベルで示す。

  一覧の各行の状態を一瞥で区別できる。ジョブやデプロイなど、多数の項目から失敗や実行中を素早く見つけたいときに使う。

  可視化・データ表現
• §01-16カウンターアニメ

  数値が目標値まで滑らかにカウントアップする。

  数値が動いて目標値に到達する様子を見せ、その値に注目を集める。実績や達成数など、ひとつの数字で成果を伝える場面に向く。

  可視化・データ表現

参考: observablehq.com