ウェブアクセシビリティ試験結果 - 2021年5月

2021年5月に実施したSmartHRのウェブアクセシビリティ試験結果です。

試験の結果および実施方法

表明日
規格の規格番号および改正年
JIS X 8341-3:2016
満たしている適合レベル及び対応度
レベルA 一部準拠

※ 本試験結果における「準拠」という対応度の表記は、情報通信アクセス協議会のウェブアクセシビリティ基盤委員会によるウェブコンテンツのJIS X 8341-3:2016 対応度表記ガイドライン 2016年3月版で定められた表記によるものです。

対象となるウェブページに関する簡潔な説明
開発中のコンポーネントを除く、SmartHR UIの全コンポーネント
依存したウェブコンテンツ技術
HTML5、CSS、JavaScript、WAI-ARIA
試験実施期間
試験を行ったウェブページのURL
末尾に試験を行ったウェブページのURLをまとめて掲載
例外事項
試験開始時に開発中だったコンポーネント

達成基準チェックリスト

その達成基準に該当するコンポーネントがある場合には適用を「○」、該当箇所がない場合「-」と表記し、その達成基準を満たしている場合に結果を「○」、満たしていない場合「×」と表記します。

該当箇所がなく、適用が「-」の場合、その達成基準を満たしているとみなすため、結果は「○」とします。

達成基準のリンクはWCAG 2.0解説書へのリンクです。

達成基準等級適用結果
1.1.1 非テキストコンテンツA
1.2.1 音声だけ及び映像だけ(収録済み)A
1.2.2 キャプション(収録済み)A
1.2.3 音声解説又はメディアに対する代替コンテンツ(収録済み)A
1.3.1 情報及び関係性A×
1.3.2 意味のある順序A
1.3.3 感覚的な特徴A
1.4.1 色の使用A
1.4.2 音声の制御A
1.4.3 コントラスト(最低限)AA×
1.4.4 テキストのサイズ変更AA×
1.4.5 文字画像AA
2.1.1 キーボードA
2.1.2 キーボードトラップなしA
2.2.1 タイミング調整可能A×
2.2.2 一時停止、停止、非表示A
2.3.1 3回のせん(閃)光、又はしきい(閾)値以下A
2.4.1 ブロックスキップA
2.4.2 ページタイトルA
2.4.3 フォーカス順序A
2.4.4 リンクの目的(コンテキスト内)A
2.4.7 フォーカスの可視化AA
3.1.1 ページの言語A
3.2.1 フォーカス時A
3.2.2 入力時A
3.3.1 エラーの特定A
3.3.2 ラベル又は説明A×
4.1.1 構文解析A
4.1.2 名前(name),役割(role)及び値(value)A×
  • 「2.4.2 ページタイトル」および「3.1.1 ページの言語」は、ページが検証対象ではないため該当箇所なしとした。
  • 「3.2.1 フォーカス時」および「3.2.2 入力時」は、実際の操作が与えられない状態での検証のため該当箇所なしとした。
  • 「3.3.1 エラーの特定」は、コンポーネント単体で検討できないため該当箇所なしとした。

満たしていない達成基準の事例と対応策

今回の試験で見つかった、達成基準を満たせていない事例とそれらへの対応策を示します。※すべての事例を紹介するものではありません。

1.3.1 情報及び関係性

<FieldSet> 入力要素とラベルが関連付けされていない

対象のページ
FieldSet
対応方法
Filedsetコンポーネントは非推奨とし、代わりに適合したFormGroupコンポーネントの利用を推奨する

1.3.2 意味のある順序

<DatePicker> 表形式の日付選択と入力欄のDOMが離れているが関連付けられていない

対象のページ
DatePicker
対応方法
aria-controlsとaria-expandedで関連付けをする

1.4.3 コントラスト (最低限)

ブランドカラーと白の組み合わせ

Headerコンポーネントのスクリーンショット

対象のページ
Header, Footer
対応方法
Header, Footer コンポーネントをコントラスト比も担保される形で作り直す予定です

オレンジと白の組み合わせ

StatusLabelコンポーネントのスクリーンショット。オレンジの背景に白背景の警告ラベルが矢印で示されている

対象のページ
StatusLabel, Header
対応方法
白との組み合わせでコントラスト比が確保される警告色を検討します

1.4.4 テキストのサイズ変更

テキストサイズを200%に拡大すると、隠れて読めないテキストがある

200%に拡大したHeaderコンポーネントのスクリーンショット。上下に文字が見切れて項目のラベルが読めなくなっている

対象のページ
Header, Footer
対応方法
Headerを作り直す際にテキストの拡大に対応します

2.2.1 タイミング調整可能

<FlashMessage> の標準動作が8秒で消える

対象のページ
FlashMessage - Demo
対応方法
FlashMessageに重要なコンテンツを記載しない、または重要なコンテンツをFlashMessageで表示せざるを得ない場合は、自動で消えない設定で利用する

3.3.2 ラベル、または説明

<RightFixedNote> のtextareaにラベルがない

RightFixedNoteのスクリーンショット。コンポーネント下部の入力欄にラベルが無い

4.1.2 名前(name),役割(role)及び値(value)

<MultiCombobox> で選択された項目がvalueとなっていない

対象のページ
Combobox
内容
すでに選択した項目がComboboxのvalueとして機械可読な形になっていない
対応方法
すでに選択した項目に選択していることを示すセマンティクスを付与する

試験を行ったウェブページのURL

試験をしたコンポーネントの代表的なURLのみを掲載します。

© 2021, SmartHR, Inc.