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の要素・属性を選択できる。また、リンク・ボタン・フォームコントロールなどに対して最適な要素・属性が自動付与される。

ただし、2024年12月現在、一部使用できない要素・属性が存在する。コンテンツに対してそれらの要素・属性が必須である場合、本基準を達成することはできない。
​ Studio HTML要素・属性対応表

1.3.2

意味のある順序

A

○

標準のレイアウト方法であるボックスレイアウトを行うことで、コンテンツを意味のある順序で並べることができる。

1.3.3

感覚的な特徴

A

○

制作者が、感覚的な特徴だけに依存しないライティングおよびデザインを行うことで達成できる。

1.3.4

表示の向き

AA

○

表示を単一の向きに制限するオプションが存在しない。したがって本基準は自動的に達成される。

1.3.5

入力目的の特定

AA

―

「利用者の情報を集める入力フィールド」に目的を固定できないため、2024年12月現在、テキスト入力欄に対しautocompleteが一律でoffになっており、制作者側で変更できない。そのため、本基準に該当する条件を満たさない。 なお「利用者の情報を集める入力フィールド」である場合に「フォーム入力データとして想定される意味の特定をサポートする技術を用いて、コンテンツが実装されている」を満たす方法は今後検討を進める。

1.4.1

色の使用

A

○

制作者が、色の違いだけに依存しないライティングおよびデザインを行うことで達成できる。

1.4.2

音声の制御

A

埋め込み依存

動画/音声は埋め込みにより掲載する。そのため、音声の制御は動画/音声をホストするサービス側に設定する。

1.4.3

コントラスト (最低限)

AA

○

制作者が、コントラスト基準を満たす配色を設定することで達成できる。

1.4.4

テキストのサイズ変更

AA

○
条件により✕

・テキストサイズにremまたはpxを指定した場合、ブラウザでの拡大・縮小は問題なく機能する。特にテキストサイズにremを指定すると、Chrome等の主要ブラウザでのフォントサイズ設定も反映されるため、より望ましい。

・テキストサイズにvwまたはvhを指定した場合、ブラウザでの拡大・縮小を行ってもテキストサイズが変化しなくなるため、本基準を達成することができない。

1.4.5

文字画像

AA

○

文字画像を用いないデザインを行うことで達成できる。

ウェブフォントやテキストスタイルを活用することで、本基準を達成しやすくなる。

1.4.10

リフロー

AA

○

制作者が、ページに対し「ミニ: 320px」のブレイクポイントで横スクロールが発生しないようレイアウトすることで達成できる。

※2次元レイアウトを必須するコンテンツが存在する場合は、横スクロールの発生も許容される

1.4.11

非テキストのコントラスト

AA

○

制作者が、コントラスト基準を満たす配色を設定することで達成できる。

1.4.12

テキストの間隔

AA

○

制作者が、以下のデザインを避けることで達成できる。

- テキストを含むボックスに対して余裕の無いサイズの縦幅・横幅をpx値で指定し、かつ、はみ出しの設定で「切り取り」を指定する

- テキストを含むボックスのごく近くに、別のテキストを含むボックスを絶対配置する

※閲覧者がテキストの行間や文字間を広げるCSSを適用した際、文字が見切れたり、他の文字に重なったりする可能性があるため

1.4.13

ホバー又はフォーカスで表示されるコンテンツ

AA

✕

条件により―

2024年12月現在、ホバー時にポインタを動かさずに追加コンテンツを非表示にする方法がない。ホバー時に追加コンテンツを表示する表現が必須である場合、本基準を達成することはできない。

※制作者が、ホバーによる追加コンテンツ表示を避ければ、本基準は適用されない。

2.1.1

キーボード

A

○

条件により✕

リンク・ボタン・フォームコントロールなどはすべてキーボードで操作できる。したがって本基準は自動的に達成される。

ただし、条件付きスタイルのホバーやin ホバーで表示内容を切り替えたり、追加表示を行ったりする指定がある場合、それらはキーボード操作では表示できない。これらの表現が必須である場合、本基準を達成することはできない。

2.1.2

キーボードトラップなし

A

○

キーボードフォーカスを閉じ込めるウィジェットが存在しない。したがって本基準は自動的に達成される。

2.1.4

文字キーのショートカット

A

―

ショートカットキーを設定するオプションが存在しない。したがって本基準は適用されない。

2.2.1

タイミング調整可能

A

○

フォームの送信完了を示すメッセージが20秒で非表示になるが、メッセージにホバーまたはフォーカスすることで制限時間を延長できる。

※送信完了ページを設定した場合はメッセージが表示されないため、本基準は適用されない。

2.2.2

一時停止、停止、非表示

A

✕

条件により―

2024年12月現在、5秒以上継続するよう設定されたアニメーションや背景動画を閲覧者が一時停止する方法がない。この表現が必須である場合、本基準を達成することはできない。

※自動的に開始し5秒以上継続する動画でも、背景動画ではなく通常の埋め込み動画の場合であれば、動画プレイヤーのコントロールにより停止できるため、本基準は達成できる。

※制作者が、自動的に開始し5秒以上継続するアニメーションや背景動画による表現を避ければ、本基準は適用されない。

2.3.1

3回の閃光、又は閾値以下

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

名前 (name) のラベル

A

○

リンクテキストを記載する、ボタンのラベルを記載する、テキストラベルとフォームコントロールをlabel要素で囲むといった方法で達成できる。

※失敗例にあるような、aria-labelの誤用や、非表示テキストによる分断を起こさなければ、本基準は達成できる。

2.5.4

動きによる起動

A

―

デバイスの動き又は利用者の動きを元にしたアクションを設定するオプションが存在しない。したがって本基準は適用されない。

3.1.1

ページの言語

A

○

サイト設定またはページ設定の言語欄で使用言語を設定することで達成できる。

3.1.2

一部分の言語

AA

✕

2024年12月現在、ページ内の個別要素に対して言語設定を行うことができない。個別要素に言語設定を必要とするコンテンツである場合、本基準を達成することはできない。

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

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

A

○

リンク・ボタン・フォームコントロールはネイティブコントロールである。またカルーセル、モーダルダイアログ起動ボタン、モーダルダイアログなどのカスタムコントロールにはWAI-ARIAを使用してname、role、valueを指定している。したがって本基準は自動的に達成される。

4.1.3

ステータスメッセージ

AA

✕
条件により◯

2024年12月現在、検索機能を使用した際に、結果表示後に「フォーカスを移す」か「結果が出たことを通知する」ことができない為、検索機能を使用した場合、本基準を達成することはできない。 その他、フォームを送信した際に表示される送信完了メッセージは、スクリーンリーダーに伝わる。 また、CMSリストに内包される「もっと見るボタン」を操作した際に、コンテンツが追加されたことがスクリーンリーダーに伝わるため、本基準を達成できる。