こちらの記事では、W3C勧告 Web Content Accessibility Guidelines (WCAG) 2.1 に対する、STUDIOの対応状況を記しています。
Web Content Accessibility Guidelines (WCAG) 2.1は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅したものです。
日本語訳の基準は Web Content Accessibility Guidelines (WCAG) 2.1 (waic.jp) を参照ください。
STUDIO全体におけるアクセシビリティ関連の情報は、STUDIO におけるアクセシビリティ | STUDIO U を参照ください。
最終更新：2023年6月6日
表の読み方
番号
達成基準ごとに設定されている番号です。
見出し
達成基準の見出しです。
レベル
達成基準の適合レベルを表します。
達成可能か
○：可能
―：適用されない
✕ ：達成できない
埋め込み依存：埋め込んだ外部サービス側の設定に依存する。
STUDIO の対応
各基準に対するSTUDIOの対応状況、STUDIOを使った対応方法を記載します。
WCAG 2.1 対応表
番号 | 見出し | レベル | 達成可能か | STUDIO の対応 |
1.1.1 | A | ○ | 以下の方法で代替テキストを設定できる。 - img要素にalt属性を設定できる - 任意の要素にaria-labelを設定できる - 動画/音声をiframeで埋め込む際にtitle属性を直接記述することで付与できる | |
1.2.1 | A | 埋め込み依存 | 動画/音声は埋め込みにより掲載する。そのため、以下のどちらかの方法で対応する。 - 動画/音声をホストするサービス側に代替コンテンツを設定する - ウェブページ上にテキストによる代替コンテンツを掲載する | |
1.2.2 | A | 埋め込み依存 | 動画/音声は埋め込みにより掲載する。そのため、キャプションは動画/音声をホストするサービス側に設定する。 | |
1.2.3 | A | 埋め込み依存 | 動画は埋め込みにより掲載する。そのため、以下のどちらかの方法で対応する。 - 音声解説を動画をホストするサービス側に設定する - ウェブページ上にテキストによる代替コンテンツを掲載し、メディアに対する代替とする | |
1.2.4 | AA | 埋め込み依存 | 動画/音声は埋め込みにより掲載する。そのため、キャプションは動画/音声をホストするサービス側に設定する。 | |
1.2.5 | AA | 埋め込み依存 | 動画は埋め込みにより掲載する。そのため、音声解説は動画をホストするサービス側に設定する。 | |
1.3.1 | A | ○ 条件により✕ | コンテンツの意味に応じて、HTMLの要素・属性を選択できる。また、リンク・ボタン・フォームコントロールなどに対して最適な要素・属性が自動付与される。 ただし、2023年5月現在、一部使用できない要素・属性が存在する。コンテンツに対してそれらの要素・属性が必須である場合、本基準を達成することはできない。 | |
1.3.2 | A | ○ | 標準のレイアウト方法であるボックスレイアウトを行うことで、コンテンツを意味のある順序で並べることができる。 | |
1.3.3 | A | ○ | 制作者が、感覚的な特徴だけに依存しないライティングおよびデザインを行うことで達成できる。 | |
1.3.4 | AA | ○ | 表示を単一の向きに制限するオプションが存在しない。したがって本基準は自動的に達成される。 | |
1.3.5 | AA | ✕ | 2023年5月現在、テキスト入力欄（input type が text/email/tel になるもの）に対し、 autocomplete属性が一律でoffの値になっている。テキスト入力欄が必須である場合、本基準を達成することはできない。 | |
1.4.1 | A | ○ | 制作者が、色の違いだけに依存しないライティングおよびデザインを行うことで達成できる。 | |
1.4.2 | A | 埋め込み依存 | 動画/音声は埋め込みにより掲載する。そのため、音声の制御は動画/音声をホストするサービス側に設定する。 | |
1.4.3 | AA | ○ | 制作者が、コントラスト基準を満たす配色を設定することで達成できる。 | |
1.4.4 | AA | ○ | ブラウザでの拡大・縮小を制限するオプションが存在しない。したがって本基準は自動的に達成される。 | |
1.4.5 | AA | ○ | 文字画像を用いないデザインを行うことで達成できる。 ウェブフォントやテキストスタイルを活用することで、本基準を達成しやすくなる。 | |
1.4.10 | AA | ○ | 制作者が、ページに対し「ミニ: 320px」のブレイクポイントで横スクロールが発生しないようレイアウトすることで達成できる。 ※2次元レイアウトを必須するコンテンツが存在する場合は、横スクロールの発生も許容される | |
1.4.11 | AA | ○ | 制作者が、コントラスト基準を満たす配色を設定することで達成できる。 | |
1.4.12 | AA | ○ | 制作者が、以下のデザインを避けることで達成できる。 - テキストを含むボックスに対して余裕の無いサイズの縦幅・横幅をpx値で指定し、かつ、はみ出しの設定で「切り取り」を指定する - テキストを含むボックスのごく近くに、別のテキストを含むボックスを絶対配置する ※閲覧者がテキストの行間や文字間を広げるCSSを適用した際、文字が見切れたり、他の文字に重なったりする可能性があるため | |
1.4.13 | AA | ✕ 条件により― | 2023年5月現在、ホバー時にポインタを動かさずに追加コンテンツを非表示にする方法がない。ホバー時に追加コンテンツを表示する表現が必須である場合、本基準を達成することはできない。 ※制作者が、ホバーによる追加コンテンツ表示を避ければ、本基準は適用されない。 | |
2.1.1 | A | ○ 条件により✕ | リンク・ボタン・フォームコントロールなどはすべてキーボードで操作できる。したがって本基準は自動的に達成される。 ただし、条件付きスタイルのホバーやin ホバーで表示内容を切り替えたり、追加表示を行ったりする指定がある場合、それらはキーボード操作では表示できない。これらの表現が必須である場合、本基準を達成することはできない。 | |
2.1.2 | A | ○ | キーボードフォーカスを閉じ込めるウィジェットが存在しない。したがって本基準は自動的に達成される。 | |
2.1.4 | A | ― | ショートカットキーを設定するオプションが存在しない。したがって本基準は適用されない。 | |
2.2.1 | A | ○ | フォームの送信完了を示すメッセージが20秒で非表示になるが、メッセージにホバーまたはフォーカスすることで制限時間を延長できる。 ※送信完了ページを設定した場合はメッセージが表示されないため、本基準は適用されない。 | |
2.2.2 | A | ✕ 条件により― | 2023年5月現在、5秒以上継続するよう設定されたアニメーションや背景動画を閲覧者が一時停止する方法がない。この表現が必須である場合、本基準を達成することはできない。 ※自動的に開始し5秒以上継続する動画でも、背景動画ではなく通常の埋め込み動画の場合であれば、動画プレイヤーのコントロールにより停止できるため、本基準は達成できる。 ※制作者が、自動的に開始し5秒以上継続するアニメーションや背景動画による表現を避ければ、本基準は適用されない。 | |
2.3.1 | A | ○ | 制作者が、閃光にあたる表現を避ければ、本基準は達成される。 | |
2.4.1 | A | ○ | 制作者が以下のような方法を用いることで達成できる - main要素などのランドマークを用いる - h1〜h6の見出し要素を用いる - メインコンテンツエリアへジャンプするするリンクを設定する | |
2.4.2 | A | ○ | ページ設定のページタイトル欄に、主題又は目的を説明したタイトルを設定することで達成できる。 | |
2.4.3 | A | ○ | 標準のレイアウト方法であるボックスレイアウトを行うことで、リンク・ボタン・フォームコントロールを意味のあるフォーカス順序で並べることができる。 | |
2.4.4 | A | ○ | 制作者が、リンクの目的を示すライティングおよびHTML要素の組み合わせを行うことで達成できる。 | |
2.4.5 | AA | ○ | 制作者が、サイトマップページや、CMS検索機能などを提供することで達成できる。 | |
2.4.6 | AA | ○ | 制作者が、主題又は目的を説明した見出し・ラベルのライティングを行うことで達成できる。 | |
2.4.7 | AA | ○ | リンク・ボタン・フォームコントロールのフォーカスはすべて可視化されている。したがって本基準は自動的に達成される。 | |
2.5.1 | A | ― | ポインタのジェスチャを設定するオプションが存在しない。したがって本基準は適用されない。 | |
2.5.2 | A | ○ | リンク・ボタン・フォームコントロールは、ネイティブコントロールを使用しており、アップイベントで機能がトリガーされる。したがって本基準は自動的に達成される。 | |
2.5.3 | A | ○ | リンクテキストを記載する、ボタンのラベルを記載する、テキストラベルとフォームコントロールをlabel要素で囲むといった方法で達成できる。 ※失敗例にあるような、aria-labelの誤用や、非表示テキストによる分断を起こさなければ、本基準は達成できる。 | |
2.5.4 | A | ― | デバイスの動き又は利用者の動きを元にしたアクションを設定するオプションが存在しない。したがって本基準は適用されない。 | |
3.1.1 | A | ○ | サイト設定またはページ設定の言語欄で使用言語を設定することで達成できる。 | |
3.1.2 | AA | ✕ | 2023年5月現在、ページ内の個別要素に対して言語設定を行うことができない。個別要素に言語設定を必要とするコンテンツである場合、本基準を達成することはできない。 | |
3.2.1 | A | ○ | フォーカス時に起こせる変化は、フォームの入力欄や選択肢のスタイルの変更に限定されており、「コンテキストの変化」を起こすようなオプションが存在しない。したがって本基準は自動的に達成される。 | |
3.2.2 | A | ○ | 入力時に「コンテキストの変化」を起こすようなオプションが存在しない。したがって本基準は自動的に達成される。 | |
3.2.3 | AA | ○ | 制作者が、複数ページ間で共通した位置・レイアウト・内容のナビゲーションを提供することで達成できる。 | |
3.2.4 | AA | ○ | 制作者が、ウェブサイト上で複数回出現する同じ機能に対して、同じラベルやアイコンを指定するようにライティングやデザインを行うことで達成できる。 | |
3.3.1 | A | ○ | フォームコントロールの設定において必須項目にチェックを入れることで、該当のinput要素やtextarea要素にrequired属性が付与される。この設定により、ブラウザ組み込みによるフォームエラーの提示が行われる（送信ボタンを押すと、未入力箇所にフォーカスが移り、未入力である旨の吹き出しが出る）。したがって本基準は達成できる。 | |
3.3.2 | A | ○ | 制作者が、フォームの入力欄に対して項目名・入力条件・必須である旨などをテキストラベルとして掲載することで達成できる。 | |
3.3.3 | AA | ○ | フォームコントロールの設定において必須項目にチェックを入れることで、該当のinput要素やtextarea要素にrequired属性が付与される。この設定により、ブラウザ組み込みによるフォームエラーの提示が行われる（送信ボタンを押すと、未入力箇所にフォーカスが移り、未入力である旨の吹き出しが出る）。また、typeでemailを選ぶと、メールアドレスの要件を満たしていない場合はその旨の吹き出しが出る。したがって本基準は達成できる。 | |
3.3.4 | AA | ○ | 制作者が、「入力内容に誤りがなければ送信」というチェックボックスを配置し、かつ必須に指定することで達成できる。 ※設置しているフォームが「法的、金融、データ」に該当しない場合は、本基準は適用されない。 | |
4.1.1 | A | ○ | nu html checkerでチェックした結果、開始と終了のタグ、入れ子、属性の重複の問題はなかった。IDの重複は、制作者が誤って重複させなければ生じない。したがって本基準は達成できる。 ※なお、デザインエディタ上でのIDの入力時、同じID指定できないように制限されている | |
4.1.2 | A | ○ | リンク・ボタン・フォームコントロールはネイティブコントロールである。またカルーセル、モーダルダイアログ起動ボタン、モーダルダイアログなどのカスタムコントロールにはWAI-ARIAを使用してname、role、valueを指定している。したがって本基準は自動的に達成される。 | |
4.1.3 | AA | ○ | フォームを送信した際に表示される送信完了メッセージは、スクリーンリーダーに伝わる。 また、CMSリストに内包される「もっと見るボタン」を操作した際に、コンテンツが追加されたことがスクリーンリーダーに伝わるため、本基準を達成できる。 |