はじめに
利用者のかたへ
コンテンツ構成
運営理念
基本原則
基本要素
ロゴ
色
タイポグラフィ
アイコン
イラストレーション
メタ情報
伝わる文章
アクセシビリティ
アクセシビリティの品質基準とプロセス
アクセシビリティガイドライン
- 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. 入力欄や選択肢を選択、または入力したときに大きな変化を起こさない
- アクセシビリティチェックはじめてガイド
アクセシビリティインサイト
プロダクト
デザイン原則
ユーザビリティ（使用性）
デザイントークン
コンポーネント
- AccordionPanel
- AppHeader
- AppNavi
- Badge
- Base
- BottomFixedArea（非推奨）
- Browser
- Button
- Calendar
- Checkbox
- Chip
- Combobox
- DatePicker（非推奨）
- DefinitionList
- Dialog
- Disclosure
- DropZone
- Dropdown
- ErrorScreen
- Fieldset
- FileViewer
- FloatArea
- FormControl
- Formatter
- Header
- Heading
- Icon
- InformationPanel
- Input
- InputFile
- Layout
- LineClamp
- Loader
- NotificationBar
- PageCounter
- Pagination
- Picker
- RadioButton
- RadioButtonPanel
- ResponseMessage
- Scroller
- SectioningContent
- SegmentedControl
- Select
- SideMenu
- SideNav
- SmartHRAILogo
- SmartHRLogo
- SpreadsheetTable
- StatusLabel
- Stepper
- Switch
- TabBar
- Table
- Text
- TextLink
- Textarea
- Timeline
- Tooltip
- VisuallyHiddenText
- WarekiPicker