-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1314 from kufu/create-skill-a11y-status-page
アクセシビリティの検証結果ページにスキル管理を追加
- Loading branch information
Showing
5 changed files
with
252 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
content/articles/accessibility/status/skill/202410_course.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| --- | ||
| title: 'コースを受講する アクセシビリティ検証の結果 - 2024年10月' | ||
| description: '2024年10月に実施したSmartHR スキル管理機能のウェブアクセシビリティ検証の結果を公開しています。' | ||
| order: 2 | ||
| --- | ||
|
|
||
| SmartHRのスキル管理機能で、従業員が操作するページに対して、SmartHRが目標に掲げるWCAG達成基準の検証を実施しました。 | ||
|
|
||
| ## 試験の対象プロセス | ||
| コースを受講する | ||
|
|
||
| ### 概要 | ||
|
|
||
| - 従業員が学習コンテンツを受講するプロセス | ||
|
|
||
| ### 対象のページ | ||
| - コンテンツ受講画面 | ||
| - ユーザーがアップロードしたコンテンツの内容は試験の対象外とする | ||
| - テスト受講画面 | ||
| - テスト結果確認画面 | ||
| - コース受講完了画面 | ||
|
|
||
| ## 検証した達成基準 | ||
|
|
||
| ### レベルA | ||
|
|
||
| すべて | ||
|
|
||
| ### レベルAA | ||
|
|
||
| - 1.4.3 コントラスト (最低限) | ||
| - 1.4.4 テキストのサイズ変更 | ||
| - 1.4.5 文字画像 | ||
| - 2.4.7 フォーカスの可視化 | ||
|
|
||
| ## 検証結果 | ||
|
|
||
| 該当する達成基準のうち、レベルA: 30個中30個、レベルAA: 4個中4個で、その基準を満たしていました。 | ||
|
|
||
| ### 達成基準チェックリスト | ||
|
|
||
| - 達成基準に該当する場合は適用を「○」、該当箇所がない場合「－」 | ||
| - 達成基準を満たしている場合は結果を「○」、満たしていない場合「×」 | ||
|
|
||
| 該当箇所がなく、適用が「－」の場合、その達成基準を満たしているとみなすため、結果は「○」とします。 | ||
|
|
||
| [2024年08月30日〜2024年10月04日_SmartHR 学習管理機能 コースを受講する の達成基準チェックリスト](https://docs.google.com/spreadsheets/d/1vv2HZtVkjBHByAGEE8jXQ2gdVle5NhJ6hMgNYTMrtCs/edit?gid=0#gid=0) |
63 changes: 63 additions & 0 deletions
63
content/articles/accessibility/status/skill/202410_request.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| --- | ||
| title: '申請を提出する アクセシビリティ検証の結果 - 2024年10月' | ||
| description: '2024年10月に実施したSmartHR スキル管理機能のウェブアクセシビリティ検証の結果を公開しています。' | ||
| order: 1 | ||
| --- | ||
|
|
||
| SmartHRのスキル管理機能で、従業員が操作するページに対して、SmartHRが目標に掲げるWCAG達成基準の検証を実施しました。 | ||
|
|
||
| ## 試験の対象プロセス | ||
| 申請を提出する | ||
|
|
||
| ### 概要 | ||
|
|
||
| - 従業員が自身のスキル情報を入力して提出するプロセス | ||
|
|
||
| ### 対象のページ | ||
| - スキル情報の提出管理画面 | ||
| - スキル情報の申請画面 | ||
| - スキルの追加画面 | ||
| - 資格の追加画面 | ||
| - 研修の追加画面 | ||
|
|
||
| ## 検証した達成基準 | ||
|
|
||
| ### レベルA | ||
|
|
||
| すべて | ||
|
|
||
| ### レベルAA | ||
|
|
||
| - 1.4.3 コントラスト (最低限) | ||
| - 1.4.4 テキストのサイズ変更 | ||
| - 1.4.5 文字画像 | ||
| - 2.4.7 フォーカスの可視化 | ||
|
|
||
| ## 検証結果 | ||
|
|
||
| 該当する達成基準のうち、レベルA: 30個中29個、レベルAA: 4個中4個で、その基準を満たしていました。 | ||
|
|
||
| ### 達成基準チェックリスト | ||
|
|
||
| - 達成基準に該当する場合は適用を「○」、該当箇所がない場合「－」 | ||
| - 達成基準を満たしている場合は結果を「○」、満たしていない場合「×」 | ||
|
|
||
| 該当箇所がなく、適用が「－」の場合、その達成基準を満たしているとみなすため、結果は「○」とします。 | ||
|
|
||
| [2024年08月30日〜2024年10月04日_SmartHR スキル管理機能 申請を提出する の達成基準チェックリスト](https://docs.google.com/spreadsheets/d/1yez_i9ZFu7x05fGfUyKZIIejaWBdt1VsMooC24GVv4Y/edit?gid=0#gid=0) | ||
|
|
||
| ## 満たしていない達成基準の事例と対応策 | ||
|
|
||
| 現時点で達成基準を満たせていない事例とそれらへの対応策を示します。 | ||
|
|
||
| <!-- textlint-disable --> | ||
| ### 達成基準 1.3.1: 情報及び関係性を理解する | ||
| <!-- textlint-enable --> | ||
|
|
||
| #### スキル情報の申請画面においてラベルが不適切なボタンがある | ||
|
|
||
| ##### 内容 | ||
| 証明書の写しをPDF、もしくは画像ファイルで添付する際に押下するボタンのラベルが「ファイルを選択」になっており、証明書の写しを添付するためのボタンであることが伝わらないです。 | ||
|
|
||
| ##### 対応方法 | ||
| ボタンのラベルを修正し、証明書の写しを添付するためのボタンであることが明確になるようにします。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| --- | ||
| title: 'スキル管理' | ||
| description: 'SmartHRのスキル管理機能のアクセシビリティ対応状況と検証結果を掲載しています。' | ||
| order: 7 | ||
| --- | ||
| import { Table, Td, Text, Th } from 'smarthr-ui' | ||
|
|
||
| ## プロセス: 申請を提出する | ||
| ### 概要 | ||
| * 従業員が自身のスキル情報を入力して提出するプロセス | ||
|
|
||
| ### 対象ページ | ||
| * スキル情報の提出管理画面 | ||
| * スキル情報の申請画面 | ||
| * スキルの追加画面 | ||
| * 資格の追加画面 | ||
| * 研修の追加画面 | ||
|
|
||
| ### WCAG2.1 達成基準の検証 | ||
| [申請を提出する アクセシビリティ検証の結果 - 2024年10月](./202410_request/) | ||
|
|
||
| ### スクリーンリーダーでの利用 | ||
| スクリーンリーダーの読み上げとキーボード操作でプロセスを完了できるか、検証しています。 | ||
|
|
||
| <Table> | ||
| <thead> | ||
| <tr> | ||
| <Th>スクリーンリーダー</Th> | ||
| <Th>ブラウザ</Th> | ||
| <Th>プロセスを完了可能</Th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| NVDA | ||
| </td> | ||
| <td> | ||
| Chrome | ||
| </td> | ||
| <td> | ||
| ◯ | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
|
|
||
| ### 色反転・拡大鏡での利用 | ||
| 未実施 | ||
|
|
||
| ### 限られた器用さ、または力 | ||
| 未実施 | ||
|
|
||
| ## プロセス: コースを受講する | ||
| ### 概要 | ||
| * 従業員が学習コンテンツを受講するプロセス | ||
|
|
||
| ### 対象ページ | ||
| * コンテンツ受講画面 | ||
| * テスト受講画面 | ||
| * テスト結果確認画面 | ||
| * コース受講完了画面 | ||
|
|
||
| ### WCAG2.1 達成基準の検証 | ||
| [コースを受講する アクセシビリティ検証の結果 - 2024年10月](./202410_course/) | ||
|
|
||
| ### スクリーンリーダーでの利用 | ||
| スクリーンリーダーの読み上げとキーボード操作でプロセスを完了できるか、検証しています。 | ||
|
|
||
| <Table> | ||
| <thead> | ||
| <tr> | ||
| <Th>スクリーンリーダー</Th> | ||
| <Th>ブラウザ</Th> | ||
| <Th>プロセスを完了可能</Th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| NVDA | ||
| </td> | ||
| <td> | ||
| Chrome | ||
| </td> | ||
| <td> | ||
| ◯ | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
|
|
||
| ### 色反転・拡大鏡での利用 | ||
| 未実施 | ||
|
|
||
| ### 限られた器用さ、または力 | ||
| 未実施 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters