2024年05月07日掲載
![イラスト:左下に「秘書」、右下に「師匠」、中央には右手を上げた「見習い君」](https://www.u-x3.com/wp-content/uploads/2023/05/AC_main.png)
今日は見習い君が、新しいウェブサイトを作成しているようですが、師匠が気になるような表情をしている様子です。
- ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
- このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある人たちがウェブ利用時にどのような障壁にぶつかり、どのような工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。
非テキストのコントラスト
![イラスト:笑顔の見習い君](https://www.u-x3.com/wp-content/uploads/2023/07/minarai_1.png)
見習い君:よし。新しいウェブサイトがもう少しで完成だ…。
![イラスト:疑問顔の師匠](https://www.u-x3.com/wp-content/uploads/2023/07/shisyou_2.png)
師匠:頑張って作成しているようだね。でも、気になるところがあるな。
見習い君:頑張ったのに、ダメなところがあるのですか?
師匠:コントラスト比が合っていない箇所があるのじゃ。
![イラスト:右手を差し出して意見を聞く見習い君](https://www.u-x3.com/wp-content/uploads/2023/05/1.minarai_2.png)
見習い君:え、そんなはずでは…。
師匠:ああ、そうか。見習い君はまだ分からなかったのね。いい機会だし、説明をしようか。
見習い君:はい、お願いします!
![イラスト:指を指す師匠](https://www.u-x3.com/wp-content/uploads/2023/05/1.shisyou_1.png)
師匠:見習い君もJIS X 8341-3:2016にテキストや画像内の文字について、コントラスト比に関する達成基準があるのは知っているだろう。(参考記事:「コントラストの重要性‐第4回‐」)実は、WCAG 2.2から、アイコンのようにテキストではない箇所やそれを囲むフォーカスインジケータについても、一定のコントラスト比が求められるようになったのじゃ。
![イラスト:右手を差し出して意見を聞く見習い君](https://www.u-x3.com/wp-content/uploads/2023/05/1.minarai_2.png)
見習い君:そうなのですね。詳しく教えてください!
師匠:アイコンのようにテキストではない箇所やフォーカスインジケータについても、隣り合っている背景との間に少なくとも3.0:1以上のコントラスト比を保つ必要があるのじゃ。 それが「1.4.11 非テキストのコントラスト」だ。
見習い君:なるほど。ということは、作ったウェブサイトにあるフォーカスインジケータの場合、コントラストが1.8:1のため、問題ありということですね。
![イラスト:下線を引かれた「リンク」をグレーの枠で囲んでいる](https://www.u-x3.com/wp-content/uploads/2024/04/1.png)
![イラスト:後ろで手を組む師匠](https://www.u-x3.com/wp-content/uploads/2023/05/1.shisyou_3.png)
師匠:そうじゃ。他にも、作成したチェックボックス、ラジオボタンも対象だ。
このチェックボックスは、チェックの色が白、背景色が水色でコントラストチェックすると、1.6:1。また、ラジオボタンについても、真ん中の丸と隣の背景の白色でコントラストチェックすると、1.8:1。
![イラスト:右手で顎をささえ意見を聞く見習い君](https://www.u-x3.com/wp-content/uploads/2023/07/minarai_4.png)
見習い君:じゃ、これもダメということですか?
![イラスト:黄色く塗りつぶされた2つの星](https://www.u-x3.com/wp-content/uploads/2024/04/3.png)
師匠:そうじゃ。その場合は、以下のように、縁取りを追加すれば3.0:1以上を満たせるのじゃ。
![イラスト:黒い縁取りのある黄色く塗りつぶされた2つの星](https://www.u-x3.com/wp-content/uploads/2024/04/4.png)
見習い君:なるほど!ここまでは理解できたけど、1つ質問です。非テキストとなってくると、会社のロゴも、コントラストの指摘が必要になって面倒になるのでは…?
![イラスト:指を指す師匠](https://www.u-x3.com/wp-content/uploads/2023/05/1.shisyou_1.png)
師匠:心配することはないぞ。達成基準「1.4.3 色のコントラスト」と同様、会社のブランドを示すため、色の特定の表現が情報を伝えるために不可欠な場合は、例外になるのじゃ。
見習い君:ここまで確認する必要はないのですね!良かった。 コントラストの対象が細かくなってきたけど、より見やすくなってきますね。
師匠:そうじゃな。さぁさぁ、ウェブサイトの作成の続きをするのじゃ。
![イラスト:案内する秘書](https://www.u-x3.com/wp-content/uploads/2023/05/1.hisyo_2.png)
秘書:WCAG 2.2の「非テキストのコントラスト」に関する達成基準は以下で詳しく解説されています。 【Understanding SC 1.4.11: Non-text Contrast (Level AA)】(新しいウィンドウが開きます)
また、「WCAG2.2解説書」についても、以下をご参照ください。
【WCAG2.2解説書】(新しいウィンドウが開きます)