SmartHR Design Systemを検索
例：Button、画面キャプチャ、用字用語、須磨英知など
はじめに
利用者のかたへ
コンテンツ構成
運営理念
基本原則
基本要素
ロゴ
色
タイポグラフィ
アイコン
イラストレーション
メタ情報
伝わる文章
アクセシビリティ
機能ごとの検証結果
ウェブアクセシビリティ簡易チェックリスト
- 画像に代替テキストが付与されている
- 装飾目的の画像が無視できるように なっている
- 表が<table>でマークアップされている
- 見出しが<h1>〜<h6>でマークアップされている
- リストが <ul>, <ol>, <dl>でマークアップされている
- 空白文字を用いてレイアウトをしていない
- 同じIDを持つ要素がページ内に複数存在しない
- 画面を200%拡大、または文字サイズを2倍に変更しても情報が取得できる
- 背景色と文字色のコントラスト比が4.5:1（大きな文字: 18px以上は3:1）以上ある
- 色や、形、音、レイアウト情報のみでコンテンツを説明していない
- キーボードで操作可能
- キーボード操作の順序が見た目の順序とあっている
- コンテンツに制限時間がかけられていない（必須の場合は除く）
- ページの言語が <html> に記載されている
- ページのタイトルがページの内容を表している
- ページの主要コンテンツに見出しが付与されている
- リンクのテキストからリンク先が判別できる
- 入力する内容や、操作がラベルとして表示されている
- フォームパーツにアクセシブルネームがある
- エラーの発生とエラーの内容が特定できる
- 入力欄や選択肢を選択、または入力したときに大きな変化を起こさない
アクセシビリティチェックはじめてガイド
画像の代替テキスト
リンクテキスト
弱視・ロービジョンのユーザーのウェブ利用時の課題と解決案(WIP)
アクセシビリティの改善となるUIテキスト変更の判断基準
プロダクト
デザイン原則
ユーザビリティ（使用性）
デザイントークン
コンポーネント
- AccordionPanel
- AppNavi
- Badge
- Base
- BottomFixedArea
- Button
- Calendar
- CheckBox
- Chip
- ComboBox
- CompactInformationPanel（非推奨）
- DatePicker
- DefinitionList
- Dialog
- DropZone
- Dropdown
- ErrorScreen
- Fieldset
- FlashMessage（非推奨）
- FloatArea
- FormControl
- Header
- Heading
- Icon
- InformationPanel
- Input
- InputFile
- Layout
- LineClamp
- Loader
- MessageScreen（非推奨）
- NotificationBar
- PageCounter
- Pagination
- RadioButton
- RadioButtonPanel
- RangeSeparator
- ResponseMessage
- SectioningContent
- SegmentedControl
- Select
- SideMenu
- SideNav
- SmartHRLogo
- SpreadsheetTable
- StatusLabel
- Switch
- TabBar
- Table
- Text
- TextLink
- Textarea
- Tooltip
- VisuallyHiddenText