ノーコードでアクセシビリティに対応するにはどうすればよい？

ノーコードでアクセシビリティに対応するには、対応機能のあるサービスやテンプレートを選び、設定だけでなく公開後の実機確認まで行います。特に、見出し構造、キーボード操作、画像の代替テキスト、フォームのラベル、色のコントラストを確認することが重要です。

ただし、ノーコードツールを使えば自動的にアクセシビリティ対応になるわけではありません。ツール側で変更できないHTMLやキーボード操作などに問題がある場合は、別のサービスやテンプレートへの変更、開発者による追加対応が必要です。

ノーコードでアクセシビリティに対応する手順

次の順番で、サービス選び、制作時の設定、公開前の確認を進めます。

1. アクセシビリティに配慮されたサービスとテンプレートを選ぶ

   見出し、ボタン、フォームなどを適切なHTMLとして出力できるサービスを選びます。テンプレートの見た目だけでなく、キーボード操作、フォーカス表示、レスポンシブ表示、画像の代替テキスト設定に対応しているかを確認してください。

2. ページの構造を整理する

   ページのタイトルを設定し、見出しは内容の順番に合わせて使います。見た目を大きくする目的だけで見出しを使ったり、見出しレベルを飛ばしたりしないようにします。

   たとえば、ページの大見出しを「見出し1」、その下の項目を「見出し2」、さらに細かい項目を「見出し3」として整理します。文字を太くしたいだけの場合は、見出しではなく文字装飾を使います。

3. 画像に内容に合った代替テキストを設定する

   画像の代替テキストは、画像が表示されない場合や読み上げソフトを使う場合に、画像の内容を伝える文章です。商品の画像なら商品名や特徴を記載し、装飾だけの画像は空の代替テキストにできるか確認します。

   「画像」「写真」のように、画像であることだけを繰り返す説明は避けます。画像内に重要な文字がある場合は、その情報を本文にも記載すると伝わりやすくなります。

4. キーボードだけで操作できるか確認する

   マウスを使わず、Tabキー、Enterキー、矢印キーなどでメニュー、リンク、ボタン、フォームを操作します。操作できない部分がないか、現在どこにフォーカスがあるか分かるか、モーダルやメニューを閉じた後に適切な場所へ戻れるかを確認してください。

   キーボード操作で止まる箇所がある場合、ノーコードの設定だけで直せるかを確認します。直せない場合は、その機能を使わないか、ツールや部品を変更する必要があります。

5. 色だけに頼らず、文字と入力状態を伝える

   リンクを色だけで示したり、エラー項目を赤色だけで示したりしないようにします。「必須」「入力に誤りがあります」などの文字や記号も併用してください。

   本文と背景、ボタンの文字と背景には十分なコントラストが必要です。コントラスト比の目安や例外は、対象となる達成基準によって異なるため、WCAG 2.2の基準を確認します。

6. フォームを入力してエラー表示を確認する

   各入力欄に項目名があり、何を入力すればよいか分かる状態にします。プレースホルダーだけを項目名の代わりにすると、入力後に内容が分からなくなることがあるため、ラベルや説明文を併用します。

   未入力や形式違いで送信したときは、どの項目に問題があるか、どう直せばよいかを文字で示します。ノーコードサービスがエラーメッセージの変更に対応していない場合は、利用者が理解できる表示になっているかを実際に確認してください。

7. スマートフォン、拡大表示、読み上げで確認する

   画面幅を変えたときに、文字やボタンが重ならないか確認します。ブラウザーの拡大表示でも横方向への過度なスクロールや、内容の欠落が起きないかを確認してください。

   可能であれば、WindowsのナレーターやmacOS・iPhoneのVoiceOverなどの読み上げ機能で、見出し、リンク、画像、フォームの順番を確認します。読み上げの結果が意味の通る順番になっているかが判断の手がかりになります。

ノーコードで優先して確認する項目

すべてを一度に確認できない場合は、利用者が操作を完了できるかに関わる項目から確認します。

自動チェックだけでは対応の完了を判断できない

アクセシビリティ検査ツールは、色のコントラスト不足や代替テキストの未設定などを見つける手がかりになります。しかし、リンク名が分かりやすいか、キーボードで最後まで操作できるか、エラーメッセージの意味が伝わるかといった内容までは、すべて自動判定できません。

そのため、検査ツールの結果だけで「対応済み」と判断せず、キーボード操作、画面拡大、スマートフォン表示、読み上げを組み合わせて確認します。WCAGの達成基準や確認方法は、WCAG 2.2の理解で項目ごとに確認できます。

ノーコードでは対応しにくい場合の判断

次のような問題を設定画面で変更できない場合は、ノーコードだけでの対応が難しいと判断できます。

• キーボードで操作できない部品がある
• フォーカス位置が表示されない、または順番が不自然である
• フォームのラベルやエラーメッセージを変更できない
• 画像の代替テキストを設定できない
• コントラストや文字サイズを変更できない
• 自動再生や点滅などの動きを止められない

この場合は、同じサービス内の別テンプレートや別部品を試し、それでも解決しなければサービスを変更します。ソースコードの修正や独自部品の追加が必要なときは、アクセシビリティの知識がある制作者に確認してもらう方法もあります。

ノーコードのアクセシビリティ対応で最初にすること

最初に、使用するサービスのテンプレートで「見出し」「画像の代替テキスト」「フォームのラベル」「キーボード操作」を設定できるか確認してください。制作後は自動検査だけで終わらせず、キーボードと画面拡大で主要な操作を試します。

ノーコードで対応できる範囲はサービスや部品によって異なります。設定で直せる問題は制作段階で修正し、変更できない問題は部品やサービスの変更を検討することが、現実的な進め方です。