GAAD Japan 2020。アクセシビリティを考える1日 「誰もがウェブサイトを持つために…ウェブサイトビルダーができること」

毎年5月の第3木曜日は、GAAD（Global Accessibility Awareness Day）の日。世界各地で「アクセシビリティ」を考える一日、ということでGADD Japan 2020に参加しました。

Home | GAAD Japan

三つ目のセッションは「誰もがウェブサイトを持つために…ウェブサイトビルダーができること」。登壇者は株式会社KDDIウェブコミュニケーションズ 広報室 室長　神森 勉さんです。

Jimdo

ウェブサイトビルダーとは？

専門知識がなくても簡単にホームページを作ることができるサービス
＝ブロックを積み上げるようにサイトを作ることができる

・ソフトウェアのインストールが不要
・ブラウザのみでサイト制作が可能
・WYSIWYGエディタによる見たまま編集
・HTML/CSS/サーバの知識がなくても制作が可能
・承認機能や時限公開のような複雑な機能はない
・無料で始めることができ、機能によって有料版の選択が可能

ウェブサイトビルダーの利用者層は？ジンドゥーの場合

・個人事業主／経営者＝小規模事業者
・業種は様々
→　ビジネス利用が多い

・小規模事業者ではウェブサイトの運用は経営者本人や家族も多い
　※中小企業白書（2013年度版）
→　ウェブサイトビルダーは中小規模事業者のウェブ参入を促進してきた

jimdoでできること

ジンドゥークリエイター
・あらかじめ用意されているテンプレートからサイトを制作
・1つの独自のテンプレートを作成可能
・コンテンツを描きたい場所に自由に追加してページを作成
・コーディングによる細かいカスタマイズが可能
・クリエイター専用のスマートフォンアプリで運用可能

ジンドゥーAIビルダー
・AI作成アシスト機能
・InstagramやGoogleBusinessから情報を瞬時に取り込み、簡単にウェブサイトを作成
・セクションブロックの組み合わせでページを作成
・HTML/CSSの編集は不可能
・スマートフォンからでもゼロから作成、公開、編集が可能

→　jimdoではWACG2.0 レベルAはほぼ対応可能

JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）

ジンドゥークリエイターでのアクセシビリティ対応

・文章構造を意識してコンテンツの追加を行う
　→　見た目だけでコンテンツの種類を選ばない
・代替テキストの挿入を設定する
　→　指定がなければ空のaltタグが設定される
・コントラスト比を意識した自由に設定可能なカラーオプション
　→　サイトカラーに合わせてコントラスト比を確保して色を変更する
・埋め込み動画などは別途代替コンテンツを用意する工夫が必要
・オリジナルテンプレートを活用し、アクセシビリティを高める
　→　独自レイアウトで要素の役割を明示する

ジンドゥークリエイターが書き出すHTML

標準レイアウト
・あらかじめ用意されている40種類のテンプレート
・定義されているCSSの上書き編集とコンテンツHTMLの直接編集
→　システム的に必要なclassを削除できない

独自レイアウト
サイト内に1つだけ作成できるオリジナルテンプレート
CSSの上書き編集とコンテンツHTMLの直接編集
ページの基本構造を作成できる
→　header、navなどの属性を明示できる

コンテンツのHTML構造
・各要素に規定のid/classが付与されるのでそれを活用
・編集画面でHTMLを確認／編集できる
・直接HTMLを挿入することも可能

動画コンテンツ
・動画コンテンツの埋め込みはできるが、代替コンテンツの提供が難しい
・これについては工夫が必要

キーボード操作
・複雑なことがそもそもできないので、あまり問題はない

クリエイターでアクセシブルなサイトを作るためには

・見た目の変更が自由なためコントラストを意識したページ作りが必要
・レイアウトベースのHTMLではセマンティクス構造にすることが可能
・見出しや段落などを自由に挿入できるので文書構造を意識したページ作りが必要
・画像ファイルの代替テキストを適切に設定
・埋め込み動画の代替コンテンツは別途用意するなど工夫が必要

AIビルダーで意識すること

・デザイン変更から行うことができるカラーセットでコントラストを意識する。
　→　画像の上に文字をのせる際、視認性を担保するために、自動でカラーフィルターがかかる（色変更は可能）
・セクションごとに挿入可能なコンテンツで見出しレベルを意識する
・画像ファイルの代替テキストを適切に設定
・埋め込み動画の代替コンテンツは別途用意するなど工夫が必要

アクセシブルなサイトの事例

エーゲ海クルーズの決定版セレスティアルクルーズ

Home | GAAD Japan

ウェブサイトビルダーでアクセシビリティを確保する

・文書構造を意識してコンテンツを追加する
・画像の代替テキストを適切に設定する
・時間依存メディア（動画など）は代替手段を用意する
・アクセシブルなカラーセットをあらかじめ用意する
・フォームの必須項目ラベルは明示的に行う
・オリジナルテンプレートを有効活用する

質疑応答

・音声読み上げで管理画面側は使える？
　→　現状のウェブサイトビルダーでは難しい
・カラーオプションは自動でコントラスト比が担保できる？
　→　クリエイターでは自由なので自動的にはならない

まとめ

ウェブサイトビルダーでサイト制作提案してるけど、月額費とか自由度とかでなんだかんだNGになり、WordPressでっなりがち。間に入ってる人に良さを伝えきれていない問題はかなりあるとおもうけれども・・・

でも実際運用するにあたってやっぱり自由に見た目通り編集できるってすごい強みだと思う。だってわからないからこっちに制作を依頼しているのに・・・下手にWordPressでごりごりするよりウェブサイトビルダーのほうがぜんぜん要件を満たすと思うんだよなぁ。
うまくプレゼンできるようになりたい。

ウェブサイトビルダー特有の制限はあるにしても、文書構造とかカラーセットとか、普通の制作と注意点は正直変わらない。

やはり「当たり前のことを当たり前にやる」ことがアクセシビリティには大事なんだなと思った。