SmartHR Design System
  • さがす
  • はじめに
  • 基本原則
  • 基本要素
  • アクセシビリティ
  • プロダクト
  • コミュニケーション

アクセシビリティ

  • アクセシビリティの品質基準とプロセス
    • 検証結果
      • 入社手続き・雇用契約
      • Web給与明細
      • 文書配付
      • 申請・承認
      • 個人設定
      • マイナンバー管理
      • 従業員情報
      • 手続き
      • 人事評価
      • スキル管理
      • 従業員サーベイ
      • 配置シミュレーション
  • アクセシビリティガイドライン
    • 1-1. 画像に代替テキストが付与されている
    • 1-2. 装飾目的の画像が無視できるようになっている
    • 3-1. 表が<table>でマークアップされている
    • 3-2. 見出しが<h1>〜<h6>でマークアップされている
    • 3-3. リストが <ul>, <ol>, <dl>でマークアップされている
    • 3-4. 空白文字を用いてレイアウトをしていない
    • 3-5. 同じIDを持つ要素がページ内に複数存在しない
    • 4-1. 画面を200%拡大、または文字サイズを2倍に変更しても情報が取得できる
    • 4-2. 背景色と文字色のコントラスト比が4.5:1(大きな文字: 29px以上は3:1)以上ある
    • 4-3. 色や、形、音、レイアウト情報のみでコンテンツを説明していない
    • 5-1. キーボードで操作可能
    • 5-2. キーボード操作の順序が見た目の順序とあっている
    • 5-3. コンテンツに制限時間がかけられていない(必須の場合は除く)
    • 6-1. ページの言語が <html> に記載されている
    • 6-2. ページのタイトルがページの内容を表している
    • 6-3. ページのメインコンテンツに見出しが付与されている
    • 6-4. リンクのテキストからリンク先が判別できる
    • 7-1. 入力する内容や、操作がラベルとして表示されている
    • 7-2. フォームパーツにアクセシブルネームがある
    • 7-3. エラーの発生とエラーの内容が特定できる
    • 7-4. 入力欄や選択肢を選択、または入力したときに大きな変化を起こさない
    • アクセシビリティチェックはじめてガイド
  • アクセシビリティインサイト
    • 画像の代替テキスト
    • リンクテキスト
    • 弱視・ロービジョンのユーザーのウェブ利用時の課題
    • 弱視・ロービジョンのユーザビリティチェックリスト
      • 同一の操作や説明には一貫したアイコンを使用する
      • リンクテキストに下線がある
      • 文字画像を使用しない
      • 画面の左側に見出しやUIを配置する
      • 関連するフォームパーツは隣り合う位置に配置する
      • 色のみで領域やグループを表現しない
    • 多言語化対応
    • やさしい日本語
      • 背景
      • 書き換えの方針
      • 具体的な書き換え方

  • アクセシビリティの品質基準とプロセス
    • 検証結果
      • 入社手続き・雇用契約
      • Web給与明細
      • 文書配付
      • 申請・承認
      • 個人設定
      • マイナンバー管理
      • 従業員情報
      • 手続き
      • 人事評価
      • スキル管理
      • 従業員サーベイ
      • 配置シミュレーション
  • アクセシビリティガイドライン
    • 1-1. 画像に代替テキストが付与されている
    • 1-2. 装飾目的の画像が無視できるようになっている
    • 3-1. 表が<table>でマークアップされている
    • 3-2. 見出しが<h1>〜<h6>でマークアップされている
    • 3-3. リストが <ul>, <ol>, <dl>でマークアップされている
    • 3-4. 空白文字を用いてレイアウトをしていない
    • 3-5. 同じIDを持つ要素がページ内に複数存在しない
    • 4-1. 画面を200%拡大、または文字サイズを2倍に変更しても情報が取得できる
    • 4-2. 背景色と文字色のコントラスト比が4.5:1(大きな文字: 29px以上は3:1)以上ある
    • 4-3. 色や、形、音、レイアウト情報のみでコンテンツを説明していない
    • 5-1. キーボードで操作可能
    • 5-2. キーボード操作の順序が見た目の順序とあっている
    • 5-3. コンテンツに制限時間がかけられていない(必須の場合は除く)
    • 6-1. ページの言語が <html> に記載されている
    • 6-2. ページのタイトルがページの内容を表している
    • 6-3. ページのメインコンテンツに見出しが付与されている
    • 6-4. リンクのテキストからリンク先が判別できる
    • 7-1. 入力する内容や、操作がラベルとして表示されている
    • 7-2. フォームパーツにアクセシブルネームがある
    • 7-3. エラーの発生とエラーの内容が特定できる
    • 7-4. 入力欄や選択肢を選択、または入力したときに大きな変化を起こさない
    • アクセシビリティチェックはじめてガイド
  • アクセシビリティインサイト
    • 画像の代替テキスト
    • リンクテキスト
    • 弱視・ロービジョンのユーザーのウェブ利用時の課題
    • 弱視・ロービジョンのユーザビリティチェックリスト
      • 同一の操作や説明には一貫したアイコンを使用する
      • リンクテキストに下線がある
      • 文字画像を使用しない
      • 画面の左側に見出しやUIを配置する
      • 関連するフォームパーツは隣り合う位置に配置する
      • 色のみで領域やグループを表現しない
    • 多言語化対応
    • やさしい日本語
      • 背景
      • 書き換えの方針
      • 具体的な書き換え方
  • プロセス:マイナンバーを提出する
    • 概要
    • 対象ページ
    • WCAG2.1 達成基準の検証
    • スクリーンリーダーでの利用
    • 色反転・拡大鏡での利用
    • 限られた器用さ、または力

  • プロセス:マイナンバーを提出する
    • 概要
    • 対象ページ
    • WCAG2.1 達成基準の検証
    • スクリーンリーダーでの利用
    • 色反転・拡大鏡での利用
    • 限られた器用さ、または力

マイナンバー管理

プロセス:マイナンバーを提出する

概要

従業員が自身や家族のマイナンバーを提出するプロセス

対象ページ

  • マイナンバー情報画面
  • マイナンバー入力画面

WCAG2.1 達成基準の検証

マイナンバーを提出する

スクリーンリーダーでの利用

未実施

色反転・拡大鏡での利用

未実施

限られた器用さ、または力

未実施

  • 前へ

    個人設定
  • 次へ

    従業員情報

SmartHR Design System

  • さがす
  • 利用規約
  • お問い合わせ・フィードバック
  • 運用ガイドライン
  • 更新情報(X) 別タブで開く
  • 運営会社 別タブで開く

はじめに

  • 利用者のかたへ
  • コンテンツ構成
  • 運営理念

基本原則

基本要素

  • ロゴ
  • 色
  • タイポグラフィ
  • アイコン
  • イラストレーション
  • メタ情報
  • 伝わる文章

アクセシビリティ

  • アクセシビリティの品質基準とプロセス
  • アクセシビリティガイドライン
  • アクセシビリティインサイト

プロダクト

  • デザイン原則
  • ユーザビリティ(使用性)
  • デザイントークン
  • コンポーネント
  • デザインパターン
  • デザインレビュー
  • デザインデータ
  • ライティング
  • リソース

コミュニケーション

  • 写真・動画
  • アイキャッチ
  • スライド・資料
  • 名刺
  • 画面キャプチャ
  • 端末モック
  • サンプル集

SmartHR © SmartHR, Inc.