【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タグ

<div>: セクションをグループ化するために使用されます。
<nav>: ナビゲーションリンクのグループ化に使います。
<header>: ページのヘッダー部分を定義します。
<footer>: ページのフッター部分を定義します。
<section>: ドキュメントのセクションをマークします。
<article>: 自己完結型のコンテンツを定義します。
<main>: ページの主要コンテンツを示します。
<ul>: 順序なしリストを定義します。
<li>: リストアイテムを示します。
<label>: フォーム内のラベルを定義します。

テキスト関連のHTMLタグ

<p>: 段落を定義します。
<h1>〜<h6>: 見出しを定義し、<h1>が最も重要で、<h6>が最も小さい見出しです。
<span>: 文書の一部分にスタイルを適用するために使用します。
<li>: リストのアイテムを示します。

StudioでのHTMLタグ設定（サイト構造）方法

HTMLタグを変更したい要素（テキストボックスや画像ボックスなど）を選択し、右パネルの「設定」タブにある「タグ」項目（ピンク四角）から、目的に合うHTMLタグを選んで設定します。

4.フォームを使いやすくする

使いやすいフォームを作ることは、ウェブサイトやアプリを使っている時の体験を良くするためにとても大切です。

フォームは、ウェブサイト上で情報を送ったり、サインアップしたり、商品を買ったりする際によく使われます。

使いやすいフォーム設計のポイント

1. ラベルの使用:

   各入力フィールドには明確なlabelタグを使用して関連付けること。これにより、スクリーンリーダーがどのラベルがどのフィールドに対応しているかを識別できるようになります。

2. キーボードアクセス:

   フォームはキーボードだけで完全に操作可能であること。つまり、マウスを使わずにタブキーでフォームの各要素間を移動できるようにする必要があります。

3. インストラクションと情報:

   フォームの目的と、各フィールドの入力情報がどのように使用されるかを明確に説明する。

4. コントラストと視認性:

   視覚的要素は十分なコントラストを持っている必要があり、視力に障がいのあるユーザーでも容易に読み取れるようにすること。

Studioでのフォームの設置方法

画面左の追加パネル内のボックスメニューに、FormsとForm Parts（ピンク四角）が格納されています。

ドラッグ＆ドロップまたはクリックでパーツをページに配置して、フォームを設置します。

配置後は、エディタ上で項目やデザインを編集しながら設定します。

5.aria-label, aria-hiddenの設定

スクリーンリーダーは、ページ上のテキストを読み上げる機能を持っていますが、アイコンや画像など「テキストでない形式」の情報は通常、認識しないため、そのままでは読み上げることができません。

「imgタグ」の画像には「alt属性」を設定して、スクリーンリーダーが読み上げる内容を指定することが可能ですが、以下の2つの属性を適切に使用することで、ウェブページ全体のアクセシビリティが向上します。

1. aria-label：この属性は、その要素がスクリーンリーダーにどのように読み上げられるかを指定するために使用します。

2. aria-hidden：この属性は、特定の要素をスクリーンリーダーが読み飛ばすように設定するために使用します。

通常、これらの属性は同時に使用されません。もしaria-labelに内容を設定し、同時にaria-hiddenを適用する場合、aria-hiddenが優先されるため、設定したラベルはスクリーンリーダーに読み上げられません。

これらの属性を適切に設定することで、視覚障害を持つユーザーも含め、より多くの人がウェブページのコンテンツを理解しやすくなります。

Studioでのaria-label, aria-hiddenの設定方法

設定したい要素（ボックス）を選択し、画面右側の設定パネルを開きます。

設定パネル下部の アクセシビリティ欄（ピンク四角）から、aria-label（読み上げ時に代わりに読ませたいテキスト）や aria-hidden（読み上げ対象から除外）を設定できます。

ウェブアクセシビリティのガイドライン「JIS X 8341-3」（JIS規格）

JIS X 8341-3は、日本工業規格の一つで、ウェブコンテンツのアクセシビリティに関する基準を定めています。この規格は、障害を持つ人々を含むすべての人がウェブサイトやアプリケーションを利用しやすくすることを目的としています。

特に、視覚障害者や聴覚障害者、高齢者などがウェブサイトを容易にナビゲートし、情報を取得できるように配慮されています。

JIS X 8341-3は、適合レベルをA、AA、AAAの3段階に分けています。各レベルはアクセシビリティの要件をより厳しく設定し、AAAが最も高い水準を示します。

ウェブアクセシビリティのガイドライン「WCAG 2.0」

WCAG 2.0は、ウェブコンテンツのアクセシビリティを確保するための国際的なガイドラインです。このガイドラインは、視覚、聴覚、身体、認知、言語、学習に障害を持つユーザーを含む、すべての人々がウェブコンテンツにアクセスしやすくすることを目的としています。JIS規格と内容は一致しています。

ウェブアクセシビリティ「JIS X 8341-3」（JIS規格）、「WCAG 2.0」のガイドラインに関しては、こちらをご覧ください。

「JIS X 8341-3」（JIS規格）、「WCAG 2.0」の早見表／逆引き表は以下です。

StudioのWCAG 2.1 Level A, AA対応表

WCAG 2.1はWCAG 2.0の改訂版です。以下にWCAG 2.1対応表をまとめました。

この表はWCAG 2.1の基準に対するStudioの対応状況をまとめたものです。

まとめ

アクセシビリティは単なる規範ではなく、デジタル環境におけるすべての人の権利を尊重する手段です。ウェブアクセシビリティを意識することで、障がいの有無にかかわらず、誰もが情報へのアクセスを平等に享受できます。

ウェブサイトやアプリを設計する際には、操作のしやすさ、理解のしやすさ、情報の知覚可能性を考慮し、包括的なデジタルアクセスを提供することが不可欠です。わたしたち一人一人がアクセシビリティの向上に向けた行動を起こすことが、より公正な社会への第一歩となるでしょう。