2020年8月20日（木）JimdoCafe オーナーの勉強会、JimdoCafe ミーティングの3回目を開催しました。今回のテーマは「ウェブアクセシビリティ」です。
アクセシビリティという言葉を聞いたことある方もいると思いますが、アクセシビリティは、「アクセス（Access）」＋「アビリティ（Ability）」の造語で、アクセスのしやすさを意味します。この勉強会では、ウェブのアクセスしやすさとはどういうことなのか、アクセシビリティを意識したホームページとはどんなものなのか、ジンドゥーでできるウェブアクセシビリティなど事例を交えてにお伝えしています。
ウェブアクセシビリティを意識したサイトは、マシンリーダブル（機械（マシン）に認識してもらう）なサイトとなります。検索エンジンも「bot」という機械なのでマシンリーダブルにするとSEOの対策にも繋がるんです。今までSEOのためと思っていたことが、実はアクセシビリティを実現するためのことだったのかと、目から鱗の内容ですので、ぜひご覧ください！
セミナー動画［ウェブアクセシビリティ勉強会 2020］
開催日：2020年8月20日
講師：神森 勉（株式会社KDDIウェブコミュニケーションズ）
ウェブアクセシビリティ勉強会 2020 目次
[00:00] はじめに
- 講師紹介、セミナーの流れ
【04:20】アクセシビリティとは？ユーザビリティとはどこが違うの？
- アクセシビリティとユーザビリティの違い
- ウェブアクセシビリティについて
【09:50】ウェブサイトへ「アクセス」できない環境を想像できますか？
- ウェブサイトからの情報入手が制限される例
- ウェブアクセシビリティのガイドライン
- Web Content Accessibility Guidelines (WCAG) 2.0
- https://www.w3.org/TR/WCAG20/
【19:25】ウェブサイトへ「アクセス」できない状況を解決する方法
- ウェブサイトを機械に認識させるマシンリータブルにする
- ウェブサイトからの情報入手制限を解決する具体例
【28:35】ジンドゥーで可能なアクセシビリティの実現方法
- クリエイターでのアクセシビリティ確保方法
-
- 見た目の変更が自由にできるため、コントラストを意識したページ作りが 必要
- レイアウトベースのHTMLではセマンティクスな構造にすることが可能
- 見出しや段落などを自由に挿入できるため、文書構造を意識したページ作 りが必要
- 画像ファイルの代替テキストは、ページのコンテキストに合わせて設定 埋め込み動画の場合、代替手段を用意するなどの工夫が必要
- AI ビルダーでのアクセシビリティ確保方法
-
- デザイン変更から行うことができるカラーセットでコントラストを意識する
- セクションごとに挿入可能なコンテンツで見出しレベルを意識しながら制作
- 画像ファイルの代替テキストは、ページのコンテキストに合わせて設定
- 埋め込み動画の場合、代替手段を用意するなどの工夫が必要
【43:20】ジンドゥーで作られた、アクセシブルを意識したサイトの紹介
【45:30】まとめ
講師プロフィール
神森 勉 （かみもり つとむ）
株式会社KDDIウェブコミュニケーションズ 広報室 室長
商社営業マンから印刷会社のDTPオペレー ターへ転身後、1997年よりウェブ制作に携わる。マークアップエンジニア、 ディレクター、プロデューサーを経験。その間、HTML/CSSや制作ツール の書籍の執筆やセミナーなどでテクニカル講師も行う。
KDDIウェブコミュニケーションズへ転職後、インハウスデザイン室の責任者を経て、広報室の室長を務める。また、エバンジェリストとして各地でサービスの紹介や活用方法を伝えている。
JimdoCafe オンラインミーティングとは？
JimdoCafeのオーナーさんとジンドゥーメンバーが月に1回集まって勉強会を開催しています。JimdoCafeはジンドゥーのことを相談したりユーザー同士が交流できるところです。
オンラインセミナー勉強会に参加をしたJimdoCafe
JimdoCafe 朝来、JimdoCafe 池袋
JimdoCafe 茨木、JimdoCafe 表参道、JimdoCafe 喜多方、JimdoCafe 札幌、JimdoCafe 札幌大通、JimdoCafe 三条、加茂、JimdoCafe 仙台、JimdoCafe 天神南、JimdoCafe 福岡、JimdoCafe 富士見、JimdoCafe 武蔵、JimdoCafe 横浜、JimdoExpert 山本さん
コメントをお書きください