【Studio初心者ガイド】Studioでできるアクセシビリティとは？対応と設定方法｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

ウェブサイトのアクセシビリティは、すべてのユーザーがストレスなくコンテンツを利用できるようにするために欠かせない要素です。

特に視覚や聴覚に障害がある方、または操作の面で困難を抱える方にとって、使いやすいウェブ体験を提供することは、現代のウェブデザインの重要な課題です。

本記事では、Studioで実現できるアクセシビリティ対応の具体的な方法や設定方法について解説し、誰にとってもアクセス可能なウェブサイトを作るためのヒントを紹介します。

アクセシビリティとは

アクセシビリティ（ウェブアクセシビリティ）は、障がいの有無に関わらずすべての人が製品、サービス、環境を使いやすく、アクセスしやすい状態を確保することを指します。ウェブサイト、モバイルアプリケーション、その他のデジタルリソースにおいても重要とされています。

アクセシビリティは、さまざまな障がいを持つ人々が、同じウェブサイトやアプリを障がいのない人と同じように効率的かつ効果的に利用できるようにすることを目的としています。例えば、視覚障がい者がスクリーンリーダーを使ってコンテンツを聞いたり、聴覚障がい者がビデオの字幕を読んだりすることが含まれます。

アクセシビリティを考慮したデザインは、高齢者や一時的な障がいを持つ人々（例えば、腕を骨折している人や、非常に明るい日光の下でスクリーンが見えにくい人など）も恩恵を受けるため、単に「障がいを持つ方向け」というわけではなく、すべてのユーザーの利便性を高めるものです。

アクセシビリティの分類

アクセシビリティは主に以下の２つのカテゴリーに分けることができます。

1.ヒューマンリーダビリティ

ウェブサイトやアプリケーションが人間にとってどれだけ読みやすく、理解しやすく、操作しやすいかを指します。

2.マシンリーダビリティ

コンテンツが機械、特に支援技術（スクリーンリーダーや音声認識システムなど）によってどれだけ効果的に解釈され、処理されるかに関連します。

アクセシビリティの原則

1. 知覚可能性 - 情報とユーザーインターフェースのコンポーネントが、ユーザーが知覚できる形で提示される必要があります（例：代替テキスト、字幕）。

2. 操作可能性 - ユーザーインターフェースのコンポーネントとナビゲーションは操作可能でなければなりません（例：キーボード操作対応）。

3. 了解可能性 - 情報とユーザーインターフェースの操作が理解しやすいものでなければなりません（例：明確な指示、エラーメッセージ）。

4. 堅牢性 - コンテンツは、広範なユーザーエージェント（ブラウザやアシスタントテクノロジーを含む）によって解釈できるほど堅牢でなければなりません（例：クリーンなHTML/CSS、アクセシビリティAPIとの互換性）。

これらの原則を遵守することで、すべての人がより公平にデジタル環境を利用できるようになります。

Studioでできるアクセシビリティの例

Studioはアクセシビリティの向上を目指した機能が備わっています。Studioで実現できるアクセシビリティ対策は多岐にわたります。以下に、主な例を挙げます：

1.言語設定（lang属性）

この機能は、サイト（またはページ）で使用される言語を明示し、翻訳ツールやスクリーンリーダーなどの支援技術がサイト上の言語を正確に識別できるようにするための設定です。

これにより、より正確な翻訳の提供や、適切な言語での読み上げにつながります。なお、この機能は使用言語を明示するものであり、自動翻訳を行う機能ではありません。

また、言語設定はサイト全体にもページごとにも設定でき、ページ設定はそのページでサイト設定よりも優先されます（例：大半が日本語で、一部ページのみ英語の場合は、サイト設定を日本語にし、該当ページだけ英語にすると効率的です）。

Studioでの言語設定方法

サイト内全ページに一括設定する場合

1.キャンバス外（エディタの外）をクリックし、サイト設定から言語（赤四角）を選択し、全ページに適用します。

2.変更を公開サイトに反映させるためにサイトを更新します。

ページ毎に設定する場合

1.ページパネルで言語設定をしたいページ（ピンク四角）をクリックしてから、言語設定（黄色四角）で「ページ」を選択の上、個別に適用します。

2.変更を公開サイトに反映させるためにサイトを更新します。

この機能はウェブページで使用される言語を指定することにより、利便性を高めるものです。

言語設定を正確に行うことで、例えば視覚障がい者がスクリーンリーダーを使用する際に正しい言語で情報が読み上げられ、理解が促進されます。

ページが適切な言語でマークされていると、Google Chromeなどのブラウザに組み込まれた翻訳ツールが正確に動作しやすくなります。

2.代替テキスト（altタグ）

Studioでは、alt（代替テキスト）を設定することで、画像の内容をウェブクローラーやサイトの読み上げ機能に伝えることができます。

SEOの観点からも、この情報を設定することは重要です。

Studioでの代替テキスト（alt）設定方法

2.選択した画像がBoxモード（ピンク四角）の場合は、まずImgモードに切り替えます（altはImgモードの画像ボックスのみに設定できます）。

3.右パネルで［画像］タブを選択します。 ［代替テキスト］フィールド（ピンク四角）にaltを入力します。

Studioでは、代替テキストを画像に簡単に追加できます。

これにより、視覚障がいがあるユーザーや画像が読み込めない時に、スクリーンリーダーが代替テキストを読み上げることで内容を理解できるようになります。

設定しておくことで、ウェブアクセシビリティを向上させ、SEOにも貢献します。

3.HTMLタグ設定（サイト構造）

Studioでは、ボックスやテキストにHTMLタグを割り当てられます。

タグを適切に選ぶことで、検索エンジンやアクセシビリティ面での情報の読み取りが進みやすくなるため、サイト構造の整理に役立ちます。

また、アクセシビリティ対応の観点でも、HTMLの設定を適切に行うことがポイントとして挙げられています。

Studioで設定できる主なHTMLタグ