デジタルクリエイティブ・コラム

Museは、マウスドラッグと数値入力だけで、高度なページを作成できる画期的なツールです。HTMLやCSSの知識は不要で、Museが自動的にHTMLやCSSのデータを生成してくれます。
ただし、一つだけ必ず「検証」が必要な工程があります。作成したウェブページのアクセシビリティー・チェックです。

Museが生成するHTMLは、CMSと同様に自動化のためのコードを大量に含みます。ウェブデザイナーがコーディングで作るHTMLのようにクリーンではありませんが、最低限のアクセシビリティは保証されています。ただし、Museを「正しく」使っていることが前提になります。

最低限、以下の4項目はチェックする必要があります。

(1)適切なページタイトルになっているか?
(2)見出しのレベルを指定しているか?
(3)意味画像に代替テキストを付加しているか?
(4)音声で読み上げて意味が伝わるか?


Webデザイナーの皆さんにとっては基本中の基本ですが、Museユーザーの多くは紙媒体のデザインに携わる方々です。ページタイトルがデフォルトのままだったり、見出しが全て段落になっていたり、記事の写真に代替テキストがない等、アクセシブルではないページを納品してしまう可能性があります。

4項目を一つひとつ見ていきましょう。


(1)適切なページタイトルになっているか?

ページのタイトルは[ページプロパティ]で記述します。プランでページのサムネイルを右クリック、メニューから[ページプロパティ]を選びます。



ページオプションの[ページタイトル:]に入力するだけですが、デフォルトでは[ページ名と同じ]がチェックされているため、ページサムネイルの名前(デフォルトは「ホーム」)が自動的にページタイトルになってしまいます。
[ページ名と同じ]のチェックを外して、[ページタイトル:]にタイトルを入力してください。




(2)見出しのレベルを指定しているか?

Museの編集画面で文字サイズを大きくしたり、太くしても、デフォルトは「段落」が指定されています。つまり、見出しのレベルを指定しないと、検索エンジンなどが「このページには段落しかない」と解釈してしまうのです。必ず、テキストパネルの最下部のメニューから見出しレベルを選んでください。




(3)意味画像に代替テキストを付加しているか?

ウェブページに配置する画像は、意味画像と装飾画像に分けられます。欠けてしまうと意味が伝わらない記事の写真や図表などは「意味画像」です。一方、装飾目的の罫線やアイコンなどはページに表示されなくても、記事内容が意味不明になってしまうことはありません。見栄えはわるくなりますが、記事の意味はちゃんと伝わるはずです。

そして、意味画像には(どんな画像なのか説明するための)「代替テキスト」を入力しなければいけません。入力方法は簡単です。画像を右クリックし、メニューから[画像プロパティを編集]を選び、ダイアログの[代替テキスト:]に説明を入力するだけです。





(4)音声で読み上げて意味が伝わるか?

最後のチェックは、ページを音声で読み上げたとき、正しく意味が伝わるかの検証です。視覚障害者の皆さんは音声読み上げツールを使って、ウェブページの情報を「音声」で聞いています。
この検証には、アクセシビリティツールが必要になりますが、ここでは「Web Developer」を推奨しています。Web Developerは、FirefoxとChromeの拡張機能です。ブラウザーはどちらでもかまいませんが、必ずインストールしておきましょう(数回のクリックだけで簡単にインストールできます)。



ブラウザーにインストールされると、画面上部にツールバーが表示されます。検証したいウェブページを表示した状態で、[CSS]のメニューから[CSSの無効化]→[全てのCSSを無効化]を選びます。
※元の状態に戻す場合は、同様に[CSS]のメニューから[CSSの無効化]→[全てのCSSを無効化]を選択します。



CSSの指定が無効になり、ページがリニアライズ(線形化)されます。見栄えは気にしないでください。ページの上から順番に読み上げていきます。ページの情報が正しく伝わるか確認しましょう。



ページ数が多いと、まとめてチェックするのは大変かもしれませんが、指定し忘れている場合もありますので、必ず実行しておきましょう。

Museアカデミー
Adobe Museを習得するための学習ページ。デジタルクリエイティブには、DreamweaverやAnimate、Photoshopなどの学習コンテンツがあります。


シンクゼロマガジンとは?

筆者:
Creative Edge School Books